## Bootstrap V3 CSS
### Bootstrap V3 样式
1.概览
```html
```
移动设备优先 viewport
布局容器 container
2.栅格系统
```html
```
响应式列重置 clearfix
列偏移 offset
嵌套列 row>row
列排序 push/pull
3.排版
标题 h1/.h1
页面主体 p
中心内容 p.lead
内联文本元素 span>mark
被删除的文本 span>del
无用文本 span>s
插入文本 span>ins
带下划线的文本 span>u
小号文本 span>small
着重 span>strong
斜体 span>em
高亮单词 span>b
用于发言、技术词汇 span>i
对齐 text-left/text-center/text-justify/text-nowrap
改变大小写 text-lowercase/text-uppercase/text-capitalize
缩略语 span>abbr
首字母缩略语 span>abbr.initialism&title='....'
地址 address>strong=br=abbr
引用 blockquote.blockquote-reverse>p=footer>cite
列表 ur/ol.list-unstyled/.list-inline>li
描述列表 dl.dl-horizontal>dt=dd
4.代码
code/kbd/pre/var/samp
5.表格
div.table-responsive>table.talbe.table-striped/.table-bordered/.table-hover/.table-condensed
6.表单
form.form-inline/.form-horizontal>fieldset.disabled>div.form-group.form-group-lg.has-success.has-feedback>label.sr-only=input.form-control.input-lg=span.glyphicon.glyphicon-ok.form-control-feedback
text/textarea#rows/checkbox>label.checkbox-inline>input.checkbox/select^multiple.form-control>option/.form-control-static/disabled/readonly
7.按钮
a.btn.btn-default&role=button/button.btn.btn-default/input.btn.btn-default.btn-lg.btn-block.active&disabled=disabled
8.图片
img.img-responsive.img-rounded/.img-circle/.img-thumbnail
9.辅助类
文本字体/背景 p.bg-primary/.text-muted
关闭 button.close
三角 span.caret
快速浮动 pull-left、pull-right
让内容块居中 div.center-block
清除浮动 div.clearfix
显示或隐藏内容 div.show/.hidden
屏幕阅读器和键盘导航 a.sr-only.sr-only-focusable
图片替换 h1.text-hide
10.响应工具
.visible-xs-block(inline/inline-block)/.hidden-xs/.visible-print-block(inline/inline-block)
### Bootstrap V3 组件
1.字体图标
.glyphicon.glyphicon-search
2.下拉菜单
.dropdown/.dropup>.btn.btn-default.dropdown-toggle&data-toggle.dropdown=dropdown-menu(.dropdown-menu-right)>.dropdown-header/.divider/.disabled
3.按钮组
.btn-toolbar&role=toolbar>.btn-group.btn-group-lg/.btn-group-vertical.btn-group-justified&role=group>.btn.btn-default
4.按钮式下拉菜单
.btn-group.dropup>.btn.btn-default.btn-lg.dropdown-toggle&data-toggle=dropdown>.caret=.dropdown-menu>.divider
5.输入框组
.input-group.input-group-lg>.input-group-addon&.form-control&.input-group-addon>text/checkbox/button
.input-group>.input-group-btn>.btn.btn-defaullt.dropdown-toggle&data-toggle=dropdown=.dropdown-menu>.divider=.form-control
6.导航
ul.nav.nav-tabs/.nav-pills.nav-stacked/.nav-justified>li.active/.disabled=.dropdown>.dropdown-toggle&data-toggle=dropdown=.dropdown-menu>.divider
7.导航条
nav.navbar.navbar-default/.navbar-inverse.navbar-fixed-top/.navbar-static-top>.container-fluid>.navbar-header.navbar-brand=.collapse.navbar-collapse>ul.nav.navbar-nav>li.active/.dropdown=.navbar-form.navbar-left>.form-group>.form-control=.btn.btn-default
8.路径导航
ol.breadcrumb>li.active
9.分页
nav>ul.pagination.pagination-lg>li.active/.disabled
10.翻页
nav>ul.pager>li.previous/.next
11.标签
span.label.label-default
12.微章
a>span.badge
13.巨幕
div.jumbotron>.container/>h1>=p>a.btn.btn-primary.btn-lg
14.页头
div.page-header>h1>small
15.缩略图
div.row>div.col-sm-6>.thumbnail>img=div.caption>h3=p
16.警告框
div.alert.alert-success.alert-dismissible&role=alert>button.close/.alert-link&data-dismiss=alert
17.进度条
div.progress>div.progress-bar/.progress-bar-success/.progress-bar-striped/.active&role=progressbar&style='min-width: 2em; width: 2%;'>2%
18.媒体对象
ul.media-list>li.media>div.media-left>media-object=div.media-body>h4.media-heading
19.列表组
ul.list-group>li.list-group-item.list-group-item-success>h4.list-group-item-heading=p.list-group-item-text
20.面板
div.panel.panel-default>div.panel-heading>h3.panel-title=div.panel-body=table/list-group=div.panel-footer
21.响应特性嵌入式内容
div.embed-responsive.embed-responsive-16by9>iframe.embed-responsive-item&src="....."
22.Well
div.well.well-lg
## Bootstrap V3 JS
1.过渡效果 transition.js
2.模态框 modal.js
```html
Open modal for @mdo
```
```js
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
```
3.下拉菜单 dropdown.js
```html
```
```js
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
```
4.滚动监听 scrollspy.js
```html
...
...
```
```js
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
```
5.标签 tab.js
```html
```
```js
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})
```
6.工具提示 tooltip.js
```html
Tooltip on left
Tooltip on top
Tooltip on bottom
Tooltip on right
```
7.弹出框 popover.js
```html
可消失的弹出框
Popover on 左侧
Popover on 顶部
```
8.警告信息 alert.js
```html
×
```
9.按钮 button.js
```html
Loading state
```
10.折叠 collapse.js
```html
Link with href
Button with data-target
```
11.轮播 carousel.js
12.自动定位浮标 affix.js