Bootstrap 学习笔记之网格系统

要点一、

Bootstrap 3 是基于移动端优先的思想，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格

移动设备优先策略

内容
- 决定什么是最重要的。
布局
- 优先设计更小的宽度。
- 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。// 所以在写CSS代码的时候也是先写移动端的代码，从小到到
渐进增强
- 随着屏幕大小的增加而添加元素。
- 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

个人记忆相关的英语单词：

column 列

row 行

使用网格系统布局的一些注意事项（实现原理）// 后面为自己理解的部分：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
// 添加的内容必须放到含有.container 样式的标签内，这样可以使用框架已经写好的样式；
使用行来创建列的水平组。
// 就是说列col 要放到行row 里面，比如：

<div class="container">
   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-4"  style="background-color: #dedef8; box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>内容、内容、内容</p>

         
      </div>

      <div class="col-md-8" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>内容、内容、内容</p>
   </div>
</div>

内容应该放置在列内，且唯有列可以是行的直接子元素。 // .col 紧跟 .row之后
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
// 见代码需要一提的就是，这里col里面的-xs指的是手机设备，以此类推 -sm 是平板电脑类的(>=768px)，-md 是一般电脑显示器（中型>992px） -lg 是大型显示器（>=1200px;）
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
// 这里的列 .col后缀比如4,3,6,9等加起来要等于或者小于12即可满足网格系统的布局。
比如 <div class="col-md-3"></div> 和 <div class="col-md-9"></div> 或 <div class="col-md-7"></div> 和 <div class="col-md-5"></div>。但要确保总和总是 12。（其实是不能超过12）

列重置中提到了一个响应式工具：

class="visible-xs"——> 在特别小型设备上可见

class="visible-sm"——> 在小型设备上可见

class="visible-md"-—>在中型设备上可见

class="visible-lg"——> 在大型设备上可见

加上这个类以后可以调整浏览器的窗口大小

Bootstrap 学习笔记 之网格系统

移动设备优先策略

相关推荐

Bootstrap 学习笔记之网格系统