[bootstrap] 栅格系统和布局

1、简介

栅格系统(grid systems),也称为“网格系统”,运用固定的格子设计版面布局,风格工整简洁。是从平面栅格系统演变而来。

Bootstrap建立在12列栅格系统、布局、组件之上。以规则的网格阵列来指导和规范网页中的版面布局以及信息分布
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe。

2、设计原理

http://ued.taobao.org/blog/2008/09/grid_systems/

3、网页设计中的栅格系统

(1)默认栅格系统

    Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器,默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件,栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。

    基本代码
    <div class="row">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>

    1)列分配
    对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。

    <div class="row">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>

    上面的代码展示了 .span4 和 .span8 两列,两列的和总共是12个栅格。

    2)列偏移
    把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。

    <div class="row">
      <div class="span4">...</div>
      <div class="span3 offset2">...</div>
    </div>

    3)嵌套列
    在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列,就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
    <div class="row">
      <div class="span9">
        Level 1 column
        <div class="row">
          <div class="span6">Level 2</div>
          <div class="span3">Level 2</div>
        </div>
      </div>
    </div>

(2)流式栅格系统
    流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力,这就保证它能对不同的分辨率和设备做出适当的调整。

    基本代码
    将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变,这样能方便的在流式与固定栅格之间切换。
    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span8">...</div>
    </div>

    1)偏移
    定义方式和固定网格系统相同:给任何想偏移的列添加 .offset* 即可。
    <div class="row-fluid">
      <div class="span4">...</div>
      <div class="span4 offset2">...</div>
    </div>

    2)嵌套
    和固定栅格的嵌套有一点不同:
    固定栅格每行的列总数等于父级列。
    而流式布局每行被嵌套的列数之和要等于12。
    这是因为流式栅格使用百分比来设置每列的宽度。
    <div class="row-fluid">
      <div class="span12">
        Fluid 12
        <div class="row-fluid">
          <div class="span6">
            Fluid 6
            <div class="row-fluid">
              <div class="span6">Fluid 6</div>
              <div class="span6">Fluid 6</div>
            </div>
          </div>
          <div class="span6">Fluid 6</div>
        </div>
      </div>
    </div>

4、布局

(1)固定布局
    提供了一个通用的固定宽度(也可以变为响应式)的布局方式,仅仅用 <div class="container"> 即可。
    <body>
      <div class="container">
        ...
      </div>
    </body>

(2)流式布局
    利用 <div class="container-fluid"> 代码可以创建一个流式、两列的页面 — 非常适合于应用和文档类页面。
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span2">
          <!--Sidebar content-->
        </div>
        <div class="span10">
          <!--Body content-->
        </div>
      </div>
    </div>

5、启动响应式设计

    通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    注意!   Bootstrap在默认情况下是没有引入响应式特性的,因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。

6、设备和屏幕分辨率

    类型        布局宽度         列宽    间隙宽度
    大屏幕      大于等于1200px   70px    30px
    默认        大于等于980px    60px    20px
    平板        大于等于768px    42px    20px
    手机到平板   小于等于767px    流式列,无固定宽度
    手机        小于等于480px    流式列,无固定宽度
时间: 2024-10-10 17:02:10

[bootstrap] 栅格系统和布局的相关文章

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

Bootstrap 栅格系统(布局)

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再

Bootstrap栅格系统用法介绍

 1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的)

Bootstrap栅格系统用法--Bootstrap基础

1.栅格系统实现布局的原理 1)Bootstrap把屏幕的宽度拆分成12格(列),每一格像素的多少由设备屏幕分辨率决定,我们在开发项目的过程中不需要去指定像素或者百分比. 2)不同范围的分辨率对应不同设备 超小屏幕 手机(<768px)               类的前缀:-col-xs- 小屏幕 平板(>=768px<992px)   类的前缀:-col-sm- 中等屏幕 桌面显示器(>=992px<1200px)类的前缀:-col-md- 大屏幕 大桌面显示器(>

第二百三十五节,Bootstrap栅格系统

Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏 幕和设备等宽以及是否运行用户缩放,及缩放比例的问题.

bootstrap栅格系统详解

在百度前端学院做任务的时候,看到有关于bootstrap的栅格系统的知识于是就在网上百度了一番,下边的网址是关于bootstrap栅格系统的详细解析,https://segmentfault.com/a/1190000000743553. http://www.cnblogs.com/JerryTao/p/5476027.html. http://blog.csdn.net/z742182637/article/details/50466674. 了解之后栅格系统就可以相互嵌套了.这里有我写的d

【9】了解Bootstrap栅格系统基础案例(4)

这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列). <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!--

【8】了解Bootstrap栅格系统基础案例(3)

这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度. 废话不多说,直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8&

【10】了解Bootstrap栅格系统基础案例(5)

这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 --> <