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”，小号字用 ，加粗使用 斜体使用 字体颜色class=”muted” class=”text-waring”class=”text-error” class=”text-info”class=”text-success” 其他鼠标提示信息鼠标放上去试试 title 是提示消息，class=initialism 是”鼠标放上去试试”的字体略小引用-blockquote 左浮动，右浮动， 字体颜色为#999999， 清除浮动ul或ol 中不需要样式的时候 class=”unstyle”Description lists A description list is perfect for defining terms. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.以上dl 使用水平描述 class=”dl-horiziontal” 可以多选显示，增加 class=”pre-scrollable” 设置max-height:300px; 超出会增加滚动条3、表格默认样式：class=”table”，隔行变色：class=”table-striped”，增加边框：class=”table-bordered”鼠标悬浮变色：class=”table-hover” 表格中的tbody设置row颜色：class=”success error warning info”4、表单Legendplaceholder=” 为默认值，class=”help-block” 说明搜索框默认样式：class=”form-search”，输入框长度：class=”input-large”，输入样式：class=”search-query”表单内联布局所有左边对齐：水平对齐（Horizontal）首先添加，labels and controls添加，每个，每个标签控件添加Checkboxes and radioscheckbox为 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-menumin-width:75px;class=”input-block-level” 只针对textarea和inputclass=”controls-rows” 自动调整class之间的间距tips：class=form-actions 放置在class=form-horizontal 里，按钮会自动缩进在一个水平线上。Tips：只需要在input里添加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) return e.preventDefault(); /stops modal from begin shown);以上一个动词和去过去式，比如：show是触发一个事件开发，shown是触发一个事件的结束。每个工具提示都可以单独通过设置data-属性以实现与javascript调用同样的功能。过滤 bootstrap-transition.jstips:在实现模糊滑动或褪色、淡出标签、淡出警示、滑动旋转木马窗格等效果时需要加载bootstrap-transition.jsModal bootstrap-modal.jsTIPS:默认位置是在顶部class=modal 包含class=modal-header 和 class=modal-body 和class=mod