bootsrap外边距_Bootstrap⽹格系统布局详解
Bootstrap 提供了⼀套响应式、移动设备优先的流式⽹格系统(Grid System)，随着屏幕或视⼝(viewport)尺⼨的增加，系统会⾃动分为最多12列。
⼀、什么是⽹格(Grid)?
在平⾯设计中，⽹格是⼀种由⼀系列⽤于组织内容的相交的直线(垂直的、⽔平的)组成的结构(通常是⼆维的)。它⼴泛应⽤于打印设计中的设计布局和内容结构。在⽹页设计中，它是⼀种⽤于快速创建⼀致的布局和有效地使⽤ HTML 和 CSS 的⽅法。
⼀句话概括：⽹页设计中的⽹格⽤于组织内容，让⽹站易于浏览，并降低⽤户端的负载。
⼆、什么是Bootstrap⽹格系统(Grid System)？
Bootstrap 包含了⼀个 响应式的、移动设备优先的、不固定的⽹格系统 ，可以随着设备或视⼝⼤⼩的增加⽽适当地扩展到 12 列。它包含了⽤于简单的布局选项的预定义类，也包含了⽤于⽣成更多语义布局的功能强⼤的混合类。
三、⽹格系统⼯作原理
⽹格系统通过⼀系列包含内容的⾏和列来创建页⾯布局。下⾯列出了 Bootstrap ⽹格系统是如何⼯作的：
·⾏必须放置在 .container class 内，以便获得适当的对齐(alignment)和内边距(padding)。
·使⽤⾏row来创建列的⽔平组。
·内容应该放置在列内， 且唯有列可以是⾏的直接⼦元素 。
·预定义的⽹格类，⽐如 .row 和 .col-xs-4 ，可⽤于快速创建⽹格布局。LESS 混合类可⽤于更多语义布局。
·列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负，表⽰第⼀列和最后⼀列的⾏偏移。·⽹格系统是通过指定您想要横跨的⼗⼆个可⽤的列来创建的。例如，要创建三个相等的列，则使⽤三个 .col-xs-4。
下⾯是 Bootstrap 基本的⽹格结构：
...
...
padding是外边距还是内边距注意：列
⾏元素下，且⾏元素⾥边只能包含列⼦元素，不能跟其他的⼦标签元素，否则，布局样式会乱掉。
四、布局实战
代码：
Bootstrap 实例 - 布局偏移列-@corwien
区块⼀ (col-md-8 col-md-offset-1)
区块⼆ (col-md-3)
区块三 (col-md-8 col-md-offset-1)
区块四 (col-md-4)
区块五(col-md-12)
区块六(col-md-3)
区块七(col-md-6)
区块⼋(col-md-3)
说明：灰⾊区域为body, ⽩⾊区域内为container容器。
注意：这⾥要特别注意区块⼀、区块⼆为在同⼀⾏，⽽区块三、和区块四在不同⾏，为什么呢？因为列元素为⾏内元素，如果⼀⾏没有够12列，则下边的区块元素会和它上边的区块列加起来⼩于或等于12，则会排在同⼀⾏，如果加起来⼤于12，则会排在下⼀列，如区块⼀和区块⼆两个列加起来等于12，则刚好能排在同⼀⾏，⽽区块三、四两个列加起来为13，超过⼀⾏最⼤显⽰列数12，⾃然就排在另⼀⾏了。
以上所述是⼩编给⼤家介绍的Bootstrap ⽹格系统布局，希望对⼤家有所帮助，如果⼤家有任何疑问欢迎给我留⾔，⼩编会及时回复⼤家的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。