最全最细7个知识点帮助你零基础到完美布局移动端_前端怎么把盒子一个分成10个-CSDN博客

本文链接：https://blog.csdn.net/vip77778888/article/details/121706075

1.变形-线性渐变-字体图标

一、字体图标

下载字体图标

字体图标的选择，上传UI美工她们来做的，我们了解即可。

具体的步骤：在iconfont-阿里巴巴矢量图标库里面下载即可

使用字体图标

复制相关的文件，到 fonts文件夹里面。

引入 css

 <link rel="stylesheet" href="./fonts/iconfont.css">

如果是一个标签来使用字体文件，可以采取2个类名的形式。（重点）
```
 <span class="iconfont icon-daohangdizhi"></span>
```
- 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。
- 第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

如果使用unicode编码(了解)

 <strong> &#xe8ab; </strong>

css

  strong {
       font-family: 'iconfont';
 }

如果是伪元素：

 <div class="car1">购物车</div>

这样结构比较的清晰，省了很多的小盒子

 .car1::before {
     content: '\e8c6';
     color: blue;
     margin-right: 5px;
     font-family: "iconfont" !important;
 }
 .car1::after {
     content: '\e665';
     font-family: "iconfont" !important;
 }

二、变形 transform

位移

语法：

 transform: translate(x, y);
 transform: translateX(x);
 transform: translateY(y);

问题：

他和margin有啥区别。
- margin移动盒子会影响其余的盒子。把其他人挤走
- 位移translate移动盒子不会影响其他的盒子。不脱标。

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

  transform: translateX(100%);

应用：

可以让一个子盒子在父盒子里面水平和垂直居中。

 .father {
     position: relative;
     width: 500px;
     height: 500px;
     background-color: pink;
     margin: 100px auto;
 }
 
 .son {
     position: absolute;
     top: 50%;
     left: 50%;
     /* 百分比，往上走盒子自己高度的一半，往左走盒子宽度的一半 */
     transform: translate(-50%, -50%);
     width: 199px;
     height: 199px;
     background-color: skyblue;
 }

开门大吉案例

效果

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
 
     .box {
       overflow: hidden;
       width: 1366px;
       height: 600px;
       margin: 50px auto;
       background: url(./images/bg.jpg) no-repeat top center;
     }
 
     .box::before,
     .box::after {
       content: '';
       width: 50%;
       height: 600px;
       transition: .5s;
       background: url(./images/fm.jpg) no-repeat;
     }
 
     .box::before {
       float: left;
       background-color: pink;
     }
 
     .box::after {
       float: right;
       background-color: purple;
       /* 背景图片右对齐 */
       background-position: right center;
     }
 
     /* .box:hover 
     .box::before  */
     /* 鼠标经过 box 大盒子，  两个子盒子（before 和 after）来拉动 */
     .box:hover::before {
       /* 百分比是盒子自身的宽度 */
       transform: translateX(-100%);
     }
 
     .box:hover::after {
       /* 百分比是盒子自身的宽度 */
       transform: translateX(100%);
     }
   </style>
 </head>
 
 <body>
   <div class="box"></div>
 
   <div class="demo">
     <span></span>
   </div>
 </body>
 
 </html>

旋转 rotate

语法：

 transform: rotate(45deg);    一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置中心点 transform-origin

/* 设置旋转的中心点位置 */

   transform-origin: right bottom;

多形态变形小技巧

如果也需要移动，也需要旋转，则一定先写移动，后写旋转
```
  transform: translate(-50%, -50%) rotate(360deg);
```
注意，多个值之前用空格隔开。

缩放 scale

语法：

 transform: scale(1.2)；

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

渐变

线性渐变

语法：

       background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));

 let num = 10

2.空间-透视-动画

一、空间转换 3D

3D坐标系

3D 坐标系比2D 多了一个Z轴。

一定要记住3个坐标轴取值的正反：

X 轴往右越大，是正值，否则反之

Y 轴往下越大，是正值，否则反之

Z轴往里越大，是正值，否则反之 Z轴指向我们

3D位移

有完整写法：

  transform: translate3d(x, y, z);

只不过在很多情况下，我们经常喜欢分开写：

 transform: translateX(100px);
 transform: translateY(100px);
 transform: translateZ(100px);

透视

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法:

  perspective: 800px;

透视注意事项：

取值范围经常在 800px ~ 1200px 之间。
一定给父亲添加
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是 translateZ 的距离，这个距离靠近我们，盒子越大

3D旋转

有了透视的加持，我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。

注意：默认的旋转中心在盒子的中心位置。

  body {
      /* 父级添加透视 */
      perspective: 400px;
 }
 
 img {
     transition: all 1s;
 }
 
 img:hover {
     transform: rotateX(360deg);
 }

效果展示：

rotateY

 body {
     perspective: 400px;
 }
 
 img {
     transition: all 1s;
 }
 
 img:hover {
     transform: rotateY(360deg);
 }

左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

规则：

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向
大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

  transform-style: preserve-3d;

二、动画（重点）

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

定义：

 /* 1. 定义的动画 */
 @keyframes dance {
 
     from {
         transform: scale(1)
     }
 
     to {
         transform: scale(1.5)
     }
 }

或者是

  /* 1. 定义的动画 */
     @keyframes dance {
 
        0% {
         transform: scale(1)
       } 
 
       100% {
         transform: scale(1.5)
       }
     }

调用

 img {
     width: 200px;
     /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
     animation: dance .5s infinite;
 }

动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态
linear 让动画匀速执行

鼠标经过暂停动画

 /* 鼠标经过box，  则 ul 停止动画 */
 .box:hover ul {
     animation-play-state: paused;
 }

多组动画

 /* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
 animation: run 1s steps(12) infinite, move 5s linear forwards;

3.Flex布局-分辨率-视口-二倍图-伸缩比

移动端特点

PC端/移动端不同？

PC端

屏幕大，网页固定版心
端浏览器繁多，更多考虑兼容性问题。（布局：浮动+定位+标准流）

移动端

手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性

物理分辨率和逻辑分辨率

物理分辨率：硬件所支持的，屏幕出厂就设定无法修改
逻辑分辨率：软件可以达到的，我们开发中写的是逻辑分辨率

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。

视口的分类：

布局视口。 iOS, Android基本都将这个视口分辨率设置为980px。

视觉视口。用户正在看到的网站的区域。

理想视口。设备有多宽，我的网页就显示有多宽

视口标签

有了视口标签，可以达到我们想要的理想视口。

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width=device-width：视口宽度=设备宽度
initial-scale=1.0：初始页面缩放倍数
maximum-scale=1.0 最大缩放倍数
user-scalable=0 不允许用户缩放页面（移动端）或者为 no 如果为 yes 则允许用户缩放

二倍图

其实实际开发中还有三倍图甚至四倍图等，多倍图，但是现在市场还是二倍图偏多，我们称为二倍图。

简单理解，二倍图存在就是为了让页面中图片更加清晰，遵循即可。

网页美工的设计稿基本是 750px

我们前端工程师拿到设计稿利用像素大厨选择 2X，进行缩小一半，按照提示的单位开发即可。

flex布局

flex布局极大的提高了我们布局的效率，更简单、灵活。

display: flex; 一定要给亲爸爸加。

主轴对齐方式

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
`center`	沿主轴居中排列
`space-around`	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
`space-between`	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
`space-evenly`	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

重点记住标红的。如果非要问我那个常用，我只能说是 space-between

 justify-content: space-between;

显示效果：两侧没缝隙

 justify-content: space-around;

效果如下： 记住2倍

 justify-content: space-evenly;

效果如下： 记住空隙一样大

  justify-content: center;

效果如下： 经常用于让一个盒子水平居中

记忆：

两侧没缝隙是 between
缝隙一样大是 evenly
2倍缝隙是 around

侧轴对齐方式

属性值	作用
flex-start	起点开始依次排列
flex-end	终点开始依次排列
`center`	沿侧轴居中排列
stretch	默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

重点记住center ，可以让元素垂直居中。

 align-items: center;

我们可以通过flex让一个子盒子水平和垂直居中。

 .father {
     width: 500px;
     height: 500px;
     background-color: pink;
     /* 设置为flex布局 */
     display: flex;
     /* 主轴水平居中 */
     justify-content: center;
     /* 侧轴垂直居中 */
     align-items: center;
 }
 
 .son {
     width: 200px;
     height: 200px;
     background-color: purple;
 }

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

语法：

 flex: 1;

比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1；此时每个子盒子各占三分之一。

 .father {
     display: flex;
     height: 300px;
     background-color: pink;
 }
 
 .father div {
     /* 每个孩子各占1份 */
     flex: 1;
     /* 默认子盒子和父亲一样高 */
     background: purple;
 }

html 结构

 <div class="father">
     <div>1</div>
     <div>2</div>
     <div>3</div>
 </div>

一定要给子盒子添加。

子盒子默认高度会和父盒子一样高。

圣杯布局

所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。

一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索

核心思路：

两侧盒子写固定大小
中间盒子 flex: 1; 占满剩余空间

 .top {
     display: flex;
     justify-content: c;
 }
 
 .top div:first-child {
     width: 50px;
     height: 50px;
     background-color: red;
 }
 
 .top div:last-child {
     width: 50px;
     height: 50px;
     background-color: red;
 }
 
 .top div:nth-child(2) {
     flex: 1;
     height: 50px;
     background-color: pink;
 }

小结

在flex眼中，标签不再分类。
- 简单说就是没有块级元素，行内元素和行内块元素
- 任何一个元素都可以直接给宽度和高度一行显示
Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex

Can I use... Support tables for HTML5, CSS3, etc 可以查看兼容性

4.Flex主侧轴应用-弹性盒子

设置主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

属性值	作用
`row`	行, 水平(默认值)
`column`	*列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

语法：

 flex-direction：column;

修改完毕，主轴是Y轴，侧轴是X轴。

弹性盒子换行

特性：给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:

语法：

 flex-wrap: wrap;

设置侧轴对齐方式

注意:

此处设置侧轴多行的垂直对齐方式。 align-content
和前面学过的 align-items （侧轴单行垂直对齐）

 align-content：center；

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间

flex 总结梳理

flex 它是一种布局方式。主要目的是通过父盒子控制子盒子如何排列。

主轴排列方式

默认的水平，但是可以转换。

如果给父盒子添加 display: flex
justify-content: center;
justify-content: space-between; 左右两侧无缝隙
justify-content: space-around; 两倍关系
justify-content: space-evenly; 缝隙均等

侧轴对齐方式-单行对齐

默认的对齐方式 flex-start
align-items: center; (重点)

侧轴对齐方式-多行

align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: center;

弹性盒子换行

特别是多行的情况下，我们需要给弹性盒子换行，给父盒子弹性容器加。

 flex-wrap: wrap;

设置主轴方向

 flex-direction: column;

让我们的主轴设置为垂直。默认的是 row 水平的。

5.适配方案-rem适配

适配方案

移动端的适配方案：

flex + rem单位做适配效果（比如淘宝和小米移动端）
flex + vw/vh单位做适配效果（比如 B站移动端）

让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕

rem 适配

rem 单位

rem 是一个相对单位，1rem 就是 html 文字的大小

比如

 html {
     font-size: 35px;
 }

则此时 1rem 就是 35像素。

媒体查询（了解）

媒体查询 mediaquery 可以自动检测视口的宽度。

媒体查询一个非常大的作用是：根据屏幕宽度修改html文字大小。

使用媒体查询, 根据不同的视口宽度, 设置不同的根字号，就完成了适配

语法：

 
 @media (width:375px) {
     html {
         font-size: 40px;
     }
 }
 
 @media (width:320px) {
     html {
         font-size: 30px;
     }
 }

综合：

 
 @media (width:375px) {
     html {
         font-size: 37.5px;
     }
 }
 @media (width:414px) {
     html {
         font-size: 41.4px;
     }
 }
 
 
 .box {
     width: 5rem;
     height: 5rem;
     background-color: pink;
 }

通过媒体查询，检测不同的视口宽度，设定不同的html文字大小，元素设置rem单位后，可以达到元素适配效果

flexible.js

媒体查询写起来超级麻烦，而且检测不够精确，因此我们使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。

这个也是值得提倡使用的一种方式。

有了这个js文件，可以帮我们自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。

 <script src="./js/flexible.js"></script>

如何把设计稿的px转换为rem

问题：

flexible 能够修改html文字大小，修改文字大小: 当前屏幕 / 10 就是文字大小

例如：当前屏幕 375px，则加了 flexible之后，html文字大小为 37.5px
我们的设计稿里面元素大小是固定的吗？是，而是 px 单位，但是我们开发的时候，要使用 rem 才能适配。
那怎么把我们测量的px 转换为适配的rem呢？

直接使用测量的px值 / 37.5 就是 rem的值

LESS

less 可以帮我们把px单位转换到rem单位。

lLess是一个CSS预处理器, Less文件后缀是.less

扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。

less 运算

 .box {
   width: 100px + 100;
   // 注意：单位的转换 计算的时候以第一个单位为准
   height: (100 / 37.5rem);
   // height: (100rem / 37.5);
   // height: 100px - 50;
   margin: (20px * 5) auto;
   padding: (10px / 5);
   border: 1px + 2 * 3 solid red;
 
 }

注意点：

计算以第一个单位为准，尽量写到最后一个数字上。比如
```
  height: (100 / 37.5rem);
```
除法比较特殊，必须添加小括号。
计算别忘了先乘除后加减

less 嵌套

可以生成后代选择器

 .father {
     width: 500px;
     height: 500px;
     background-color: purple;
     // 孩子
     .son {
         width: 200px;
         height: 200px;
         background-color: pink;
         p {
             color: red;
         }
     }
 
 }

生成css之后：

 .father {
   width: 500px;
   height: 500px;
   background-color: purple;
 }
 .father .son {
   width: 200px;
   height: 200px;
   background-color: pink;
 }
 .father .son p {
   color: red;
 }

我们在写伪类和伪元素的时候，经常使用 & 来代替父元素

 .nav {
   width: 100px;
   height: 100px;
   background-color: pink;
   &::before {
     content: '1';
   }
   &:hover::before {
     color: red;
   }
 }

 .nav {
   width: 100px;
   height: 100px;
   background-color: pink;
 }
 .nav::before {
   content: '1';
 }
 .nav:hover::before {
   color: red;
 }

less 变量

变量最大的优点是：方便使用和修改。

语法：

 @变量名: 值;
 @fontSize: 16px;

 
 @suibian: hotpink;
 body {
   background-color: @suibian;
 }
 p {
   background-color: @suibian;
 
 }
 div {
   color: @suibian;
 }
 nav {
   border: 1px solid @suibian;
 }

 body {
   background-color: hotpink;
 }
 p {
   background-color: hotpink;
 }
 div {
   color: hotpink;
 }
 nav {
   border: 1px solid hotpink;
 }

 建议： 小驼峰命名法     @backGroundColor

 // 背景颜色变量
 @backGroundColor: deeppink;
 // 定义边框
 @bd: 3px solid green;
 .father {
   width: 500px;
   height: 500px;
   background-color: pink;
   display: flex;
   justify-content: center;
   align-items: center;
   border: @bd;
   .son {
     width: 200px;
     height: 200px;
     background-color: skyblue;
     border: @bd;
   }
   // &:hover .son {
   //   background-color: hotpink;
   // }
   &:hover {
     .son {
       background-color: @backGroundColor;
     }
   }
 }

less导入

less的导入实际是 less 文件的导入。

 @import './变量.less';
 @import url(./变量.less);

使用less导入的好处是：减少了html页面的 link标签数量。

less 导出

手动给每个less文件指定导出

必须写到第一行

 // out: 路径/文件名

 // out: ./mycss/pink.css

设置导出：当面目录下，创建一个 mycss 文件夹，生成一个 pink.css （做了改名）

 // out: ./mycss/

设置导出：当面目录下，创建一个 mycss 文件夹，生成一个跟less一样的文件名（原名）

less 禁止导出

 // out: false

小结

我们的需求的是要做移动端适配：页面中的元素尺寸跟随屏幕宽度等比例缩放（适当调整大小）

方案如下：

flex + rem + flexiable.js + less

我们移动端采取 flex 布局。
rem单位：做移动端适配的。
- rem相对单位，跟html文字大小有关系
媒体查询： 检测屏幕的视口宽度
flexiable.js ：可以根据屏幕的宽度自动修改html文字大小
less: less让我们的css具有了计算能力
- less 可以让我们很方便的把 px 转换为 rem

6.VW/VH-rem未来的替代品

vw

vw就是视口的宽度，vw 是个相对单位。

不管在什么屏幕下，我们把屏幕分为平均的 100等份。

1vw = 1 / 100 屏幕的宽度

px 如何转为vw

我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份，则 1vw = 3.75 px

有个盒子啊，我测量了下，他的宽度是 3.75px * 3.75px ，则写成 vw 是多少？ 1vw * 1vw

又一个盒子，宽度和高度分别是 37.5px 和 37.5px ，则转换为vw 是多少？ 10vw * 10vw

有一个盒子 68px * 29px ，则我们写代码 less vw ？

 width: (68 / 3.75vw);
 height: (29 / 3.75vw);

7.媒体查询-栅格系统-列偏移与

Bootstrap引用

声明

现在开发中，响应式页面会比较少。

今天对我们来说，最大的收获是：学会如何去使用前端 UI 框架。

媒体查询作为了解
Bootstrap 框架，我们是学会怎么去用，而不是怎么去做东西，因为后面有更好的框架：饿了吗和 vant。

媒体查询

学习媒体查询的目的：

了解如何使用媒体查询做响应式页面。
为接下来学的 Bootstrap 做铺垫。

媒体查询会写如下代码即可：

 body {
     background-color: gray;
 }
 
 /* 大于等于768px 为粉色 */
 @media (min-width: 768px) {
     body {
         background-color: pink;
     }
 }
 
 /* 大于等于992px 为蓝色 */
 @media (min-width: 992px) {
     body {
         background-color: skyblue;
     }
 }
 
 /* 大于等于992px 为绿色 */
 @media (min-width: 1200px) {
     body {
         background-color: green;
     }
 }

媒体查询使用场景1-

约束移动端不要超过规定大小

 body {
     max-width: 540px;
     margin: 0 auto;
 }
 
 /* 大于等于540px 则不允许  html文字大小再改动，强制定为 54px*/
 @media (min-width: 540px) {
     html {
         font-size: 54px !important;
     }
 }

元素的显示和隐藏

 @media (max-width: 800px) {
     .box div:nth-child(2) {
         display: none;
     }
 
     .box div:last-child {
         width: 350px;
     }
 }

Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: Bootstrap中文网

下载安装包。

开发中，我们都是按需导入，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。

使用步骤：

复制 css文件

并且引入到html文件中

 <link rel="stylesheet" href="./css/bootstrap.min.css">

复制字体图标文件夹
如果需要js，则复制js文件，并引入html文件中
```
 <script src="./js/bootstrap.min.js"></script>
```

使用内部预定义好的类即可。

 <div class="container">我的内容</div>

栅格系统

栅格系统(gridsystems),也叫“网格系统，它就是通过一系列的行（row）与列（column）的组合创建页面布局。

简单说，栅格系统也是一种布局方式。 BootStrap 给咱们内置好了一套布局系统。

BootStrap3默认将网页分成12等份

比如，超大屏幕下我们想要一个通栏的大盒子

  <div class="container">
     <div class="col-lg-12">我自己独占一行</div>
   </div>

又比如，超大屏幕下，我们想要一行左右来分

 <div class="container">
     <div class="col-lg-6">我占左边6个</div>
     <div class="col-lg-6">我站右边6个</div>
 </div>

超大屏下，如果一行放4个，怎么做呢？

  <div class="container">
     <div class="col-lg-3">我占左边3个</div>
     <div class="col-lg-3">我站右边3个</div>
     <div class="col-lg-3">我站右边3个</div>
     <div class="col-lg-3">我站右边3个</div>
   </div>

如果实现不同屏幕下，不同的显示个数，可以通过使用不同类名。

还是这4个盒子，如果在中等屏幕下放3个怎么做呢？

  <div class="container">
     <div class="col-lg-3 col-md-4">盒子内容</div>
     <div class="col-lg-3 col-md-4">盒子内容</div>
     <div class="col-lg-3 col-md-4">盒子内容</div>
     <div class="col-lg-3 col-md-4">盒子内容</div>
   </div>

还是这4个盒子，如果在小屏幕下放2个怎么做呢？

 <div class="container">
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6">盒子内容</div>
   </div>

还是这4个盒子，如果在超小屏幕下放1个怎么做呢？

  <div class="container">
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">盒子内容</div>
   </div>

row 类

row 可以去掉container默认的内边距

列偏移

列偏移通过 col-lg-offset-*

让盒子往右侧走，左边有几份

比如：

     .first div {
       height: 100px;
       background-color: pink;
     }
 
     .second div {
       background-color: purple;
       height: 100px;
     }
 
     .third div {
       height: 100px;
       background-color: skyblue;
     }

   <div class="container">
     <div class="row first">
       <div class="col-lg-4">左侧</div>
       <div class="col-lg-4 col-lg-offset-4">右侧</div>
     </div>
     <div class="row second">
       <div class="col-lg-3 col-lg-offset-3">1侧</div>
       <div class="col-lg-3 col-lg-offset-3">2侧</div>
     </div>
     <div class="row third">
       <div class="col-lg-6 col-lg-offset-3"></div>
     </div>
   </div>

列嵌套

一个盒子里面可以再嵌套其他的盒子，但是站在这个盒子的角度来看，他有分为了12份。

 .container .row div {
       height: 100px;
       background-color: pink;
     }

 <div class="container">
     <div class="row">
       <div class="col-lg-4">
         <p class="col-lg-6">登录</p>
         <p class="col-lg-6">注册</p>
       </div>
       <div class="col-lg-4">2</div>
       <div class="col-lg-4">3</div>
     </div>
   </div>