Bootstrap全局样式系列一——栅格、容器

Bootstrap是基于jquery

pc站转化为手机站

//(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//解析
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

网站容器

1. .container 根据屏幕大小变化，用于固定宽度并支持响应式布局的容器
2. .container-fluid 固定间隔，用于 100% 宽度，占据全部视口（viewport）的容器

栅格系统

.row
.col

---

借助holder.js文件

<div class="row">
    <div class="col-md-4">
        <img src="holder.js/100%x100">
    </div>
    <div class="col-md-4">
        <img src="holder.js/100%x100">
    </div>
    <div class="col-md-4">
        <img src="holder.js/100%x100">
    </div>
</div>

展示结果：

栅格参数

.col-xs- 不会发生堆叠

.col-md-offset-* 可以将列向右侧偏移 列偏移