Bootstrap栅格布局
1、栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
2、简介
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
- “行(row)”必须包含在
.container
(固定宽度)或.container-fluid
(100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。
- 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
- 类似
.row
和.col-xs-4
这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置
padding
属性,从而创建列与列之间的间隔(gutter)。通过为.row
元素设置负值margin
从而抵消掉为.container
元素设置的padding
,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个
.col-xs-4
来创建。 - 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何
.col-md-*
栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何.col-lg-*
不存在, 也影响大屏幕设备。
通过研究后面的实例,可以将这些原理应用到你的代码中。
3、栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
bootstrap4
版本中
之前版本
4、实例:从堆叠到水平排列
使用单一的一组 .col-md-*
栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row
内。
<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>
5、实例:流式布局容器
将最外面的布局元素 .container
修改为 .container-fluid
,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
<div class="container-fluid"><div class="row">...</div>
</div>
6、实例:移动设备和桌面屏幕
是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*
和 .col-md-*
。请看下面的实例,研究一下这些是如何工作的。
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<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>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<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>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row"><div class="col-xs-6">.col-xs-6</div><div class="col-xs-6">.col-xs-6</div>
</div>
7、实例:手机、平板、桌面
在上面案例的基础上,通过使用针对平板设备的 .col-sm-*
类,我们来创建更加动态和强大的布局吧。
<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-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row"><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><!-- Optional: clear the XS cols if their content doesn't match in height --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
8、实例:多余的列(column)将另起一行排列
如果在一个 .row
内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。
<div class="row"><div class="col-xs-9">.col-xs-9</div><div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div><div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
9、响应式列重置
即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix
和 响应式工具类。
<div class="row"><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><!-- Add the extra clearfix for only the required viewport --><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div><div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
除了列在分界点清除响应, 您可能需要 重置偏移, 后推或前拉某个列。请看此栅格实例。
<div class="row"><div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div><div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row"><div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div><div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
10、列偏移
使用 .col-md-offset-*
类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4
类将 .col-md-4
元素向右侧偏移了4个列(column)的宽度。
<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>
You can also override offsets from lower grid tiers with .col-*-offset-0
classes.
<div class="row"><div class="col-xs-6 col-sm-4"></div><div class="col-xs-6 col-sm-4"></div><div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"></div>
</div>
11、嵌套列
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row
元素和一系列 .col-sm-*
元素到已经存在的 .col-sm-*
元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。
<div class="row"><div class="col-sm-9">Level 1: .col-sm-9<div class="row"><div class="col-xs-8 col-sm-6">Level 2: .col-xs-8 .col-sm-6</div><div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6</div></div></div>
</div>
12、总结
响应式工具有哪些呢
为了加快对移动设备友好的网页开发工作,利用媒体查询功能,并将这些工具类可以方便的针对不同设备展示或隐藏页面内容。
通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。
从 v3.2.0 版本起,形如 .visible-*-*
的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display
属性,列表如下:
因此,以超小屏幕(xs
)为例,可用的 .visible-*-*
类是:.visible-xs-block
、.visible-xs-inline
和 .visible-xs-inline-block
。
.visible-xs
、.visible-sm
、.visible-md
和 .visible-lg
类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 ` 相关的元素的特殊情况外,它们与
.visible-*-block` 大体相同。
与之相反的,是visible-xs
、visible-sm
、visible-md
、visible-lg
是显示某个页面内容
Bootstrap栅格布局相关推荐
- Bootstrap栅格布局分析grid源码
前言 此为本人自学经验和某站博主经验,与其他简书作者经验共同写出. 如有侵权请联系. 布局 首选布局前,大家要明白bootstrap几种布局方式 栅格&flex 这篇文章先讲解栅格,flex以 ...
- Bootstrap栅格布局解析
文章目录 栅格布局 初始栅格 栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析 流体容器&固定容器公共样式 @grid-gutt ...
- Bootstrap栅格布局系统的特点
栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...
- [bootstrap]栅格布局与flex的区别以及栅格布局的响应式应用
栅格布局的特点以及与flex的区别 HTML <body><!-- 一行4个 --><div class="container"><div ...
- 响应式设计-Bootstrap栅格布局
响应式布局:就是一个网站为了兼容多个终端,而不是为每个终端制定特定的版本.这个概念是为解决移动互联网浏览而诞生的. 全面了解Bootstrap可以看:http://v3.bootcss.com/css ...
- bootstrap栅格布局之花样样式布局
在这两天重新写一个关于响应式部分的前端页面,有了一些新的总结,希望可以帮到那些被bootstrap玩死的你... <!DOCTYPE html> <html lang="e ...
- Bootstrap栅栏布局
Bootstrap栅格布局 bootstrap栅栏系统css中的col-xs-.col-sm-.col-md-* .col-lg-*的意义: 小于 768px 的时候,用 col-xs-12 类对应的 ...
- html栅栏布局,bootstrap12栅格布局
bootstrap栅格布局列高怎么设置 bootstrap栅格占多行 栅格系统只占列,和行无关. 按你上图,就是第一次分成2列,第二列放地图 一.第一列里面含三个大DIV各占一行 1.1第一行分成3列 ...
- bootstrap 标题居中加颜色_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局...
目标 目标一.理解什么是栅格布局 目标二.掌握栅格布局具体应用 目标三.掌握BootStrap通用CSS样式(排版.代码.代码.表单.按钮.图片.辅助类.响应式工具) 内容 一.BootStrap全局 ...
最新文章
- 使用python调用zabbix接口截取监控图并生成Word文档
- ERP_Oracle Fusion Application新一代ERP介绍
- python是不是特别垃圾-【转】python是垃圾吗?
- 现代操作系统: 第一章 引言
- Azure 内容审查器之羞羞图审查
- python如何引发和处理异常_在python3.6中,如何捕捉异常并引发异常以便稍后处理?...
- eclipse中The JSP specification requires that an attribute name is preceded by whitespace
- c语言引入文件和java导包的区别
- 前端笔记-vue cli引入sementic-ui(sementic-ui-vue)
- Zclip:复制页面内容到剪贴板兼容各浏览器
- TCP/IP详解 笔记九
- OpenGL ES 3.2
- java final 内存泄漏_干货详解:一文教你如何避免内部类中的内存泄漏
- java 单例加锁方法的讨论
- 孙鑫VC学习笔记:第十二讲 (四) 用API函数、CFile类操作文件
- 编译原理完整学习笔记(四):语法分析
- html如何修改字体黑体,css如何设置黑体样式?
- chrome刷新缓存
- [UOJ449][概率DP]集训队作业2018:喂鸽子
- 初学者计算机电脑怎样学,初学者怎样学习电脑能够快速入门(免费科普电脑基础知识)...
热门文章
- 注册dll文件的方法集合
- B站 全套java面试(200道)问题MD(题目+答案)
- 自由软件基金会三十载(一)
- 计算机管理 没有适当的权限,XP更改不了系统时间提示“您没有适当的特权级”是怎么回事...
- win32消息处理和创建窗口
- 爬虫快速入门——Request对象的使用
- 神经网络(二):Softmax函数与多元逻辑回归
- 都市鸿蒙珠认主,都市之我能穿越洪荒
- 商越程序:企业在采购数字化变革设计思路上的“四个改变”
- java鼠标指针锤子,如果用4个技能打不过他,那就用7个