【6】了解Bootstrap栅格系统基础案例（1）

从上一张我们了解了栅格选项，那么我们就来了实战了解下吧（其实还是中文官网的案例）

ps.我这里是电脑上用谷歌浏览器来观察的，毕竟电脑的分辨率高（1440*900px），谷歌浏览器最大化后，值比大屏幕设备的1200px的还要大，这样我们就可以通过拉缩浏览器改变可视区域来观察效果，当然，你会用谷歌浏览器模拟其他设备的话就另当别论了。

【1】案例：从堆叠到水平排列

这里我们使用单一的一组.col-md-*栅格class，你就可以创建一个基本的栅格系统。

1、在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围）；

2、在桌面（中等）屏幕设备上变为水平排列。

注意：(col-*-*)的使用都是放置于.row内。下面的代码为了便于观察我们将.row类放在.container里。

上代码拉：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap-Template-02</title>

    <!-- 最新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

.show-grid { margin-top: 15px; }

.show-grid [class^="col-"] {

  padding-top: 10px;

  padding-bottom: 10px;

  background-color: #eee;

  border: 1px solid #ddd;

}

    </style>

</head>

<body>

<div class="container">

<h1>案例：从堆叠到水平排列<small>.col-md-*</small></h1>

<div class="row show-grid">

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

</div>

<div class="row show-grid">

  <div class="col-md-8">.col-md-8</div>

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

</div>

<div class="row show-grid">

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

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

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

</div>

<div class="row show-grid">

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

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

</div>

</div>

    <!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 -->

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

下面我们看下效果图

我们先看下堆叠状态（堆叠是由于可视区域小于分界点阈值，不在使用md的方案，但是你有没有定义除md外的其他方案，它就只能每个占一行了）下的效果吧（由于显示器高度不够，没有截图全，但是大家可以动手做下看看效果）。

【6】了解Bootstrap栅格系统基础案例（1）

下面在来看下水平排列吧（可视区域大于分界点阈值，这样就正常显示了，达到了使用md方案的要求。为什么说正常显示？因为这里我们使用的md由于Bootstrap最多12列，我们数数md后面的数学，如果拼到了12，它们就组成一列）

【6】了解Bootstrap栅格系统基础案例（1）

【2】移动设备和桌面

从上面的案例我们可以发现，当小尺寸的屏幕的时候使用.col-md-*的时候它会呈现堆叠的状态，那么开发人员肯定有时候需要小尺寸的屏幕页面展示也要是水平排列的。那么我们的.col-xs-*（小于768px屏幕的样式类）就派上用场了。

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap-Template-03</title>

    <!-- 最新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

.show-grid { margin-top: 15px; }

.show-grid [class^="col-"] {

  padding-top: 10px;

  padding-bottom: 10px;

  background-color: #eee;

  border: 1px solid #ddd;

}

    </style>

</head>

<body>

<div class="container">

<h1>案例：移动设备和桌面<small>.col-xs-*和.col-md-*</small></h1>

<div class="row show-grid">

  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

<div class="row show-grid">

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>

</div>

<div class="row show-grid">

  <div class="col-xs-6">.col-xs-6</div>

  <div class="col-xs-6">.col-xs-6</div>

</div>

</div>

    <!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 -->

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

通过代码我们看到这里我们用到了2套方案（一个是md一个是xs），这2个方案不是同时起作用，它们是根据可视区域对比分界点阈值来判断的。

在可视区域很大的情况下是md起作用，xs不起作用，效果图如下

【6】了解Bootstrap栅格系统基础案例（1）

这时候我们算算起作用的md方案一行的数字吧

第一行：8和4的份比。

第二行：三个4平平均分成三份。

第三行：6和6虽然是大尺寸因为只有这一个样式，也是平均分成两份。

在可视区域很小的情况下是xs起作用，md不起作用，效果图如下

【6】了解Bootstrap栅格系统基础案例（1）

这时候我们算算起作用的xs方案一行的数字吧

第一行：两个元素分为12和6，而一行呢就是12份，所以第二个元素会进行换行，然后占据6份一半的位置。

第二行：3个6份。而一行呢就是12份。所以第三个元素会进行换行，然后占据6份一般的位置。

第三行：6和6正好12占一行。

=======================================================================================

了解了这么多，应该清楚了一个大概，如果你喜欢你的网站在各种设备上都能有一个很好的效果，估计你要把那4个方案都用上了，哈哈~~~

秒客网

【6】了解Bootstrap栅格系统基础案例（1）

【1】案例：从堆叠到水平排列

【2】移动设备和桌面

相关文章