响应式布局:一套代码可以适配多个终端。
适用于后台管理系统等简约类的网站。
原理仍是媒体查询。
xs 超小屏:0-768px
sm 小 屏:768-992px
md 中 屏:992px-1200px
lg大 屏:1200px-无穷
栅格系统: 是BS实现响应式的核心所在 其底层也是媒体查询
首先考虑网格系统在不同屏幕的变化
如在小屏隐藏,则给父盒子设置hidden-sm,则其在小屏和超小屏均隐藏(覆盖式)
再者看子盒子在不同屏幕的变化,首先看一排有几个盒子,如在大屏中一排有三个盒子,则每个盒子占四列();但在中屏中一排有两个盒子则每个盒子占6列。这时给每个子盒子设置 col-lg-4
col-md-6.
<div class="wjf-header hidden-sm">
<div class="col-lg-4 col-md-6">
</div>
<div class="col-lg-4 col-md-6">
</div>
<div class="col-lg-4 col-md-6">
</div>
<div class="col-lg-4 col-md-6">
</div>
<div class="col-lg-4 col-md-6">
</div>
<div class="col-lg-4 col-md-6">
会自动换行,即在大屏的时候是两排,在中屏的时候是三排
如果一排中的盒子宽度不一时,则每排的各个盒子的col自行调整,相加=12
<div class="wjf-header hidden-sm">
<div class="col-lg-3 ">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-5">
</div>
</div> 即这一排卡UN度比例为3:4:5
其他:
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
看版面是不是要设置版心:
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。
.container 类用于固定宽度并支持响应式布局的容器。
消除默认15px的内边距,添加.row,其默认{
margin-right: -15px; margin-left: -15px;
}
即布局样式可写成:
<div class="wjf-header hidden-sm">
<div class="container">
<div class="row">
</div>
</div>
</div>