BootStrap3学习笔记(一)之网格系统


Posted in Javascript onMay 20, 2016

如果显示网格,代码应类似这样:

<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>

其中col-*-*表示不同类型设备下在网格系统中占据的列宽

极小 手机( 小 平板(≥768px) 中计算机(≥992px) 大 计算机(≥1200px)
container最大宽度 None (auto) 750px 970px 1170px
类名前缀 .col-xs- .col-sm- .col-md- .col-lg-
最大列宽 Auto ~62px ~81px ~97px
列间隙 15px (i.e. 30px)

当列的高度不同时,由于float的作用会破坏网格的结构,可通过使用响应类避免,下面是一个完整的网格代码:

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 2</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 4</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 5</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 6</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 7</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 8</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-lg-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 10</p></div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 11</p></div>
<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 12</p></div>
</div>
</div>

其中的visible-*-*表示在何种设备下以何种display属性显示,由于极小设备默认为单列显示,因此无需使用响应类定制。
响应类也可用在普通标记中,比如下面的代码:

<p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>
<p class="visible-sm-block">This paragraph is visible only on small devices.</p>
<p class="visible-md-block">This paragraph is visible only on medium devices.</p>
<p class="visible-lg-block">This paragraph is visible only on large devices.</p>

类似的,也可使用hidden-*,设置在特定设备中隐藏:

<p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>
<p class="hidden-sm">This paragraph is hidden only on small devices.</p>
<p class="hidden-md">This paragraph is hidden only on medium devices.</p>
<p class="hidden-lg">This paragraph is hidden only on large devices.</p>

通过响应类还可以设置打印时的格式:

BootStrap3学习笔记(一)之网格系统

以上所述是小编给大家介绍的BootStrap3学习笔记(一)之网格系统,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
学习ExtJS Window常用方法
Oct 07 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 #Javascript
Bootstrap表格和栅格分页实例详解
May 20 #Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 #Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 #Javascript
AngularJS中的指令全面解析(必看)
May 20 #Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 #Javascript
javascript的理解及经典案例分析
May 20 #Javascript
You might like
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
详解Python中with语句的用法
2015/04/15 Python
使用python实现生成用户信息
2017/03/20 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
Python 随机按键模拟2小时
2020/12/30 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
技校生自我鉴定
2013/12/08 职场文书
给校长的一封建议书
2014/03/12 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
护理专业求职信
2014/06/15 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
初中中等生评语
2014/12/29 职场文书
护士节慰问信
2015/02/15 职场文书
小学班主任个人总结
2015/03/03 职场文书