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">×</a>（关闭按钮）
9，图标?
?? ?.icon-user（用户）, .icon-drash（删除）, .icon-refrash(刷新), .icon-cog(齿轮) icon-white(反白)?
10,手风琴?
?? ?.accordion?
?? ??? ?|?
?? ??? ?|->.accordion-group?
?? ??? ?|?? ?|?
?? ??? ?|?? ?|->.accordion-heading?
?? ??? ?|?? ?|?? ?|?
?? ??? ?|?? ?|?? ?|->.accordion-toggle (data-toggle="collapse" href="#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--> href="#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 (style="width:20%")?
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 href="#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(