intro
v4 中文文档 https://getbootstrap.net/docs/layout/overview/
v4 布局：http://hlx.q123q.cc/
文件说明
- bootstrap-reboot.css 重置样式
- bootstrap-grid.css 栅格系统
- bootstrap.css 包含所有
- bootstrap.js 组件
- bootstrap.bundle.js 包含所有和依赖
css
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}breakpoint / 断点
一个特定的屏幕宽度临界值，用来切换样式或布局。
| Breakpoint | 最小宽度 |
|---|---|
| xs (extra small) | <576px |
| sm (small) | ≥576px |
| md (medium) | ≥768px |
| lg (large) | ≥992px |
| xl (extra large) | ≥1200px |
| xxl (extra extra large) | ≥1400px (Bootstrap 5 中新增) |
| 0 | 576px | 768px | 992px | 1200px | 1400px | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
xs | ≤sm | ≤md | ≤lg | ≤xl | ≤xxl |
container 是多档调节
container-{breakpoint} 是 100% 和 固定值 二档调价，具体看下面表格
| 类名 | 超小屏幕 <576px | 小屏幕 ≥576px | 中等屏幕 ≥768px | 大屏幕 ≥992px | 超大屏幕 ≥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% |
栅格系统
基于 12 列的网格系统，允许开发者将页面划分为不同的列，并根据需要调整列的宽度。
html 结构必须为：
.container > .row > .col-* > 开发者内容
.col-sm-数字 数字为 1-12，代表分得的列数
.col-数字