<!DOCTYPE html>

 <html lang="en">

 <head>

     <!-- //简介:boststrap内置了一套响应式，移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列，它包含了易于使用的预定义class，还有强大的mixin用于生成更具语义的布局 -->

     <meta charset="UTF-8">

     <title>Document</title>

     <link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet">

     <!-- /*栅格选项：bootstrap3.x使用了四种栅格选项来形成栅格系统，其实区别只有一条就是适合不同尺寸的屏幕设备。

     class=  col-xs、col-sm、col-md、col-lg

                     ***     small   mid     large  */

         /*列偏移：使用.col-md-offset-* 可以将列偏移到右侧，这些class通过使用*选折起将所有列增加了列的左侧margin。

         例如：.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

         */

         /*嵌套列：为了使用内置的栅格将内容嵌套，通过添加一个新的.row和一系列.col-md-*列内即可实现。注意：嵌套row所包含的列加起来应该等于12.

         */

         /*列排序：通过使用.col-md-push-*和.col-md-pull-*就可以很容易地改变列的顺序。

         */ -->

      <!--  margin叫边界手册上叫外补丁，padding是填充内补丁，在他们之间有一个边界border。padding包围的就是content， -->

       <style type="text/css">

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

             padding-top: 10px;

             padding-bottom: 10px;

             background-color: #eee;

             border: 1px solid #ddd;

             background-color: rgba(86, 61, 124, .15);

             border: 1px solid rgba(86, 61, 124, .2);

         }

         </style>

         <script type="text/javascript">

         $(function(){

         });

         </script>

 </head>

 <body>

  <b>col-lg-*用法</b>

         <br/>

         <div class="row show-grid">

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

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

         </div>

         <br/>

         <b>col-md-*用法</b>

         <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>

         <br/>

         <div class="row show-grid">

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

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

         </div>

         <br/>

         <b>col-sm-*用法</b>

         <div class="row show-grid">

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

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

         </div>

         <br/>

         <b>col-xs-*用法</b>

         <div class="row show-grid">

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

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

         </div>

         <br/>

         <b>列偏移: col-md-offset-*</b>

         <div class="row show-grid">

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

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

         </div>

         <div class="row show-grid">

           <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

           <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

         </div>

         <div class="row show-grid">

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

         </div>

         <br/>

         <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>

         <div class="row show-grid">

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

                 Level 1: .col-md-9

                 <div class="row show-grid">

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

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

                 </div>

             </div>

         </div>

         <br/>

         <b>列排序: .col-md-push-*和.col-md-pull-*</b>

         <div class="row show-grid">

           <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>

           <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>

         </div>

     </body>

 </html>

bootstrap栅格布局的更多相关文章

  1. bootstrap栅格布局-v客学院知识分享

    今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...

  2. Bootstrap栅格布局系统的特点

    栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...

  3. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...

  4. bootstrap栅格布局，第一次成功

    代码: <div class="helper" style="background-color: #F7F7F9;height: 200px;padding-top ...

  5. 浮动元素垂直居中，bootstrap栅格布局垂直居中

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. CSS：谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  7. bootstrap（关于栅格布局）

    栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

  8. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  9. Bootstrap 框架 栅格布局系统设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

随机推荐

  1. TWIG整合

    //数字格式化 {{ (p.oldprice * p.count)|number_format(2,'.',',') }}

  2. you don't have permission 错误

    当引入第三方的框架的时候 容易产生以下问题: The file “XXX.app” couldn’t be opened because you don’t have permission to vi ...

  3. C++例题2：汉诺塔问题

    #include<iostream>#include<stdlib.h>using namespace std;void Hanoi(int n,char A,char B,c ...

  4. 工作总结：将电脑中的ARP缓存清空黑屏命令

    ARP -d 将电脑中的ARP缓存清空ARP-a  查看arp缓存arp-s   ip与mac绑定

  5. check sql server edition (version 版本)

    SELECT @@VERSION refer : https://www.mssqltips.com/sqlservertip/1140/how-to-tell-what-sql-server-ver ...

  6. win7计划任务执行BAT文件问题

    今天下午做了一个调用java 可执行jar的程序,想通过win7的计划任务来调用 批处理命令: java -jar BIDropSyc.jar    或者 javaw -jar BIDropSyc.j ...

  7. Android Studio使用远程依赖时下载不了jar包的解决方法

    使用AS很大的一个好处就是可以使用在线jar包,只需在引用jar包的时候在版本后加上+,比如: compile 'com.facebook.fresco:fresco:0.1.0+' 这样不用在jar ...

  8. [置顶] 推荐12款很棒的HTML5开发框架和开发工具

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  9. 数据结构（主席树）：HDU 4729 An Easy Problem for Elfness

    An Easy Problem for Elfness Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 65535/65535 K (J ...

  10. CodeForces 588A

    题目链接: http://codeforces.com/problemset/problem/588/A 解题思路: 这个题目很简单, 就是前一天肉的价格比后面几天低还是高,如果是高的话,只要买当天份 ...