bootstrap栅格布局

原创 2015年11月18日 15:32:59

首先,我们要为页面内容和栅格系统包裹一个 .container 容器:

<div class="container">
  ...
</div>

.container 类用于固定宽度和响应式布局的容器,如果占据 100% 的宽度,使用 .container-fluid 类:

<div class="container-fluid">
  ...
</div>

栅格系统会根据屏幕和视口(viewport)的尺寸,将一行分为最多 12 列,通过预设好的栅格类表示需要占多少个列宽度。比如,可以使用 3 个 .col-xs-4 可以将页面容器分成 3 个等分。使用 1 个 .col-xs-3 和 1 个 .col-xs-9 ,可以对页面容器进行 3:9 比例分割,实现一个左侧 Sidebar 的效果。比如:


<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-md-offset-* 等进行偏移。回到一个重要的问题,知道了大致如何布局,那如何进行移动适配呢?

上面的例子我们看到,有 .col-xs-* .col-md-* 等等,其实 xs 、 md 等对应的是不同显示设备。比如:

*******************************************************************************

  • .col-xs-* :超小屏幕、手机 (<768px)

  • .col-sm-* :小屏幕 平板 (≥768px)

  • .col-md-* :中等屏幕 桌面显示器 (≥992px)

  • .col-lg-* :大屏幕 大桌面显示器 (≥1200px)

*******************************************************************************

通过给 div 定义多个 col-xx-* 的组合就可以达到不同移动设备进行布局适配的目的。

比如下面的示例:

<div class="row">
  <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
  <div class="col-xs-6 col-md-9">.col-xs-6 .col-md-9</div>
</div>

将实现在手机端进行 6:6 布局,在中等屏幕的PC端进行 3 : 9 布局。

版权声明:本文为博主原创文章,未经博主允许不得转载。

深入理解BootStrap-- 栅格系统(布局)7

1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootst...
  • z742182637
  • z742182637
  • 2016年01月06日 09:17
  • 33584

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

1.整体架构BootStrap框架公共六个部分:(css组件和js插件是其表现形式,其余的是基础支撑平台) 表现形式 CSS组件 JS插件 基础支撑平台 CSS12栅...
  • github_34514750
  • github_34514750
  • 2016年12月07日 16:30
  • 6198

深入理解BootStrap之栅格系统(布局)

1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootst...
  • q121516340
  • q121516340
  • 2016年05月26日 14:11
  • 15710

Bootstrap-栅格系统自适应布局

1 container 顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px paddin...
  • qiqingjin
  • qiqingjin
  • 2015年12月20日 09:51
  • 16754

bootstrap详解-栅格布局

1、栅格系统(布局) Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。 我在这里是把Bootstrap中...
  • swust_lian
  • swust_lian
  • 2017年04月11日 20:07
  • 1273

Bootstrap-栅格布局实例

下面是某管理系统的Bootstrap实现 XXXXX系统 body { padding-top: 50px; ...
  • qiqingjin
  • qiqingjin
  • 2015年12月20日 10:16
  • 3842

【bootstrap】栅格布局和自动隐藏或者显示

查看了多个大神的博客然后综合转载了下: 1 Container 顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是con...
  • wy_Blog
  • wy_Blog
  • 2017年02月19日 20:29
  • 12324

Bootstrap实战(第一弹:栅格实现5等分或8等分)

在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。 要2等分,使用col-md-6即可; 要3等分,使用col-md-4即可; 要4等分,使用col-md-3即可; 要6等...
  • lianjiww
  • lianjiww
  • 2017年02月15日 23:35
  • 3349

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

移动设备优先 Bootstrap 是移动设备优先的,为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。 meta name="viewport" content=...
  • griffin23
  • griffin23
  • 2015年10月27日 10:44
  • 2000

用Bootstrap栅格系统表单

Bootstrap 实例 - 页面标题 用户名: ...
  • qq_30638831
  • qq_30638831
  • 2017年08月06日 16:29
  • 462
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap栅格布局
举报原因:
原因补充:

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