Bootstrap 标签
本章将讲解 Bootstrap 标签。标签可用于计数、提示或页面上其他的标记显示。使用.label 来显示标签，如下面的实例所示：
<h1>Example Heading <span class="label label-default">Label</span></h1> <h2>Example Heading <span class="label label-danger">Label</span></h2> <h3>Example Heading <span class="label label-warning">Label</span></h3> <h4>Example Heading <span class="label label-info">Label</span></h4>
可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观，如下面的实例所示：
<span class="label label-default">默认标签</span> <span class="label label-primary">主要标签</span> <span class="label label-success">成功标签</span> <span class="label label-info">信息标签</span> <span class="label label-warning">警告标签</span> <span class="label label-danger">危险标签</span>
Bootstrap 徽章（Badges）
本章将讲解 Bootstrap 徽章（Badges）。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。下面的实例演示了这点：
激活导航状态
您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接，如下面的实例所示：
<body style="padding:50px; background-color:#ccc;height:1000px" > <!--标签--> <span class="label label-warning">警告标签</span> <span class="label label-danger">危险标签</span> <!--徽章--> <a href="#">Mailbox <span class="badge">50</span></a> <!--激活导航状态--> <h4 class="page-header">胶囊式导航中的激活状态</h4> <ul class="nav nav-pills"> <li class="active"><a href="#">首页 <span class="badge">42</span></a></li> <li><a href="#">简介</a></li> <li><a href="#">消息 <span class="badge">3</span></a></li> </ul> <br> <h4 class="page-header">列表导航中的激活状态</h4> <ul class="nav nav-pills nav-stacked" style="max- 260px;"> <li class="active"> <a href="#"> <span class="badge pull-right">42</span> 首页 </a> </li> <li><a href="#">简介</a></li> <li> <a href="#"> <span class="badge pull-right">3</span> 消息 </a> </li> </ul> </body>
Bootstrap 超大屏幕（Jumbotron）
本章将讲解 Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
- 创建一个带有.jumbotron. 的容器 <div>。
- 除了更大的 <h1>，字体粗细 font-weight 被减为 200px。
下面的实例演示了这点：
为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class，如下面的实例所示：
<body style="padding:50px; background-color:#ccc;height:1000px" > <div class="container"> <div class="jumbotron"> <h1>欢迎登陆页面！</h1> <p>这是一个超大屏幕（Jumbotron）的实例。</p> <p><a class="btn btn-primary btn-lg" role="button"> 学习更多</a> </p> </div> </div> <div class="jumbotron"> <div class="container"> <h1>欢迎登陆页面！</h1> <p>这是一个超大屏幕（Jumbotron）的实例。</p> <p><a class="btn btn-primary btn-lg" role="button"> 学习更多</a> </p> </div> </div> </body>
