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(

FireShot Capture 1 - Bootstrap 网格系统 I _ - http___www.runoob.com_bootstrap_bootstrap-grid-system.html.png