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 布局。

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

相关文章推荐

定制布局:栅格系统

栅格系统 ionic的栅格系统采用了CSS3的弹性盒(Flexible Box)模型,这使得它与大多数 栅格系统都有所区别。Flex布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序, ...

bootstrap-栅格布局

Bootstrap栅格布局 了解Bootstrap栅格布局是使用bootstrap的基础。bootstrap将屏幕分为12等分,在具体的div中,可以设置div所占等分的数字确定其在屏幕中占有的宽度...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

Bootstrap-栅格布局实例

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

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

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

一种嵌套式栅栏布局的对齐方式

在bootstrap的应用中,经常需要对栅格进行嵌套布局,但也因为如此,很容易出现内容无法对齐的现象。UI给定的要求是两栏表格布局,文字与输入框的占比为1:3,详细布局文件见下图。 几乎不用思考,我...

Bootstrap学习之二:栅格化布局

@(Bootstrap)导言前面我们讲了如何安装使用bootstrap框架,下面我们将会学习bootstrap的各种框架结构,布局。在这篇文章中将讲述如何使用栅格化布局 导言 什么是栅格化布局 开始栅...

Bootstrap-栅格系统自适应布局

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

第三章 Boostrap 框架解析--栅格系统案例 笔记1

概述: Boostrap框架主要是有动态CSS语言LESS编写,简单一句就是Boostrap类似spring 集大成者 知识小点: Hack规则 来解决浏览器兼容问题CSS3书写规范遵循...

Bootstrap3的栅格化布局样式

栅格化布局,又称“网格系统”,是一种使用规则的网格阵列来指导和规范网页中的版面布局以及信息分布原文来自:http://caibaojian.com/bootstrap3-grid.html Bo...

Qt之格栅布局(QGridLayout)

一、简述QGridLayout:格栅布局,也被称作网格布局(多行多列)。栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列,并把每个窗口部件插...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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