bootstrap栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的特点：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内间距（padding）。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 通过“行（row）”在水平方向创建一组“列（column）”。

 

1. 1. 媒介查询@media

通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介(设备)类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达“大于或等于”和“小于或等于”。

打开文件：bootstrap.css，可以看到以下代码：

 /* 当设备的最小宽度大于或等于768时，容器的宽度是750px */

 @media (min-width: 768px) {

   .container {

     width: 750px;

   }

 }

 /* 当设备的最小宽度大于或等于992时，容器的宽度是970px */

 @media (min-width: 992px) {

   .container {

     width: 970px;

   }

 }

• • 所以当我们创建div的类样式名container，则会根据屏幕的大小发生变化

1. 1. 基本写法：

表格	栅格系统	描述
table	.container或.container-fluid	整个布局的容器
tr	.row	容器中的一行
td	.col-xx-n xx有四个取值 lg 大型设备，如：电视机 md 中型设备，如：电脑 sm 小型设备，如：平板 xs 微型设备，如：手机 n 这一列占几格，一行最多12格	表示row中的一列 如： col-md-4 中型设备上占4列 col-xs-6 微型设备上占6列

1. 1. 栅格参数：

1. 1. 演示案例：
2. 示例1：栅格系统的基本结构。

    <!--容器-->

    <div class="container">

    <!--一行-->

    <div class="row">

         <!--三列-->

         <div class="col-md-4">

             电脑

         </div>

         <div class="col-md-4">

             电脑

         </div>

         <div class="col-md-4">

             电脑

         </div>

    </div>

    <!--一行-->

    <div class="row">

         <!--三列-->

         <div class="col-md-4">

             电脑

         </div>

         <div class="col-md-4">

             电脑

         </div>

         <div class="col-md-4">

             电脑

         </div>

    </div>

    </div>

1. 示例2：省略row的情况下，在container中直接写5个col-md-3，即每个块占3格，如果超过4个div，则会自动变成2行。

    <!--容器-->

    <div class="container">

        <!--三列-->

        <div class="col-md-3">

            电脑

        </div>

        <div class="col-md-3">

            电脑

        </div>

        <div class="col-md-3">

            电脑

        </div>

        <div class="col-md-3">

            电脑

        </div>

        <div class="col-md-3">

            电脑

        </div>

        <div class="col-md-3">

            电脑

        </div>

    </div>

1. 示例3：不同屏幕的适配。每个div设置三个样式，col-md-3 col-sm-4 col-xs-6，格子的数量会随着屏幕尺寸的变化而不同。

    <!--容器-->

    <div class="container">

        <!--三列-->

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

    </div>

1. 示例4：显示与隐藏块。不同屏幕尺寸的时候，让某些div块的显示，也可以让某些div隐藏。

    <!--容器-->

    <div class="container">

        <!--三列-->

        <div class="col-md-3 col-sm-4 col-xs-6 visible-sm">

            我只在平板上显示

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6 hidden-xs">

            我只在手机上隐藏

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

        <div class="col-md-3 col-sm-4 col-xs-6">

            电脑

        </div>

    </div>

1. 1. 栅格系统中类的小结：

类样式名	作用
.container	栅格系统容器，类似于table，固定宽度
.container-fluid	占100%宽度
.row	表示一行
.col-xs-n	微型设备占n列
.col-sm-n	小型设备占n列
.col-md-n	中型设备占n列
.col-lg-n	大型设备占n列
.hidden-lg/md/sm/xs	在某种设备上隐藏
.visible-lg/md/sm/xs	只在某种设备上显示