bootstrap笔记.doc

注:调用bootstrap中的js样式时,。
如:<script src="js/jquery-"></script>
<script src="js/"></script>
1、超小屏幕—手机(<768px) class前缀—— col-xs-
小屏幕—平板(>=768px) class前缀—— col-sm-
中等屏幕—桌面(>=992x) class前缀—— col-md-
大屏幕—桌面(>=1200px) class前缀—— col-lg-
2、 固定宽度:<div class=”container”></div>
100%宽度:<div class=”container-fluid”></div>
3、offset——偏移
语法:col—xs/sm/md/lg—offset—3 ——表示偏移3个栅格
4、push(推)、pull(拉)——推拉属性
语法:col—xs/sm/md/lg—push—6 ——向后推6个栅格
col—xs/sm/md/lg—pull—6 ——向前拉6个栅格
排版:
Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 (即20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。
1、page—header ——加横线
用法:<h1 class=”page-header”>标题</h1>
2、lead——突出文本
用法:<p class=”lead”>bootstrap框架</p>
3、内联元素使用标题字体
用法:<span class=”h1”> bootstrap框架</span>
4、small——作为副标题——在h1~h3下,其大小占父元素的65%
在h4~h6下,其大小占父元素的75%
用法:<h1> bootstrap框架<small>副标题</small></h1>
5、设置文本对齐:text-left/center/right
用法:<p class=”text-center”> bootstrap框架</p>
6、设置英文大小写——小写:<p class=”text-lowercase”> bootstrap框架</p>
大写:<p class=”text-uppercase”> bootstrap框架</p>
首字母大写:<p calss=”text-capitalize”> bootstrap框架</p>
列表: (1)无序列表——<ul> <li></li><li></li><li></li></ul>
(2)有序列表——<ol> <li></li><li></li><li></li></ol>
(3)无样式列表——<ul class=”list-unstyled”> <li></li><li></li><li></li></ul>
(4)内联列表——<ul class=”list-inline”> <li></li><li></li><li></li></ul>
按钮:
可做按钮使