1.概览
<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<body>
<div class="container"></div>
</body>
</html>移动设备优先 viewport 布局容器 container
2.栅格系统
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-md-1</div>
<div class="clearfix visible-xs-block"></div>
...
</div>
</div>响应式列重置 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)
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
1.过渡效果 transition.js
2.模态框 modal.js
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>$('#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
<div class="dropdown">
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})4.滚动监听 scrollspy.js
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})5.标签 tab.js
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})6.工具提示 tooltip.js
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>7.弹出框 popover.js
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 左侧
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on 顶部
</button>8.警告信息 alert.js
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>9.按钮 button.js
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
Loading state
</button>
<script>
$('#myButton').on('click', function () {
var $btn = $(this).button('loading')
// business logic...
$btn.button('reset')
})
</script>10.折叠 collapse.js
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>11.轮播 carousel.js
12.自动定位浮标 affix.js