BootStrap

1.0、参考

1.1、BootStrap简介

是什么 ?	`:`	`an open source front-end component library for building responsive, mobile-first projects on the web.`
开发者	`:`	`Twitter`的设计师`Mark Otto`和`Jacob Thornton`
开发语言	`:`	CSS、JavaScript
官方主页	`:`	http://getbootstrap.com http://www.bootcss.com
源码仓库	`:`	https://github.com/twbs/bootstrap

1.2、通过开源CDN引入BootStrap

jsDelivr

<link  href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>

BootCDN

<link  href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

1.3、通过下载到本地引入BootStrap

step1、通过包管理器安装BootStrap

包管理器	安装命令
bower	`bower install bootstrap --save`
npm	`npm install bootstrap --save`
yarn	`yarn add bootstrap`

step2、在HTML代码中引入CSS和JavaScript

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

<script src="/bower_components/jquery/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

注意：BootStrap依赖jQuery，包管理器在安装BootStrap的时候，也会安装jQuery。jQuery必须在BootStrap之前被引入。

1.4、使用BootStrap

BootStrap提供了大量的现成组件，开发者只需要简单的使用它提供的CSS或者配合上JavaScript便可快速搭建一个网页出来，大大提高了开发网页的效率。

1.5、定制BootStrap

BootStrap提供的那些CSS样式比较中规中矩，看起来并不是特别好看，尤其是颜色配色和边框等，并且有些提供的功能较少，我们可以覆盖这些CSS，或者增加自己的CSS，都能解决这个问题，但是改动较大，最好是修改源码，然后重新构建，这样，我们就可为所欲为，而且还保持可一个整体。

MUI就是基于BootStrap定制的。