<!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. hdu3652B-number

    Problem Description A wqb-number, or B-number for short, is a non-negative integer whose decimal for ...

  2. Delphi 的各种错误信息（中英文）

    ******************************* * 编 译 错 误 信 息 * ******************************* ';' not allowed befo ...

  3. c#:类 相关练习;

    1. 2. int i = a.Length;//获取字符串的长度   a = a.ToLower();//将字符串中的大写英文字符转化为小写   a = a.ToUpper();//将字符串中的小写 ...

  4. MongoDB ‘conn’Mongo 对象远程代码执行漏洞

    漏洞名称: MongoDB ‘conn’Mongo 对象远程代码执行漏洞 CNNVD编号: CNNVD-201307-497 发布时间: 2013-07-25 更新时间: 2013-07-25 危害等 ...

  5. vijos1082丛林探险

    P1082丛林探险 描述 东非大裂谷中有一片神秘的丛林,是全世界探险家的乐园,著名黄皮肤探险家BB一直想去试试.正好我国科学家2005年4月将首次对东非大裂谷进行科考,BB决定随科考队去神秘丛林探险. ...

  6. linkedin和facebook的区别

    摘录一段百科(http://www.baike.com/wiki/LinkedIn)的文字: Linkedin - 特点 Linked是一个“高效”.“安全”并且“有商务价值”的“白领SNS提供商”: ...

  7. 【转】 Android的NDK开发(1)————Android JNI简介与调用流程

    原文网址:http://blog.csdn.net/conowen/article/details/7521340 ****************************************** ...

  8. 【转】java中float与byte[]的互转 -- 不错

    原文网址:http://tjmljw.iteye.com/blog/1767716 起因:想把一个float[]转换成内存数据,查了一下,下面两个方法可以将float转成byte[]. 方法一 imp ...

  9. 《傲慢与偏见》（Pride and Prejudice）

    <傲慢与偏见>(Pride and Prejudice)改编自英国作家简·奥斯汀的同名小说,1940年上映.讲述了19世纪初期英国的一个普通的中产家庭中五姐妹的爱情与择偶故事.片中因为男主 ...

  10. 对List

     class MyCompare implements Comparator//自定义比较方式 要实现Conparator的 compare 方法 {     public int compare(O ...