快速入门
| 官网文档 [简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网](https://v5.bootcss.com/docs/5.1/getting-started/introduction/) |
| 文件下载 [下载 Bootstrap · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网](https://v5.bootcss.com/docs/getting-started/download/) |
可以直接使用jsDelivr的文件链接，就不用下载到本地了，主要使用的是js文件和css文件
入门模板如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 的 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rTTiRUKnSWaDu2FjhzWFl8/JuUZMlplyWE/djenb2LoKqkgLGfEGfSrL7XDLoB1M" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-Nj1D6pu2WnJojj+67GiU9ZFNwbl7bUWX5Kj5MS22C8bGjllemM9pvQyvj14zJb58" crossorigin="anonymous"></script>
<!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-YSu1vEueMOXZYSSiTgjRD6egOBAdWrKI6AQBdHjTtvftX42GZLCVzwlxm0RJuipa" crossorigin="anonymous"></script>
-->
</body>
</html>
但是 jsdelivr 国内可能会出现问题 可以下载下来到本地
原本的：
引入样式后：
布局容器
.container用于固定宽度并支持响应式布局的容器
.containter-fluid用于100%宽度的容器
1
2
<div class="container" style="background-color: aqua; height: 100px;">12</div>
<div class="container-fluid" style="background-color:cornflowerblue; height: 100px;">34</div>
区别如图所示：
栅格网格系统
一行分为12个栅格，可定制容器宽度
数据行.row必须放在容器.container中：赋予合适的对齐方式和內距padding
.col...作为.row的直接子元素，col 包括了 col-xs-n col-sm-n col-md-n col-lg-n（n表示数字，不能超过12）
| xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
col可以写多个，bootstrap会自动检测屏幕大小，选择合适的col类，默认使用xs
比如 设定小屏的 占6格 中屏的占12格
1
2
3
4
5
<div class="container">
<div class="row">
<div class="col-6 col-md-12" style="background-color: aqua;">12</div>
</div>
</div>
拉宽后 会自适应
列组合
在同一个row里，如果不超过12会放在一行，如果超过，超过的会放在下一行
列偏移
新版的用 offset-n
1
2
3
4
5
6
7
<div class="container">
<div class="row">
<div class="col-md-2" style="background-color: aqua;">2</div>
<div class="col-md-2 offset-1" style="background-color:salmon;">2</div>
<div class="col-md-2" style="background-color: blue;">2</div>
</div>
</div>
算上偏移的 超过12 会换行
列排序
版本5的暂略
列嵌套
1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: aqua;">
<div class="row">
<div class="col-md-5 " style="background-color:salmon;">5</div>
<div class="col-md-5" style="background-color: purple;">5</div>
</div>
</div>
</div>
</div>
常用样式
排版
标题略 副标题可以用.small来实现
段落略
强调：
1
2
3
4
5
6
<div class="text-muted">提示效果</div>
<div class="text-primary">主要效果</div>
<div class="text-success">成功效果</div>
<div class="text-info">信息效果</div>
<div class="text-warning">警告效果</div>
<div class="text-danger">危险效果</div>
对齐： text-align left center right
列表：无序ul 有序ol 定义dl（暂略）
代码 <code> 键盘样式 <kbd> 代码块 <pre>
表格
基础样式：.table
附加样式
-
.table-striped斑马线表格 -
.table-bordered带边框的表格 -
.table-hover鼠标悬停高亮的表格 -
.table-condensed紧凑型表格