bootsrap基础使用
-
前端组件库，主要是用于快速开发响应式布局，移动端优先
-
使用步骤：
-
引入需要的文件
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <!-- 注意:jquery必须在bootstrapjs之前引入 --> <script src="./bootstrap/js/jquery-3.5.1.min.js"></script> <script src="./bootstrap/js/bootstrap.bundle.min.js"></script> -
将需要使用的组件代码复制到页面中使用即可
-
bootstrap实现响应式
- 布局容器
container：
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | |
|---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px |
.container-sm | 100% | 540px | 720px | 960px | 1140px |
.container-md | 100% | 100% | 720px | 960px | 1140px |
.container-lg | 100% | 100% | 100% | 960px | 1140px |
.container-xl | 100% | 100% | 100% | 100% | 1140px |
.container-fluid | 100% | 100% | 100% | 100% | 100% |
-
网格系统
| Extra small <576px | Small≥576px | Medium≥768px | Large≥992px | Extra large≥1200px | |
|---|---|---|---|---|---|
| container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes |
