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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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中heredoc的使用方法
2013/06/17 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
javascript 拖放效果实现代码
2010/01/22 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python基础之入门必看操作
2017/07/26 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
PyQt5每天必学之组合框
2018/04/20 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
医学院学生求职简历的自我评价
2013/10/24 职场文书
火锅店的活动方案
2014/08/15 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
财产保全担保书
2015/01/20 职场文书
电力安全学习心得体会
2016/01/18 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
5个实用的JavaScript新特性
2022/06/16 Javascript