Bootstrap学习笔记--网格基础-阿里云开发者社区

bootstrap3是移动优先的所以是从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格

Bootstrap的网格系统允许在页面上多达12列。

如果您不想单独使用全部12列，则可以将列组合在一起以创建更宽的列

bootstrap的网格系统具有响应性，并且列根据屏幕大小自动重新排列

网格：
这里写图片描述

基本结构：

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

要求：

行必须放在容器class内 以便获得适当的对齐（alignment）和内边距（padding）
使用行创建列的水平组
内容放在列中
使用预定义的网格类比如.row代表行如创建一个行（<div class="row">）

然后，添加所需数量的列（具有适当.col-*-*类的标签）。请注意，.col-*-*每行中的数字总是应该总计为12。

例如，要创建三个相等的列，则使用三个.col-xs-4。其中的xs参考下面的四个类 xs是手机格式

Bootstrap网格系统有四个类：

- xs（手机）

- sm（用于平板电脑）

- md（用于桌面）

- LG（适用于较大的桌面）

举个栗子：

以下示例显示如何从平板电脑开始获取三个等宽列，并扩展到大型桌面。
开始堆叠在手机/平板电脑（小型设备）上，然后在桌面（中型/大型设备）上变为水平

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>
</body>
</html>

效果图如下：

桌面（中型/大型设备）范围大小大于等于sm：
这里写图片描述

小型设备如手机范围大小低于sm：
这里写图片描述

如果列不相等怎么办？

直接看代码和效果图实在实践出真知嘛

将上述栗子代码替换：

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

效果图如下：

桌面（中型/大型设备）范围大小大于等于sm：
这里写图片描述

小型设备如手机范围大小低于sm：
这里写图片描述

col指定了屏幕范围大小（xs，sm，md，lg ）和

比例类型（6，6或者4，8）那么向上扩展和本身比例相等向下扩展就是层叠

具体的下面会用实例解释

还有一种比较常用：

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

实现效果：
在小规模的情况下，使用-sm-来查看类并使用它们。在中等大小的情况下，使用-md-来查看类并使用它们。
以下示例将导致小型设备上的25％/ 75％分裂以及中型（和大型）设备上的50％/ 50％分裂。在特小设备上(xs)，它会自动堆叠
等于说根据屏幕的大小可以分为三种状态
1. 特小设备(xs)：堆叠
2. 小型设备(sm)：1：3
3. 中型或者大型(md或者lg)：1：1

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

</body>
</html>

电脑测试：
特小设备(xs)：
这里写图片描述
小型设备(sm)：

中型或者大型(md或者lg)：

以此类推也可以这么使用：
实现效果：
小型设备上的25％/ 75％分割，中型设备上的50％/ 50％分割以及大型设备上的33％/ 66％分割而特小设备（xs）就是层叠

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

再来看一下这种情况：

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-lg-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

结果就是：我们只指定了.col-lg-6类（没有.col-md-和/或.col-sm-）。这意味着大型设备将分成50％/ 50％。但是，对于中型和小型设备，它将垂直叠加（宽度为100％）

对应上文提到的：

col指定了屏幕范围大小（xs，sm，md，lg ）和

比例类型（6，6或者4，8）那么向上扩展和本身比例相等向下扩展就是层叠

举个栗子：
在中型以及大型设备以上（md以上）为1：1状态小型（md以下）直接就是层叠虽然它没指定但是默认了

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-md-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-md-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

**总结：**
在小尺寸下，看看带有-sm的类并使用它们。在中等尺寸的情况下，看看带有-md-的类并使用它们。在大尺寸下，看看类中带有“lg-”的词并使用它们
重点：如果在指定尺寸里没有找到对应的类的话就向前应用比如
lg窗体大小结果没有lg类那么就应用最近前面的类有md和sm和xs 应用md
没有才考虑sm
嵌套列：

<div class="container-fluid">
<div class="row">
  <div class="col-lg-8">
    <div class="row">
      <div class="col-lg-6">.col-sm-61</div>
      <div class="col-lg-6">.col-sm-62</div>
    </div>
  </div>
  <div class="col-lg-4">.col-sm-4</div>
</div>

大型设备：
这里写图片描述
大型设备以下：

还是遵循这个原则：
在小尺寸下，看看带有-sm的类并使用它们。在中等尺寸的情况下，看看带有-md-的类并使用它们。在大尺寸下，看看类中带有“lg-”的词并使用它们
尺寸是根据窗体大小来而排列的比例位置是根据父类来的即嵌套列的父类是外层的列层叠的话也是在那个列里面层叠

注意：
请记住，网格列应该为一行添加多达十二个。除此之外，无论视口如何，列都会堆叠起来。

<div class="row">
  <div class="col-xs-6 col-md-4">第一列</div>
  <div class="col-xs-6 col-md-4">第二列</div>
  <div class="col-xs-6 col-md-4">第三列</div>
</div>

当屏幕是lg时则为1：1：1状态在一行：
这里写图片描述
当屏幕是md时则为1：1：1状态在一行：

*当屏幕是sm或者xs时则第一列第二列在一行 1：1 第三列层叠在第一行下面

运用到了关键的2点：
1. 网格列应该为一行添加多达十二个。除此之外，无论视口如何，列都会堆叠起来。 参考上面第三张图
2. 在小尺寸下，看看带有-sm的类并使用它们。在中等尺寸的情况下，看看带有-md-的类并使用它们。在大尺寸下，看看类中带有“lg-”的词并使用它们 参考上面第一张图
如果在指定尺寸里没有找到对应的类的话就向前应用比如
lg窗体大小结果没有lg类那么就应用最近前面的类有md和sm和xs 应用md
参考上面第二张图

.clearfix这个类

.clearfix在特定的断点处清除浮动（与类），以防止包装不均匀的奇怪包装：

  <div class="clearfix visible-xs"></div>

我也不懂什么意思呢直接撸了一个demo 直接看代码和效果图实践出真知嘛

<div class="container-fluid">
<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:yellow">Column 2</div>

  <div class="col-xs-6 col-sm-3" style="background-color:blue">Column 3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:red">Column 4</div>
</div>
</div>

原始的效果：
这里写图片描述

为什么？
参考上面的当列大于12时的排列效果

修改后：

<div class="row">
  <div class="col-xs-6 col-sm-3" style="background-color:yellow">Column 2</div>
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3" style="background-color:blue">Column 3</div>
  <div class="col-xs-6 col-sm-3" style="background-color:red">Column 4</div>
</div>

使用了clearfix visible-xs的类：
这里写图片描述

相当于隔绝的作用吧看效果图的话

偏移列

col-sm-offset-2之类的

听名字就知道干嘛用了就是偏移列嘛
老规矩上代码和效果图用处一目了然

 <div class="row">
  <div class="col-sm-5 col-md-6" style="background-color:yellow">第一列</div>
  <div class="col-sm-5 col-md-6 " style="background-color:red">第二列</div>
</div>

原始图：
这里写图片描述
看代码当窗体大小为sm时因为是5-5 所以不够填满窗体

修改一下：

<div class="row">
  <div class="col-sm-5 col-md-6" style="background-color:yellow">第一列</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 " style="background-color:red">第二列</div>
</div>

lg窗体时：
这里写图片描述

sm窗体时：
这里写图片描述

第二列向右偏移
虽然不是col-md-offset-0 而是col-sm-offset-2 但lg的时候还是能偏移2单位由于超出窗体位置自动下一行
这是因为前面讲过了向前应用不只适用于col还适用于偏移列

还有最后一个知识点啦
Push And Pull 更改列顺序

<div class="row">
  <div class="col-sm-4 col-sm-push-8">第一列</div>
  <div class="col-sm-8 col-sm-pull-4">第二列</div>
</div>

效果图：
这里写图片描述
知道作用了吧就是交换两个列的顺序

最后总结：要是看不懂网上文档或者博客最好的办法就是自己敲一个Demo 或者粘贴复制Demo也行然后直接看效果这样反而吸收快

Bootstrap学习笔记--网格基础

如果列不相等怎么办？

col指定了屏幕范围大小（xs，sm，md，lg ）和

比例类型（6，6或者4，8）那么向上扩展和本身比例相等向下扩展就是层叠

col指定了屏幕范围大小（xs，sm，md，lg ）和

比例类型（6，6或者4，8）那么向上扩展和本身比例相等向下扩展就是层叠

.clearfix这个类

偏移列

热门文章

最新文章

相关课程

相关电子书

Bootstrap学习笔记--网格基础

如果列不相等怎么办？

col指定了屏幕范围大小（xs，sm，md，lg ）和

比例类型 （6，6或者4，8） 那么向上 扩展和本身比例相等 向下扩展就是层叠

col指定了屏幕范围大小（xs，sm，md，lg ）和

比例类型 （6，6或者4，8） 那么向上 扩展和本身比例相等 向下扩展就是层叠

.clearfix这个类

偏移列

热门文章

最新文章

相关课程

相关电子书

比例类型（6，6或者4，8）那么向上扩展和本身比例相等向下扩展就是层叠

比例类型（6，6或者4，8）那么向上扩展和本身比例相等向下扩展就是层叠