Bootstrap学习1：bootstrap4.0基础

一、Bootstrap的简介和作用

1.Bootstrap的简介

- Bootstrap是由twitter公司设计师基于html，css，js开发的简洁、开源、强大、优雅的UI框架。

- UI框架就是能够快速构建html架构的框架。

- 内置了大量的css类，供元素使用。

- Bootstrap由一个css库和一个js库组成，因为在整个ui框架中还会有许多动态需效果需要js来完成，因此，Bootstrap在动态部分是依赖jquery一个js类库完成的。`Bootstrap = jquery + css`

2.准备工作

【提示】讲解的是Bootstrap v4.0 版本，到5版本会有一些改变，大家注意查询手册，比如左右变成start和end  

【查看】下载Bootstrap之后会得到很多文件，有很多不需要，为大家精简了一个版本，1个css和3个js。  

【拷贝】将css文件放入一个新建的css文件夹下，3个js文件放到一个新建的js文件夹下  

【操作】将boot.json内的文本创建全局代码片段boot  

【安装】在vscode中安装 `HTML CSS Support`插件,可以提示一部分css

 2.安装sass

- 安装插件

- 看视频文件分享《sass的更多安装方法与编译方法》和《依赖ruby的安装方法》

- 两个视频都先看一遍，“都看完”再选择一种进行安装(尽量使用npm安装方法可以少安装一个软件)

- 安装后编译成功，会出现css文件和map文件（不会编译可以不编译）

（1）使用npm安装sass

- 查看是否安装npm，打开`cmd`,输入`npm -v`

- 打开`cmd`,输入`npm install -g sass`，安装成功后检查`sass -version `

（2）依赖ruby安装sass

- 依赖ruby

  - 安装ruby，ruby软件在ready的tools中

  - 查看自己电脑是32位还是64位，按照实际情况安装x86或者x64

  - 查看ruby是否安装成功，打开`cmd`,输入`ruby -v`

- 安装sass

  - mac：`sudo gem install sass`

  - windows:`gem install sass`

  - 安装完之后在`cmd`中检查 `sass -v`

（3）文件编译和监听

  - 在自己创建的一个文件夹demo中再创建两个文件夹scss 和 css，两个文件夹为同级目录，任何文件夹不能出现中文字符

  - 使用终端或vscode终端在要编译的文件夹下打开demo文件夹，注意路径

  - 在终端demo文件夹目录下，直接输入指令 `