bootstrap笔记总结

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-success”其他鼠标提示信息鼠标放上去试试abbrtitle=””class=”initialism”/abbrtitle是提示消息，class=’initialism’是”鼠标放上去试试”的字体略小引用-blockquotecitetitle=”sourceTitle”/citeclass=”pull-left”左浮动，class=”pull-right”右浮动，class=”muted”字体颜色为#999999，class=”clear-fix”清除浮动ul或ol中不需要样式的时候class=”unstyle”DescriptionlistsAdescriptionlistisperfectfordefiningterms.EuismodVestibulumidligulaportafeliseuismodsemperegetlaciniaodiosemnecelit.以上dl使用水平描述class=”dl-horiziontal”pre可以多选显示，增加class=”pre-scrollable”设置max-height:300px;超出会增加滚动条3、表格默认样式：class=”table”，隔行变色：class=”table-striped”，增加边框：class=”table-bordered”鼠标悬浮变色：class=”table-hover”表格中的tbody设置row颜色：class=”successerrorwarninginfo”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/divCheckboxesandradioscheckbox为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-width.dropdown-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’整行显示ImagesJavaScript1、概述开关$(‘body’).off(‘’.data-api’);//设置$(‘.data-api’)关闭$(‘body’).off(‘.alert.data-api’);编程API$(‘#myModal’).modal();//初始化默认设置$(‘#myModal’).modal({keyboard:false});//键值设置$(‘#myModal’).modal(‘show’);//初始化，立即调用show插件调试$.fn.popover.Constructor();//查看插件的构造函数$(‘[rel=popover]’).data(‘popover’);//查看插件的特定元素自定义事件$(‘#myModal’).on(‘show’,function(){If(!data)returne.preventDefault();//stopsmodalfrombeginshown});以上一个动词和去过去式，比如：’show’是触发一个事件开发，’shown’是触发一个事件的结束。每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能。过滤bootstrap-transition.jstips:在实现模糊滑动或褪色、淡出标签、淡出警示、滑动旋转木马窗格等效果时需要加载bootstrap-transition.jsModalbootstrap-modal.jsTIPS:默认位置是在顶部class=’modal’包含class=’modal-header’和class=’modal-body’和class=’modal-footer’用法首先在一个控制元素（比如：按钮）设置data-toggle=’modal’和data-target=’#foo’或者href=’#foo’确定要打开的。在js里设置：$(‘#myModal’).modal(options);