发表于： 2019-06-26 23:31:20
1 764
今天完成的事：
完成任务8第一个页面，深度思考如何使用bootstrap栅格系统
明天计划的事：
完成任务8每日深度思考
遇到的问题：
没什么问题，暂无
收获：
如何使用bootstrap栅格系统
1原理
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值。
2使用规则
1)数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2）在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。
3）具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元
3栅格选项
当屏宽小于768px（即小屏）时，列的划分以.col-xs-后面的数字为准。如果没定义.col-xs-，就会变成单列且宽度和row相等。
当屏宽在768px和992px之间（即平板屏）时，列的划分以.col-sm-后面的数字为准。如果没有定义col-sm-，以.col-xs-为准。
当屏宽在992px和1200px之间（即中屏）时，列的划分以.col-md-后面的数字为准。如果没有定义.col-md-，以col-sm-或col-xs-为准。
当屏宽大于1200px（即大屏）时，列的划分以.col-lg-后面的数字为准。如果没有定义.col-md-，以.col-md-或col-sm-或col-xs-为准。
网格系统用来布局，其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。
1)列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性。
2)列偏移
通过col-md-offset-*(其中星号代表移动的列组合数)来实现。
3)列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)实现列的向左或向右排序。
4)列嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列。
返回列表
评论