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 相关文章推荐
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
简单的分页代码js实现
May 17 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 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 strtr() 函数使用说明
2008/11/21 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python小白垃圾回收机制入门
2020/06/09 Python
python 制作磁力搜索工具
2021/03/04 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
员工评语大全
2014/01/19 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
明信片寄语大全
2014/04/08 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
python迷宫问题深度优先遍历实例
2021/06/20 Python