首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

bootstrap学习笔记二

2013-11-14 
bootstrap学习笔记2bootstrap提供了许多的样式类,里面的样式包括排版、表格、表单等等。bootstrap内置了一套

bootstrap学习笔记2
bootstrap提供了许多的样式类,里面的样式包括排版、表格、表单等等。bootstrap内置了一套响应式、移动设备优先的流式栅格系统,系统自动最多分为12列。栅格系统的工作原理:1.行(row)必须包含在.container中,以便为其赋予合适的排列(alignment)和内补(padding)。
2.使用行(row)在水平方向创建一组列(column)。
3.你的内容应当放置于列(column)内,而且只有列(column)可以作为行(row)的直接子元素。
4.可以通过预先定义好的网格类,像.row,.col-xs-4等来快速创建栅格布局。
5.通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
6.栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。
栅格与全宽布局的注意事项:
对于需要占据整个浏览器视口(viewport)的页面,需要将内容区域包裹在一个容器元素内,并且赋予padding: 0 15px;,为的是抵消掉为.row所设置的margin: 0 -15px;(如果不这样的话,你的页面会左右超出视口15px,页面底部出现横向滚动条)。

热点排行