bootstrap笔记小结.doc

Bootstrap知识总结 BaseCSS 1、布局（栅格系统） 固定居中使用 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” 其他 鼠标提示信息 鼠标放上去试试 abbr title=”” class=”initialism”/abbr title 是提示消息，class=’initialism’ 是”鼠标放上去试试”的字体略小 引用-blockquote cite title=”source Title”/cite class=”pull-left” 左浮动，class=”pull-right”右浮动， class=”muted” 字体颜色为#999999，class=”clear-fix” 清除浮动 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” pre 可以多选显示，增加 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、表单 Legend placeholder=”” 为默认值，class=”help-block” 说明 搜索框 默认样式：class=”form-search”，输入框长度：class=”input-large”，输入样式：class=”search-query” 表单内联布局 所有左边对齐：form class=”form-inline”/form 水平对齐（Horizontal） 首先添加form class=”form-horizontal”/form，labels and controls添加div class=”control-group”/div，每个lable class=”control-label”/label，每个标签控件添加div class=”controls”input/div Checkboxes and radios checkbox为 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和input class=”controls-rows” 自动调整class之间的间距 tips：class=’form-actions’ 放置在class=’form-horizontal’ 里，按钮会自动缩进在一个水平线上。 Tips：只需要在input里添加disabled，即input type=”button” class=”” value=”” disabled 按钮 tips:class=’btn-group’，class=’btn-toolbar’ 也可以作用于radio和check