Bootstrap学习笔记

一、栅格系统

通过一系列的行(row)与列(column)的组合来创建页面布局，按照不同尺寸屏幕分为1~12份

超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px)
.container最大宽度 自动(100%) 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数(column) 12
  • 按照不同屏幕划分为1~12等份
  • 行(row)可以去除父容器作用12px的边距
  • xs：extra small
  • 列大于12，多余的列所在的元素将被作为一个整体另起一行
  • 每一列默认有左右15px的padding，因此内容互相间隔30px左右
  • 不能再加margin值，否则会挤掉盒子
  • 可以同时为一列指定多个设备的类名，一遍划分不同份数，例如

二、列嵌套

一个列(row)内再分为12等份。可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。

​ 嵌套可以像下面多加一个row，消除父盒子row的padding值，而且高度自动和父级一样高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-3">
/*嵌套可以像下面多加一个row，消除父盒子row的padding值，而且高度自动和父级一样高*/
                <div class="row">
                    <div class="col-md-3">5</div>
                    <div class="col-md-3">6</div>
                    <div class="col-md-3">7</div>
                    <div class="col-md-3">8</div>1
                </div>
            </div>
            <div class="col-lg-1 col-md-3">2</div>
            <div class="col-lg-3 col-md-3">3</div>
            <div class="col-lg-2 col-md-3">4</div>
        </div>
    </div>

三、列偏移

使用.col-md-offset-类将列右偏移，实际上是通过使用选择器为当前元素增加了左侧的边距(margin)。

通过控制自身列宽数和偏移的列宽数，同理也可以实现居中，右对齐

1
2
3
4
5
<div class="row">
    <div class="col-md-3">左侧</div>
		将列从原来位置右偏移6列，效果是将右侧贴着右边
    <div class="col-md-3 col-md-offset-6">右侧</div>
</div>

四、列排序

使用.col-md-push-和.col-md-pull-类就可以很容易地改变列(column)的顺序

  • .col-md-pull- 往左拉x个格子
  • .col-md-push- 往右推x个格子
1
2
3
4
5
<div class="row">
	/*实现了左右侧格子的调换*/
  			<div class="col-lg-3 col-md-3 col-md-push-9">左侧的3格，右移9格</div>
   			<div class="col-lg-9 col-md-9 col-md-pull-3">右侧的9格，左移3格</div>
</div>

五、响应式工具

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏