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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
PHP实现微信退款功能
2018/10/02 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
python线程池的实现实例
2013/11/18 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
python验证码识别实例代码
2018/02/03 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
python操作redis数据库的三种方法
2020/09/10 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
临床医学应届生求职信
2013/11/06 职场文书
表彰会主持词
2014/03/26 职场文书
食品安全宣传标语
2014/06/07 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android