字体图标组件

字体图标的使用

Bootstrap 框架提供了 250 多个来自 Glyphicon Halfings 的商业付费字体图标。

字体图标组件的基本用法：

<span class="glyphicon glyphicon-*" style="font-size: 64px;"></span>
<i class="glyphicon glyphicon-*" style="font-size: 64px;"></i>

预定义样式说明：

• 使用时需要确保导入 Bootstrap 提供的字体图标文件。
• .glyphicon 预定义类是字体图标组件的公共预定义类。
• 字体图标的预定义类以 .glyphicon- 开头。
• 图标类只能应用在不包含任何文本的内联元素上，常使用 span 元素和 i 元素来加载字体图标。

示例：字体图标

入口页面（index.html）：

<span class="glyphicon glyphicon-music" style="font-size: 64px;"></span>
<i class="glyphicon glyphicon-heart" style="font-size: 64px;"></i>

示例效果：

下拉菜单组件

基本下拉菜单的使用

使用基本下拉菜单，可以向任何组件（如导航栏等）添加下拉菜单。

基本下拉菜单的基本用法：

<div class="dropdown open">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        请选择 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="active"><a href="#">菜单项</a></li>
        ……
        <li class="divider"></li>
        ……
    </ul>
</div>

预定义样式说明：

• .dropdown 预定义类用于定义下拉菜单，让菜单向下弹出。
• .dropup 预定义类，可以让菜单向上弹出。
• .open 预定义类用于控制基本下拉菜单的收缩展开。
• .dropdown-toggle 预定义类用于设置下拉菜单触发器。
• data-toggle 属性用于为按钮添加下拉菜单的特效。
• .caret 预定义类用于设置向下小三角。
• .dropdown-menu 预定义类用于设置下拉菜单的菜单列表。
• .active 预定义类默认选中下拉菜单项。
• .divider 预定义类用于设置菜单项的分割线。

示例：基本下拉菜单

入口页面（index.html）：

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        请选择商品 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="active"><a href="#">咖啡</a></li>
        <li><a href="#">雪碧</a></li>
        <li><a href="#">可乐</a></li>
        <li class="divider"></li>
        <li><a href="#">苹果</a></li>
        <li><a href="#">西瓜</a></li>
        <li><a href="#">橘子</a></li>
    </ul>
</div>

示例效果：

分裂式按钮下拉菜单的使用

分裂式按钮下拉菜单的好处是可以实现按钮和下拉菜单分离。

分裂式按钮下拉菜单的基本用法：

<div class="btn-group">
    <button type="button" class="btn btn-success">按钮</button>
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">菜单项</a></li>
    ...
    </ul>
</div>

预定义样式说明：

• .btn-group 预定义类用于定义多个按钮的按钮组。
• 为下拉菜单触发器按钮设置基本下拉菜单的相关预定义类和属性。

示例：分裂式按钮下拉菜单

入口页面（index.html）：

<div class="btn-group">
    <button type="button" class="btn btn-success">个人中心</button>
    <button type="button" class="btn btn-success 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><a href="#">退出</a></li>
    </ul>
</div>

示例效果：

输入框组组件

输入框组的使用

输入框组件可以在文本输入框前面、后面或是两边加上文字或按钮，实现对表单控件的扩展。

输入框组的基本用法：

<div class="input-group">
    <span class="input-group-addon">文本</span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button class="btn btn-default">按钮</button>
    </span>
</div>

预定义样式说明：

• .input-group 预定义类用于定义输入框组。
• 在 .input-group 内添加 .input-group-addon，就可以在 .form-control 前面或后面添加额外的文本。
• 在 .input-group 内添加 .input-group-btn，就可以在 .form-control 前面或后面添加额外的按钮。

示例：输入框组

入口页面（index.html）：

<div class="input-group">
    <span class="input-group-addon">在线搜索</span>
    <input type="text" class="form-control" placeholder="请输入要搜索的内容">
    <span class="input-group-btn">
        <button class="btn btn-default">搜索一下</button>
    </span>
</div>

示例效果：

导航/标签页组件

选项卡导航的使用

使用选项卡导航组件，可以在页面中创建选项卡。

选项卡导航的基本用法：

<ul class="nav nav-tabs">
    <li class="active"><a href="#">导航菜单</a></li>
    ...
</ul>

预定义样式说明：

• .nav 预定义类是导航组件的公共预定义类。
• .nav-tabs 预定义类用于定义选项卡导航。
• .active 预定义类用于默认选中选项卡。

示例：选项卡导航

入口页面（index.html）：

<ul class="nav nav-tabs">
    <li class="active"><a href="#">个人中心</a></li>
    <li><a href="#">商品详情</a></li>
    <li><a href="#">我的订单</a></li>
    <li><a href="#">联系客服</a></li>
</ul>

示例效果：

胶囊式导航的使用

使用胶囊式导航组件，可以在页面中创建胶囊样式的选项卡。

胶囊式导航的基本用法：

<ul class="nav nav-pills">
    <li class="active"><a href="#">导航菜单</a></li>
    ...
</ul>

预定义样式的使用：

• .nav-pills 预定义类用于定义胶囊式导航。
• .active 预定义类用于默认选中胶囊。

示例：胶囊式导航

入口页面（index.html）：

<ul class="nav nav-pills">
    <li class="active"><a href="#">导航菜单</a></li>
    ...
</ul>

示例效果：

自适应导航的使用

在大于 768px 的屏幕上，自适应导航组件可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式。

自适应导航的基本用法：

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">导航菜单</a></li>
    ...
</ul>

预定义样式说明：

• .nav-justified 预定义类用于让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上呈现堆叠样式。
• 自适应导航使用时，需要基于 .nav-tabs 或 .nav-pills 样式。

示例：自适应导航

入口页面（index.html）：

<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">购物车</a></li>
    <li><a href="#">我的订单</a></li>
    <li><a href="#">联系客服</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">购物车</a></li>
    <li><a href="#">我的订单</a></li>
    <li><a href="#">联系客服</a></li>
</ul>

示例效果：

下拉菜单导航的使用

使用下拉菜单导航组件，可以在导航组件中添加下拉菜单。

下拉菜单导航的基本用法：

<ul class="nav nav-pills">
    <li class="active"><a href="#">导航菜单</a></li>
    ……
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            导航菜单 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">下拉菜单</a></li>
            ……
        </ul>
    </li>
</ul>

预定义样式说明：

• 导航组件将 li 元素作为下拉菜单的父容器，添加 .dropdown 预定义类。
• 在 .dropdown 内部包含一个 .dropdown-menu 预定义类的下拉菜单项。

示例：下拉菜单导航

入口页面（index.html）：

<ul class="nav nav-pills">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">购物车</a></li>
    <li><a href="#">我的订单</a></li>
    <li><a href="#">联系客服</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            个人中心<span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">地址管理</a></li>
            <li><a href="#">账号设置</a></li>
            <li><a href="#">地址管理</a></li>
            <li><a href="#">意见反馈</a></li>
            <li><a href="#">退出</a></li>
        </ul>
    </li>
</ul>

示例效果：

导航条组件

导航条组件的使用

使用导航条组件，可以在在页面中创建导航条。

导航条组件的基本用法：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand"><img src="logo.png"></a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">导航条菜单</a></li>
        ……
    </ul>
</nav>

预定义样式说明：

• .navbar 预定义类是导航条组件的公共预定义类。
• .navbar-default 预定义类用于设置默认样式的导航条组件。
• .navbar-inverse 预定义类用于设置反色的导航条。
• .navbar-header 预定义类用于设置导航条的头部，结合 .navbar-brand 预定义类可以展示品牌图标。
• .nav、.navbar-nav 预定义类是导航条组件中导航选项列表的公共预定义类。
• .active 预定义类用于默认选中导航选项。

示例：导航条组件

入口页面（index.html）：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand"><img src="demo.png" style="width: 25px;"></a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">秒杀</a></li>
        <li><a href="#">抢购</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">其他</a></li>
    </ul>
</nav>

示例效果：

导航条组件放置表单

在导航条组件中，可以放置表单。

导航条组件放置表单的基本用法：

<nav class="navbar navbar-default">
    ……
    <form class="navbar-form navbar-right">
        <div class="form-group">
            <input type="text" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary">按钮</button>
    </form>
</nav>

预定义样式说明：

• 在 .navbar 的容器内放置表单元素，并在表单元素上添加 .navbar-form 预定义类。
• .navbar-left、.navbar-right 预定义类用于控制表单元素在左侧或右侧。

示例：放置表单

入口页面（index.html）：

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand"><img src="demo.png" style="width: 25px;"></a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">秒杀</a></li>
        <li><a href="#">抢购</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">其他</a></li>
    </ul>
    <form class="navbar-form navbar-right">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索内容">
        </div>
        <button type="submit" class="btn btn-primary">搜索</button>
    </form>
</nav>

示例效果：

导航条组件放置按钮、文本和链接

在导航条组件中，可以放置按钮、文本和链接。

导航条组件放置按钮、文本和链接的基本用法：

<nav class="navbar navbar-default">
    ...
    <div class="nav navbar-nav">
        <button class="btn btn-danger navbar-btn">按钮</button>
        <p class="navbar-text">文本</p>
        <a href="#" class="navbar-link navbar-text">超链接</a>
    </div>
</nav>

预定义样式说明：

• .navbat-btn 预定义类用于在导航条组件中放置按钮。
• .navbar-text 预定义类用于在导航条组件中放置文本。
• .navbar-link 预定义类用于在导航条组件中放置链接。

示例：放置按钮、文本和链接

入口页面（index.html）：

<nav class="navbar navbar-default">
    <div class="nav navbar-nav">
        <button class="btn btn-success navbar-btn">登录</button>
        <button class="btn btn-danger navbar-btn">登录</button>
        <p class="navbar-text">文本</p>
        <p class="navbar-text">Hello</p>
        <a href="#" class="navbar-link navbar-text">去搜索</a>
        <a href="#" class="navbar-link navbar-text">去查询</a>
    </div>
</nav>

示例效果：

导航条组件固定在页面顶部或底部

在导航条组件中，可以将导航条固定在页面顶部或或底部。

导航条组件固定在页面顶部或底部的基本用法：

<nav class="navbar navbar-default navbar-fixed-top">
    ...
</nav>

预定义样式说明：

• .navbar-fixed-top 预定义类用于将导航条组件固定在页面顶部。
• .navbar-fixed-bottom 预定义类用于将导航条组件固定在页面底部。
• 无论是将导航条组件固定在顶部还是固定在底部，都要注意相关元素的内边距。

示例：固定在页面顶部或底部

入口页面（index.html）：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="nav navbar-nav">
        <button class="btn btn-success navbar-btn">登录</button>
        <button class="btn btn-danger navbar-btn">登录</button>
        <p class="navbar-text">文本</p>
        <p class="navbar-text">Hello</p>
        <a href="#" class="navbar-link navbar-text">去搜索</a>
        <a href="#" class="navbar-link navbar-text">去查询</a>
    </div>
</nav>

<p>文本</p>
<!-- ... -->

示例效果：

响应式导航条的使用

响应式导航条组件在屏幕小于 768px 时，所有菜单项默认隐藏，单击右边的 icon 图标，所有的导航菜单项显示出来。

响应式导航条的基本用法：

<nav class="nav navbar-default">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand"><img src="logo.png"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            ...
        </ul>
    </div>
</nav>

预定义样式说明：

• .navbar-toggle 预定义类用于设置导航条组件的折叠按钮。
• data-toggle 属性用于为折叠按钮添加折叠菜单的动画效果。
• data-target 属性指定折叠按钮点击后弹出某一个折叠菜单。
• .icon-bar 预定义类用于设置折叠按钮图标。
• .collapse、.nav-collapse 预定义类用于设置折叠菜单列表。

示例：响应式导航条

入口页面（index.html）：

<nav class="nav navbar-default">
    <div class="navbar-header">
        <button  class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand"><img src="demo.png" style="width: 25px;"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">秒杀</a></li>
            <li><a href="#">抢购</a></li>
            <li><a href="#">团购</a></li>
            <li><a href="#">其他</a></li>
        </ul>
    </div>
</nav>

示例效果：

分页/翻页组件

分页组件的使用

使用分页组件，可以在页面中创建上下页按钮、彩虹页码按钮。

分页组件的基本用法：

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="disabled">
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

预定义样式说明：

• aria-label 属性用于给标签写说明文本。
• aria-hidden 属性用于设置标签在辅助技术（如阅读模式）下是否隐藏。
• .pagination 预定义类用于定义分页按钮的列表。
• .disabled 预定义类用于禁用分页按钮。
• .active 预定义类用于默认选中分页按钮。

示例：分页组件

入口页面（index.html）：

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">上一页</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">下一页</span>
            </a>
        </li>
    </ul>
</nav>

示例效果：

翻页组件的使用

使用翻页组件，可以在页面中创建上下页按钮。

翻页组件的基本用法：

<nav aria-label="page navigation">
    <ul class="pager">
        <li class="previous"><a href="#">上一页</a></li>
        <li class="next"><a href="#">下一页</a></li>
    </ul>
</nav>

预定义样式说明：

• .pager 预定义类用于定义翻页按钮的列表。
• .previous、.next 预定义类用于使两个翻页按钮两端对齐。

示例：翻页组件

入口页面（index.html）：

<nav aria-label="page navigation">
    <ul class="pager">
        <li class="previous"><a href="#">上一页</a></li>
        <li class="next"><a href="#">下一页</a></li>
    </ul>
</nav>

示例效果：

缩略图组件

缩略图组件的使用

缩略图组件用于展示栅格样式的图像、视频、文本等内容。

缩略图组件的基本用法：

<div class="thumbnail" href="#">
    <img src="images/1.jpg" alt=""/>
    <div class="caption">
        <h3>标题</h3>
        <p>文本</p>
        <p><a href="#" class="btn btn-primary">按钮</a></p>
    </div>
</div>

预定义样式说明：

• .thumbnail 预定义类用于定义缩略图。
• .caption 预定义类用于定义缩略图下面的描述文本。

示例：缩略图组件

入口页面（index.html）：

<div class="col-md-3">
    <div class="thumbnail">
        <img src="demo.png" alt=""/>
        <div class="caption">
            <h3>春天来了</h3>
            <p>春天来临，小河…</p>
            <p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
        </div>
    </div>
</div>

示例效果：

媒体对象组件

媒体对象组件的使用

媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容，如图像、视频、音频等。

媒体对象组件的基本用法：

<div class="media">
    <div class="media-left">
        <img class="media-object" src="images/1.jpg" alt="">
    </div>
    <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>内容</p>
    </div>
    <div class="media-right">
        <img class="media-object" src="images/1.jpg" alt="">
    </div>
</div>

预定义样式说明：

• .media 预定义类用于定义媒体对象。
• .media-left/.media-right 预定义类用于定义媒体对象左侧/右侧的内容。
• .media-object 预定义类用于定义媒体对象，如图片、视频等。
• .media-body 预定义类用于定义媒体对象的文本内容。
• .media-heading 预定义类用于定义媒体对象文本内容的标题。

示例：媒体对象组件

入口页面（index.html）：

<div class="col-md-4">
    <div class="media">
        <div class="media-left">
            <img class="media-object" src="demo.png" style="width: 100px">
        </div>
        <div class="media-body">
            <h4 class="media-heading">这是我的头像</h4>
            <p>我的头像真好看</p>
        </div>
    </div>
</div>

示例效果：

列表组组件

列表组组件的使用

列表组组件是一个带有多个列表条目的无序列表。

列表组组件的基本用法：

<ul class="list-group">
    <li class="list-group-item">列表项 <span class="badge">小标签</span></li>
    ……
</ul>

• .list-group 预定义类用于定义列表组。
• .list-group-item 预定义类用于定义列表项。
• .badge 预定义类用于为列表项添加徽章。

示例：列表组组件

入口页面（index.html）：

<div class="col-md-4">
    <ul class="list-group">
        <li class="list-group-item">列表项1 <span class="badge">777</span></li>
        <li class="list-group-item">列表项2 <span class="badge">888</span></li>
        <li class="list-group-item">列表项3 <span class="badge">999</span></li>
        <li class="list-group-item">列表项4 <span class="badge">000</span></li>
    </ul>
</div>

示例效果：