版权声明:Unruly https://blog.csdn.net/weixin_41660948/article/details/86483584
文章目录
一、布局容器
Bootstrap所有的容器布局都在这个里面,注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
1..container
:15px拥有内外边距的父容器。
2..container-fluid
:充满全屏的容器。
二、栅格系统
1、.row
:定义行,一行默认12列。
-
.col-xs-*
:定义手机屏幕的列宽。.col-sm-*
:定义平板屏幕的列宽。.col-md-*
:定义普通屏的列宽。.col-lg-*
:定义大屏幕的列宽。
[^ *号的含义]: 代表占的列宽,不能超过12,多余的列会另起一行。col-md-4 占3列的宽。,所有的col必须包含在row中,所有的row必须包含在container中。col的水平padding为15px。,有所的列属性可以搭配使用以便于在不同的显示器不同的显示效果。
2、清除浮动:.clearfix
3、列偏移:.col-md-offset-*
,
列偏移通过增加左边距实现偏移。
4、嵌套列:
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-xs-8 col-sm-6">嵌套列</div>
<div class="col-xs-4 col-sm-6">嵌套列</div>
</div>
</div>
</div>
5、列排序:.col-md-push-*
和 .col-md-pull-*
push = left偏移 || pull = right偏移
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
6、列显示和列隐藏
当大屏幕显示 小屏幕隐藏 - visible-md-8 hidden-xs