Bootstrap入门（十八）组件12：徽章与巨幕

Bootstrap入门（十八）组件12：徽章与巨幕

1.徽章

2.巨幕

 

1.徽章

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

首先，引入CSS文件

<link href="bootstrap.min.css" rel="stylesheet">

我们需要创建一个容器div，让它承载这个徽章

（<a><button>都可以使用）

　　　　<div class="container">
            <a href="#">短信消息<span class="badge">30</span></a>
            <button class="btn btn-success" type="button">message<span class="badge">30</span></button>
        </div>

效果

当然，也会留意到，<button>内其中一个class属性为btn-success，这是指定样式的

自然，如果我们使用其他样式，会有不同的效果。

但是，徽章的效果在IE 8中可能不会被支持，要注意使用。

 

那么，他能不能放在列表当中呢？

答案是可以。

我们来新增代码：

（假设第一个选中）

　　　　 <ul class="nav nav-pills">
            <li role='presentation' class="active"><a href="#">home<span class="badge">30</span></a></li>
            <li role='presentation'><a href="#">123<span class="badge">30</span></a></li>
            <li role='presentation'><a href="#">234<span class="badge">30</span></a></li>
        </ul>

效果:

2.巨幕

这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。

这是我们在网站中常见的，能够突出文字内容，吸引眼球。

把他放在刚刚代码的上面，在容器div放在一个class为jumbotron的div当中

       <div class='jumbotron'>
            <div class='container'>  
                <h1>hello world</h1>
                <p>1234567890</p>
                <p><a class='btn btn-info btn-lg' href="#" role='button'>hello world</a></p>
            </div>
        </div>

整体效果