🅱️ Bootstrap 使用笔记

# 引入 Bootstrap

通过包管理工具下载 *(不包括文档，但是包含了完整的编译系统和说明文件)：

$ npm install bootstrap

$ gem install bootstrap -v  4.2.1

1
2
3

在 HTML 中使用 CDN 引入：Bootstrap 官方 CDN 源 (opens new window)

在 HTML 中使用已下载好的目录文件：

(使用模版)

<!DOCTYPE html>
<html lang="en">
	<head>
        <meta charset="utf-8">
        <!-- X-UA-Compatible 设置兼容模式-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Bootstrap EXAMPLE</title>
    
        <!-- CSS ONLY -->
    	<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
        <h1>Hello, world!</h1>
        
        <!-- jQuery -->
        <script src="js/jquery-3.4.1.js"></script>
        <!-- Bootstrp.min.js　-->
        <script src="js/bootstrap.min.js"></script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

viewport 标记指定用户是否可以缩放页面， width 、 height 标记指示视区的宽度和高度（ device-width 、 device-height 表示设备的屏幕高度和宽度）， initial-scale=1 设置 Web 页面的初始缩放比例， 1.0 表示不缩放；
要使用 Bootstrap 中的 JavaScript 插件需要先引入 jQuery；

# 容器 Container

容器是窗口布局的最基本元素，我们推荐所有样式都定义在 .container 或 .container-fluid 容器之中；

# `.container`

用于固定宽度并支持响应式布局，网页两侧留白的布局；

<div class="container">
  ...
</div>

1
2
3

# `.container-fluid` 流式布局

用于 100% 宽度，占据全部 viewport 的容器，网页两侧不留白的布局；

<div class="container-fluid">
  ...
</div>

1
2
3

# 栅格布局 Grid

Bootstrap 提供一套响应式、移动设备优先的流式栅格系统，随着屏幕或 viewport 尺寸的增加，系统会自动分为最多 12 列。
用于通过一系列的行 row 与列 column 的组合来创建页面布局，内容放入这些创建好的布局中；
网格系统就是将容器平分成 12 份；

注意：

行 row 必须要被包含在 .container 容器或者 .container-fluid 容器；
具体的内容放在列容器 column 内；
.col-屏幕尺寸-列数
- 屏幕尺寸参数：
- xs (xsmall phones) 超小屏 (自动)；
- sm (small tablets) 小屏 (750px)；
- md (middle desktops) 中屏 (970px)；
- lg (larger desktops) 大屏 (1170px)；

# 自动布局列

# 等宽布局

简单使用 .col 布局内容，在所有设备上都是等宽并占满一行；

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10

# 设置列宽度

在一行多列的情况下，设置一个列的占用宽度，同时其他列自动调整大小：

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 可变宽度的弹性空间

实现根据列中的内容的自然宽度进行列的大小调整：

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 等宽列多行

跨多个行的等宽列可以使用插入 .w-100 拆分（ .w-100 还可以影响一些显示状态效果 https://getbootstrap.net/docs/4.0/utilities/display/）

(使用 .clearfix 的效果也可)

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

1
2
3
4
5
6
7

# 响应式类选择器

可以根据屏幕尺寸大小定义样式， Bootstrap 包括了 5 种尺寸的与定义样式：

	超小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	超大屏幕 ≥1200px
`.container` 最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`

一个 row 的最大列 column 数都为 12 ；
列之间的间隙为 30px，（每列两侧各 15px）；
都可嵌套、可排序；

# 覆盖所有设备

一次性定义所有设备可以直接使用 .col ， .col-* 指定特定大小（占据的列数，不得超过 12）：

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

1
2
3
4
5
6
7
8
9
10

# 水平堆砌

对于流行的移动设备屏幕，可以使用 col-sm-* 。随着屏幕宽度变窄，会自动成为每列与行、水平堆砌：

在大屏幕:

在小屏幕

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

1
2
3
4
5
6
7
8
9

# 混合布局

适应在各个屏幕下的布局，对每一个列进行不同的设备定义：

<!-- 定义在超小屏幕下1列全宽、1列半宽，而其它场景以8:4比例并行排列 -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

1
2
3
4
5

<!-- 在超小屏幕半宽，其他场景3等分-->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

1
2
3
4
5
6

# 对齐

# 行列布局

使用 .row-col–* 定义一行可以放的列数，并且支持不同的断点（ .col-* 、 .col-md-4 ）。该属性写在 .row 空间中。

每行显示两列： row-col-2

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

1
2
3
4
5
6
7
8

当一行放的列数超出了定义的列数时，自动换到下一行：

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

1
2
3
4
5
6
7
8

适应各种屏幕：

在超窄屏幕显示为每行只有一列，小屏幕为每行两列，中等屏幕为每行四列：

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

1
2
3
4
5
6
7
8

# 垂直对齐

在 .row 空间中使用 .align-items-* ：

上边对齐： align-items-start ；

 <div class="row align-items-start">
    <div class="col"> One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>

1
2
3
4
5

上下居中对齐： align-items-center :

<div class="row align-items-center">
  <div class="col"> one of three columns </div>
  <div class="col"> one of three columns </div>
  <div class="col"> one of three columns </div>
</div>

1
2
3
4
5

下边对齐： align-items-end ：

<div class="row align-items-end">
  <div class="col"> one of three columns </div>
  <div class="col"> one of three columns </div>
  <div class="col"> one of three columns </div>
</div>

1
2
3
4
5

在 .col 空间中使用 align-self-* ：

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 水平对齐

在 .row 空间使用 .justify-content-*

向左对齐： justify-content-start
居中对齐： justify-content-center
向右对齐： justify-content-end
间隔相等对齐： justify-content-around
两端对齐贴齐： justify-content-between

# 列排序 order

使用 .order-* 选择器，对列进行重新可视化的排序，Bootstrap 提供 .order-1 到 .order-12 12 个级别的顺序，在五种预设宽度中都生效：

对于未定义顺序的列，不会受到定义了顺序的列的影响：

<div class="container">
  <div class="row">
    <div class="col">
		one of three colomns
    </div>
    <div class="col order-12">
		one of three colomns
    </div>
    <div class="col order-1">
		one of three colomns
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

使用 .order-first ，快速更改一个顺序到最前面：

<div class="container">
  <div class="row">
    <div class="col">
		one of three colomns
    </div>
    <div class="col">
		one of three colomns
    </div>
    <div class="col order-first">
		one of three colomns
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 列偏移 offset

使用 .offset-* 偏移：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>

1
2
3
4

使用边界处理 .ml-* 、 .mr-* 、 p-* 等（ margin 、 padding ）偏移；

# 列嵌套

通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行 row 所包含的列 column 数量推荐不要超过 12 个。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

# Margin 和 Padding

Bootstrap 可以使用 margin 和 padding CSS 函数控制元素和组建的间隔和大小，基于单位 rem （对于选择所有的视口， .mr-3 对应 margin-right: 1rem ）（以针对特定的视口（例如， .mr-md-3 对于 margin-right: 1rem 处于起步 md 断点）

# 内容 Content

# CSS 重置 Reboot

Reboot · Bootstrap v5.1 (getbootstrap.com) (opens new window)

# 排版 Typograhpy

Typography · Bootstrap v5.1 (getbootstrap.com) (opens new window)

标题 <h1> … </h1>
显式标题 .display-*
中心内容 .lead
内联元素：
- <mark> … </mark> / .mark
- <small> … </small> / .small
- <s> … </s> / .text-decoration-line-through 划去文本
- <u> … </u> / .text-decoration-underline 下划线
文本使用程序 Text・Bootstrap v5.1 (getbootstrap.com) (opens new window)：可更改文本对齐，变换，样式，权重，颜色 Colors · Bootstrap v5.1 (getbootstrap.com) (opens new window)；
来源备注和引用 <blockquote class="blockquote">… </blockquote>

底部备注来源 <footer class="blockquote-footer"> 用于标识来源，一般用于页脚（所以有 *-footer )，然后配合 <cite> 使用。

文本对齐：

居中 .text-center
居右 .text-right

列表：

列表样式初始化 .list-unstyled ，只生效于在直接子列表项目上，不影响你嵌套的子列表；

列表单行多列并排：用 .list-inline 和 .list-inline-item 搭配：

<ul class="list-inline">
  <li class="list-inline-item">list item</li>
  <li class="list-inline-item">list item</li>
  <li class="list-inline-item">list item</li>
</ul>

1
2
3
4
5

dl 描述列表：

对于较长的条目，你可以视情况添加一个 .text-truncate 类，从而用省略号截断文本。

<dl class="row">
    <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 代码 Codes

内联代码片段： <code> </code>
- 注意： HTML 尖括号需要转义： <code><section></code> ；

代码块： <pre> … </pre>

使用 .pre-scrollable 提供垂直滚动效果（默认 350px 高度限制）

<pre>
<code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code>
</pre>

1
2
3
4
5

变量： <var> a </var>
键盘动作（键盘输入操作） <kbd> </kbd> ：
- cmd + q
代码实例： <samp> codes example </samp>

# 图片 Images

# 响应式图片

添加 .img-fluid 或者定义 max-width: 100%; height:auto; 样式，图片被赋予响应式的特性，图片大小随着父元素的代销同步缩放；
```
<img src="..." class="img-fluid" alt="Responsive image">
```
1

# 缩略图

使用 .img-thumbnail 获得样式：带圆角的 1px 边框；

# 图片对齐

.float-left 向左浮动、 .float-right 向右浮动；

居中（浮动定义规范）：

<img src="..." class="rounded mx-auto d-block" alt="...">

或者（文字对齐规范）：

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

1
2
3

# picture 元素

利用 HTML5 新特性， <picture> … </picture> 实现图片在不同屏幕下的针对性响应式：

<picture>
  <source src="大规格图片.jpg"  media="(min-width: 800px)" >
  <source src="中规格图片.jpg"  media="(min-width: 600px)">
  <source src="小规格图片.jpg">
  <img src="通用图片.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>

1
2
3
4
5
6

# 表格 Tables

Tables · Bootstrap v5.1 (getbootstrap.com) (opens new window)

# 基本样式

Bootstrap 基本表格样式： .table ：（使用该类选择器意味着任何嵌套的表格标签都采用该样式）

.table-dark ：提供暗色模式的表格样式

# 表头样式

浅灰 .thead-light ；
深色 .thead-dark ；

# 条纹表格样式

.table-striped

与 .table-dark 配合使用：

# 表格边框

.table-bordered

与 .table-dark 配合使用：

# 表格状态

（与 Bootstrap 预设颜色表对应）可应用在表格行 <tr> 或者特定单元格 <td> 、 <th> ；

.table-defalut ；
.table-primary ;
… 以此类推；

对于深色模式的表格，不适用以上的颜色，可以通过背景通用样式（ bg-* 实现）：

bg-primary 等；

# 行悬停效果

table-hover

# 紧缩表格

.table-sm ：将表格的 padding 减缩，使表格更加紧凑；

# 响应式表格

当表格要在多屏幕上始终呈现水平滚动效果，可在 .table 的基础上加上 .table-responsive 获得响应式表现。（也可使用 table-responsive{-sm|-md|-lg|-xl} 定义）

# 图文内容 Figures

Figures · Bootstrap v5.1 (getbootstrap.com) (opens new window)

.figure 与 .figure-caption 用于需要显示图片与文本描述（标题），适用于 HTML5 新增的特性：（由于默认的图片不会定义明确大小，所以最好使用 img-figure 实现响应式样式）

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

1
2
3
4

文本描述的对齐方式可以使用 .text-* 通用文本使用工具实现：

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

1
2
3
4

编辑

#Bootstrap

📢 上次更新: 2022/09/02, 10:18:16

← 📐 Less 笔记

🅱️ Bootstrap 使用笔记

# 引入 Bootstrap

# 容器 Container

# .container

# .container-fluid 流式布局

# 栅格布局 Grid

# 自动布局列

# 等宽布局

# 设置列宽度

# 可变宽度的弹性空间

# 等宽列多行

# 响应式类选择器

# 覆盖所有设备

# 水平堆砌

# 混合布局

# 对齐

# 行列布局

# 垂直对齐

# 水平对齐

# 列排序 order

# 列偏移 offset

# 列嵌套

# Margin 和 Padding

# 内容 Content

# CSS 重置 Reboot

# 排版 Typograhpy

# 代码 Codes

# 图片 Images

# 响应式图片

# 缩略图

# 图片对齐

# picture 元素

# 表格 Tables

# 基本样式

# 表头样式

# 条纹表格样式

# 表格边框

# 表格状态

# 行悬停效果

# 紧缩表格

# 响应式表格

# 图文内容 Figures

# `.container`

# `.container-fluid` 流式布局