关于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
可关闭的警告框:


警告框中的链接:

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

posted @ 2019-04-13 01:43  zlgSmile  阅读(247)  评论(0)    收藏  举报