BootStrap-Day1 — CSS框架（对css样式的封装）
引言
概念： Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
特点：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
响应式布局：响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。
环境搭建
```txt
1.https://v3.bootcss.com/getting-started/#download 下载关于bootstrap的zip包
2.解压缩 并放入项目中
CSS BootStrap的全局CSS样式
Font 提供对应的图标
JS 关于BootStrap的js
3.移动设备优先设置
全局CSS样式
排版
标题
```html
HTML 中的所有标题标签，
到
均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
在标题内还可以包含 标签或赋予 .small 类的元素，可以用来标记副标题。 ```页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
<p>...</p>
中心内容
通过添加 .lead 类可以让段落突出显示。
<p class="lead">...</p>
高亮
You can use the mark tag to <mark>highlight</mark> text.
被删除的文本
对于被删除的文本使用 <del> 标签
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
对于没用的文本使用 <s> 标签。
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
额外插入的文本使用 <ins> 标签。
<ins>This line of text is meant to be treated as an addition to the document.</ins>
着重
通过增加 font-weight 值强调一段文本。
<strong>rendered as bold text</strong>
斜体
用斜体强调一段文本。
<em>rendered as italicized text</em>
对齐
<p class="text-left">Left aligned text.</p> 居左
<p class="text-center">Center aligned text.</p> 局中
<p class="text-right">Right aligned text.</p> 局右
改变大小写
通过这几个类可以改变文本的大小写
<p class="text-lowercase">Lowercased text.</p> 大写转小写
<p class="text-uppercase">Uppercased text.</p> 小写转大写
<p class="text-capitalize">Capitalized text.</p> 首字母大写
基本缩略语
<abbr title="attribute">attr</abbr> title代表悬停过后展示的内容
无序列表
<ul>
<li>...</li>
</ul>
有序列表
<ol>
<li>...</li>
</ol>
内联列表
<ul class="list-inline">
<li>...</li>
</ul>
描述
带有描述的短语列表
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
class="dl-horizontal"
表格
基本实例
```html
条纹状表格
<table class="table table-striped">
...
</table>
带边框的表格
<table class="table table-bordered">
...
</table>
鼠标悬停
<table class="table table-hover">
...
</table>
紧缩表格
<table class="table table-condensed">
...
</table>
状态类
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
流式布局容器
将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
<div class="container-fluid">
</div>
基本实例
<div class="container-fluid">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
</div>
列偏移
<div class="container-fluid">
<div class="row">
<div class="col-md-4">4</div>
<div class="col-md-4 col-md-offset-2 ">4</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2">2</div>
<div class="col-md-5 col-md-offset-3 ">4</div>
</div>
</div>
嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
<div class="col-md-6">6</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3">6</div>
<div class="col-md-9">6</div>
</div>
</div>
</div>
</div>
表单
基本实例
```html
水平排列表单
<!--水平排列的表单-->
<form class="form-horizontal">
<!--相当于row-->
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
内联表单
<!--水平排列的表单-->
<form class="form-horizontal">
<!--相当于row-->
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
输入框
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
必须添加类型声明
<input type="text" class="form-control" placeholder="Text input">
<input type="password" class="form-control" placeholder="Text input">
<input type="datetime-local" class="form-control" placeholder="时间">
<input type="date" class="form-control" placeholder="时间">
<input type="number" class="form-control" placeholder="请输入数字">
<input type="email" class="form-control" placeholder="请输入邮箱格式">
<input type="url" class="form-control" placeholder="请输入地址">
<input type="color" class="form-control" placeholder="请选择颜色">
文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。
<textarea class="form-control" rows="3"></textarea>
单选框与复选框
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
<div class="radio">
<label>
<input type="radio" name="optionsRadios" value="option1" checked>
男
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" value="option2" disabled>
女
</label>
</div>
内联单选和多选框
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行
<label class="radio-inline">
<input type="radio" name="optionsRadios" value="option1" checked>
男
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" value="option2" disabled>
女
</label>
下拉列表（select）
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项。
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
被禁用的 fieldset
为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。
校验状态
bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可
<form class="form-horizontal">
<!--相当于row-->
<div class="form-group has-success">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group has-warning">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
控件尺寸
通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。
高度尺寸
调整列尺寸
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
按钮
可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<a class="btn btn-default" href="#">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮。
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
调整按钮大小
需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。
激活状态
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于 <button> 元素，是通过 :active 状态实现的
禁用状态
为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
图片
响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
图片形状
<img src="../images/2.jpg" alt="..." class="img-rounded">
<img src="../images/3.jpg" alt="..." class="img-circle">
<img src="../images/4.jpg" alt="..." class="img-thumbnail">
辅助类
情境文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
情景背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
<span class="caret"></span>
...
...
```情景背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
<span class="caret"></span>
BootStrap_DAY2
组件
Glyphicons 字体图标
基本实例
<h1><span class="glyphicon glyphicon-search"></span></h1>
<h1><span class="glyphicon glyphicon-apple"></span> </h1>
<h1><span class="glyphicon glyphicon-open"></span></h1>
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
<!--在按钮上添加对应的图标-->
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
下拉菜单
基本实例
注意：使用下拉菜单时，需要先引入jquery的js文件，再引入BootStrap的js文件 jquery的js文件建议3.x版本以上
<h1><span class="glyphicon glyphicon-search"></span></h1>
<h1><span class="glyphicon glyphicon-apple"></span> </h1>
<h1><span class="glyphicon glyphicon-open"></span></h1>
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
<!--在按钮上添加对应的图标-->
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-align-left"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<!--分割线-->
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
标题
在任何下拉菜单中均可通过添加标题来标明一组动作。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
课程体系
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">框架</li>
<li><a href="#">Spring</a></li>
<li><a href="#">SpringMVC</a></li>
<li><a href="#">Ajax</a></li>
<li class="divider"></li>
<li class="dropdown-header">Web编程</li>
<li><a href="#">Oracle</a></li>
<li><a href="#">JDBC</a></li>
<li><a href="#">Servlet</a></li>
</ul>
</div>
禁用的菜单项
为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。
<li class="disabled"><a href="#">Ajax</a></li>
按钮组
基本实例
```html
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
Left Middle Right
##### 按钮工具栏
```html
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。
<div class="btn-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>
尺寸
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
<div class="btn-group btn-group-lg" >
<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">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</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" >
<!--下拉菜单-->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
两端对齐
<!--两端对齐-->
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
按钮式下拉菜单
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
分裂式按钮下拉菜单
相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。
<!--分裂式下拉菜单-->
<!-- Split button -->
<div class="btn-group">
<!--把文本放在按钮中-->
<button type="button" class="btn btn-danger">Action</button>
<!--把三角符号放入触发器中-->
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
尺寸
按钮式下拉菜单适用所有尺寸的按钮。
<!-- Split button -->
<div class="btn-group">
<!--把文本放在按钮中-->
<button type="button" class="btn btn-danger btn-sm">Action</button>
<!--把三角符号放入触发器中-->
<button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
向上弹出式菜单
给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。
<!--分裂式下拉菜单-->
<!-- Split button -->
<div class="btn-group dropup">
<!--把文本放在按钮中-->
<button type="button" class="btn btn-danger btn-sm">Action</button>
<!--把三角符号放入触发器中-->
<button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
输入框组
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素
<div class="input-group">
<span class="input-group-addon" >@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" >.00</span>
</div>
尺寸
为 .input-group 添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。
<div class="input-group input-group-sm">
<span class="input-group-addon" >@</span>
<input type="text" class="form-control" placeholder="Username">
<span class="input-group-addon" >.00</span>
</div>
作为额外元素的多选框和单选框
<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">
<span class="input-group-addon">
<input type="checkbox">
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
<span class="input-group-addon">
<input type="radio">
</span>
</div>
</div>
</div>
作为额外元素的按钮
为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-success" type="button">Go!</button>
</span>
</div>
</div>
</div>
导航
```html
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
```
标签页
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
胶囊式标签页
<!--胶囊式标签页-->
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
两端对齐的标签页
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
禁用的链接
对任何导航组件（标签页、胶囊式标签页），都可以添加 .disabled 类，从而实现链接为灰色且没有鼠标悬停效果。
<li class="disabled" ><a href="#">Messages</a></li>
带下拉菜单的标签页
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
框架 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Ajax</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">SpringMVC</a></li>
</ul>
</li>
</ul>
带下拉菜单的胶囊式标签页
<!--带有下拉菜单的胶囊式标签页-->
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
框架 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Ajax</a></li>
<li><a href="#">Spring</a></li>
<li><a href="#">SpringMVC</a></li>
</ul>
</li>
</ul>
路径导航
在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页
默认分页
受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。
<nav>
<ul class="pagination">
<li>
<a href="#" >
<span>«</span>
</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="#">
<span>»</span>
</a>
</li>
</ul>
</nav>
禁用和激活状态
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。
<!--分页-->
<nav>
<ul class="pagination">
<li class="disabled">
<a href="#" >
<span>«</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="#">4</a></li>
<li><a href="#">5</a></li>
<li >
<a href="#">
<span>»</span>
</a>
</li>
</ul>
</nav>
尺寸
想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
<nav>
<ul class="pagination pagination-lg">
<li class="disabled">
<a href="#" >
<span>«</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="#">4</a></li>
<li><a href="#">5</a></li>
<li >
<a href="#">
<span>»</span>
</a>
</li>
</ul>
</nav>
翻页
用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。
<!--翻页-->
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
对齐链接
<!--翻页-->
<nav>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</nav>
可选的禁用状态
<!--翻页-->
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</nav>
标签
<h3>Example heading <span class="label label-default">New</span></h3>
不同颜色的标签
<!--不同颜色的标签-->
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
徽章
给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-danger" type="button">
Messages <span class="badge">4</span>
</button>
Messages <span class="badge">4</span>
巨幕
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>在这个世上，只要不是完全的独身主义者，爱情几乎是每个人一生中都会有的经历过程，只是有些人爱得轻松，有些人爱得枯涩，有些爱天长地久，有些爱曾经拥有而已。在爱情中，爱的伟大是经得起考验，爱的最高境界是两情相悦的欣赏，是彼此的懂得。
</p>
<p><a class="btn btn-primary btn-lg" href="#" >Learn more</a></p>
</div>
页头
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。
<!--页头-->
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
缩略图
通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/1.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/2.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/3.jpg">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/4.jpg" >
</a>
</div>
</div>
自定义内容
添加一点点额外的标签，就可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/1.jpg">
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>这是一个妹妹</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/2.jpg">
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>这是一个妹妹</p>
<p><a href="#" class="btn btn-primary" >Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/3.jpg">
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>这是一个妹妹</p>
<p><a href="#" class="btn btn-primary" >Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../images/4.jpg" >
</a>
<div class="caption">
<h3>Thumbnail label</h3>
<p>这是一个妹妹</p>
<p><a href="#" class="btn btn-primary" >Button</a> <a href="#" class="btn btn-default">Button</a></p>
</div>
</div>
</div>
警告框
基本实例
```html
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。
嘻嘻
哈哈
吼吼
呆呆
```
可关闭的警告框
<div class="alert alert-warning alert-dismissible" >
<button type="button" class="close" data-dismiss="alert" ><span>×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
警告框中的链接
用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。
<div class="alert alert-success" >
这是一个警告信息 这是问题的解决方案 <a href="#" class="alert-link">链接</a>
</div>
进度条
基本实例
```html
通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。
##### 不同颜色的进度条
```html
<!--设置不同的颜色-->
<h5>CPU状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 40%">
<span >40%</span>
</div>
</div>
<h5>TomCat状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 20%">
<span >20%</span>
</div>
</div>
<h5>Oracle状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 60%">
<span >60%</span>
</div>
</div>
<h5>IDEA状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%">
<span >80%</span>
</div>
</div>
条纹效果
通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持
<!--设置不同的颜色-->
<h5>CPU状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 40%">
<span >40%</span>
</div>
</div>
<h5>TomCat状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%">
<span >20%</span>
</div>
</div>
<h5>Oracle状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 60%">
<span >60%</span>
</div>
</div>
<h5>IDEA状态</h5>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 80%">
<span >80%</span>
</div>
</div>
动画效果
为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 20%">
<span >20%</span>
</div>
</div>
堆叠效果
把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 35%">
<span >35% </span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 20%">
<span >20%</span>
</div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%">
<span>10%</span>
</div>
</div>
媒体对象
```html
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
斯蒂芬·库里
斯蒂芬·库里（Stephen Curry），1988年3月14日出生于美国俄亥俄州阿克伦（Akron,Ohio），美国职业篮球运动员，司职控球后卫，效力于NBA金州勇士队。 [1] 斯蒂芬·库里于2009年通过选秀进入NBA后一直效力于勇士队，新秀赛季入选最佳新秀第一阵容；2014-15、2016-17、2017-18赛季三次获得NBA总冠军；两次荣膺常规赛MVP，6次入选最佳阵容（3次一阵、2次二阵、1次三阵），6次入选全明星赛西部首发阵容。 [2] 斯蒂芬·库里于2010年随美国队获土耳其世锦赛冠军，2014年随美国队获西班牙篮球世界杯冠军。
#### 列表组
##### 基本实例
```html
列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
徽章
给列表组加入徽章组件，它会自动被放在右边。
<ul class="list-group">
<li class="list-group-item">Cras justo odio<span class="badge">14</span></li>
<li class="list-group-item">Dapibus ac facilisis in<span class="badge">15</span></li>
<li class="list-group-item">Morbi leo risus<span class="badge">16</span></li>
<li class="list-group-item">Porta ac consectetur ac<span class="badge">17</span></li>
<li class="list-group-item">Vestibulum at eros<span class="badge">18</span></li>
</ul>
链接
用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。没必要给列表组中的每个元素都加一个父元素。
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
按钮
列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
被禁用的条目
为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果。
定制内容
列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。
<div class="list-group">
<a href="#" class="list-group-item active">
<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">文章</h4>
<p class="list-group-item-text">这是一篇很好的文章</p>
</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">文章</h4>
<p class="list-group-item-text">这是一篇很好的文章</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">文章</h4>
<p class="list-group-item-text">这是一篇很好的文章</p>
</a>
</div>
面板
基本实例
```html
虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。
Basic panel example
##### 带标题的面板
```html
通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
带脚注的面板
按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
情境效果
像其他组件一样，可以简单地通过加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。
<div class="panel panel-danger">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
带表格的面版
为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。
<div class="panel panel-danger">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> Panel content</p>
</div>
<table class="table">
<tr>
<th>用户ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>长孙娜</td>
<td>12345</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>长孙娜</td>
<td>12345</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>长孙娜</td>
<td>12345</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>长孙娜</td>
<td>12345</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>长孙娜</td>
<td>12345</td>
<td>18</td>
</tr>
<tr>
<td>1</td>
<td>长孙娜</td>
<td>12345</td>
<td>18</td>
</tr>
</table>
</div>
带列表组的面板
<!--带有列表组的面板-->
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>嘻嘻嘻嘻</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
导航条
默认样式的导航条
<nav class="navbar navbar-default">
<!--导航条将充满整个屏幕-->
<div class="container-fluid">
<!--导航条的标题-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!--按钮上的横杠-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
表单
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
按钮
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
<!--按钮-->
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
文本
<!--文本-->
<p class="navbar-text">Signed in as Mark Otto</p>
非导航的链接
<!--文本--> <!--标签据右--> <!--导航条中的超级链接-->
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
固定在顶部
添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。
<nav class="navbar navbar-default navbar-fixed-top">
固定在底部
添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。
<nav class="navbar navbar-default navbar-fixed-bottom">
静止在顶部
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。
<nav class="navbar navbar-default navbar-static-top">
反色的导航条
通过添加 .navbar-inverse 类可以改变导航条的外观。
JavaScript 插件
模态框
```html
模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集
```
静态实例
<!--modal:模态框的样式 fade渐变动画效果 tabindex 利用键盘操作模态框 -->
<div id="myModal" class="modal fade" tabindex="-1">
<!--模态框的面板-->
<div class="modal-dialog">
<!--模态框的主体-->
<div class="modal-content">
<!--模态框的头部-->
<div class="modal-header">
<!--关闭模态框的X号-->
<button type="button" class="close" data-dismiss="modal" ><span>×</span></button>
<!--模态框的标题信息-->
<h4 class="modal-title">Modal title</h4>
</div>
<!--模态框的身体-->
<div class="modal-body">
<!--可以书写任意的内容-->
<p>One fine body…</p>
</div>
<!--模态框的尾部-->
<div class="modal-footer"> <!--关闭模态框-->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--蓝色的按钮-->
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
注意：需要初始化对应的模态框
$(function () {
//初始化时展示对应的模态框
$("#myModal").modal({
show:true, //展示模态框
backdrop:false, //关闭灯照
keyboard:false //关闭键盘ESC键的操作
});
})
动态实例
点击下面的按钮即可通过 JavaScript 启动一个模态框。此模态框将从上到下、逐渐浮现到页面前。
<!-- Button trigger modal --> <!--添加模态框触发器--> <!--触发到具体的位置-->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!--modal:模态框的样式 fade渐变动画效果 tabindex 利用键盘操作模态框 -->
<div id="myModal" class="modal fade" tabindex="-1">
<!--模态框的面板-->
<div class="modal-dialog">
<!--模态框的主体-->
<div class="modal-content">
<!--模态框的头部-->
<div class="modal-header">
<!--关闭模态框的X号-->
<button type="button" class="close" data-dismiss="modal" ><span>×</span></button>
<!--模态框的标题信息-->
<h4 class="modal-title">Modal title</h4>
</div>
<!--模态框的身体-->
<div class="modal-body">
<!--可以书写任意的内容-->
<p>One fine body…</p>
</div>
<!--模态框的尾部-->
<div class="modal-footer"> <!--关闭模态框-->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--蓝色的按钮-->
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
可选尺寸
模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现
<div class="modal-dialog modal-sm"></div>
事件
$(function () {
$('#myModal').on('show.bs.modal', function (e) {
alert("调用show方法之后 模态框未展示全 时触发");
});
$('#myModal').on('shown.bs.modal', function (e) {
alert("此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。");
});
$('#myModal').on('hide.bs.modal', function (e) {
alert("hide 方法调用之后立即触发该事件。");
});
$('#myModal').on('hidden.bs.modal', function (e) {
alert("此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。");
});
})
标签页
基本实例
<!-- Nav tabs -->
<!--添加标签页的样式-->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li ><a href="#profile" data-toggle="tab">Profile</a></li>
<li ><a href="#messages" data-toggle="tab">Messages</a></li>
<li ><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<!--标签页的主体部分-->
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="profile">Profile</div>
<div class="tab-pane" id="messages">Message</div>
<div class="tab-pane" id="settings">Settings</div>
</div>
带有下拉菜单的标签页
<div>
<!-- Nav tabs -->
<!--添加标签页的样式-->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li ><a href="#profile" data-toggle="tab">Profile</a></li>
<li ><a href="#messages" data-toggle="tab">Messages</a></li>
<li ><a href="#settings" data-toggle="tab">Settings</a></li>
<li class="dropdown">
<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#Action" data-toggle="tab">Action</a></li>
<li><a href="#Anotheraction" data-toggle="tab">Another action</a></li>
</ul>
</li>
</ul>
<!-- Tab panes -->
<!--标签页的主体部分-->
<div class="tab-content">
<div class="tab-pane active" id="home">Home</div>
<div class="tab-pane" id="profile">Profile</div>
<div class="tab-pane" id="messages">Message</div>
<div class="tab-pane" id="settings">Settings</div>
<div class="tab-pane" id="Action">Action</div>
<div class="tab-pane" id="Anotheraction">Another action</div>
</div>
</div>
Collapse(手风琴)
基本实例
<!--手风琴的样式 面板-->
<div class="panel-group" id="accordion">
<!--默认的面版样式-->
<div class="panel panel-default">
<!--面板头-->
<div class="panel-heading">
<!--面板标题-->
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
用户管理
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<!--面板的主体内容-->
<div class="panel-body">
<a href="#">用户添加</a> <br/>
<a href="#">用户修改</a> <br/>
<a href="#">用户删除</a> <br/>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
类别管理
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<a href="#">类别添加</a> <br/>
<a href="#">类别修改</a> <br/>
<a href="#">类别删除</a> <br/>
</div>
</div>
</div>
</div>
Carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!--幻灯片的图片-->
<div class="carousel-inner">
<div class="item active">
<img src="../images/7.png">
<div class="carousel-caption">
这是一个美女
</div>
</div>
<div class="item">
<img src="../images/8.png" >
<div class="carousel-caption">
这是一个电脑
</div>
</div>
<div class="item">
<img src="../images/8.png" >
<div class="carousel-caption">
这是一个电脑
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
