2016年6月1日下午（传智Bootstrap笔记（Bootstrap标签、徽章、超大屏幕））

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>