第三篇Bootstrap网格基础


Posted in Javascript onJune 21, 2016

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里,可以是div,内容放置在列内,网页设计中的网格用于布局内容,让网站易于浏览,下面是一个用bootstrap网格布局的例子。

<div>
<div>col2</div>
<div>col10</div>
</div>

显示效果如下:

第三篇Bootstrap网格基础

加了Class=”row”的样式表示行,加了class=”col-sm-2”的样式表示列,系统将整个屏幕分为12份,col-sm-2表示该列跨2份,col-sm-10比表示该列跨10份。显示的效果就会如上图所示,表示一行两列,第一列占2份,第二列占10份。

bootstrap是一个响应式的前端框架,体现在网格系统中就是对应于不同的显示大小的设备,可以呈现出不同的显示效果。如下所示:

<div class="row">   
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-个4</div> 
</div>

Col-md-8表示在中等屏幕比如普通台式机和笔记本下该列占8份。Col-xs-12表示在小屏幕比如平板电脑下该列占12份。以上代码表示在普通台式机和笔记本下一行两列,第一列占8份,第二列占4份,在平板电脑下一行两列,第一列占12份,第二列占6份。通过此种方式达到在不同的显示设备上展示不同效果。可以通过调整浏览器的大小来模拟一下这两种情况。

下图表示Bootstrap 的网格系统是如何在多种屏幕设备上工作的

第三篇Bootstrap网格基础

以上所述是小编给大家介绍的第三篇Bootstrap网格基础 的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
vue中使用props传值的方法
May 08 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 #Javascript
第二篇Bootstrap起步
Jun 21 #Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
第一篇初识bootstrap
Jun 21 #Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 #Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
You might like
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php根据年月获取季度的方法
2014/03/31 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
javascript常见操作汇总
2014/09/03 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python中使用不同编码读写txt文件详解
2015/05/28 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python感知机实现代码
2019/01/18 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
饲料采购员岗位职责
2013/12/19 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
如何理解python接口自动化之logging日志模块
2021/06/15 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
使用Java去实现超市会员管理系统
2022/03/18 Java/Android