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 相关文章推荐
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
一文帮你理解PReact10.5.13源码
Apr 03 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优于Node.js的五大理由分享
2012/09/15 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP闭包函数详解
2016/02/13 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JavaScript高级程序设计
2006/12/29 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python手写均值滤波
2020/02/19 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
你懂得怎么写自荐信吗?
2013/12/27 职场文书
外贸专业求职信
2014/03/09 职场文书
一岗双责责任书
2014/04/15 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL
详解MySQL的内连接和外连接
2023/05/08 MySQL