bootstrap总结
bootstrap总结
base css 我分为了几大类
1，列表
.unstyled(无样式列表),.dl-horizontal（dl列表水平排列）
2，代码
code（行级）,pre（块级），.pre-scrollable(显示滚动条), 显示行号和美化： .prettyprint,.linenums
3，表格
.table(基础样式) .table-bordered(样式边框) , .table-striped(间隔效果) , .table-condensed(缩小表格)
4，表单
.from-inline(所有元素在一列) , .form-horizontal（没一横排一个表单项）
.form-horizontal -->需要结合组件：
fieldset.control-group
|
|-->label.control-label
|
|-->.controls
5，按钮
.btn(基础样式) , .btn-primary(重要，蓝色) , .btn-info(信息，浅蓝), .btn-success(成功，绿色)， .btn-warning(警告,黄色) .btn-danger(危险，红色) , .btn-inverse（相反，黑色)
6，标签
.label(基础样式), .label-important(重要，红色) ， .label-success(成功， 蓝色), .label-warning(警告,黄色), .label-info(信息，浅蓝色) .label-inverse(相反，黑色)
7，标记
.badge(基础样式), .badge-success(成功，绿色), .badge-warning(警告，黄色)，badge-error(错误，红色)， .badge-info(信息，浅蓝色)
8，警告
.alert(基础样式), .alert-success(成功，绿色), .alert-error(错误，红色), .alert-info(信息，蓝色) , .alert-block（获得更多的padding）, 里面可以 .alert-heading（标题） ， <a class="close" data-dismiss="alert"$amp;>amp;$amp;times;</a>（关闭按钮）
9，图标
.icon-user（用户）, .icon-drash（删除）, .icon-refrash(刷新), .icon-cog(齿轮) icon-white(反白)
10,手风琴
.accordion
|
|->.accordion-group
| |
| |->.accordion-heading
| | |
| | |->.accordion-toggle (data-toggle="collapse" #demo1" data-parent="#accordion2")
| |
| |->accordion-body
| | |
| | |->accordion-inner
组件。
1，导航
.navbar (.navbar-fixed-top|.navbar-fixed-bottom)
|
|-->.navbar-inner
|
|->container
|
|->brand (项目名)
|
|->ul.nav (菜单)
| |
| |->li.divider-vertical 竖分割线
|
|->form.navbar-form(搜索框)
| |
| |->search-query
|
|->.dropdown (下拉菜单)
|
|->pull-right(使元素有右浮动)
2，面包屑
ul.breadcrumb
|
|->li
|
|->a
|
|->span.divider(分割线<span class="divider">/</div>)
3，排版
(1) 主角元素
.hero-unit
|
|->h1(主标题)
|
|->p（副内容）
(2) 页面标题，有下边框
.page-header
|
|->h1
|->small
4，tab页
div.tabbable (tabs-below|tabs-left|tabs-bottom)
|
|->ul.nav (nav-tabs|nav-pills|nav-list) nav-stracked(竖立折叠式)
| |
| |->li.active
| | |
| | |->a--> #id", data-toggle="tab"
| |
| |->li.nav-header (nav-list时用，表示一个菜单头)
| |
| |->li.divider（nav-list时用，分割线）
| |
| |->li.dropdown
|
|->tab-content
| |
| |->div#id .tab-pane (active)
5，缩略列表
ul.thumbnails
|
|->li.span*
|
|->.thumbnail
|
|->(.caption) 详情描述
6，按钮组
.btn-toolbar
|
|->.btn-group
|
|->.btn
7，下拉菜单
.btn-group | .dropdown |.dropup
|
|->.btn .dropdown-toggle (data-toggle="dropdown")
| |
| |->span.caret
|
|->ul.dropdown-menu
|
|->li.divider
8，进度条
.progress (.progress-striped| .actvie)
|
|->.bar ()
9，页码
.pagination (.pagination-centered|.paginaction-right)
|
|->ul
|
|->li(.active)
javascript：
1，对话框
（1）对话框组件：
.modal (设置宽度)
|
|->.modal-header
| |
| |->.close (data-dismiss="modal") [注，.close必须放在前面]
| |
| |->h3
|
|->.modal-body
|
|->.modal-footer
| |
| |->.btn
(2)标记触发
<a #mymodal" data-toggle="modal" data-backdrop="false" data-keyboard="false">打开对话框</a>
(3)javascript
a)初始化：
$("#mymodal").modal({
dropback:true,
keyboard:true,
show:true
});
b) 触发
$("#mymodal").modal(