【6】明白Bootstrap栅格系统基础案例(1)

从上一张大家精晓了栅格选项,那么大家就来了实战驾驭下呢(其实仍然华语官网的案例)

ps.我这里是总结机上用谷歌(谷歌(Google))浏览器来考察的,毕竟电脑的分辨率高(1440*900px),谷歌(Google)浏览器最大化后,值比大屏幕设备的1200px的还要大,那样大家就可以经过拉缩浏览器改变可视区域来考察效果,当然,你会用谷歌(Google)浏览器模拟其余设备的话就另当别论了。

【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外的其余方案,它就不得不每个占一行了)下的意义啊(由于展现器中度不够,没有截图全,可是大家能够入手做下看看效果)。

图片 1

 下边在来看下水平排列吧(可视区域大于分界点阈值,这样就像常呈现了,达到了应用md方案的必要。为何说常规突显?因为那边大家运用的md由于Bootstrap最多12列,我们数数md后边的数学,若是拼到了12,它们就结成一列)

图片 2

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

图片 3

那会儿大家算算起成效的md方案一行的数字呢

第一行:8和4的份比。

第二行:八个4平平均分为三份。

其三行:6和6即便是大尺寸因为唯有这些体裁,也是平均分为两份。

在可视区域很小的事态下是xs起效果,md不起成效,效果图如下

图片 4

那时候大家算算起功能的xs方案一行的数字呢

先是行:两个因素分为12和6,而一行呢就是12份,所以第一个要素会进展换行,然后占据6份一半的岗位。

其次行:3个6份。而一行呢就是12份。所以第八个因素会开展换行,然后占据6份一般的任务。

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

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

问询了那般多,应该明白了一个大约,就算你喜欢你的网站在种种装备上都能有一个很好的功效,推断你要把那4个方案都用上了,哈哈~~~

相关文章