<!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. 操作Json

    C#可以像Javascript一样操作Json 阅读目录 Json的简介 Json的优点 传统操作Json 简易操作Json Json的简介 JSON(JavaScript Object Notati ...

  2. IFrame中Session丢失的解决办法

    1.打开IIS管理器 inetmgr2.选择被嵌入iframe源站点或者目录,右键点击打开属性框3.切换到HTTP头4.添加5.自定义HTTP头名: P3P6.自定义HTTP头值: CP=" ...

  3. 转:Java程序员最常用的8个Java日志框架

    作为一名Java程序员,我们开发了很多Java应用程序,包括桌面应用.WEB应用以及移动应用.然而日志系统是一个成熟Java应用所必不可少的,在开发和调试阶段,日志可以帮助我们更好更快地定位bug:在 ...

  4. 舍伍德(Sherwood)算法学习笔记

    一.概念引入 设A是一个确定性算法,当它的输入实例为x时所需的计算时间记为tA(x).设Xn是算法A的输入规模为n的实例的全体,则当问题的输入规模为n时,算法A所需的平均时间为.这显然不能排除存在x∈ ...

  5. 应用程序的关闭退出（在FMX中，Activity替代了Form的概念）

    在VCL中,关闭程序的主窗体也就意味着程序的主循环结束,主程序自然而然结束.所以在主窗体中使用窗体的关闭函数(Close)即可,如下: procedure TfrmMain.btncloseClick ...

  6. chage命令管理用户口令时效

    http://zhumeng8337797.blog.163.com/blog/static/1007689142011824102827487/ http://www.th7.cn/system/l ...

  7. bzoj2006

    论将区间和转化为前缀和的重要性这题一旦转化为前缀和就非常明了了一段区间[l,r]的美妙程度就等于s[r]-s[l-1]对于这种无法计算出所有方案而取前k大的题目,我们一般分类别然后利用类别内的单调性用 ...

  8. ♫【jQuery】detach

    Jquery empty() remove() detach() 方法的区别 <!DOCTYPE html> <html> <head> <meta char ...

  9. android导入项目出错处理

    问题: 执行Import-Android下的Existing Android Code Into Workspace 解决方法:

  10. HDOJ(HDU) 2502 月之数(进制)

    Problem Description 当寒月还在读大一的时候,他在一本武林秘籍中(据后来考证,估计是计算机基础,狂汗-ing),发现了神奇的二进制数. 如果一个正整数m表示成二进制,它的位数为n(不 ...