Well

Well是一种会引起内容凹陷显示或插图效果的容器<div>。为了创建Well,只需要简单地把内容放在带有class .well的<div>中即可。

<div class="well">您好,我在 Well 中!</div>

尺寸大小

可以使用可选类well-lg或well-sm来改变Well的尺寸大小。这两个类是与.well类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well会显示得更大或者更小。

<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>

面板(Panels)

面板组件用于把DOM组件插入到一个盒子中。创建一个基本的面板,只需要向<div>元素添加class .panel和class .panel-default即可。

<div class="panel panel-default">
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

面板标题

两种方式来添加面板标题:
– 使用.panel-heading class可以很简单地向面板添加标题容器。
– 使用带有.panel-title class的<h1>-<h6>来添加预定义样式的标题。

<div class="panel panel-default">
    <div class="panel-heading">
        不带 title 的面板标题
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

面板脚注

可以在面板中添加脚注,只需要把按钮或者副文本放在带有class .panel-footer的<div>中即可。

<div class="panel panel-default">
    <div class="panel-body">
        这是一个基本的面板
    </div>
    <div class="panel-footer">面板脚注</div>
</div>

面板脚注不会从带语境色彩的面板中继承颜色和边框,因为它不是前景中的内容。

带语境色彩的面板

使用语境状态类panel-primary、panel-success、panel-info、panel-warning、panel-danger,来设置带有语境色彩的面板。

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

带表格的面板

为了在面板中创建一个无边框的表格,可以在面板中使用class .table。假设有个<div>包含.panel-body,可以向表格的顶部添加额外的边框用来分隔。如果没有包含.panel-body的<div>,则组件会无中断地从面板头部移动到表格。

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板标题</h3>
    </div>
    <div class="panel-body">
        这是一个基本的面板
    </div>
    <table class="table">
        <th>产品</th><th>价格 </th>
        <tr><td>产品 A</td><td>200</td></tr>
        <tr><td>产品 B</td><td>400</td></tr>
    </table>
</div>
<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <table class="table">
        <th>产品</th><th>价格 </th>
        <tr><td>产品 A</td><td>200</td></tr>
        <tr><td>产品 B</td><td>400</td></tr>
    </table>
</div>

带列表组的面板

可以在面板中包含列表组,通过在<div>元素中添加.panel和.panel-default类来创建面板,并在面板中添加列表组。

<div class="panel panel-default">
    <div class="panel-heading">面板标题</div>
    <div class="panel-body">
        <p>这是一个基本的面板内容。这是一个基本的面板内容。
            这是一个基本的面板内容。这是一个基本的面板内容。
            这是一个基本的面板内容。这是一个基本的面板内容。
            这是一个基本的面板内容。这是一个基本的面板内容。
        </p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">免费域名注册</li>
        <li class="list-group-item">免费 Window 空间托管</li>
        <li class="list-group-item">图像的数量</li>
        <li class="list-group-item">24*7 支持</li>
        <li class="list-group-item">每年更新成本</li>
    </ul>
</div>

列表组

列表组件用于以列表形式呈现复杂和自定义的内容。创建一个基本的列表的步骤:

  • 向元素<ul>添加class .list-group。
  • 向<li>添加class .list-group-item。
<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
    <li class="list-group-item">图像的数量</li>
    <li class="list-group-item">24*7 支持</li>
    <li class="list-group-item">每年更新成本</li>
</ul>

向列表组添加徽章

可向任意的列表项添加徽章组件,它会自动定位到右边,只需要在<li>元素中添加<span class=”badge”>即可。

<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
    <li class="list-group-item">图像的数量</li>
    <li class="list-group-item">
        <span class="badge">新</span>
        24*7 支持
    </li>
    <li class="list-group-item">每年更新成本</li>
    <li class="list-group-item">
        <span class="badge">新</span>
        折扣优惠
    </li>
</ul>

向列表组添加链接

通过使用锚标签代替列表项,我们可以向列表组添加链接。需要使用<div>代替<ul>元素。

<a href="#" class="list-group-item active">
    免费域名注册
</a>
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>

向列表组添加自定义内容

可向上面已添加链接的列表组添加任意的HTML内容。

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">
            入门网站包
        </h4>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">
            免费域名注册
        </h4>
        <p class="list-group-item-text">
            您将通过网页进行免费域名注册。
        </p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">
            24*7 支持
        </h4>
        <p class="list-group-item-text">
            我们提供 24*7 支持。
        </p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">
            商务网站包
        </h4>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">
            免费域名注册
        </h4>
        <p class="list-group-item-text">
            您将通过网页进行免费域名注册。
        </p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">24*7 支持</h4>
        <p class="list-group-item-text">我们提供 24*7 支持。</p>
    </a>
</div>

多媒体对象(Media Object)

Bootstrap中的多媒体对象(Media Object)的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐,媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用class来实现的。可以在HTML标签中添加以下两种形式来设置媒体对象:

  • .media:该class允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。
  • .media-list:如果需要一个列表,各项内容是无序列表的一部分,可以使用该class。可用于评论列表与文章列表。
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
             alt="媒体对象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒体标题</h4>
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
    </div>
</div>
<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
             alt="媒体对象">
    </a>
    <div class="media-body">
        <h4 class="media-heading">媒体标题</h4>
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        这是一些示例文本。这是一些示例文本。
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                     alt="媒体对象">
            </a>
            <div class="media-body">
                <h4 class="media-heading">媒体标题</h4>
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
            </div>
        </div>
    </div>
</div>
<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                 alt="通用的占位符图像">
        </a>
        <div class="media-body">
            <h4 class="media-heading">媒体标题</h4>
            <p>这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。
                这是一些示例文本。这是一些示例文本。</p>
            <!-- 嵌套的媒体对象 -->
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                         alt="通用的占位符图像">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">嵌套的媒体标题</h4>
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    <!-- 嵌套的媒体对象 -->
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                                 alt="通用的占位符图像">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">嵌套的媒体标题</h4>
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                        </div>
                    </div>
                </div>
            </div>
            <!-- 嵌套的媒体对象 -->
            <div class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                         alt="通用的占位符图像">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">嵌套的媒体标题</h4>
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                    这是一些示例文本。这是一些示例文本。
                </div>
            </div>
        </div>
    </li>
    <li class="media">
        <a class="pull-right" href="#">
            <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
                 alt="通用的占位符图像">
        </a>
        <div class="media-body">
            <h4 class="media-heading">媒体标题</h4>
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
        </div>
    </li>
</ul>

进度条

Bootstap进度条使用CSS3过渡和动画来获得该效果。Internet Explorer 9及之前的版本和旧版的Firefox不支持该特性,Opera 12不支持动画。

默认的进度条

创建一个基本的进度条的步骤如下:
– 添加一个带有class .progress 的<div>。
– 接着,在上面的<div>内,添加一个带有class .progress-bar的空的<div>。
– 添加一个带有百分比表示的宽度的style属性,例如style=”60%”;表示进度条的60%的位置。

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

交替的进度条

创建不同样式的进度条的步骤:

  • 添加一个带有class .progress的<div>。
  • 接着,在上面的<div>内,添加一个带有class progress-bar和class progress-bar-的空的<div>,其中,可以是success-info、warning、danger。
  • 添加一个带有百分比表示的宽度的style属性,例如style=”60%”;表示进度条在60%的位置。
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成(成功)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成(信息)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成(警告)</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 10%;">
        <span class="sr-only">10% 完成(危险)</span>
    </div>
</div>

条纹的进度条

创建一个条纹的进度条的步骤如下:

  • 添加一个带有class .progress和.progress-striped的<div>。
  • 接着,在上面的<div>内,添加一个带有class .progress-bar和class progress-bar-的空的<div>。其中,可以是success、info、warning、danger。
  • 添加一个带有百分比表示的宽度的style属性,例如style=”60%”;表示进度条在60%的位置。
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 90%;">
        <span class="sr-only">90% 完成(成功)</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成(信息)</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成(警告)</span>
    </div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 10%;">
        <span class="sr-only">10% 完成(危险)</span>
    </div>
</div>

动画的进度条

创建一个动画的进度条的步骤:
– 添加一个带有class .progress和.progress-striped 的<div>,同时添加class .active。
– 接着,在上面的<div>内,添加一个带有class .progress-bar的空的<div>。
– 添加一个带有百分比表示的宽度style属性,例如style=”60%”;表示进度条在60%的位置。
这将会使条纹具有从右向左的运动感。

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

堆叠的进度条

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成(信息)</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成(警告)</span>
    </div>
</div>

警告(Alerts)

警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用警告(Alerts)jQuery插件。

通过创建一个<div>,并向其添加一个.alert class 和四个上下文class(即.alert-success、.alert-info、alert-warning、.alert-danger)之一,来添加一个基本的警告框。

<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>

可取消的警告(Dismissal Alerts)

创建一个可取消的警告(Dismissal Alert)步骤如下:

  • 通过创建一个<div>,并向其添加一个.alert class 和四个上下文class (即.alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。
  • 同时向上面的<div> class添加可选的.alert-dismissable。
  • 添加一个关闭按钮。
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                ×
    </button>
            成功!很好地完成了提交。
</div>

<div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                ×
    </button>
            信息!请注意这个信息。
</div>

<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                ×
    </button>
            警告!请不要提交。
</div>

<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                ×
    </button>
            错误!请进行一些更改。
</div>

警告(Alerts)中的链接

在警告(Alerts)中创建链接的步骤如下:
– 通过创建一个<div>,并向其添加一个.alert class和四个上下文class(即.alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。
– 使用.alert-link实体类来快速提供带有匹配颜色的链接。

<div class="alert alert-success">
    <a href="#" class="alert-link">成功!很好地完成了提交。</a>
</div>
<div class="alert alert-info">
    <a href="#" class="alert-link">信息!请注意这个信息。</a>
</div>
<div class="alert alert-warning">
    <a href="#" class="alert-link">警告!请不要提交。</a>
</div>
<div class="alert alert-danger">
    <a href="#" class="alert-link">错误!请进行一些更改。</a>
</div>

缩略图

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap通过缩略图为此提供了一种简便的方式。创建缩略图的步骤如下:

  • 在图像周围添加带有class .thumbnail的<a>标签。
  • 这会添加四个像素的内边距(padding)和一个灰色的边距。
  • 当鼠标悬停在图像上时,会动画显示出图像的轮廓。
<div class="row">
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
    <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="/kittens.jpg"
                 alt="通用的占位符缩略图">
        </a>
    </div>
</div>

添加自定义的内容

可以向缩略图添加各种HTML内容,比如标题、段落或按钮。

  • 把带有class .thumbnail的<a>标签改为<div>
  • 在该<div>内,可以添加任何东西。由于这是一个<div>,可以使用默认的基于span的命名规则来调整大小。
  • 如果想要给多个图像进行分组,请把它men放置在一个无序列表中,且每个列表项向左浮动。
<div class="row">
    <div class="col-sm-6 col-md-3">
         <div class="thumbnail">
            <img src="/kittens.jpg" 
             alt="通用的占位符缩略图">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按钮
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按钮
                    </a>
                </p>
            </div>
         </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/kittens.jpg" 
            alt="通用的占位符缩略图">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按钮
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按钮
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/kittens.jpg" 
            alt="通用的占位符缩略图">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按钮
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按钮
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/kittens.jpg" 
            alt="通用的占位符缩略图">
            <div class="caption">
                <h3>缩略图标签</h3>
                <p>一些示例文本。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按钮
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按钮
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

页面标题(Page Header)

页面标题(Page Header)是个不错的功能,它会在网页标题四周添加适当的间距。
当一个网页中有多个标题且每个标题之间需要添加一定的间距时,页面标题这个功能就显得特别有用。如需使用页面标题(Page Header),请把标题放置在带有class .page-header的<div>中。

<div class="page-header">
    <h1>页面标题实例
        <small>子标题</small>
    </h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>

超大屏幕(Jumbotron)

Bootstrap支持的另一个特性,超大屏幕(Jumbotron)。顾名思义该组件可以增加标题的大小,并为登录页面内容添加更多的外边距(margin)。使用超大屏幕(Jumbotron)的步骤如下:

  • 创建一个带有class .jumbotron的容器<div>
  • 除了更大的<h1>,字体粗细font-weight被减为200.
<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>

为了获得占用全部宽度且不带圆角的超大屏幕,请在所有的.container class外使用.jumbotron class。

<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>

徽章(Badges)

徽章与标签相似,主要的区别在于徽章的边角更加圆滑。
徽章(Badges)主要用于突出显示新的或未读的项。如需使用徽章,只需要把<span class=”badge”>添加到链接、Bootstrap导航等这些元素上即可。

展示未读邮件:

<a href="#">Mailbox <span class="badge">50</span></a>

当没有新的或未读的项时,通过CSS的:empty选择器,徽章会折叠起来,表示里面没有内容。

展示未读消息:

<div class="container">
    <h2>徽章</h2>
    <p>.badge 类指定未读消息的数量:</p>
    <p><a href="#">收件箱 <span class="badge">21</span></a></p>
</div>

激活导航状态

可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用<span class=”badge”>来激活链接。

<h4>胶囊式导航中的激活状态</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>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 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>

标签

标签可用于计数、提示或页面上其他的标记显示。使用class .label来显示标签。

<h1>Example Heading <span class="label label-default">Label</span></h1>
<h2>Example Heading <span class="label label-default">Label</span></h2>
<h3>Example Heading <span class="label label-default">Label</span></h3>
<h4>Example Heading <span class="label label-default">Label</span></h4>

可以使用修饰的class label-default、lable-primary、lable-success、lable-info、lable-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>

分页

分页(Pagination),是一种无序列表,Bootstrap像处理其他界面元素一样处理分页。

分页(Pagination)

Class 描述
.pagination 添加该class 来在页面上显示分页
.disabled,
.active
可以定义链接,通过使用.disabled来定义不可点击的链接,通过使用.active来指示当前的页面
.pagination-lg,
。pagination-sm
使用这些class来获取不同大小的项。

默认的分页

<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
</ul>

分页的大小

<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
</ul><br>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
</ul><br>
<ul class="pagination pagination-sm">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
</ul>

翻页(Pager)

想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一个样,翻页也是无序列表。默认情况下,链接是居中显示。

Class 描述
.pager 添加该class来获得翻页链接
.previous,
.next
使用class .previous把链接向左对齐,使用.next把链接向右对齐
disabled 添加该class来获得一个颜色变淡的外观。

默认的翻页

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

对齐的链接

<ul class="pager">
    <li class="previous"><a href="#">← Older</a></li>
    <li class="next"><a href="#">Newer →</a></li>
</ul>

翻页的状态

<ul class="pager">
    <li class="previous disabled"><a href="#">← Older</a></li>
    <li class="next"><a href="#">Newer →</a></li>
</ul>

面包屑导航(Breadcrumbs)

面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式。
以博客为例,面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
Bootstrap中的面包屑(Breadcrumbs)是一个简单的带有.breadcrumb class的无效列表。分隔符会通过CSS(bootstrap.min.css)中下面所示的class 自动被添加:

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ol>

导航栏

导航栏是一个很好的功能,是Bootstrap网站的一个突出特点。

导航栏在应用或网站中作为导航页头的响应式基础组件。

导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。

在Bootstrap导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

默认的导航栏

创建一个默认的导航栏的步骤:

  • 向<nav>标签添加class .navbar、.navbar-default。
  • 向上面的元素添加role=”navigation”,有助于增加可访问性。
  • 向<div>元素添加一个标题class .navbar-header,内部包含了带有class navbar-brand的<a>元素。这会让文本看起来更大一号。
  • 为了向导航栏添加链接,只需要简单地添加带有class .nav、.navbar-nav的无序列表即可。
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

响应式的导航栏

为了个导航栏添加响应式特性,要折叠的内容必须包裹在带有class .collapse、.navbar-collapse的<div>中。
折叠器来的导航栏实际上是一个带有class .navbar-toggle及两个data-元素的按钮。
第一个是data-toggle,用于告诉JavaScript需要对按钮做什么。
第二个是data-target,指示要切换到哪一个元素。
三个带有class .icon-bar的<span>创建所谓的汉堡按钮。这些会切换为.nav-collapse <div>中的元素。
为了实现以上这些功能,必须包含Bootstrap折叠(Collapse)插件。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

导航栏中的表单

导航栏中的表单是使用.navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项来决定导航栏中的内容放置位置。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
    </div>
    </div>
</nav>

导航栏中的按钮

使用class .navbar-btn向不在<button>中的<button>元素添加按钮,按钮在导航栏上垂直居中。.navbar-btn可被使用在<a>和<input>元素上。

不要在.navbar-nav内<a>元素上使用.navbar-btn,因为它不是标准的button class。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">提交按钮</button>
        </form>
        <button type="button" class="btn btn-default navbar-btn">
            导航栏按钮
        </button>
    </div>
    </div>
</nav>

导航栏中的文本

需要在导航中包含文本字符串,请使用class .navbar-text。这通常与<p>标签一起使用,确保适当的前导和颜色。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <p class="navbar-text">Runoob 用户登录</p>
    </div>
    </div>
</nav>

结合图标的导航链接

想在常规的导航栏导航组件内使用图标,那么请使用class glyphicon glyphicon-*来设置图标。

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#">十九岁</a> 
        </div> 
        <ul class="nav navbar-nav navbar-right"> 
            <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> 
            <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li> 
        </ul> 
    </div> 
</nav>

组件对齐方式

可以使用实用工具class .navbar-left或.navbar-right向左或向右对齐导航栏中的导航链接、表单、按钮或者文本这些组件。这两个class都会在指定的方向上添加CSS浮动。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <!--向左对齐-->
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <button type="submit" class="btn btn-default">
                向左对齐-提交按钮
            </button>
        </form>
        <p class="navbar-text navbar-left">向左对齐-文本</p>
        <!--向右对齐-->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <button type="submit" class="btn btn-default">
                向右对齐-提交按钮
            </button>
        </form>
        <p class="navbar-text navbar-right">向右对齐-文本</p>
    </div>
    </div>
</nav>

固定到顶部

Bootstrap导航栏可以动态定位。默认情况下,它是基于在HTML中放置的位置定位的。通过一些帮助类,可以把它放置在页面的顶部或者底部,或者可以让它成为随着页面一起滚动的静态导航栏。

想要让导航栏固定在页面顶部,请向.navbar class添加class .navbar-fixed-top。

为了防止导航栏与页面主体中的其他内容的顶部想交错,请向<body>标签添加至少50像素的内边距(padding),内边距的值可以根据需要进行设置。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

固定到底部

想要让导航栏固定在页面底部,请向.navbar class 添加 class .navbar-fixed-bottom。

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

静态的顶部

如需创建能随着页面一起滚动的导航栏,请添加.navbar-static-top class。该class不要求向<body>添加内边距(padding)。

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">十九岁</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

反色的导航栏

为了创建一个带有黑色背景白色文本的反色的导航栏,只需要简单地向.navbar class添加.navbar-inverse class即可。

为了防止导航栏与页面主体中的其他内容的顶部想交错,请向<body>标签添加至少50像素的内边距(padding),内边距的值可以根据需要进行设置。

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

导航元素

Bootstrap提供的用于定义导航元素的一些选项。它们使用相同的标记和基类.nav。
Bootstrap也提供了一个用于共享标记和状态的帮助类。改变修饰的class,可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单:
– 以一个带有class .nav 的无序列表开始。
– 添加class .nav-tabs。

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

胶囊式的导航菜单

基本的胶囊式导航菜单

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

垂直的胶囊式导航菜单

<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

两端对齐的导航

可以在屏幕宽度大于768px时,通过在分别使用.nav、.nav-tabs或.nav、.nav-pills的同时使用class .nav-justified,让标签或胶囊式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。

<p>两端对齐的导航元素</p>
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

禁用链接

对每个.nav class,如果添加了.disabled class,则会创建一个灰色的链接,同时禁用了该链接的:hover状态。

该class只会改变<a>的外观,不会改变它的功能。使用,作用使用自定义的JavaScript来禁用链接。

<p>导航元素中的禁用链接</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li class="disabled"><a href="#">iOS(禁用链接)</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li  class="disabled"><a href="#">VB.Net(禁用链接)</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下,列表项的锚与一些数据属性协同合作来触发带有.dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤:

  • 以一个带有class .nav的无序列表开始。
  • 添加class .nav-tabs。
  • 添加带有.dropdown-menu class的无序列表。
<p>带有下拉菜单的标签</p>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

带有下拉菜单的胶囊

<p>带有下拉菜单的胶囊</p>
  <ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        Java <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Swing</a></li>
        <li><a href="#">jMeter</a></li>
        <li><a href="#">EJB</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">PHP</a></li>
  </ul>

更多导航元素组件

  • .tab-content: 与.tab-pane和data-toggle=”tab”(data-taggle=”pill”)一同使用,设置标签页对应的内容随标签切换而改变。
  • .tab-pane
<div class="container">
  <h2>动态标签</h2>
  <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
    <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
    <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
    <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>首页</h3>
      <p>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>菜单 1</h3>
      <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2</h3>
      <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>菜单 3</h3>
      <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
    </div>
  </div>
</div>

输入框组

输入框组扩展自表单控件。
使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

通过向输入域添加前缀和后缀的内容,可以向用户输入添加公共的元素。
例如,可以添加美元符号,或者在Twitter用户名前添加@,或者应用程序接口所需要的其他公共的元素。

向.form-control添加前缀或后缀元素的步骤如下:

  • 把前缀或后缀元素放在一个带有class .input-group的<div>中。
  • 接着,在相同的<div>内,在class为.input-group-addon的<span>内放置额外的内容。
  • 把该<span>放置在<input>元素的前面或者后面。

为了保持跨浏览器的兼容性,请避免使用<select>元素,因为它们在WebKit浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的class,输入框组是一个孤立的组件。

基本的输入框组

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>

输入框组的大小

通过向.input-group添加相对表单大小的class(比如.input-group-lg、.input-group-sm)来改变输入框组的大小,输入框中的内容会自动调整大小。

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
        <br>
        <div class="input-group input-group-sm">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" placeholder="Twitterhandle">
        </div>
    </form>
</div>

复选框和单选插件

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="checkbox"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-addon">
                        <input type="radio"></span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>

按钮插件

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>

带有下拉菜单的按钮

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉菜单
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">功能</a></li>
                            <li><a href="#">另一个功能</a></li>
                            <li><a href="#">其他</a></li>
                            <li class="divider"></li>
                            <li>a href="#">分离的链接</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown">下拉菜单
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">功能</a></li>
                            <li><a href="#">另一个功能</a></li>
                            <li><a href="#">其他</a></li>
                            <li class="divider"></li>
                            <li>a href="#">分离的链接</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>

分割的下拉菜单按钮

<div style="padding: 100px 100px 10px;">
    <form class="bs-example bs-example-form" role="form">
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">功能</a></li>
                            <li><a href="#">另一个功能</a></li>
                            <li><a href="#">其他</a></li>
                            <li class="divider"></li>
                            <li>a href="#">分离的链接</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
            <br>
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default" tabindex="-1">下拉菜单</button>
                        <button type="button" class="btn btn-default 
                        dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                            <span class="caret"></span>
                            <span class="sr-only">切换下拉菜单</span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li><a href="#">功能</a></li>
                            <li><a href="#">另一个功能</a></li>
                            <li><a href="#">其他</a></li>
                            <li class="divider"></li>
                            <li>a href="#">分离的链接</a></li>
                        </ul>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form>
</div>

按钮下拉菜单

如需向按钮添加下拉菜单,只需要简单地在一个.btn-group中放置按钮和下拉菜单即可。

也可以使用<span class=”caret”></span>来指示按钮作为下拉菜单。

<div class="btn-group">
    <button type="button"
        class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu"
        role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">另一个功能</a></li>
        <li><a href="#">其他</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button"
        class="btn btn-primary dropdown-toggle"
        data-toggle="dropdown">
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu"
        role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">另一个功能</a></li>
        <li><a href="#">其他</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</div>

分割的按钮下拉菜单

分割的按钮下拉菜单使用与下拉菜按钮大致相同的样式,但是对下拉菜单添加了原始的功能。

分割按钮的左边是原始的功能,右边是显示下拉菜单的切换。

<div class="btn-group">
    <button type="button" class="btn btn-default">默认</button>

    <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">切换下拉菜单</span>
    </button>

    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">另一个功能</a></li>
        <li><a href="#">其他</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-primary">原始</button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">另一个功能</a></li>
        <li><a href="#">其他</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</div>

按钮下拉菜单的大小

<div class="btn-group">
    <button type="button" 
            class="btn btn-default dropdown-toggle btn-lg" 
            data-toggle="dropdown">默认
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" 
            class="btn btn-primary dropdown-toggle btn-sm" 
            data-toggle="dropdown">原始
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" 
            class="btn btn-success dropdown-toggle btn-xs" 
            data-toggle="dropdown">成功
        <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul>
</div>

按钮上拉菜单

<div class="row" style="margin-left:50px; margin-top:200px">
    <div class="btn-group dropup">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">功能</a>
            </li>
            <li>
                <a href="#">另一个功能</a>
            </li>
            <li>
                <a href="#">其他</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">分离的链接</a>
            </li>
        </ul>
    </div>
    <div class="btn-group dropup">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">功能</a>
            </li>
            <li>
                <a href="#">另一个功能</a>
            </li>
            <li>
                <a href="#">其他</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">分离的链接</a>
            </li>
        </ul>
    </div>
</div>

按钮组

按钮组允许多个按钮被堆叠在同一行上。

当你想要把按钮对齐在一起时,这就显得非常有用。

可以通过Bootstrap按钮(Button)插件添加可选的JavaScript单选框和复选框样式行为。

Class 描述
.btn-group 该class用于形成基本的按钮组。在.btn-group中放置一系列带有class .btn的按钮。
.btn-toolbar 该class有助于把几组<div class=”btn-group”>结合到一个<div class=”btn-toolbar”>中,一般获得更复杂的组件。
.btn-group-lg,
.btn-group-sm,
.btn-group-xs
这些class可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整
.btn-group-vertical 该class让一组按钮垂直堆叠显示,而不是水平堆叠显示。

基本的按钮组

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

按钮工具栏

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
 </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>

按钮的大小

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>
    <div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">按钮 4</button>
    <button type="button" class="btn btn-default">按钮 5</button>
    <button type="button" class="btn btn-default">按钮 6</button>
</div>
    <div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
</div>

嵌套

在一个.btn-group内嵌套另一个.btn-group,当想让下拉菜单与一系列按钮组合使用时,就会用到这个。

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下列
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

垂直的按钮组

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
    </ul>
    </div>
</div>

下拉菜单(Dropdowns)

下拉菜单是可切换的,是以列表格式显示链接的上下菜单。

这可以通过与下拉菜单(Dropdown)JavaScript插件的互动来实现。

如需使用下拉菜单,只需要在class .dropdown内加上下拉菜单即可。

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

选项

对齐

通过向.dropdown-menu添加class .pull-right来向右对齐下拉菜单。

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

标题

可以使用class dropdown-header向下拉菜单的标签区域添加标题。

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">下拉菜单标题</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

更多实例

描述
.dropdown 指定下拉菜单,下拉菜单都包裹在.dropdown里
.dropdown-menu 创建下拉菜单
.dropdown-menu-right 下拉菜单右对齐
.dropdown-header 下拉菜单中添加标题
.dropup 指定向上弹出的下拉菜单
.disabled 下拉菜单中的禁用项
.divider 下拉菜单中的分割线

字体图标(Glyphicons)

Bootstrap捆绑了200多种字体格式的字形。

什么是字体图标?

字体图标是在Web项目中使用的图标字体。虽然,Glyphicons Halflings需要商业许可,但是可以通过基于项目的Bootstrap来免费使用这些图标。

获取字体图标

在Bootstrap 3.x版本中,在fonts文件夹内可以找到字体图标,它包含了下列文件:

  • glyphicons-halfling-regular.eot
  • glyphicons-halfling-regular.svg
  • glyphicons-halfling-regular.ttf
  • glyphicons-halfling-regular.woff

相关的CSS规则卸载dist文件夹内的CSS文件夹内的bootstrap.css和bootstrap-min.css文件里。

CSS规则解释

下面的CSS规则构成glyphicon class。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

所以font-face规则实际上是在找到glyphicons地方声明font-family和位置。

.glyphicon class声明一个从顶部偏移1px的相对位置,呈现为inline-block,声明字体,规定font-style和font-weight为normal,设置行高为1。

除此之外,使用-webkit-font-smoothing:antialiased和-moz-osx-font-smoothing:grayscale;获得跨浏览器的一致性。

然后,在这里

.glyphicon:empty {
  width: 1em;
}

是空的glyphicon。

这里有200个class,每个class针对一个图标。这些class的常见格式如下:

.glyphicon-keyword:before {
  content: "hexvalue";
}

比如,使用的user图标,它的class如下:

.glyphicon-user:before {
  content: "\e008";
}

用法

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

<span class="glyphicon glyphicon-search"></span>
<p>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button>
</p>
<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span> User
</button>

带有导航栏的字体图标

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
                        <span class="glyphicon glyphicon-home">Home</span></a>
                </li>
                <li>
                    <a href="#shop">
                        <span class="glyphicon glyphicon-shopping-cart">Shop</span></a>
                </li>
                <li>
                    <a href="#support">
                        <span class="glyphicon glyphicon-headphones">Support</span></a>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
</div>
<!-- jQuery (Bootstrap 插件需要引入) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

定制字体图标

已经看到如何使用字体图标,接下来我们看看如何定制字体图标。
通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字体尺寸

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制文本阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>