第11章 Bootstrap布局组件的使用
11.1 字体图标
Bootstrap约有200个由Glyphicon Halflings 所提供的字体格式符号，让设计者选择使用，而不是像早期那样需通过设计软件来产生符号图片。
在每个符号的下方都有用于引用的类名称，如图11-1所示，在 HTML 设计中只要在指定的元素中加入此类名称，即可运用该图标。
图11-1 字体图标及其类名称
在使用图标的过程中，并非所有情况都适用。*常发生的问题是，将图标类应用到本身已经应用了非常多类的标签中，这种做法的结果常会导致图标无法顺利显示。因此，*佳的用法应该是先加入一个 标签，再将图标类应用其中。
范例
可在按钮、工具栏的群组、导航栏或窗体 input 元素使用图标类。本范例以 标签为例，并加入两种图标类进行说明，效果如图11-2所示。
? 范例：图标类的使用 (ch11.1\example.html)
Star
图11-2 图标类使用的示范 (ch11.1\example.html)
11.2 下拉式菜单
11.2.1 说明
下拉式菜单通常被用于导航栏或窗体中，将某个类进行分类以呈现一个具有层次关系的菜单。例如，“视频教学”是*上层的按钮，当单击后可展开“Android 应用开发”“GameSalad 2D 游戏制作”“Google Web Design”等选项，届时用户再通过单击鼠标选择其一，以便前往对应的页面。下拉式菜单的效果如图11-3所示。
图11-3 下拉式菜单的效果 (ch11.2\example.html)
11.2.2 使用的方法
使用方法有两种，一种为加入 dropdown 类，另一种为建立 data 属性做呼应，具体说明如下（参考图11-4）：
图11-4 下拉式菜单的使用方法
（1）在*外层的 标签中设置 dropdown 类。
（2）在 标签中建立 data-toggle="dropdown" 属性，与*外层的dropdown类呼应。
11.2.3 其他辅助项目
可搭配使用的类如表11-1所示。
表11-1 辅助项目类
类 名称 说明 使用方法
dropdown-menu-right 菜单向右对齐 菜单按钮不变，但菜单项内容会整体靠右对齐 在 标签中的 dropdown-menu 类之后加入此类
dropdown-menu-left 菜单向左对齐 菜单按钮不变，但菜单项内容会整体靠左对齐 在 标签中的 dropdown-menu 类之后加入此类
dropdown-header 标题 给下拉菜单加入标题，以呈现出一个群组的概念 在 标签中加入此类
divider 分隔线 用来分隔每个系列下拉菜单的链接 在 标签中加入此类且此标签不需具有任何内容，只单纯显示分隔线效果，
disabled 禁用链接 链接完全失去作用 在 标签中加入此类
相关类的页面展示效果如图11-5~图11-8所示。
图11-5 菜单靠右对齐 (ch11.2\alignment.html)
图11-6 标题 (ch11.2\headers.html)
图11-7 分隔线 (ch11.2\divider.html)
图11-8 禁用链接 (ch11.2\disabled menu items.html)
11.2.4 范例
此范例使用了标题、分隔线、禁用链接3种类，执行结果如图11-9所示。
? 范例：下拉式菜单的制作 (ch11.2\example final.html)
视频教学
双口吕教学
Flash App 游戏开发
GameSalad 2D 游戏制作
Google Web Design动画制作
凯弟教学
Unity 5
图11-9 下拉式菜单的制作 (ch11.2\example final.html)
11.3 按钮群组
11.3.1 说明
通过群组的方式将 标签放置于同一行中，以产生如同单选（radio）或复选（checkbox）效果的操作，如图11-10所示。
图11-10 按钮群组的效果 (ch11.3\example.html)
在按钮群组的工具提示与弹出窗口中需要特别设置（参阅第 12.3 或 12.4节的内容）。
当在 .btn-group 中的元素使用工具提示（Tooltips） 或弹出提示（popovers）时必须指定 container: 'body' 选项，以避免不必要的副作用（例如，工具提示或弹出窗口被触发时会让元素变宽和（或）失去圆角效果）。
11.3.2 使用方法
在*外层的 标签中加入 .btn-group 类来包覆其他需要群组的 标签即可。在群组的效果部分，*左边与*右边的按钮会以圆角样式来呈现，如图11-11所示。
图11-11 按钮群组的使用方法
11.3.3 其他辅助项目
可搭配使用的类如表11-2所示，各个范例的执行结果如图11-12~图11-16所示。
表11-2 按钮群组辅助类
类 名称 说明
btn-toolbar 按钮工具栏 在 < div class="btn-toolbar" > 内包含多组< div class="btn-group" > 内容
.btn-group-* 大小 为群组内每个button运用大小作用类的替代做法，只需要在.btn- group加入.btn-group-*类，尺寸为lg、md、sm、xs四种
（续表）
类 名称 说明
嵌套 在一个按钮组内嵌套另一个按钮组，即在一个 .btn-group 内嵌套另一个 .btn-group
.btn-group-vertical 垂直变化 让群组按钮以垂直堆叠方式呈现而不是水平方式
. btn-group-justi?ed 水平变化 让群组按钮延伸为相同大小（平均分配）以填满父元素的宽度
图11-12 按钮工具栏 (ch11.3\button toolbar.html)
图11-13 大小 (ch11.3\sizing.html)
图11-14 嵌套 (ch11.3\nesting.html)
图11-15 垂直变化 (ch11.3\vertical variation.html)
图11-16 水平变化 (ch11.3\Justified button groups.html)
11.3.4 范例
此范例使用了工具栏、嵌套、水平变化3种类，范例的执行结果如图11-17所示。
? 范例：按钮群组的制作 (ch11.3\example final.html)
Flash 1
GS 1
Google Web Design
GWD 1
GWD 2
GWD 3
GWD 4
图11-17 按钮群组的制作 (ch11.3\example final.html)
11.4 输入框群组
11.4.1 说明
在输入框（input）群组的使用当中，可在 标签之前、之后加入其他元素，让用户在通过输入框进行相关操作时可更直觉与便利。添加的元素可为美元符号、@符号、按钮等。输入框的效果范例如图11-18所示。
图11-18 输入框的效果 (ch11.4\example.html)
11.4.2 使用方法
为 .input-group 加入 .input-group-addon 类，可以让 .form-control 的前面或后面额外加入其他元素。建立的步骤如下：
在*外层的 标签中加入 .input-group 类。
建立 标签，并加入 .input-group-addon 类与内容，并将 标签放置在 标签的前面或后面，如图11-19所示。
图11-19 建立输入框的方法
11.4.3 其他辅助项目
可搭配使用的类与其他效果，如表11-3所示，4个辅助项对应的范例如图11-20~图11-23所示。
表11-3 输入框群组辅助类
类 / 效果 名称 说明
.input-group-* 大小 为 .input-group 加入对应的大小类，包含的元素会自动重设大小，尺寸为 lg、md、sm、xs 四种
type="radio"、type="checkbox" 单选与复选 添加单选（radio）或复选（checkbox）选项到 群组，以替换文字
包覆按钮内容 使用 .input-group-btn 替代 .input-group-addon 来包覆 button 内容
下拉式菜单 在输入框群组中添加带有下拉式菜单的按钮，只需要简单地在一个 .input-group-btn 类中包裹按钮和下拉式菜单即可。建立的方式请参阅第11.2节
图11-20 大小 (ch11.4\sizing.html)
图11-21 附加checkbox 和 radio 元素 (ch11.4\checkboxes and radio addons.html)
图11-22 前后包覆按钮 (ch11.4\button addons.html)
图11-23 下拉式菜单 (ch11.4\dropdown.html)
11.4.4 范例
此范例结合了按钮与下拉式菜单两种项目，同时让单边可呈现多个按钮，且加入粗体与斜体两种图标类（图标类请参阅第11.1节）。范例的执行结果如图11-24所示。
? 范例：多个按钮与图标的运用 (ch11.4\example final.html)
下拉式菜单
按钮1
按钮2
按钮 3
按钮 4
图11-24 多个按钮与图标的运用范例 (ch11.4\example final.html)
11.5 导 航
11.5.1 说明
导航（见图11-25）在Bootstrap中可共享相同的标签（.nav 类）样式。此方式需搭配 JavaScript 的页签功能，使其呈现切换的效果，页签功能请参阅第 12 章。
图11-25 导航效果 (ch11.5\example.html)
11.5.2 使用方法
导航是一个无项目符号的效果，因此必须使用 与 标签的关系来建立内容。建立的步骤如下（参考图11-26）：
在*外层的 标签中加入 .nav 类。
在 .nav 类之后加入 .nav-tabs 类。
图11-26 导航的使用方法 (ch11.5\example.html)
11.5.3 其他辅助项目
可搭配使用的类如表11-4的示，各个辅助项目的范例如图11-27~图11-30所示。
表11-4 导航辅助类
类 名称 说明
.nav-pills 按钮样式 使用 .nav-pills 替换 .nav-tabs
.nav-stacked 垂直堆叠 .nav-stacked 类需加在 .nav-tabs 或 .nav-pills 之后
.nav-justi?ed 等宽样式 在大于 768px 的屏幕上，通过加入 .nav-justi?ed 很容易让页签或按钮样式以等宽的样式来呈现。另外，在小屏幕上，导航链接会以堆叠方式呈现
.disabled 禁用链接 对于任何导航组件（ 页签或按钮样式）都可以加入 .disabled 类，以呈现灰色链接和无鼠标滑入的效果
图11-27 按钮样式 (ch11.5\pills.html)
图11-28 垂直堆叠 (ch11.5\stacked.html)
图11-29 等宽样式 (ch11.5\justified.html)
图11-30 禁用链接 (ch11.5\disabled links.html)
11.5.4 范例
此范例与下拉式菜单功能进行整合（制作下拉式菜单的方式可参阅第 11.2节的内容），执行结果如图11-31所示。
图11-31 导航加下拉式菜单制作 (ch11.5\example final.html)
? 范例：导航加下拉式菜单的制作 (ch11.5\example final.html)
首页
关于我们
视频教学
Android 应用开发
Google Web Design动画制作
GameSalad 2D 游戏制作
Unity 5
11.6 导 航 栏
11.6.1 说明
导航栏可用于应用程序或网站导航标题的响应式基础组件。它们在移动设备的可视区域是以折叠方式呈现的（可切换开关），在可视区域的宽度渐渐增加时（大于移动设备的判断点时）会转为以水平布局方式呈现。范例的执行结果如图11-32所示。
图11-32 导航栏说明 (ch11.6\example.html)
11.6.2 使用方法
建立导航栏的步骤如下，范例如图11-33所示。
在*外层的 标签中按序加入 .navbar 与 .navbar-default 两个类。
在第二层 标签中加入 .navbar-header 类，且此 标签内的内容必须带有 .navbar-brand 类的
标签。
导航栏需使用
与 两个标签建立无顺序的内容（菜单），且在 标签中需加入 .nav 与 .navbar-nav 两个类。
图11-33 建立导航栏的步骤
11.6.3 其他辅助项目
可搭配使用的类如表11-5所示，范例如图11-34~图11-38所示。
表11-5 导航栏辅助类
类 名称 说明
.navbar-right 靠右对齐 能让导航栏的链接、窗体、按钮、文字靠右对齐
.navbar-left 靠左对齐 能让导航栏的链接、窗体、按钮、文字靠左对齐（默认效果）
.navbar-?xed-top 固定至顶端 加入 .navbar-?xed-top 类可以让导航栏固定至顶端
.navbar-?xed-bottom 固定至底端 加入 .navbar-?xed-bottom 类可以让导航栏固定至底端，包含 .container 或 .container- ?uid 类让导航栏内容居中对齐和左右加入 padding 设置
.navbar-static-top 顶端静止 加入 .navbar-static-top 类可以建立一个 100% 宽度的导航栏，它会随着页面向下滑动而消失，包含 .container 或 .container-?uid 类让导航栏内容居中对齐和左右加入 padding 设置
.navbar-inverse 反向颜色 加入 .navbar-inverse 类以修改导航的外观
图11-34 靠左/右对齐 (ch11.6\component alignment.html)
图11-35 固定至顶端 (ch11.6\fixed to top.html)
固定至顶端或底端，也就是说，当网页上下滑动时，导航栏并不会从画面上消失，而是保持显示在网页的顶端或底端，就像是“固定”在那里一样。
图11-36 固定至底端 (ch11.6\fixed to bottom.html)
图11-37 顶端静止 (ch11.6\static top.html)
图11-38 反向颜色 (ch11.6\inverted navbar.html)
11.6.4 范例
本范例的导航栏中加入了按钮、窗体与下拉式菜单等功能，执行结果如图11-39所示。
? 范例：导航栏 (ch11.6\example final.html)
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
Toggle navigation
首页
关于我们 （current）
关于我们
视频教学
Android应用开发
Google Web Design动画制作
GameSalad 2D 游戏制作
Unity 5
Submit
视频教学
Android应用开发
Google Web Design动画制作
GameSalad 2D 游戏制作
Unity 5
图11-39 导航栏的示范 (ch11.6\example final.html)
11.7 分 页
11.7.1 说明
此效果是一种无顺序符号，可为网站的应用程序提供分页链接的多分页组件，提供简单的换页功能。
11.7.2 使用方法
因为此效果属于无顺序符号，所以必须使用 与 两个标签建立出顺序的效果。分页效果的显示只需在 标签中加入 .pagination 类即可。分页的范例效果如图11-40所示。
图11-40 分页效果 (ch11.7\example.html)
11.7.3 其他辅助项目
可搭配使用的类如表11-6所示，各个范例如图11-41~图11-44所示。
表11-6 分页辅助类
类 名称 说明
.disabled 禁用 指定为不能单击的链接
.active 启用 标示为当前的页面
.pagination-* 大小 尺寸为 lg、md、sm、xs 四种
.pager 换页 默认的状态下，换页链接会居中对齐，且不必使用 .previous与.next两个类
.previous 上一页 标签中需加入 pager 类才可顺利呈现效果
.next 下一页 标签中需加入 pager 类才可顺利呈现效果
图11-41 禁用与启用 (ch11.7\disabled.html)
图11-42 大小 (ch11.7\sizing pagination.html)
图11-43 换页 (ch11.7\pager.html)
图11-44 对齐链接 (ch11.7\pager aligned links.html)
11.7.4 范例
此范例以*常见的分页方式作为介绍，执行结果如图11-45所示。
? 范例：分页的制作 (ch11.7\example final.html)
«
1
2
3
4
5
»
图11-45 分页制作的示范 (ch11.7\example final.html)
11.8 提示标志
11.8.1 说明
加入 < span class="badge" > 元素到链接、导航或其他元素，可呈现出醒目的“新”或“未读”信息的提示效果，如图11-46 所示。
图11-46 提示标志效果 (ch11.8\example.html)
11.8.2 范例
? 范例：提示标志的制作 (ch11.8\example final.html，见图11-47)
首页 42
关于我们
留言板 3
图11-47 提示标志制作的示范 (ch11.8\example final.html)
11.9 大屏幕效果
11.9.1 说明
此效果能使元素延展至整个浏览器的可视区域，以展示网站的关键内容。这个组件本身已具有响应式的效果。范例的执行结果如图11-48所示。
图11-48 大屏幕的效果 (ch11.9\example.html)
11.9.2 范例
在 标签中加入 .jumbotron 类，且搭配 .container 类可使内容显示的区域不是整个浏览器宽度。范例的执行结果如图11-49所示。
? 范例：大屏幕效果的制作 (ch11.9\example final.html)
Hello, world!
这是一个超大屏幕（Jumbotron）的范例
Learn more
图11-49 大屏幕效果制作的示范 (ch11.9\example final.html)
11.10 缩 略 图
11.10.1 说明
在网页设计中，多数都需要在网格中布局图像、视频、文字等内容。通过thumbnail 类，只需用*少的标签就可以展示出带有链接的图片，如图11-50所示。
图11-50 缩略图的效果 (ch11.10\example.html)
11.10.2 使用方法
使用 Bootstrap 创建缩略图的步骤如下（参考范例，如图11-51所示）：
在
标签中加入 .thumbnail 类。
thumbnail 类会给图像添加4个像素的内边距（padding）和一个灰色的边框。
当鼠标滑到图像上时，就会出现蓝色的轮廓。
图11-51 创建缩略图的方法
11.10.3 范例
在缩略图内容中加入标题、段落与按钮3种标签内容。范例的执行结果如图11-52所示。
? 范例：缩略图的制作 (ch11.10\example final.html)
缩略图标签
123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队，初衷是分享自己的学习经验，让人们可以通过我们的网站学习到更多有关信息科技等知识。
缩略图标签
123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队，初衷是分享自己的学习经验，让人们可以通过我们的网站学习到更多有关信息科技等知识。
Button
Button
缩略图标签
123LERNGO是由一群热爱程序设计、游戏以及视觉设计的人所组成的小团队，初衷是分享自己的学习经验，让人们可以通过我们的网站学习到更多有关信息科技等知识。
Button
Button
图11-52 缩略图制作的示范 (ch11.10\example final.html)
11.11 进 度 条
11.11.1 说明
通过这些简单又具有弹性的进度条，为工作流程或活动进度提供了*新的反馈信息，进度条的效果如图11-53所示。
图11-53 进度条效果 (ch11.11\example.html)
Bootstrap 进度条使用 CSS3 过渡和动画来获得这种效果。IE 9以及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 则不支持进度条动画这个效果。
11.11.2 使用方法
创建一个基本的进度条步骤如下（见图11-54）：
在*外层的 标签中加入 .progress 类。
在第二层的 标签中加入 .progress-bar 类。
添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 属性表示进度条在 60% 的位置。
图11-54 创建进度条的步骤
11.11.3 其他辅助项目
可搭配使用的类如表11-7所示，各个辅助项目的范例如图11-55~图11-58所示。
表11-7 进度条辅助项目
类 名称 说明
progress-bar-primary、progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger 显示状态 进度条使用与按钮类和警告类一致的场景颜色样式
progress-bar-striped 条纹样式 此类需加在 progress-bar 类之后
active 动画样式 将.active加入.progress-bar-striped类，以呈现从右向左的条纹动画效果
堆叠样式 将多个进度条（.progress-bar）放置于同一个.progress容器内
图11-55 显示状态 (ch11.11\contextual alternatives.html)
图11-56 条纹样式 (ch11.11\striped.html)
图11-57 动画样式 (ch11.11\animated.html)
图11-58 堆叠样式 (ch11.11\stacked.html)
11.11.4 范例
此范例在每条进度条中加入对应的数值并显示出来，该范例的执行结果如图11-59所示。
? 范例：进度条的制作 (ch11.11\example final.html)
35%
20%
10%
图11-59 进度条制作的示范 (ch11.11\example final.html)
11.12 面 板
11.12.1 说明
建立一个面板，并将需要放置的内容放置在此面板中，以显示出一个区块的效果，如图11-60所示。
图11-60 面板效果 (ch11.12\example.html)
11.12.2 使用方法
创建面板只需在 标签中按序加入 .panel 和 .panel-default 这两个类即可，范例及其执行结果如图11-61所示。
图11-61 创建面板的方法
11.12.3 其他辅助项目
可搭配使用的类如表11-8所示，各个辅助项目的范例如图11-62~图11-64所示。
表11-8 面板辅助项目
类 名称 说明
.panel-heading 标题 加入标题类到面板之中，在视觉显示上更为突显主题
.panel-footer 页脚 将按钮或次要文字放置在 .panel-footer 内。面板页脚不会从状态类继承颜色或边框的设置，因为它们并不是主要的内容
panel-primary、panel-success、panel-info、panel-warning、panel-danger 显示状态 与其他组件一样，只需要为面板加入状态类，很容易让面板在特定场景下更有意义
图11-62 标题 (ch11.12\panel with heading.html)
图11-63 页脚 (ch11.12\panel with footer.html)
图11-64 显示状态 (ch11.12\contextual alternatives.html)
11.12.4 范例
本范例采用了标题与显示状态两个类，并加入表格内容进行显示，如图11-65所示。
? 范例：面板的制作 (ch11.12\example final.html)
123LearnGo
我们是一个热爱程序设计、游戏以及视觉设计的小团队
AndroidGameSalad
教学 A教学 A
教学 B教学 B
图11-65 面板制作的示范 (ch11.12\example final.html)
11.13 响应式嵌入内容
11.13.1 说明
在网页设计中，有时会嵌入外部的视频或相关页面，但嵌入的内容并无法应对响应式网页的缩放而实时进行调整，只会以固定的大小显示出来。
因此，此响应式的嵌入内容可直接运用于 < iframe >、< embed > 和 < object > 元素上，当想要符合某些属性的样式时，可以选择使用明确的类 .embed-responsive-item。
11.13.2 范例
本范例按步骤引导各位读者制作响应式嵌入内容。
? 完整范例：范例文件\ch11\ch11.13\example.html
复制视频嵌入的全部程序代码，如图11-66所示。
图11-66 复制视频嵌入的全部程序代码
将语句粘贴到 标签中。
将程序代码中的“宽”与“高”部分删除，如图11-67所示。
图11-67 粘贴程序代码并删除代码中的“宽”与“高”部分
添加一个 标签并加入 embed-responsive 类，其后再加入embed-responsive embed-responsive-16by9 类即可完成，如图11-68所示。
图11-68 添加一个 标签并加入 embed-responsive 类
Button
Button
