bootstrap中文手册指南解析

1、Bootstrap简易指南看完使用手册后所作的笔记，可以当做简易使用指南使用。1. 框架i.i全局样式使用HTML5的doctype ，scaffolding.less 中定义全局样式，从 2开始使用normalize.css ， 并使用reset.less进行简化1.2默认栅格系统940px宽12列栅格，使用row与spanNUM的class来控制，使用offsetNUM来控制偏移,于non-fluid可以直接嵌套，提供了四种响应式方案1.3流动栅格系统基于百分比，将row改为row-fluid即可使用，内嵌注意宽度是按照父列的百分比进行计算的1.4自定义栅格于variables.css中改

2、变变量，默认列12，宽60px，间隔20px，要保证响应性还得修改respon sive .l ess 中内容1.5布局contain er 为 940px 居中，con tai ner-fluid 则为流体布局1.6响应式设计 respon sive .l ess 中提供了一组 media query 智能手机=480px ;流式列，非固定宽度垂直平板=767px ;流式列，非固定宽度水平平板=768px ; 42px 20px默认=980px ;? ? ?60px ?20px大分辨率=1200px ； 70px 30px要求添力口 meta 标签，有诸如.visible-phone等支持类

3、2. 基础CSS2.1排版整个排版单位基于 variables.less 中 baseFo ntSize 与 baseLi neHeight 两个变量；强调：string加粗，em倾斜，abbr缩写【title属性存放显示信息，.initialism会减小缩略词 字体】，address【使用br换行】引用：blockquote【cite属性存放来源 URL, .pull-left或right决定内容居左右】，small用 于引言作者【会在内容前加入破折号】列表：ul无序号有黑点，ul.unstyled无样式，ol有数字序号，dl描述，dl.dl-horizontal水平描述2.2代码code行

4、级代码，pre块级【 需要转义，.pre-scrollable 可以设置350px最大高度】，应 用.prettyprint 禾口 .linenums 来美化代码【使用 google prettify 】2.3表格 table thead【tr】tbody【tr】tr【td或th】 th【必须在thead之内】 caption ；.table行之间有水平线分割【2.0开始为默认】.table-borderd【边角为圆角】.table-striped奇偶分开【使用：nth-child ie7-8不支持】.table-condensed紧凑竖直方向 padding减半几个可以组合使用2.4表单四种

5、表单：.form-vertical【2.0后默认，控件标签文字左对齐】.form-i nline【左对齐，控件inline-block】.form-search【文本框圆化】.form-horizontal【左浮动，标签与控件居于同 一行且文字右对齐】支持控件：文本输入框，单选，复选，下拉，多选，上传，文本域控件组：.control-group .control-label以及.controls【默认label应该与控件在同一行？】设计了各种控件状态【如 focus， disabled，去除webkit的outline】，包含.error .war ning .success验证样式扩张控件：

6、.spa n*来指定输入框大小，使用.in put-mi ni或small或medium 或big来指定in put 和select控件大小，2.0开始对.checkbox或.radio应用.inline即可实现行级，用 label.checkbox 包含in puttype=checkbox即可罗列，前置或后置文本保证.add-o n与in put在同行,.help-inline与.help-block设置帮助文本2.5按钮可以应用到a butt on及input标签上，.btn .bt n-primary .bt n-info等样式【ie9不兼容】，.btn-large small min

7、i等尺寸，.disabled 类或disabled属性可以禁用2.6图标使用.icon-前缀设置，用x显示图标，用.icon-white显示反白图标，图标定义在sprites.less 中3. 组件3.1按钮3.1.1按钮组建议一个组里只用一种元素a或button，使用.btn-group，组合.btn-toolbar包装.btn-group即可合成工具条组件3.1.2按钮下拉菜单下拉菜单也得嵌套在 .btn-group 中，使用 dropdown-toggle 与ul.dropdown-menu 类，支持 Bootstrap下拉插件，箭头使用.caret， .dropdown-menu 最近

8、父标签应用.dropup即可变为 上弹菜单【会改变.caret箭头方向】3.2导航3.2.1默认项基类.nav ,对齐使用.pull-left或.pull-right【依赖float】，标签页ul.nav-tabs，胶囊链接ul. nav-pills3.2.2叠放式导航指竖直叠放ul.nav-stacked3.2.3下拉项综合使用下拉按钮【js下拉项插件】，参考.4导航列表i使用标签，.pider空表项显示为水平间隔，.active选中项，.nav-header列表头3.2.5标签页切换导航用.tabbale的p嵌套.nav-tabs，存放容器为.tab-content，内容页

9、使用.tab-pane，标签置底 用.tabs-below，标签居左.tabs-left，居右.tabs-right3.2.6 导航条固定导航条 div.navbar与.navbar-fixed-top【必须预留40px或更多padding】，导航项ul.nav , li.pider-vertical 分隔条，项目名称a.brand，表单.navbar-form，对 form.navbar-search中输入框使用.search-query得到搜索框，下拉菜单参考3.2.3，导航条文本使用，响应式嵌套在.nav-collapse.collapse并对按钮都应有.btn-navbar【需要js切

10、换插件】3.2.7面包屑导航ul.breadcrumb3.2.8页码div.paginationul ，同样使用.active 与.disabled，页码对齐使用 .pagination-centered或.pagination-right ，前后页 ul.pager 【居于左右端.previous 与 li.next 】3.3行内标签span.label 默认样式，span.label.label-success成功等3.4标号span.badge 默认样式，span.badge.badge-success等3.5排版主角单元div.hero-unit中嵌套，标题 h1，可以嵌入small，

11、3.6缩略项ul.thumbnailsli.span*a.thumbnailimg链接图像，div.thumbnail 块状内容3.7通知 基类 div.alert【2.0 开始替代.alert-message 】，例子：div.alerta.close+strong ，加强.alert-block提供更大的 padding 而.alert-heading 修饰标题，语义强化.alert-error 或success 或info3.8进度条基本 gressdiv.barstyle=width:60%，条纹效果 gress-striped 【动画效果

12、加上.active，使用css3渐变动画，不支持 ie】语义加强.progress-info 或success 等3.9杂项消息墙div.well，关闭图标 a.close4 jQuery 插件4.1 对话框【bootstrap-modal.js 】$().modal(backdrop:true 背景，keyboard:true 支持 ESC,show:true 初始化显示)，触发设置 data-toggle= modal 然后 data-target= #foo 或 href= “foo ”对话框设置div.modal#foo即可：div.modal-headera.closedata-di

13、smiss=modal+div.modal-body+div.modal-footer【显示动画效果 bootstrap-transition.js，对.modal 应用.fade 即可】，方法.modal( toggle ”或.modal( show ”或.modal( hide ”，事件 show,shown,hide,hidden4.2 下拉项【bootstrap-dropdown.js】样式应用导航栏与胶囊链接，方法$().dropdown()，设置data-toggle= dropdown ”【也可以使用data-target= #foo 或href= #foo 来关联下拉项与链接】

14、4.3 滚动侦测【bootstrap-scrollspy.js 】$( navbar ).scrollspy()标记添加data-spy= scroll【导航链接必须有 href= #id 且对应有dom#id】选项offset【默认为10】4.4可切换的标签页【bootstrap-tab.js 】方法 $( #myTab .tab( Show 标签页需要设置 data-target= #id 或 href= #id 标记添力口 data-toggle= tab或 data-toggle= pill”事件show与shown【event.target指向激活标签，event.relatedT

15、arget指向之前激活的标 签】4.5 工具提示【bootstrap-tooltips.js 】$( example .tooltip(options)中选项 animation:true ， placement: top selector， title，trigger: over delay:show:num, hide:100工具提示可以单独设置data-属性实现与js调用同样的功能，指定一个selector即可【设置rel= tooltip ”方法：.tooltip( show #?.tooltip( hide #?.tooltip( toggle #4.6 弹出提示【bootstrap

16、-popover.js 】$( #example #.popover(options) 中选项 animation:true , placement: #op , selector , trigger: hover , title , content , delay同样可以单独设置data-属性，方法也相同4.7 通知消息【bootstrap-alert.js 】$( “alert ”.alert()用在通知，对关闭按钮设置data-dismiss= alert 即可定时关闭 方法 $( .alert ”.alert( close #,事件 close closed应用在 btn 与 btn-

17、group，设置 data-toggle= button 与 data-toggle= button-checkbox 与 data-toggle= button-radio 样式方法 $().button( toggle 按下$().button( l6ading 载入文本 data-loading-text 属性中$().button( reset 重置按钮状态4.9 折叠手风琴【bootstrap-collapse.js 】$().collapse(toggle:false) ，事件 show， shown ， hide， hidden设置 data-toggle= collapse 和 data-target 即可变为折叠式，data-target 接收一个 css 选择器以选取元素添加，元素上需要添加.collapse，默认打开用.in4.10 轮播【bootstrap-carousel.js 】$().carousel(interval:5000, pause:hover )标记用 data-属性提供前后翻页，data-slide= prev 或 next ” 方法.carousel( cycle 或 pause或 number 或 prev 或 next事件 slide , slid4.11 输入提醒【boot