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 提升运行速度之循环篇 译文
Aug 15 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
js同源策略详解
May 21 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
Vue计算属性的使用
Aug 04 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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防攻击代码升级版
2010/12/29 PHP
php whois查询API制作方法
2011/06/23 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Python处理JSON数据并生成条形图
2016/08/05 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
Python Process多进程实现过程
2019/10/22 Python
django实现用户注册实例讲解
2019/10/30 Python
Python使用xpath实现图片爬取
2020/09/16 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
金融专业毕业生自荐信
2014/06/26 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers