工具：可以使用 或者不使用

使用工具可以帮我们更加快捷的处理一些事情

Npm ： 很多插件 都是基于npm ，需要使用npm去安装 卸载

Postcss：可以帮我们处理CSS文件

我们希望它可以自动生成兼容的前缀(各个浏览器厂商为了显摆自己，加了自己特殊的名字)不加这个特殊名字就不识别

autoprefixer 可以帮我们添加前缀

1.下载Postcss-cli 和 autoprefixer

如果一块安装： cnpm(npm) i postcss-cli autoprefixer -g

一个个安装：

cnpm(npm) i postcss-cli -g

cnpm(npm) i autoprefixer -g

附cnpm的安装方法 在终端复制小括号内的代码

(npm install -g cnpm –registry=https://registry.npm.taobao.org)

安装好之后 会在终端里面 显示

2.打开webstrom 点击 文件(file)->设置(settings)->工具(tools)->扩展工具(extend tools)->点击加好

3.配置扩展工具

如下图

4.给扩展工具添加快捷键

5.开始用使用

写好每一个自己的css文件之后 在随意位置 按 刚才设置的快捷键(shift+/) 就可以 帮咱们添加好 需要添加 前缀的样式代码

效果：

未添加前缀

使用快捷键(shift+/)添加后的

注意：工程目录的名字(index.html外层的文件夹) 不要起有特殊字符的名字(尽量不是中文)(?~!#@￥%……&*())

BootStrap：

安装：

1.下载引入css和js

2.通过npm去安装

3.通过bower安装

Bower是一种包管理工具 可以通过bower 去搜索、下载安装、卸载所有发布在github里面的插件

在安装bower之前 需要安装node 和git

Bower的安装 跟使用npm 安装其他插件 一模一样 cnpm(npm) i bower -g

Bower的使用：

1.搜索search

2.下载安装 i

3.卸载 uninstall

搜索：

bower search bootstrap

bower search jquery

安装：

Bower i bootstrap

Bower i jquery

卸载

Bower unistall bootstrap

Bower 在安装的时候 如果 有需要安装的 其他插件 会自动安装 需要的插件

安装好了之后 会在 当前的工程里面 多了一个文件夹

手动下载BootStrap：

或者直接使用cdn的方式

https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js

https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css

使用栅格布局：把一《行》分成了12等份 想让一《列》占几份 就分几份 如果超出12份 会自动流下来

根据不同屏幕的尺寸 有不同表示12等份的名字

**注意：如果想使用栅格布局 使用栅格布局的直接父元素 必须是row

注意：如果希望在某个尺寸的屏幕以上 显示一行 需要以最小屏幕为基准

比如：md 已上 都是一行6列 md-6 以相同的列数显示 lg就不需要设置**