【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外的另方案,它就是只好每个占一行了)下之功用吧(由于显示器高度不够,没有截图全,但是大家好入手做下看看效果)。

 下面在来拘禁下水平排列吧(可观望区域过分界点阈值,这样尽管正常显示了,达到了应用md方案的求。为什么说常规显示?因为此处我们下的md由于Bootstrap最多12列,我们数数md后面的数学,如果并到了12,它们就是成一列)

【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不起作用,效果图如下

这会儿我们好不容易算打作用的md方案一行的数字吧

第一行:8和4的份比。

次实施:三单4均等平均分为三份。

老三执:6以及6虽是大尺寸因为只有马上一个样式,也是平均分为两卖。

于可看区域很粗之气象下是xs起作用,md不起作用,效果图如下

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

率先推行:两独元素分为12和6,而一行也就是12份,所以亚只元素会进展换行,然后占据6份一半之职。

亚行:3只6份。而一行也就是12卖。所以第三单因素会进展换行,然后占据6份一般的职务。

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

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

打听了这么多,应该了解了一个大致,如果您喜爱您的网站以各种设施及还能生一个老好的力量,估计您只要拿那么4单方案还因此上了,哈哈~~~

相关文章