11.移动端技术选择（响应式布局）：①Bootstrap、字体图标②Bootstrap布局容器（class=“container“） ③栅格系统参数、列嵌套、列偏移、列排序④响应式工具⑤阿里百秀案例

目录

1.响应式布局概念：

 2..Bootstrap简介：

 3.Bootstrap使用

①：创建文件夹结构

 ②创建html骨架结构

 ③引入相关样式文件

 ④使用样式/按钮/字体图标

4.Bootstrap布局容器（代码必须要写在class="container"里面） 

 5.Bootstrap栅格系统的参数

①.基本运用.col-lg-n在一行平均显示n个元素（等于12平均份，小于12行内有空白，大于12另起一行）：​

 ②.宽屏(.col-lg-n)    中屏 (.col-md-n)     小屏(.col-sm-n)     超小屏(.col-xs-n)   下 div自适应

6.栅格系统的列嵌套（.col-sm-n   一个占n份）

7.栅格系统的列偏移（.col-md-offset-n   向右偏移n份）

8.栅格系统列排序：两个类改变行上面的列排序

①（推：.col-md-push-n）

②  (拉：.col-md-pull-n)​​​​​​​

9.响应式工具

①（超小屏隐藏.hidden-xs）

②（小屏隐藏.hidden-sm）

③（中屏隐藏.hidden-md）

④（大屏隐藏.hidden-lg）

10.阿里百秀案例:html5和css3  文件夹

---

1.响应式布局概念：

 2..Bootstrap简介：

 

 3.Bootstrap使用

①：创建文件夹结构

创建一个文件夹bootstrap

然后把这三个文件夹放到bootstrap里面

 ②创建html骨架结构

就是把这个复制粘贴进去

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

 ③引入相关样式文件

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

 ④使用样式/按钮/字体图标

• 进入此链接查找需要的样式/按钮/字体图标

 class后面复制粘贴上面的类名

 自动生成::before

• 复制想要的

 粘贴到代码中

 

想要修改样式就增加权重

4.Bootstrap布局容器（代码必须要写在class="container"里面） 

 5.Bootstrap栅格系统的参数

①.基本运用.col-lg-n在一行平均显示n个元素（等于12平均份，小于12行内有空白，大于12另起一行）：

 ②.宽屏(.col-lg-n)    中屏 (.col-md-n)     小屏(.col-sm-n)     超小屏(.col-xs-n)   下 div自适应

6.栅格系统的列嵌套（.col-sm-n   一个占n份）

7.栅格系统的列偏移（.col-md-offset-n   向右偏移n份）

8.栅格系统列排序：两个类改变行上面的列排序

①（推：.col-md-push-n）

②  (拉：.col-md-pull-n)

9.响应式工具

①（超小屏隐藏.hidden-xs）

②（小屏隐藏.hidden-sm）

③（中屏隐藏.hidden-md）

④（大屏隐藏.hidden-lg）

10.阿里百秀案例:html5和css3  文件夹