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

更新时间：2016年05月20日 11:21:00 投稿：mrr

本文给大家介绍BootStrap3网格系统的相关知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧

如果显示网格，代码应类似这样：

<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)	小平板(≥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学习笔记(一)之网格系统，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

javascript模拟php函数in_array
就是判断一个元素是否存在于数组中的函数，既然js里string都有indexOf函数，为什么不在Array对象里设置一个这样的函数呢，其实就用indexOf这个思想挺好的，不知道制定JS标准的人是基于什么考虑，把这样一个如此常用的功能没考虑在内的。
2015-04-04
js/jquery控制页面动态加载数据滑动滚动条自动加载事件的方法
下面小编就为大家带来一篇js/jquery控制页面动态加载数据滑动滚动条自动加载事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
本篇文章主要介绍了JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法，具有一定的参考价值，有兴趣的可以了解一下。
2016-12-12
JavaScript之cookie技术详解
这篇文章主要为大家详细介绍了JavaScript之cookie技术,运用JS设置cookie、读取cookie、删除cookie ,需要的朋友可以参考下
2016-11-11
js实现拖拽元素选择和删除
这篇文章主要为大家详细介绍了js实现拖拽元素选择和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
JavaScript 值类型和引用类型的初次研究(推荐)
这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
2017-07-07
JavaScript中的View-Model使用介绍
这是一个十分常见的微博列表页面，类似于新浪微博。上周末，在心无旁骛情况下，一共用了5个对象，产出400行代码，实践出一种代码组织模式。
2011-08-08
JS实现的自定义右键菜单实例二则
这篇文章主要介绍了JS实现的自定义右键菜单,以两则实例形式分析了javascript自定义右键菜单效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
微信小程序tabBar 返回tabBar不刷新页面
这篇文章主要介绍了微信小程序tabBar 返回tabBar不刷新页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
javascript(jquery)利用函数修改全局变量的代码
现在博客系统的评论遇到一个问题，用户点击“最后一页”链接之后就自动调取最后一页的资料来显示。
2009-11-11