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"——> 在大型设备上可见

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