Bootstrap-Personal diary one

1，移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width      表示宽度是设备屏幕的宽度。
initial-scale=1     表示初始的缩放比例。

shrink-to-fit=no     自动适应手机屏幕的宽度。

2，Containers（容器类）

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

3， Grid system（网格系统）

系统根据屏幕大小的变化（响应式）自动分列：12列

网格类

.col-     针对超小设备- 屏幕宽度 <576px（Extra small）
.col-sm-    平板 - 屏幕宽度 >=576px（Small）
.col-md-     桌面显示器 - 屏幕宽度 >=768px（Medium）
.col-lg-     大桌面显示器 - 屏幕宽度 >=992px（Large）

.col-xl-     超大桌面显示器 - 屏幕宽度 >=1200px（Extra large）

创建相等宽度的列，Bootstrap 自动布局

<div class="row">
      <div class="col">.col</div>
      <div class="col">.col</div>
      <div class="col">.col</div>

</div>

等宽响应式列(在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版)

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

<div class="col-sm-3">.col-sm-3</div>

不等宽响应式列

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>

</div>

参考网址：

http://www.runoob.com

https://getbootstrap.com