关于bootstrap的css组件介绍及总结
Glyphicons 图标:
span.glyphicon glyphicon-align-center
下拉菜单:
div.dropdown/div.btn-group
button[data-toggle=dropdown/.dropdown-toggle]
ul.dropdown-menu
li.dropdown-header
li.disabled
li.divider
按钮工具栏:
div.btn-toolbar
按钮组:
div.btn-group
按钮尺寸:
a.btn-lg
a.btn-sm
div.btn-group-lg
div.btn-group-sm
div.btn-group-xs
垂直排列:
div.btn-group-vertical
按钮组中的下拉菜单:
div.btn-group
button
button
div.btn-group
两端对齐的链接排列:
div.btn-group btn-group-justified
按钮式下拉菜单:
div.btn-group
button.btn btn-primary
button.btn btn-primary
div.btn-group
button.btn btn-pirmary dropdown-toggle[data-toggle=dropdown]
ul.dropdown-menu
向上的下拉菜单:
div.btn-group dropup
button.btn btn-primary
button.btn btn-primary
div.btn-group
button.btn btn-pirmary dropdown-toggle[data-toggle=dropdown]
ul.dropdown-menu
输入框组:
div.input-group
span.input-group-addon
input.form-control[placeholder=username]
输入框组尺寸:lg|sm
div.input-group input-group-lg
span.input-group-addon
input:form-control[placeholder=username]
复选框与单选框:
div.input-group input-group-lg
span.input-group-addon
input:checkbox
input.form-control
附加按钮:
div.input-group input-group-lg
span.input-group-btn
button.btn btn-default
input:form-control
带下拉菜单的按钮:
下拉菜单组这一块不用写.btn-group 类
分段按钮:
下拉菜单按钮组这一块不用写.btn-group 类
标签页:
ul.nav nav-tabs
li.active>a
胶囊式标签页:
ul.nav nav-pills
li.active
堆叠胶囊式标签页:
ul.nav nav-pills nav-stacked
li.active
标签页两端对齐:
ul.nav nav-tabs nav-justified
li.active
禁用的链接:
li.disabled
带下拉菜单的导航:
li.dropdown
a.dropdown-toggle
ul.dropdown-menu
导航条:
.navbar navbar-default
导航条固定顶部:
.navbar-fixed-top
导航条固定顶部:
.navbar-fixed-bottom
导航条反色:
.navbar-inverse
条导航条 ul 元素:
ul.nav navbar-nav
条导航条 form 元素:
form.navbar-form
导航条文本元素:
p.navbar-text
导航条链接元素:
a.navbar-link
导航条按钮元素:
button.navbar-btn
面包屑导航:
ul.breadcrumb
默认分页
ul.pagination
li
分页禁用和激活:
li.active
li.disabled
分页尺寸:
ul.pagination pagination-lg
ul.pagination pagination-sm
上下翻页:
ul.pager
实体总结:
x times
>> raquo
<< laquo
<- larr
-> rarr
上下页两端对齐:
li.previous
li.next
标签:
span.label
标签颜色:
span.label label-default
span.label label-primary
span.label label-success
span.label label-info
span.label label-warning
span.label label-danger
徽章:
span.badge
大屏幕介绍:
div.jumbotron
页面标题:
h1.page-header
缩略图:
a.thumbnail
如果放到图片身上，点击会有放大动画
定制内容:
div.thumbnail
警告框:
div.alert
警告框颜色:
div.alert alert-success
div.alert alert-info
div.alert alert-warning
div.alert alert-danger
可关闭的警告框:
<button class='close' data-dismiss='alert'>x</button>
警告框中的链接:
a.alert-link
进度条:
div.progress
div.progress-bar[style='width:60%']
进度条颜色:
div.progress-bar-success
div.progress-bar-info
div.progress-bar-warning
div.progress-bar-danger
条纹进度条:
div.progress progress-striped
激活进度条:
div.progress progress-striped active
媒体列表:
div.media
div.media-body
h1.media-heading
p
嵌套一份
div.media
div.media-body
h1.media-heading
p
列表组:
ul.list-group
li.list-group-item
链接列表:
div.list-group
a.list-group-item active
面版:
div.panel panel-default
div.panel-heading
div.panel-body
div.panel-footer
面版主题:
div.panel panel-default
div.panel panel-primary
div.panel panel-success
div.panel panel-info
div.panel panel-warning
div.panel panel-danger
well 墙:
div.well
well 尺寸:
div.well well-lg
div.well well-sm
