bootstrap笔记总结.doc

Bootstrap知识总结BaseCSS1、布局(栅格系统)固定居中使用class=”container”,流体布局使用class=”container-fluid”,默认940px,可定制(本页面设置为1170px)2、默认设置BODY:全局默认font-size:14px,line-height:20px,p默认底边距10px(也就是上下居中,margin-bottom:10px)在段落中醒目效果使用class=”lead”,小号字用<small></small>,加粗使用<strong></strong>斜体使用<em></em>字体颜色class=”muted”class=”text-waring’”class=”text-error”class=”text-info”class=”text-ess”其他鼠标提示信息鼠标放上去试试<abbrtitle=””class=”initialism”></abbr>title是提示消息,class=’initialism’是”鼠标放上去试试”的字体略小引用-blockquote<citetitle=”sourceTitle”></cite><class=”pull-left”>左浮动,<class=”pull-right”>右浮动,<class=”muted”>字体颜色为#999999,<class=”clear-fix”>清除浮动ul或ol中不需要样式的时候class=”unstyle” =”dl-horiziontal”<pre>可以多选显示,增加class=”pre-scrollable”设置max-height:300px;超出会增加滚动条3、表格默认样式:class=”table”,隔行变色:class=”table-striped”,增加边框:class=”table-bordered”鼠标悬浮变色:class=”table-hover”表格中的tbody设置row颜色:class=”esserrorwarninginfo”4、表单Legendplaceholder=””为默认值,class=”help-block”说明搜索框默认样式:class=”form-search”,输入框长度:class=”input-large”,输入样式:class=”search-query”表单内联布局所有左边对齐:<formclass=”form-inline”></form>水平对齐(Horizontal)首先添加<formclass=”form-horizontal”></form>,labelsandcontrols添加<divclass=”control-group”></div>,每个<lableclass=”control-label”></label>,每个标签控件添加<divclass=”controls”><input></div>Checkboxesandradioscheckbox为class=”checkbox”,radio为class=”radio”tips:radio必须添加的name=”optionRadios”表单扩展class=”input-prepend”class=”add-on”class=”input-append”class=”input-append”Tips:设置ID,重写dropdown-menu的min-width#drop--menu{min-width:75px;}class=”input-block-level”只针对textarea和inputclass=”controls-rows”自动调整class之间的间距tips:class=’form-actions’放置在class=’form-horizontal’里,按钮会自动缩进在一个水平线上。Tips:只需要在input里添加disabled,即<inputtype=”button”class=””value=””disabled>按钮tips:class=’btn-group’,class=’btn-toolbar’也可以作用于radio和checkbox但是不显示值class=’btn-group’class=’btn-toolbar’整行显示ImagesJavaScript概述开关$(‘body’).off(‘’.data-api’);//设置$