本课学习 栅格系统 Grid System
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:
- 行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
- 使用行(row)在水平方向创建一组列(column)。
- 你的内容应当放置于列(column)内,而且,只有列(column)可以作为行(row)的直接子元素。
- 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
- 通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。
基本的grid布局结构如下:
<div class="container">
<div class ="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
</div>
第一个* 表示 类型( xs, sm, md, lg ) , 第二个*表示列宽 (1-12)
那么写一个两列宽,很列有两段落文字的页面 是不是信手拈来呢 :)
html的代码这个后台支持的不好,贴上来会自动改变我原来的输入内容,以后就不贴代码了,直接上文件了。有什么不明白的可以留言
<div class="container">
<div class ="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
</div>
第一个* 表示 类型( xs, sm, md, lg ) , 第二个*表示列宽 (1-12)
那么写一个两列宽,很列有两段落文字的页面 是不是信手拈来呢 :)
html的代码这个后台支持的不好,贴上来会自动改变我原来的输入内容,以后就不贴代码了,直接上文件了。有什么不明白的可以留言
bootsrap_bob_tutorial.html |
用浏览器打开,看是不是直接就是两列布局了!!
你无需自己去写css实现了,换言之, 就算你搞不清楚 position: relative, static, absolute, fixed ,搞不清楚浮动是什么, 一样也可轻松实现各种布局了。
收工!
你无需自己去写css实现了,换言之, 就算你搞不清楚 position: relative, static, absolute, fixed ,搞不清楚浮动是什么, 一样也可轻松实现各种布局了。
收工!