前言:
近期学习DIV+CSS布局,从而接触到全新的Bootstarp框架,对于Bs框架的广泛运用数据以及对移动自适应的友好,需要进行学习。
知识点:
栅格布局是BS框架的重点,实现自适应布局的基本功能就是这点,通过对不同的设备(设备宽度)来设置不同的类名(.class),从而实现自适应效果。以下分别是各种设备的类名情况。
超小设备(<576) | 小型设备(≤576) | ipad(≤768) | 大型设备(≤992) | PC(≤1140) | |
类名 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
列总数 | 12 | 12 | 12 | 12 | 12 |
基本用法就是在元素添加类名.col-*-*,当然必须嵌套在类名.row之内,.row是一行的意思
代码示例
<div class="row">
<--代表这是一行-->
<div class="col-sm-6 col-md-4">
小设备2等分
</div>
<div class="col-sm-6 col-md-8">
中型设备1:2
</div>
</div>