Bootstrap栅格系统使用方法及页面调整变形的解决方法


Posted in Javascript onMarch 10, 2017

如果你以前使用过Bootstrap2或者了解过响应式技术,那么肯定对Bootstrap栅格系统并不陌生,由于栅格系统的引入,使得Bootstrap的跨设备布局显示变得可能。

什么是栅格系统

栅格系统是指,将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。

Bootstrap的栅格系统采用了1-12列的模式,并且通过比例计算来设置你定义的列宽。

例如你这一行想要采用两列的布局模式,那么每列的宽度都为外容器的50%,不管你用什么设备浏览,它都会采用这样的比例进行展示。

不过如果当设备宽度小于你设定的最小宽度,那么这两列就会并排成为一列。

Bootstrap的栅格系统

在Bootstrap中使用栅格系统非常简单方便,只需要在你的div中引入它们已经定义好的类即可。

我们先看看Bootstrap有几种栅格类可以使用:

1. .col-xs-* 这是超小屏幕类(<768px),类似手机等设备。

2. .col-sm-* 这是小屏幕设备类(≥768px且<992px),类似平板设备。

3. .col-md-* 这是中型设备类(≥992px且<1200px)。

4. .col-lg-* 这是大型设备类(≥1200px)。

如何使用Bootstrap栅格系统

你可以通过使用这些对应设备的栅格类来决定自己应用在不同设备上的布局样式。

例如:

<div class="col-xs-6 col-md-12"></div><div class="col-xs-6 col-md-12"></div>

这种编码的结果就是,这两个div在pc端浏览起来是两行(每行都占据12列栅格),而在手机端浏览器来是一行两列(每列占据6列栅格)。

通过这种形式,就能很方便地使用栅格系统定制自己的应用布局了。

其他信息

除了以上的使用方法之外,还能使用“列偏移类”来快速对自己的栅格进行定位,使用方法类似

<div class=".col-md-8 .col-md-offset-3"></div>

按照这样的写法,这个div就会在pc端向右偏移 3列。

使用BootStrap中的栅格系统后,页面调整变形的解决方法

在做考试页面时,使用简单的10-2分格布局。发现缩小后,div位置错乱,如图

Bootstrap栅格系统使用方法及页面调整变形的解决方法

解决方案如下:

Bootstrap栅格系统使用方法及页面调整变形的解决方法

为每个使用到栅格的class添加所有的屏幕属性,实现自适应

Bootstrap栅格系统使用方法及页面调整变形的解决方法

效果如图

Bootstrap栅格系统使用方法及页面调整变形的解决方法

以上所述是小编给大家介绍的Bootstrap栅格系统使用方法及页面调整变形的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
javascript常用的设计模式
Feb 09 Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 #Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 #Javascript
js获取ip和地区
Mar 10 #Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 #Javascript
JavaScript组件开发之输入框加候选框
Mar 10 #Javascript
原生javascript移动端滑动banner效果
Mar 10 #Javascript
jQuery弹出窗口简单实现代码
Mar 09 #Javascript
You might like
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
python操作ie登陆土豆网的方法
2015/05/09 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
白酒市场开发计划书
2014/01/09 职场文书
七一党建活动方案
2014/01/28 职场文书
优秀教师演讲稿
2014/05/06 职场文书
本科应届生求职信
2014/08/05 职场文书
干部外出学习心得体会
2016/01/18 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python