<!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. google chrome中如何删除一条输入网址提示

    在google chrome中网站栏输入字母的时候会出现网址的提示,如下图: 之前遇到个问题,不知道之前打错了www.baidu.com为wwww.baidu.com(也会跳转到百度)导致一输入“w” ...

  2. Hadoop 学习笔记 （八） hadoop2.2.0 测试环境部署 及两种启动方式

    1基本流程步骤1:准备硬件(linux操作系统)步骤2:准备软件安装包,并安装基础软件(主要是JDK)步骤3:修改配置文件步骤4:分发hadoop步骤5:启动服务步骤6:验证是否启动成功!2硬件配置要 ...

  3. 自动垂直居中的js

    var _htmlheight; function start(){ _htmlheight=document.body.scrollHeight; resize(); /*$("#copy ...

  4. Sereja and Suffixes

    Codeforces Round #215 (Div. 2) B:http://codeforces.com/problemset/problem/368/B 题意:给你一个序列,然后查询i--n中没 ...

  5. Java关键字this的用法总结

    大飞_Rflyee:http://blog.csdn.net/rflyee/article/details/12057289 首先了解一下java中类的引用, 对于java中类的引用,可以这样理解: ...

  6. [置顶] 技术人血泪史：七种IT失误让你直接走人

    IT人士的真实故事:搞出大麻烦,旋即遭解雇 如今想找一份理想的IT工作并不容易,但丢掉一份工作却非常简单. 导致自己被炒鱿鱼的原因很多,无论是没能尽到保护雇主数字资产的义务.或者是滥用手中的权限以达到 ...

  7. DB_WRITER_PROCESSES与LOG_ARCHIVE_MAX_PROCESSES

    DB_WRITER_PROCESSES Property  Description Parameter type  Integer Default value  1 or CPU_COUNT / 8, ...

  8. UVA- 1504 - Genghis Khan the Conqueror(最小生成树-好题)

    题意: n个点,m个边,然后给出m条边的顶点和权值,其次是q次替换,每次替换一条边,给出每次替换的边的顶点和权值,然后求出这次替换的最小生成树的值; 最后要你输出:q次替换的平均值.其中n<30 ...

  9. 付出半个小时的笔误级BUG

    一开始,我为了偷懒将所有的任务全都压在了一个浮动指针上: for (; CCPtr->S != NULL; CCPtr->S = CCPtr->S->next) // for ...

  10. hdu 4579 博弈+区间dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4597 #include <cstdio> #include <cstring> ...