bootsrap栅格系统

一.移动设备优先

在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏

幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

//分别为:屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

声明手机页面

<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">

二. 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等 属性的原因,这两种容器类不能相互嵌套。 

//固定宽度

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

//100%宽度

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

栅格系统介绍:

栅格体系以标准每行12列为基准.。通过一系列的行(row) 与列(column)的组合来创建页面布局。

每一行的内容可以通过class类名进行分配在一行每个元素区块站12列的多少,每一行的元素区块最大为12列,超过则进行换行.接下来看一个简单的栅格系统构建例子!

<div class="contaner-fluid">
//100%宽度构建一个栅格区域
<div class="row">//创建一个响应式的行
<div class="col-md-4">我是本行第一个元素块</div>
<div class="col-md-5">我是本行第二个元素块</div>
<div class="col-md-3">我是本行第三个元素块</div>
</div>
</div>

这样一个简单的栅格系统(单行)布局就完成了

col-md-表示在中等屏幕下的分布,col-md-4表示中等屏幕(md)下占据单行的4列,单行不得超过12列否则显示在第二行.

下面看一下完整的栅格参数

超小屏幕 手机 (<768px)

小屏幕 平板 (≥768px)

中等屏幕 桌面显示器 (≥992px)

大屏幕 大桌面显示器 (≥1200px)

栅格系统行为

总是水平排列

开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

.container 最大宽度

None (自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

最大列(column)宽

自动

~62px

~81px

~97px

槽(gutter)宽

30px (每列左右均有 15px)

可嵌套

偏移(Offsets)

列排序

在基础的栅格自适应页面上可以完善一下,进行不同尺寸设备显示的适应

<div class="container-fluid">
		<div class="row">
			<div class="col-lg-5 col-sm-3 col-md-5 a">我是第一行的响应式内容1</div>
			<div class="col-lg-3 col-sm-3 col-md-3 a">我是第一行的响应式内容2</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第一行的响应式内容3</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第一行的响应式内容4</div>
		</div>
		<div class="row">
			<div class="col-lg-3 col-sm-3 col-md-3 a">我是第二行的响应式内容1</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第二行的响应式内容2</div>
			<div class="col-lg-5 col-sm-3 col-md-5 a">我是第二行的响应式内容3</div>
			<div class="col-lg-2 col-sm-3 col-md-2 a">我是第二行的响应式内容4</div>
		</div>
		<div class="row">
			<div class="col-lg-5 col-md-4 col-sm-3 col-xs-2 a">我是第三行的响应式内容1</div>
			<div class="col-lg-2 col-md-4 col-sm-2 col-xs-2 a">我是第三行的响应式内容2</div>
			<div class="col-lg-3 col-md-4 col-sm-2 col-xs-2 a">我是第三行的响应式内容3</div>
			<div class="col-lg-2 col-md-4 col-sm-5 col-xs-2 a">我是第三行的响应式内容4</div>
		</div>
	</div>

根据多行可以进行多样化调用类名,实现不同设备进行不同排列,构建完善的页面布局!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

PyCharm常用快捷键

Ctrl + NumPad+/- 展开或者收缩代码块 Ctrl + Shift + NumPad+ 展开所有的代码块 Ctrl + Shift + NumPa...

2141
来自专栏技术博文

实用:Google Chrome 键盘快捷键大全

窗口和标签页快捷方式 Ctrl+N 打开新窗口 按住 Ctrl‎ 键,然后点击链接 在新标签页中打开链接 按住 Shift 键,然后点击链接 在新...

3068
来自专栏ZKEASOFT

纸壳CMS在线编辑样式

纸壳CMS可以在页面设计界面,可视化修改页面内的可见元素的样式,在线编辑样式。点击组件工具栏上的“自定义样式”按按钮打开样式编辑对话框:

1634
来自专栏Android-薛之涛

Android - 自定义View,实现不一样的输入框

最近看到一个效果,就是在登陆界面输入账号密码的时候,会有一个动画效果,感觉不错,找了一些资料,学习了一下。已经实现效果,效果如下:

3492
来自专栏阿炬.NET

常用插件备份

3008
来自专栏十月梦想

Vue入门详解之Vue实现hello world!

前几天搞了从入门到放弃系列的Vue文章,发现每篇文章有点乱,可能思路不太清晰,用了几天发现Vue,恩,真香!继续来搞Vue,接下来详细介绍Vue入门,本篇来看一...

1853
来自专栏小白课代表

必备!OCR文字识别、截图、贴图、取色、翻译、检查错误...这绝不仅仅是一款OCR识别工具!

手机端的OCR文字识别工具给大家推荐过白描和白描取字,PC端以前推荐过天若OCR,当时的感觉时这是一款ABBYY FineReader不错的替代品,但是经过几个...

1.2K2
来自专栏一“技”之长

Bootstrap响应式前端框架笔记五——按钮

    Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下:

802
来自专栏vue学习

27、有赞Vant组件库的引入及轮播图片预览的实现②

这个vant组件与其它组件的引入方式不同,不需要在main.js中引入,直接在页面中引入即可:

2202
来自专栏向治洪

android sdutio常用快捷键

快捷键 说明 F2 定位到高亮错误或警告的位置 F4 若选中项目,打开 Project ...

1849

扫码关注云+社区

领取腾讯云代金券