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...

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

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

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

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

bootstrap详解-栅格布局

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

Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

转自:http://www.cnblogs.com/willian/p/3558180.html?utm_source=tuicool 这个标题取的有点奇怪,怪我翻译的有问题吧。英文学平有限,有...

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

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

Bootstrap栅格系统原理

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

2.2Bootstrap栅格系统案例

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

Bootstrap-栅格布局实例

下面是某管理系统的Bootstrap实现 XXXXX系统 body { padding-top: 50px; ...

Bootstrap-栅格系统自适应布局

1 container 顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px paddin...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap栅格布局
举报原因:
原因补充:

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