一、网格系统
响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

二、基本结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
   </div>
   <div class="row">
    ...
    </div>
</div>
<div class="container">…
  • 使用行来创建列的水平组。
  • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
  • 内容应该放置在列内,且唯有列可以是行的直接子元素。
  • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。
  • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
  • 网格系统是通过指定想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。

三、媒体查询
Bootstrap主要用到min-width、max-width和and,用于在不同的分辨率下设置不同的样式。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

在screen-sm-min和screen-sm-max像素之间的屏幕里,这个样式才生效。

四、基本用法

  1. 列组合
    通过更改col-md-* 中的数字 * 来合并列,并使 * 的和为12。如:

<div class="container">
    <div class="row">
      <div class="col-md-4">第一列</div>
      <div class="col-md-4">第二列</div>
      <div class="col-md-4">第三列</div>
    </div>
    <div class="row">
      <div class="col-md-8">第一列</div>
      <div class="col-md-4">第二列</div>
    </div>
</div>
  1. 列偏移
    使用 .col-md-offset-* 类可以将列偏移到右侧,从而使两个相邻的列不挨在一起。例如:.col-md-offest-4将.col-md-4向右移动了4个列的宽度。

<div class="container">
    <div class="row">
      <div class="col-md-4">第一列</div>
      <div class="col-md-4 col-md-offset-4">第二列</div>
    </div>
    <div class="row">
      <div class="col-md-3 col-md-offset-3">第一列</div>
      <div class="col-md-3 col-md-offset-3">第二列</div>
    </div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">第一列</div>
    </div>
</div>
  1. 列嵌套
    在一个列里面再声明一个或者多个行(row)即列嵌套。添加一个新的.row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12。

<div class="row">
  <div class="col-md-3">
    <h4>第一列</h4>
    <p>apple</p>
  </div>
  <div class="col-md-9">
    <h4>第二列 - 分为四个盒子</h4>
    <div class="row">
      <div class="col-md-6">
        <p>banana</p>
      </div>
      <div class="col-md-6">
        <p>lemon</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <p>pear</p>
      </div>
      <div class="col-md-9">
        <p>strawberry</p>
      </div>
    </div>
  </div>
</div>
  1. 列排序
    使用 .col-md-push-* 和 .col-md-pull-* 类来互换两列的顺序。

<div class="container">
  <div class="row">
    <p>排序前:
    <div class="col-md-4">我在左边</div>
    <div class="col-md-8">我在右边</div>
  </div>
  <div class="row">
    <p>排序后:
    <div class="col-md-4 col-md-push-8">我在左边</div>
    <div class="col-md-8 col-md-push-4">我在右边</div>
  </div>
</div>

效果图:

Bootstrap网格系统的更多相关文章

  1. 第四篇.Bootstrap网格系统偏移列和嵌套列

    偏移列: 在bootstrap网格系统中我们可以使用偏移列来达到让某列右移的效果,如下所示: <div class="row"> <div class=" ...

  2. 详解Bootstrap网格系统

    bootstrap框架中的网格系统就是将容器平分成12份,在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值.bootstrap框架的网格系统工作原理: 1.数据行(.row ...

  3. bootstrap学习笔记--bootstrap网格系统

    移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备. 现在不一 ...

  4. 使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。

    使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不 ...

  5. Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素

    Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...

  6. Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  7. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  8. Bootstrap 网格系统(Grid System)实例4

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

  9. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  10. Bootstrap 网格系统(Grid System)实例2

    Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...

随机推荐

  1. T-sql 查询

    ------------------case---when-------的使用--------------------- select  userAccount , eatingDate ,    c ...

  2. VS2012使用中容易出现的小问题(长期更新,错多少记多少)

    1:各种属性之间一定要有空格!比如id 和 runat中间一定要有,在编译系统里虽然也能显示红色,但是...调试的时候一定会报错!而且这样的错误很难发现(相信我曾经花了半个小时才找出问题) 2:在类中 ...

  3. 《编写可维护的JavaScript》——JavaScript编码规范(三)

    啦啦啦啦啦,今天第二篇随笔\(^o^)/~ ////////////////////////////////正文分割线////////////////////////////////////// 直接 ...

  4. 遇到的java面试题

    1.struts2与struts1的区别 2.声明式事务是什么,怎么实现? 3.ajax两种请求方式 4.java中string str=new string("ss")创建了个几 ...

  5. scoi 2008 && bzoj 1076 奖励关

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3223 思路:15?好,状压,OK. 这是转移方程 if((s[k]&j)==s[k] ...

  6. Android Paint的属性

    在Paint中有很多的属性可以设置,比如可以设置阴影,颜色过滤等等,这些会产生不同的奇妙效果,今天就对各种属性探索一下. 方法一: 1 //设置绘制的颜色,a代表透明度,r,g,b代表颜色值. 2 s ...

  7. Xamarin.Forms ListView点击按钮刷新最新数据

    最近在研究Xamarin的东西,做到ListView遇到了一些瓶颈,像在数据庞大的情况下,该怎么针对ListView中的数据分组呢? 基于能力有限的问题,暂时写了一个只可以实现功能的临时解决方案,毕竟 ...

  8. android HAL 教程(含实例)

    http://www.cnblogs.com/armlinux/archive/2012/01/14/2396768.html Android Hal 分析                       ...

  9. [poj2411] Mondriaan's Dream (状压DP)

    状压DP Description Squares and rectangles fascinated the famous Dutch painter Piet Mondriaan. One nigh ...

  10. UE4 使用UGM制作血条

    声明:本文是自己做的项目,可能不是最好的方法,或有错误使用方式.各位不喜勿喷! HP进度 HP背景 将上面的资源拖到UE4中(使用UE4自带的颜色也可实现效果,具体参考官方教程 https://doc ...