BootStrap
Bootstrap 官网：https://getbootstrap.com/
Bootstrap 中文文档：https://www.bootcss.com/
全局样式
字体图标
组件
插件
BootStrap 使用步骤
1、引入 css 代码
html
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="./bootstrap@3.4.1/css/bootstrap.min.css" />2、使用样式类名
html
<!-- 响应式布局版心类 -->
<div class="container"></div>代码示例
BootStrap 栅格系统
实现响应式网页布局
栅格化：网页宽度等分为 12 等份
| 超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | |
|---|---|---|---|---|
| 设备 | 手机 | 平板 | 桌面显示器 | 大桌面显示器 |
| 响应断点 | <768px | ≥768px | ≥992px | ≥1200px |
| 别名 | xs | sm | md | lg |
| 容器宽度(container) | 100% | 750px | 970px | 1170px |
| 类前缀 | col-xs-* | col-sm-* | col-md-* | col-lg-* |
| 列（column）数 | 12 | 12 | 12 | 12 |
| 槽（gutter）宽 | 30px | 30px | 30px | 30px |
栅格示例:
BootStrap 常用类
.container指定宽度并居中，自带间距 15px.container-fluid宽度为 100%.row布局行 自带间距-15px.col布局列
html
<!-- 有一个15px的间距-->
<div class="container"></div>
<!-- 使用row自带的-15px间距抵消container的15px间距-->
<div class="container">
<div class="row"></div>
</div>BootStrap 查找手册
全局 CSS 样式 https://v3.bootcss.com/css/
示例
使用插件需要引入以下文件
bootstrap.min.css
// 需要注意先后顺序
jquery.js
bootstrap.min.js响应式网站：
- 适合：元素内容较少的网站，例如：企业站
- 不适合：元素较多的网站，不适合做响应式，最好分开做