<!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. JS拖动div的原理

    要实现移动窗体,首先要捕获三个参数:1.a = 鼠标点击时的坐标.2.b = 被移动窗体的左顶点坐标.3.c = 鼠标移动时的坐标.然后还要算出你鼠标无论点击窗体哪个位置,移动改变的都是 (d = 窗 ...

  2. pycharm console 控制台乱码的解决

  3. Parallax

    常听说牛人都是jquery插件用得很好的人. 现在有了github,英文过关的话什么好东西下不到啊,再不用去浏览那些抄来抄去骗人看广告的垃圾网站了. 扯远点,本人有严重的熊猫眼,所以用一种叫倦眼充电棒 ...

  4. jquery升级换代

    其实从去年开始1.9以上新版的jquery已不再支持toggle方法和live方法. live用on方法替代. 话说这个方法确实挺方便的,那么怎么交替点击呢,html的checked属性我觉得不是很好 ...

  5. ioc开发学习 --简易计时器 （基于iPhone5屏幕尺寸开发）

    超简单的秒表:包含:开始.暂停(不清零).清零 方法 核心代码 // // ViewController.m // MiaoBiao // // Created by Ibokan on 15/8/1 ...

  6. build Intent

    Intent用于activity之间, fragmetn之间, 或者APP间通信, 主要包含数据和Action两部分: 常见的action是字符串形式的activity指定 Intent intent ...

  7. Oracle 多版本控制

    SESSION 1: SQL> create table t 2 as 3 select * from all_users; Table created. SQL> variable x ...

  8. Linux中查看进程的多线程pstree, ps -L

    Linux中查看进程的多线程 在SMP系统中,我们的应用程序经常使用多线程的技术,那么在Linux中如何查看某个进程的多个线程呢? 本文介绍3种命令来查看Linux系统中的线程(LWP)的情况:在我的 ...

  9. Ubuntu 12.04 使用Eclipse搭建C/C++编译环境

    首先是安装Eclipse,方法有两种:       第一种是通过Ubuntu自带的程序安装功能安装Eclipse,应用程序->Ubtuntu软件中心,搜Eclipse安装即可.       第二 ...

  10. cannot be deleted directly via the port API: has device owner network:floatingip