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>
整体效果