- A+
1.Alert警告提示框
将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框。
常用提示框样式：
<div class="alert alert-success" role="alert">成功提示</div>
<div class="alert alert-info" role="alert">消息提示</div>
<div class="alert alert-warning" role="alert">警告提示</div>
<div class="alert alert-danger" role="alert">危险提示</div>
除此之外，还有如四种：
.alert-primary .alert-secondary .alert-light .alert-dark
每种提示框都是通过“.alert”类（必须设置）和一个特定意义的类（如 .alert-info）来实现的。
“role”属性通常用于增强语义，对一些非标准的组件进行用途描述，便于其他辅助工具更好地判别当前元素的实际作用。
另外，还可以添加标题“alert”，如：<h3 class="alert-heading">…</h3>
2.可关闭的提示框
如要为提示框添加关闭按钮，则需要添加一个“.alert-dismissible”类，
同时，关闭按钮设置“ data-dismiss="alert" ”属性。
<!--定义警告提示框div，并增加“.alert-dismissible”类，还可以添加fade/show效果--> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <!-- 设置关闭按钮“button”，定义“.close”类，并增加“data-dismiss”属性 --> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <!-- 定义关闭按钮图标,"x"必须使用实体字符(×)替换! --> <span aria-hidden="true">×</span> </button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div>
说明事项：
属性“ aria-* ”主要用于辅助工具（如屏幕阅读器）识别当前内容，便于其判断是否将当前内容输出视觉效果或声音效果。
aria-hidden="true" 属性，表示当前元素内容不需要屏幕识读设备抓取，忽略跳过处理
aria-label="Close"属性，表示对当前<button>的用途描述，辅助设备在识别内容时可以明确这个空间的意图并输出。
aria-label="Close"扩展：正常情况下，form表单的input组件都有对应的label，当input获取到焦点时，
屏幕阅读器会读出对应label里的文本。但是如果没有给输入框设置label，
当其获得焦点时，屏幕阅读器会读出aria-label属性的值，aria-label不会在视觉上呈现效果。
除此之外，
也可以将关闭按钮封装为JavaScript触发器进行调用，
通过“$().alert();”等方法触发提示框关闭，该方法用于侦听具有“ data-dismiss="alert" ”属性的敲击事件。
示例：$(".alert").alert("close");
3.警告框中的链接
通过给“.alert”元素包裹之中的链接（<a>标签）定义“.alert-link”类，具有突出显示匹配颜色链接。
示例：<div class="alert alert-info" role="alert">
消息提示，<a href="#" class="alert-link">点击查看</a>
</div>
4.Badge徽章
可以理解为用于突出显示元素内容的文本样式。
要设置元素的徽章样式，类似 Alert样式需要定义“.badge”和“.badge-* ”至少两个类名。
① 基本样式：
<h1>Example heading <span class="badge badge-primary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-success">New</span></h3>
<h4>Example heading <span class="badge badge-info">New</span></h4>
<h5>Example heading <span class="badge badge-warning">New</span></h5>
<h6>Example heading <span class="badge badge-danger">New</span></h6>
还有“badge-dark、badge-light”等。
② 按钮或链接中添加徽章
将设置有“.badge”类的<span>标签包裹在<button>标签或<a>标签中。
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>
class="sr-only"，用于为屏幕阅读器（screen reader）添加描述文本，且不会显示给正常使用者。
③ 药丸徽章
在基本样式的基础上增加“badge-pill”（修饰类）样式。示例如下：
<span class="badge badge-danger badge-pill">Danger</span>
④ 徽章链接
给<a>标签赋予“.badge”类，使得超链接拥有徽章样式。示例如下：
<a href="#" class="badge badge-success">Success</a>
5.Breadcrumb面包屑（导航）
主要用于创建有层次结构的位置信息，如菜单、目录、索引等，在用户界面实现导航辅助。
实现面包屑的三个主要类：
breadcrumb，定义面包屑的区域
breadcrumb-item，定义面包屑的内容项
active，定义活动页（当前页）
注意：对于非活动页通常需要嵌套<a>标签进行跳转链接。
构建面包屑导航的常用方式是使用“无序列表”，示例如下：
<ol class="breadcrumb" aria-label="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
也可以不使用无序列表的方式，示例如下：
<nav class="breadcrumb" aria-label="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
其他说明：
<nav>标签用于定义导航连接，作为标注一个导航连接的区域（不是必须使用）。
还可以在<nav>中添加屏幕属性，用于规定导航是否显示，以适应不同设备屏幕需求。
6.Button按钮
BootStrap通过“.btn”类和其他“.btn-*”特定意义的类定义了很多按钮样式
① 基本样式
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>（链接样式的按钮）
② ".btn"类还可以应用在<a>和<input>标签上，示例如下：
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
③ 轮廓按钮
与基本样式不同的是，没有内部背景颜色，而是突出了按钮轮廓和字体样式
类名的差异也是在特定类的名称中加入了“outline”，示例如下：
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-* ">Info</button>
④ 按钮大小
“.btn-lg”（大尺寸按钮）、“.btn-sm”（小尺寸按钮）、“.btn-block”（全部宽度按钮），示例如下：
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
<button type="button" class="btn btn-info btn-lg btn-block">Large button</button>
⑤ 活动状态和禁用状态
“.active”，表示活动状态，用于突出显示按钮被按下时的样式
“.disable”，表示禁用状态，按钮无法点击
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Link</a>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
<a href="#" class="btn btn-info btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
说明事项：
“.disable”类与html中<button>的“disable”属性效果相同，
所以对于<button>标签添加“.disable”类和“disable”属性都可以。
但是对于<a>标签不支持“disable”属性，因此只能使用“.disable”类的方式。
“tabindex”扩展：
用于设置键盘中的TAB键在控件中的移动顺序，即焦点的顺序。
把控件的tabIndex属性设成1到32767某个值，就可以将其加入TAB键的序列中。
使用TAB键在网页中切换时，焦点将按照tabIndex的属性值从小到大的顺序移动。
默认的tabIndex属性值为 0 ，将排列在所有指定tabIndex的控件之后。
若tabIndex属性为负值（如tabIndex="-1"），那么将被排除在TAB键的序列之外。
如果两个控件的tabIndex属性相同，则以控件在html代码中出现的顺序为准。
如果tabIndex属性值使用-1时，onfocus与onblur事件仍会被启动。
⑥ 复选框按钮和单选按钮
针对<input>标签的“checkbox”和“radio”两个属性的按钮样式。
input type=“checkbox”时，示例：
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="checkbox" checked> Checked
</label>
</div>
input type=“radio”时，示例：
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3"> Radio
</label>
</div>
注意：两种样式都是通过将<label>和<input>元素包裹在一个容器内，
然后给外层容器赋予 class类和 data-toggle属性，实现 input按钮（组）的转换。
⑦ 按钮组
多个按钮包裹在一个容器中，形成按钮拼接摆放的效果。
普通按钮组（Button group），示例：
<!-- 按钮组 div容器添加“.btn-group”类 --> <div class="btn-group" role="group" aria-label="First group"> <!-- 按钮 button元素定义 type类型等于“button”，添加“.btn”类和“btn-*”类 --> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div>
按钮工具栏（Button toolbar），多个按钮组封装在一个容器中，示例：
<!--最外层 div容器赋予“.btn-toolbar”类，内部按钮组的类样式与单个按钮组相同--> <div class="btn-toolbar role="toolbar" aria-label="Toolbar with button groups">
<!-- 按钮组 div容器添加“.btn-group”类 --> <div class="btn-group" role="group" aria-label="First group"> <!-- 按钮 button元素定义 type类型等于“button”，添加“.btn”类和“btn-*”类 --> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Middle</button> <button type="button" class="btn btn-secondary">Right</button> </div> <div class="btn-group" role="group" aria-label="Second group"> <button type="button" class="btn btn-secondary">Left</button> <button type="button" class="btn btn-secondary">Right</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-secondary">Middle</button> </div> </div>
嵌套按钮组（Nesting），将一个按钮组包裹在另一个按钮组内部，示例：
<!--外层按钮组与一般按钮组样式相同--> <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button>
<!-- 内部按钮组由“按钮组容器、下拉按钮、下拉菜单”三部分构成 --> <div class="btn-group" role="group"> <!-- 下来按钮需要在一般按钮的样式基础上，添加“.dropdown-toggle”类 --> <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <!-- 下拉菜单由“下拉容器和下拉选项”两部分构成 --> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div>
垂直按钮组，
为按钮组的外部容器添加“.btn-group-vertical”类，则按钮组将垂直方向排列。
语法示例：
<div class="btn-group-vertical">
...
</div>
按钮组大小，
按钮组中的按钮大小不需要针对具体某一个进行设置，只需要对按钮组容器设置即可，
包括多个按钮组嵌套。
示例：
<div class="btn-group btn-group-lg" role="group">...</div>
<div class="btn-group" role="group">...</div>
<div class="btn-group btn-group-sm" role="group">...</div>
参考资料来源：BootStrap中文网（https://v3.bootcss.com/）
