Bootstrap常用知识点总结（一）

1  网格系统（Grid System）

　　Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

　　响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

　　行必须放置在 .container class 内，在行内创建列水平组。

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

　　1.1 栅格选项

　　Bootstrap 网格系统如何跨多个设备工作：

　　.clo-xs-* (超小设备手机 <768px)             .col-sm-* (小型设备平板和电脑>=768px)

　　.clo-md-* (中型设备台式电脑>=768px)             .col-sm-* (大型设备台式电脑>=768px)

　　1.2 响应式列重置： .clearfix class和 响应式实用工具来解决。

　　1.3 列偏移：  .col-md-offset-*

　　1.4 嵌套列：

<div class="container">
    <div class="row">
        <div class="col-*-*">
            <div class="row">
                <div class="col-*-*"></div>      
            </div>
        </div>     
    </div>
</div>  

　　1.5 列排序：

　　.col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序（从左到右用push  从右往左用pull）

2 排版

　　标题：h1-h6（36px，30px，24px，18px，14px，12px）

　　.lead：使段落突出显示

　　.small：设置文字字体大小（父元素的85%）

　　.text-left　　.text-center　　.text-right

　　.text-justify：设定文本对齐,段落中超出屏幕部分文字自动换行

　　.text-nowrap：段落中超出屏幕部分不换行

　　.text-lowercase（文本小写）　　.text-uppercase（文本大写）　　.text-capitalize（单词首字母大写）     针对英文字母

　　.blockquote-reverse（设定引用右对齐）

　　.list-unstyled（移除默认的列表样式，列表项中左对齐 ）　　.list-inline（将所有列表项放置同一行）

　　.dl-horizontal：该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，使dt元素右对齐，dd元素左对齐

　　.pre-scrollable：使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

　　

　　　　　　　　

转载于:https://www.cnblogs.com/ALOT/p/7889006.html