Bootstrap
什么是Bootstrap
- Bootstrap是一个用于快速开发web应用程序和网站的前端框架。是基于HTML、CSS、JavaScript的。
- 是由Twitter的 Mark Otto 和 Jacob Thornton 开发的。于2011年发布。
为什么要学习使用Bootstrap??
- 移动设备优先；
- 浏览器支持(所有主流浏览器)；
- 容易上手；
- 响应式设计；
下载使用Bootstrap
-
下载地址： http://getbootstrap.com/ -
使用方式：把包文件的特定位置链入HTML代码头就行了 -
其他一些效果插件于百度搜索或者官网下载，然后链入HTML代码头即可；
头部设置
-
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 -
user-scalable=no 可以禁用其缩放（zooming）功能。
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
布局容器
-
.container类用于固定宽度并支持响应式布局的容器 -
.container-fluid类用于100%宽度，占据全部视口(viewport)的容器 <div class="container">
<div class="container-fluid">
</div>
</div>
栅格系统
- Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕视口尺寸的增加，系统会自动分为最多12列。
- 栅格系统用于通过一系列的行(row)和列(column)的组合来创建页面布局，只需把内容放置盒子中即可。
栅格参数(多种设备上的数据)
| 超小屏幕（手机) | 小屏幕(平板) | 中等屏幕(桌面显示器) | 超大屏幕(大桌面显示器) |
|---|
| 栅格系统行为 | 总是水平排列 | | | | | 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- | | 可偏移 | 是 | 是 | 是 | 是 |
列偏移
- 使用**.col-xs-offset-***类可以将列向右侧偏移。
嵌套列
- 为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的**.row** 和一系列**.col-xs-***放进已经保存的.col-sm-*元素内。
列排序
- 通过使用**.col-md-push-*** 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
媒体查询
- 在栅格系统中，我们在less文件中使用一下媒体查询(media query）来创建关键的分界点阈值。
- 我们偶尔也会在媒体查询代码中包含
max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max-width:@screen-xs-max){}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
排版格式
标题
-
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 -
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 <h4>
你好，Bootstrap<small>我是机器人</small>
</h4>
中心内容
<p class="lead">
</p>
内联文本元素
被删除的文本
-
对于想删除的文本使用<del>标签。 <del>这段话需要进行删除操作。</del>
无用文本
-
对于无用的文本使用<s>标签。 <s>这段文字无用，划掉就行。</s>
插入文本
-
额外插入的文本使用<ins>标签。 <ins>这是一段插入文本内容。</ins>
带下划线的文本
-
为文本添加下划线，使用<u>标签。 <u>这是一段带下划线的文字。</u>
小号文本
着重
斜体
对齐
- 使用对齐类，可以使文字重新对齐。
text-left类、text-right类、text-center类、text-justify类、text-nowrap类(左、右、居中、左、左)
改变大小写
- 通过这几个类改变文本的大小写。
text-lowercase类、text-uppercase类、text-capitalize类(小写、大写、第一个字母大写)
缩略语
首字母缩略语
地址
默认样式的引用
多种引用样式
-
添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。 <blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
-
通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
无序列表
<ul>
<li></li>
</ul>
有序列表
<ol>
<li></li>
</ol>
内联列表
- 通过设置
display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline">
<li></li>
</ul>
水平列表的描述
表格
原始表格类
条纹状表格
带边框的表格
鼠标悬停
紧缩表格
状态类
-
通过这些状态类可以为行或单元格设置颜色。
| Class | 描述 |
|---|
| .active | 鼠标悬停在行或单元格上时所设置的颜色 | | .success | 标识成功或积极的动作 | | .info | 标识普通的提示信息或动作 | | .warning | 标识警告或需要用户注意 | | .danger | 标识危险或潜在大带来负面影响的动作 |
响应式表格
表单
基本实例
-
所有设置了.form-control类的input、textarea、select元素都将默认设置宽度为100%，将label元素和前面的元素放在form-group中可以获得最好的排列。 <form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
内联表单
-
为form添加.form-inline类可以使其内容左对齐并且表现为inline-block级别的组件。只适用于窗口在768px宽度时(太小会被折叠)。 -
一定要添加label标签。 -
使用 class .sr-only，可以隐藏内联表单的标签。 //此页面显示效果为全部表单在同一行然后居左。
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
水平排列的表单
被支持的控件
文本域
多选和单选框
-
多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。 //正方形选择样式
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
//圆形选择样式
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
内联单选和多选框
-
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。 <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
下拉菜单
-
select -
注意，很多原生选择菜单 - 即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。 <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
//标记multiple属性的select控件来说，默认显示多选项
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
静态控件
水平排列的表单组的尺寸
-
通过添加.form-group-lg 或 .form-group-sm类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。 <form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
调整列(column)尺寸
-
用栅格系统中的列(column)包裹输入框或其任何父元素，都可以很容易设置其宽度。 <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>
按钮
预定义样式
- 使用下面的类可以快速创建一个带有预定义样式的按钮。
- 默认样式： btn-default 首选项：btn-primary 成功：btn-success 一般信息：btn-info 警告： btn-warning 危险：btn-danger 链接：btn-link
尺寸
-
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。 <p>
<button type="button" class="btn btn-dafault btn-lg">1</button>
<button type="button" class="btn btn-primary btn-sm">2</button>
</p>
-
通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变成了块级(block)元素。 -
为 <button> 元素添加 disabled 属性，使其表现出禁用状态。
辅助类
关闭按钮
三角符号
快速浮动
-
通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。 -
导航条中，使用.navbar-left 或 .navbar-right 。 <div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
内容居中
清除浮动
下拉菜单
实例
-
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里。 -
.dropdown-menu类设置下拉菜单列表。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
-
通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）。 <div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
对齐方式
-
默认情况下，下拉菜单会自动沿着父元素的上沿和左侧被定位为100%宽度； -
为.dropdown-menu 添加 .dropdown-menu-right/.dropdown-menu-left 类可以让其下拉菜单右对齐或左对齐； <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
标题
分割线
禁用的菜单项
-
为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。 <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
按钮组
- 通过按钮组容器把一组按钮放在同一行里。
- 为了向使用辅助技术的用户传达正确的按钮分组，需要提供一个合适的
role属性。 - 对于按钮组合，应该是
role="group"; - 对于toolbar(工具栏)，应该是
role="toolbar"; - 按钮组和工具栏应给定一个明确的label标签，尽管设置了正确的
role 属性，但是大多数辅助技术将不会正确的识读他们。在这里提供的实例中，我们使用 aria-label，但是， aria-labelledby 也可以使用； - 例如：aria-label=“用户名”
基本实例
按钮工具栏
-
把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。 <div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
尺寸
-
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。 <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
嵌套
-
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。 <div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
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>
垂直排列
两端对齐排列的按钮组
-
让一组按钮拉长为相同的尺寸，填满父元素的宽度； -
Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框，无论是 <a> 或 <button> 元素。为了照顾 IE8，把每个按钮放入另一个 .btn-group 中即可。 -
**关于元素，**只须将一系列 .btn 元素包裹到 .btn-group .btn-group-justified 中即可。 <div class="btn-group btn-group-justified" role="group" aria-label="">
</div>
-
**关于元素，**为了将元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中 <div class="btn-group btn-group-justified" role="group" aria-label="">
<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中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了
单按钮下拉菜单
<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-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>
按钮式下拉菜单的尺寸
- 使用带有各种大小按钮的下拉菜单：.btn-lg、.btn-sm 或 .btn-xs。
向上弹出式菜单
输入框组
-
通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展； -
为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素； -
不支持
-
我们不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）； -
我们不支持在单个输入框组中添加多个表单控件。 <div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
输入框组的大小设置
- 通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。
多选框和单选框
-
可以将多选框或单选框作为额外元素添加到输入框组中。 <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>
</div>
</div>
额外元素的按钮插件
-
当需要在输入框添加一层嵌套时，用 .input-group-btn 类 来包裹按钮元素； <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" placeholder="Search for...">
</div>
</div>
额外元素按钮式下拉菜单
- 在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可
额外元素分裂式按钮下拉菜单
<div class="input-group">
<div class="input-group-btn">
</div>
<input type="text" class="form-control" aria-label="...">
</div>
添加各类样式内容按钮
<div class="input-group">
<div class="input-group-btn">
</div>
<input type="text" class="form-control" aria-label="...">
</div>
导航
- bt中的导航组件都依赖同一个类
.nav ,状态类也是共用的； - 标签页上使用导航需要依赖javascript标签页插件，另外还需添加
role和ARIA属性； - 如果你在使用导航组件实现导航条功能，务必在
<ul> 的最外侧的逻辑父元素上添加 role="navigation" 属性，或者用一个 <nav> 元素包裹整个导航组件； - 不要将 role 属性添加到
<ul> 上，因为这样可以被辅助设备（残疾人用的）上被识别为一个真正的列表。
标签页
胶囊式标签页
垂直式标签页
两端对齐的标签页
禁用的链接
带下拉菜单的标签页
-
以一个带有 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="#">Windows</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">Google</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>
带胶囊式下拉菜单标签页
-
步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills <p>带有下拉菜单的胶囊</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">Google</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>
导航栏
- 导航栏在您的应用或网站中作为导航页头的响应式基础组件；
- 导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开；
默认的导航栏
响应式导航栏
-
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的
中；
-
折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮； -
第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么； -
第二个是 data-target，指示要切换到哪一个元素； -
三个带有 class .icon-bar 的 创建所谓的汉堡按钮。 <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="#">Windows</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>
品牌图标
-
将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。 <nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
导航栏中的表单
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">我的网址</a>
</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>
</nav>
导航栏中的按钮
- 可以使用 class .navbar-btn 向不在 中的 元素添加按钮，按钮在导航栏上垂直居中。
- .navbar-btn 可被使用在 和 元素上；
- 不要在 .navbar-nav 内的 元素上使用 .navbar-btn，因为它不是标准的button class.
导航栏的文本
- 如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与
标签一起使用，确保适当的前导和颜色。
组件对齐方式
-
可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。 <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>
导航栏位置固定
- 固定在顶部：添加
.navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）； - 固定在底部：添加
.navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）； - 静止在顶部：通过添加
.navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）；不用给 body 添加任何内补（padding）。
反色导航栏
- 添加
.navbar-inverse 类可以改变导航条的外观。添加 .navbar-inverse 类可以改变导航条的外观。
路径导航(面包屑导航（Breadcrumbs）)
-
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式； -
Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表； -
分隔符会通过 CSS（bootstrap.min.css）中的 class 自动被添加； <ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ul>
分页
默认分页
禁用和激活状态
尺寸
.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸；
翻页
默认翻页
对齐的链接
翻页状态
标签
-
标签可用于计数、提示或页面上其他的标记显示； -
使用 class .label 来显示标签。 -
如果标签数量过多，解决的办法是为每个标签都设置为 display: inline-block; 属性。 <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"></span>添加到指定位置即可。
超大屏幕
-
顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）； -
创建一个.jumbotron类； -
为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class； <div class="jumbotron">
<div class="container">
<h1>欢迎！</h1>
<p>这是一个超大屏幕的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
哈哈</a>
</p>
</div>
</div>
页面标题
缩略图
- 在图像周围添加带有 class .thumbnail 的 标签；
- 这会添加四个像素的内边距（padding）和一个灰色的边框；
- 当鼠标悬停在图像上时，会动画显示出图像的轮廓。
添加自定义内容
警告框
-
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息； -
添加 .alert类，是必须要设置的； <div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>
可关闭的警告框
-
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮； <div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
成功！很好地完成了提交。
</div>
警告框中的链接
进度条
-
添加一个带有 class .progress 的容器div； -
接着，在上面的容器div内，添加一个带有 class .progress-bar 的空的 容器div； -
添加一个带有百分比表示的宽度的 style 属性，例如 style=“width: 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>
带提示的进度条
- 将设置了
.sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来。
交替进度条
- 添加一个带有 class .progress 的 容器div；
- 接着，在上面的
内，添加一个带有 class
.progress-bar 和 class
progress-bar-* 的空的
。其中，* 可以是
success、info、warning、danger；
- 添加一个带有百分比表示的宽度的 style 属性，例如 style=“60%”; 表示进度条在 60% 的位置。
条纹进度条
- 添加一个带有 class .progress 和 .progress-striped 的容器div；
- 接着，在上面的容器div内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的容器div。其中，* 可以是 success、info、warning、danger；
- 添加一个带有百分比表示的宽度的 style 属性，例如 style=“60%”; 表示进度条在 60% 的位置。
动画效果
- 为
.progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。
堆叠效果
- 把多个进度条放在相同的 .progress 中即可实现堆叠。
多媒体对象
-
在容器div元素上添加 .media 类来创建一个多媒体对象； -
使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐； -
文本内容放在 class="media-body" 的 div 中，图片左对齐则放在 class="media-body" 之前，图片右对齐则放在 class="media-body" 之后； -
此外，你还可以使用 .media-heading 类来设置标题； -
一个多媒体对象内还可以包含多个多媒体对象。 <div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="" alt="">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
</div>
</div>
列表组
- 列表组件用于以列表形式呈现复杂的和自定义的内容；
- 向元素 ul 添加 class .list-group；
- 向 li 添加 class .list-group-item。
面板（panels）
面板标题
- 使用 .panel-heading class 可以很简单地向面板添加标题容器；
- 使用带有 .panel-title class 的 h1-h6 来添加预定义样式的标题。
面板脚注
- 在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 容器div中即可；
带色彩语境的面板
- 使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，设置带语境色彩的面板；
带表格的面板
- 为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。
- 假设有个容器div包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的
，则组件会无中断地从面板头部移动到表格。
带列表组的面板
-
在面板盒子中添加 ul 带有list-group和 li 带有 list-group-item 即可； <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">1</li>
<li class="list-group-item">2</li>
<li class="list-group-item">3</li>
<li class="list-group-item">4</li>
<li class="list-group-item">5</li>
</ul>
</div>
Well
- Well 是一种会引起内容凹陷显示或插图效果的容器 div;
- 为了创建 Well，只需要简单地把内容放在带有 class .well 的容器div 中即可;
尺寸大小
-
您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小； -
这两个类是与 .well 类结合使用的。这两个类会影响内边距（padding），根据使用的类，Well 会显示得更大或者更小。 <div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>
模态框（modal.js）
- 以弹出对话框的形式出现，具有最小和最实用的功能集；
- 千万不要在一个模态框上重叠另一个模态框，要想同时支持多个模态框，需要自己写额外的代码来实现；
静态实例
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</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>
动态实例
-
使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮； -
如果您仔细查看上面的代码，您会发现在 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载； -
.modal，用来把
的内容识别为模态框；
-
.fade class。当模态框被切换时，它会引起内容淡入淡出； -
aria-labelledby=“myModalLabel”，该属性引用模态框的标题； -
属性 aria-hidden=“true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）； -
class=“modal-header”，modal-header 是为模态窗口的头部定义样式的类； -
class=“close”，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式； -
data-dismiss=“modal”，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口； -
class=“modal-body”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式； -
class=“modal-footer”，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式； -
data-toggle=“modal”，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口； -
模态框提供了可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现； -
如果你不需要模态框弹出时的动画效果（淡入淡出效果），删掉 .fade 类即可。 <h2>创建模态框（Modal）</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
</div>
</div>
下拉菜单（dropdown.js）
- 向链接或按钮添加 data-toggle=“dropdown” 来切换下拉菜单；
- 可在标签页内也可以在标签页外。
<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="#">Windows</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>
滚动监听（Scrollspy.js）
-
自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标； -
随着您的滚动，基于滚动条的位置向导航栏添加 .active class； -
添加监听元素，data-spy=“scroll”； <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<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 bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#ios">iOS</a></li>
<li><a href="#svn">Windows</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="navbarDrop1">
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
<li><a href="#ejb" tabindex="-1">ejb</a></li>
<li class="divider"></li>
<li><a href="#spring" tabindex="-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<h4 id="ios">iOS</h4>
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。
</p>
<h4 id="svn">SVN</h4>
<p>Windows公司是......
</p>
<h4 id="jmeter">jMeter</h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
</p>
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
<h4 id="spring">Spring</h4>
<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
</p>
<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
</p>
</div>
标签页（tab.js）
-
添加 data-toggle=“tab” 或 data-toggle=“pill” 到锚文本链接中； -
与前面的 “导航” 相似。 <ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
我的网址
</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>哈哈哈</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
提示工具（Tooltip.js）
-
提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面； -
如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=“tooltip” 即可; -
提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）; <a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
弹出框（popover.js）
-
弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图; -
如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle=“popover” 即可; -
锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部; -
弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）; <script>
$(function(){ $("[data-toggle='tooltip']").popover();});
</script>
警告框（alert.js）
按钮（button.js）
- 通过添加
data-loading-text="Loading..." 可以为按钮设置正在加载的状态; - 如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle=“button” 作为其属性即可;
- 创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加复选框组的切换;
- 创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle=“buttons” 来添加单选按钮组的切换;
折叠（Collapse.js）
-
data-toggle=“collapse” 添加到您想要展开或折叠的组件的链接上。 -
href 或 data-target 属性添加到父组件，它的值是子组件的 id。 -
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。 -
向元素添加 data-toggle=“collapse” 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。 为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。 <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">
点击我进行展开，再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Hello World！
</div>
</div>
</div>
</div>
轮播（carousel.js）
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="" alt="First slide">
</div>
<div class="item">
<img src="" alt="Second slide">
</div>
<div class="item">
<img src="" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
- 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置；
- 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=“2” 将把滑块移动到一个特定的索引，索引从 0 开始计数；
- data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放；
- 通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。
附加导航（affix.js）
- 附加导航（Affix）插件允许指定 div 固定在页面的某个位置;
- 一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 div 会锁定在某个位置，不会随着页面其他部分一起滚动。
- 通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy=“affix” 即可。请使用偏移来定义何时切换元素的锁定和移动。
表单验证（BootstrapValidator）
-
引入插件文件 <link rel="stylesheet" type="text/css" href=".lib/css/bootstrapValidator.min.css">
<script type="text/javascript" src=".lib/js/bootstrapValidator.min.js"></script>
-
代码内容(案例) <div class="login">
<form id="form" action="" >
<h3>Login in</h3>
<div class="form-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" placeholder="请输入账号" name="username">
</div>
<div class="form-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" placeholder="请输入密码" name="password">
</div>
<div class="form-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="text" id="checkCodeYZM" name="checkCodeYZM" placeholder="验证码" class="form-control">
<div class="code" class="form-control">
<canvas id="canvas" width="100" height="36"></canvas>
</div>
</div>
<p class="radios">
<input type="radio" name="power" value="3">辅导员
<input type="radio" name="power" value="2">教师
<input type="radio" name="power" value="1">学生
</p>
<button type="submit" class="btn btn-info btn-block">登录</button>
<p class="lang">
<span class="lang-i"><a href="pass.html">注册新帐号</a></span>
<span class="lang-m"><a href="">忘记密码</a></span>
</p>
</form>
</div>
$(document).ready(function () {
$('#form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
type:'POST',
url:'',
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 2,
max: 10,
message: '用户名必须大于2位且不得超过10位字符'
},
}
},
password: {
message: '密码验证失败',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 8,
max: 20,
message: '密码必须大于8位且不得超过20位字符'
},
regexp:{
regexp:/^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){5,19}$/,
message:'密码必须以字母开头'
}
}
},
checkCodeYZM: {
message: '验证码验证失败',
validators: {
notEmpty: {
message: '验证码不能为空'
}
}
}
}
});
图标库(font-awesome)
|