第三篇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的动画类 Fx.js
Nov 05 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php单例模式的简单实现方法
2016/06/10 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
python求质数的3种方法
2018/09/28 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Keras实现DenseNet结构操作
2020/07/06 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
经贸专业毕业生求职信
2014/03/23 职场文书
给校长的建议书400字
2014/05/15 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
您对思维方式了解多少?
2019/12/09 职场文书