Bootstrap3栅格系统布局实例
布局实例
Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。
先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-*
栅格类来创建一个栅格系统:
<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>
上述代码中,我们仅仅为元素应用了一组 .col-md-*
栅格类,而没有应用任何 .col-xs-*
、.col-sm-*
、.col-lg-*
类。
根据小设备优先的规则,就很容易知道它在小屏幕和超小屏幕上将使用默认的堆叠布局,在大屏幕上将继续使用 .col-md-*
类的布局,即水平排列的三列等宽布局。
这也很容易验证,通过鼠标调整浏览器窗口的尺寸,一开始让窗口很窄(小于992px)。得到的运行结果如图 2‑1所示:
图2-1 小屏幕和超小屏幕堆叠排列
随着窗口慢慢增大,当达到 992px 时,它就会就变为水平排列。运行结果如图 2‑2所示:
图2-2 中等屏幕和大屏幕水平排列
如果你不希望在小屏幕设备上所有列都堆叠在一起,那就得添加针对超小屏幕的类.col-xs-*
。如:
<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>
上述元素应用了 .col-xs-*
和 .col-md-*
栅格类,因此在小屏幕和超小屏幕上将使用.col-xs-*
类定义的 6-6-6 布局(由于列数之和大于 12,最后一个 6 列将另起一行排列),在中等屏幕和大屏幕上将使用 .col-md-*
类定义的 4-4-4 布局。
在小屏幕和超小屏幕上的运行结果如图 2‑3所示:
图2-3 小屏幕和超小屏幕布局
在中等屏幕和大屏幕的运行结果如图 2‑4所示:
图2-4 中等屏幕和大屏幕布局
如果你希望每种不同的屏幕都拥有不同的布局,你就可以同时使用 .col-xs-*
、.col-sm-*
、.col-md-*
、.col-lg-*
类。如:
<div class="row ">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</div>
<div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">…</div>
</div>
上述布局为 4 种类型的屏幕都分别定义了各自的栅格类,因此每种屏幕都将拥有自己的布局。最终的布局结果是,在超小屏幕上将使用.col-xs-*
类定义的 6-6 布局,在小屏幕上使用.col-sm-*
类定义的 4-8 布局,在中等屏幕上使用 .col-md-*
类定义的 3-9 布局,在大屏幕上使用 .col-lg-*
类定义的 2-10 布局。
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap3栅格系统布局实例相关推荐
- bootstrap栅格系统布局原理
简介 栅格系统用于通过一系列的行(row)与列(col)组合来创建页面布局,你的内容就可以放入这些创建好的布局中.下面介绍一下栅格bootstrap栅格系统的工作原理: 行(row)必须放在.cont ...
- Bootstrap、栅格系统布局
一.Bootstrap Bootstrap是一个基于HTML.CSS和JavaScript语言编写的框架,具有简单.灵活的特性,拥有样式库.组件和插件. · Bootstrap常用来开发响应式布局和移 ...
- Bootstrap3 栅格系统-简介
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
- Bootstrap3 栅格系统之列嵌套
列嵌套 Bootstrap栅格系统也支持列嵌套,即在一个列中嵌套一个或多个行.被嵌套的行依然遵守最大 12 列的规则,即一行中所包含的总列数不能大于12(当然,也没有要求你必须占满12列),如果大于 ...
- Bootstrap3 栅格系统
栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 Bootstrap栅格系统通过一系列的行 ...
- Bootstrap3 栅格系统之列排序
列排序 Bootstrap 栅格系统中一个非常人性化的特性,就是使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序.push 将元素向右推动 * 指定的列数,pul ...
- 关于栅格系统布局的介绍
文章目录 定义 等宽多行 设置一列的宽度 设宽时注意事项 可变宽度内容 对准 合并两行(`前提是两个适应屏幕宽度的宽度之和为12`) 排序 偏移 套料 定义 栅格系统英文为"grid sys ...
- Bootstrap3 栅格系统-媒体查询
在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值. /* 超小屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关的代码,因为这在 B ...
- Bootstrap3 栅格系统-栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的. -–下面有个"顶"字,你懂得O(∩_∩)O哈哈~ -–乐于分享,共同进步! -–更多文章请看:h ...
最新文章
- java/android 做题中整理的碎片小贴士(5)
- javaweb系统oracle锁表,oracle、websphere下获取数据库连接时出现死锁
- 队列与栈(Queue,Deque,Stack)
- 例行检查软件列表,突然发现不明sangforvnc应用
- 已知两点, 求直线斜率
- Pytorch节省显存、加速训练的小技巧
- 基于机智云的智能花盆1.0
- C语言,详解二进制位运算
- 微信小程序页面之间传参,发表说说
- proxy代理报错: Uncaught (in promise) Error: Request failed with status code 500
- gorilla websocket简易介绍
- [翻译]估计硬件规模:为什么我们没有一个明确的答案?
- iview组件引入vue项目
- 程序员代码面试指南 CD101 单调栈结构
- Python的字典类型实现统计文件字符个数和出现次数
- TFN DP113Z 对数周期天线 100MHz~1350MHz
- 西安交通大学计算机笔试题,《大学计算机基础试题与答案》_西安交通大学
- 杂物论第一 中华文明的根基
- STM32G4之高级定时器原理
- 2016中国互联网安全大会:我国网络安全人才缺口至少50万