bootstrap笔记总结

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”
c lass=”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和checkbox但是不显示值class=’btn-group’
class=’btn-toolbar’整行显示
Images
JavaScript
1、概述
开关
$(‘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.js
tips:在实现模糊滑动或褪色、淡出标签、淡出警示、滑动旋转木马窗格等效果时需要加载bootstrap-transition.js
Modal bootstrap-modal.js
TIPS:默认位置是在顶部
class=’modal’包含class=’modal-header’和class=’modal-body’和class=’modal-footer’
用法
首先在一个控制元素（比如：按钮）设置data-toggle=’modal’和data-target=’#foo’或者href=’#foo’确定要打开的。

在js里设置：
$(‘#myModal’).modal(options);。