Bootstrap

Bootstrap

下载与使用

• 下载

  https://v3.bootcss.com/ 一般都下载用于生产环境的Bootstrap

• 使用

  因为Bootstrap是依赖于jQuery使用的，所以在引入Bootstrap之前还需要先引入jQuery。而Bootstrap一般只需要引入js文件夹下的bootstrap.min.js文件与css文件夹下的bootstrap.min.css文件即可

  或者使用cdn的外部链接引入（一般不用于生产环境，仅开发时使用）

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

Bootstrap 的优缺点

优点：CSS 代码结构合理 ，现成的样式可以直接用

缺点：定制较为繁琐，体积大

Bootstrap 如何实现响应式布局

原理：通过 media query 设置不同分辨率的class

使用：为不同分辨率选择不同的网格class

如何基于 Bootstrap 定制自己的样式

• 使用 css 同名类覆盖（简单场景使用）
• 使用官方的定制功能定制一份专属于自己的Bootstrap样式： https://v3.bootcss.com/customize/

剩下的其余操作都可以从Bootstrap的官方文档中使用。

官方文档： https://v3.bootcss.com/css/

基于Bootstrap的插件

• sweetalert：甜甜的警告

  http://lipis.github.io/bootstrap-sweetalert/

• Bootstrap-select

  https://www.bootstrapselect.cn/