Bootstrap简介
Bootstrap是由Twitter公司开发，用于响应式前端布局和移动设备优先的Web项目的快速开发
Bootstrap3和Bootstrap4的区别
| Bootstrap3 | Bootstrap4 |
|---|---|
| Less编写 | Sass编写 |
| 兼容到IE9 | 兼容到IE10 |
| 使用float的布局方式 | 使用flexbox布局方式 |
| 使用Nomalize.css初始化全局样式 | 使用reboot.css初始化全局样式 |
| 使用px为单位 | 使用rem和em为单位（除部分margin和padding使用px） |
| 包括字体图标库 | 不在包括字体图标库 |
| 4档栅格类 | 5档栅格类 |
列排序使用.col-*-push-*和.col-*-pull-* |
列排序使用.order-*-* |
隐藏与显示使用.hidden-*和.visible-* |
隐藏与显示使用.d-*-none和.d-*-block的组合 |
获取Bootstrap
从Bootstrap官网获取Bootstrap包，一种是Sass/Less源码包，和编译好CSS和JavaScript的包
Bootstrap3
编译版
包含css、js和fonts文件夹，其中包括：
bootstrap.*为未压缩版bootstrap.min.*为压缩版bootstrap.*.map为源映射文件bootstrap-theme.*为可选主题
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
源码包
编译后的文件在dist目录下，也可自行修改less源码进行编译
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Bootstrap4
编译版
包含css、js和fonts文件夹，其中包括：
bootstrap.*为未压缩版bootstrap.min.*为压缩版bootstrap.*.map为源映射文件bootstrap-grid.*为仅包含栅格系统版bootstrap-reboot.*为仅包含CSS初始化版bootstrap.bundle.*为包含popper.js版
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
源码包
编译后的文件在dist目录下，也可自行修改scss源码进行编译
bootstrap/
├── dist/
│ ├── css/
│ └── js/
├── site/
│ └──docs/
│ └── 4.5/
│ └── examples/
├── js/
└── scss/
引入Bootstrap
在引入Bootstrap之前，需要为HTML页面增加响应式标记
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
元数据名字：视口
内容：宽度为当前设备宽度，初始缩放比例为1，需要兼容ios9
-->
Bootstrap3
<link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> <!-- 引入css文件 -->
<script src="./lib/jquery-3.5.1-dist/jquery.slim.min.js"></script> <!-- bootstrap依赖jQuery，所以先引入jQuery -->
<script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> <!-- 引入js文件 -->
Bootstrap4
<link rel="stylesheet" href="./lib/bootstrap-4.5.3-dist/css/bootstrap.min.css"> <!-- 引入css文件 -->
<script src="./lib/jquery-3.5.1-dist/jquery.slim.min.js"></script> <!-- bootstrap依赖jQuery，所以先引入jQuery -->
<script src="./lib/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>
<!-- 引入js文件，不同的是4版本还依赖于popper.js，bootstrap.bundle.min.js就包含了popper.js -->
Comments NOTHING