认识并掌握Bootstrap

一.Bootstrap介绍

1.什么是Bootstrap

   Bootstrap是一种前端框架，也可以说是一种前端工具集

2.Bootstrap有什么优点

开发更便捷，代码美观，样式美观

二.视口

1.视口简介

1. 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
2. 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980
3. 视口的宽度可以通过meta标签设置
4. 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）

2.视口属性

      1.width:视口的宽度

      2.initial-scale：初始化缩放

      3.user-scalable:是否允许用户自行缩放（值：yes; no）

     4.minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放

     5.maximum-scale:最大缩放

三.使用

1.构建一个项目的文件夹解构

    

├─ /weijinsuo/ ··················· 项目所在目录

└─┬─ /css/ ······················· 我们自己的CSS文件

  ├─ /font/ ······················ 使用到的字体文件

  ├─ /img/ ······················· 使用到的图片文件

  ├─ /js/ ························ 自己写的JS脚步

  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】

  ├─ /favicon.ico ················ 站点图标

  └─ /index.html ················· 入口文件

2.引入文件

引入5个文件，分别是自己写的css文件和js文件还有jQuery.min.js文件并且要放在最其他引入的js文件之前，bootstrap.min.js文件和自己的js文件

3.使用

根据官网的案例，给对应的元素叫上对应的类名即可