Bootstrap 栅格系统

转载 2015年11月20日 11:46:29

Bootstrap 3 How-To #3 布局

对于 Web 开发来说,一个永远的话题是如何创建一个跨浏览器兼容的布局。许多年来,各种框架使用各种技术来解决这个问题。Bootstrap 使用了一个不同的方式来解决这个问题。基于 960 像素的布局 http://960.gs,bootstrap 提供了更为简单的语法,它还支持响应式布局,布局可以根据设备的不同尺寸进行调整,从桌面计算机到平板和手持设备。

以前版本的 bootstrap 在没有使用响应式布局的时候,使用了 940px 布局使用 span* 和 offset* 布局。在使用响应式布局的时候,网格系统使用 724px 或者 1170px 的宽度。

如果希望使用百分比的布局,可以将容器的类从 .row 替换为 row-fluid。

3.0 版本对这一部分有比较大的变动,可以区分特小型设备 xs ( Extra small devices, 小于 768px 比如手机 ), 小型设备 sm ( Small devices, 小于 992px, 比如平板 ), 中型设备 md ( Medium devices, 小于 1200px, 比如桌面计算机),  大型设备 lg ( Large devices, 比如宽屏显示器 )。

而 row-fluid 已经不存在了。

我们马上就基于这个系统创建网站的页面,首先,我们先熟悉 bootstrap 布局的基本特性。

 开始

 让我们从示例中的 jumbotron 页面开始。

 在我们自己创建的 study 文件夹中创建名为 3 的文件夹。

1. 将这个文件夹中的两个文件复制到 study 中的 3 文件夹中。

2. 在文本编辑器中打开 index.html 文件。

3. 将第 10 行的标题修改为

<title>Layout Playground | My Bootstrap site</title>

4. 找到第 71 行,将标题修改为

<h1>Layout Playground</h1>

5. 打开 index.html,你会看到如下的页面

如何使用

1. 找到页面的第 79 行,你会看到如下的内容

复制代码
<div class="row">
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
</div>
复制代码

2. 你会看到在 class=”row” 的 div 内部,嵌入了三个 class=”col-lg-4” 的 div。
3. 将第一个 class=”col-lg-4” 修改为  “col-lg-6”,将第二个和第三个修改为 “col-lg-3”
4. 保存之后,刷新浏览器,你会看到如下的页面。

5. 我们在下面添加一个新的分栏。

复制代码
<div class="row">
    <div class="col-lg-2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
    <div class="col-lg-6">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
    </div>
</div>
复制代码

6. 保存之后的页面

工作原理

Bootstrap 提供了一个 12 列的分栏系统,col-lg- 从 1 直到 12,col-lg-12 表示整个宽度,8 表示三分之二,6 表示一半,class=”row” 的 div 用来作为列的容器,每个行作为一个新的布局区域。详细的说明见: http://getbootstrap.com/css/#grid

单独使用 .col-md-* 的样式,可以在移动设备或者平板设备上创建基本的网格,在小型设备上是堆栈式的,在中型设备上将是横向的。

样式的内容如下所示:

复制代码
<div class="row">
  <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>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
复制代码

同时支持移动设备和桌面设备

同时使用 .col-xs-* .col-md-* 样式可以取得更好的效果。

内容如下所示:

复制代码
<!-- 移动设备整个宽度,其它一般宽度 -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 移动设备 50% 宽度,其它 33.3% 宽度 -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 移动和桌面都是 50% -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>
复制代码

同时支持移动,平板和桌面

复制代码
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>
复制代码

列定位

使用 .col-md-offset-* 可以进行列定位,比如 .col-md-offset-4 可以定位到第 4 个位置

复制代码
<div class="row">
  <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">
  <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">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
复制代码

列还可以嵌套

复制代码
<div class="row">
  <div class="col-md-9">
    Level 1: .col-md-9
    <div class="row">
      <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>
复制代码

bootstrap栅格系统

  • 2016年06月21日 20:15
  • 1.19MB
  • 下载

bootstrap栅格系统自定义列

bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列 简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: /*一行5列*/ .col-md-5ths{pos...
  • nuli888
  • nuli888
  • 2016年07月07日 14:47
  • 9710

Bootstrap 全局css样式布局之 栅格系统

移动设备优先 Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。 meta name="viewport" content=...

Bootstrap栅格系统原理

Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1)响应式设计 我们现实生活中所使用到的设...

2.2Bootstrap栅格系统案例

1、栅格选项 2、从堆叠到水平排列 3、移动设备和

【BootStrap】栅格系统、表单样式与按钮样式-附有源码

转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】 栅格系统1、栅格系统介绍Bootstrap 提供了一套响应式、移动设备优先的流式栅格...

BootStrap--整体框架--CSS12栅格系统

1.整体架构BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台) 表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅...

Bootstrap-栅格系统自适应布局

1 container 顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px paddin...

Bootstrap栅格系统使用方法

如果你以前使用过Bootstrap2或者了解过响应式技术,那么肯定对Bootstrap栅格系统并不陌生,由于栅格系统的引入,使得Bootstrap的跨设备布局显示变得可能。   什么是栅格...

Bootstrap栅格系统详解,响应式布局

栅格系统介绍 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 栅格系统用于通过一系列的行(row...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap 栅格系统
举报原因:
原因补充:

(最多只允许输入30个字)