Bootstrap：修订间差异

2023年11月18日 (六) 06:55的最新版本

Bootstrap是一个用于网站和网络应用程序开发的开源前端框架。包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。

简介

时间轴

2011年8月19日，将其作为开源项目发布。
2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件，并且对许多组件进行了修改。
2013年8月19日，Bootstrap 3发布。
2020年6月，Bootstrap 5 alpha发布。移除了JQuery依赖。

了解更多 >> Bootstrap 博客

安装

快速入门

第一个示例

创建一个index.html文件，通过CDN导入boostrap的JavaScript和CSS文件，如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

了解更多 >> Bootstrap 文档：介绍

文件内容

名称	描述
bootstrap.css bootstrap.js bootstrap.min.css bootstrap.min.js	常用的编译版本，min为压缩删除不必要空格的版本，部署时使用。
bootstrap.css bootstrap.bundle.js bootstrap.min.css bootstrap.bundle.min.js	bundle的js包含 Popper.js和bootstrap.js，提供下拉列表、弹出框或工具提示。

了解更多 >> Bootstrap 文档：内容 Bootstrap 文档：介绍

布局

基础

断点

Bootstrap 包括 6 个默认断点（breakpoints），用于响应式构建。断点也可以自定义宽度。

Breakpoint	CSS类	尺寸	示例
Extra small	None	<576px	`.col-6`
Small	sm	≥576px	`.col-sm-4` `.container-sm`
Medium	md	≥768px	`.col-md-4`
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px
Example	ex	≥1600px

了解更多 >> Bootstrap 文档：Breakpoints

容器

容器（containers），是Bootstrap基本构建块，使用默认的响应式网格（grid）必须位于容器里。

<div class="container">
  <!-- Content here -->
</div>

了解更多 >> Bootstrap 文档：Containers

响应式网格

响应式网格（Grid system）

<div class="container text-center">
    <div class="row">
        <div class="col-3 text-bg-success ">
            1 (占3列)
        </div>
        <div class="col-6 text-bg-primary">
            2 (占6列)
        </div>
        <div class="col-3 text-bg-danger ">
            3 (占3列)
        </div>
    </div>
</div>

了解更多 >> Bootstrap 文档：Grid system

组件

通用类

概览

类别	描述	示例
背景 Background	背景颜色，`bg-`，其中可取值：{ primary, secondary, success, danger, warning, info, light, dark, body, white, transparent } 背景梯度，`bg-gradient`	`<div class="bg-danger text-white">文本本文</div>`背景设置danger颜色，文本设置白色
颜色 Colors	`text-`，其中可取值：{ primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black, white }
边框 Borders	增加边框，四边`border`，上边`border-top`，下边`border-bottom`，开始`border-start`，结束`border-end`。减少边框，四边`border-0`，上边`border-top-0`，下边`border-bottom-0`，开始`border-start-0`，结束`border-end-0`。边框颜色，`border-`，其中可取值主题颜色：{ primary, secondary, ... }。边框宽度，`border-`，其中可取值{1, 2, 3, 4, 5}。边框圆角半径，`rounded`，`rounded-`，其中可取值{top, bottom, start, end, circle, pill}。圆角尺寸，`rounded-`，其中可取值{0, 1, 2, 3}	`<span class="border border-success"></span>` 添加一个success颜色边框
显示方式 Display	切换组件是否显示，其原理通过修改display属性。 `d-`，`d-?-`其中可取显示方式值{none 不显示, inline 行内显示, inline-block, block 块显示, grid, table, table-cell, table-row, flex, inline-flex}，其中?可取视窗大小{sm，md，lg，xl，xxl}。 `d-print-`打印显示方式，其中可取显示方式值，与`d-`一样。	`<div class="d-block">内容</div>`任何视窗大小都显示 `<div class="d-md-block">内容</div>`在md屏幕及更大显示 `<div class="d-none">内容</div>`任何视窗大小都隐藏 `<div class="d-md-none">内容</div>`在md屏幕及更大隐藏 `<div class="d-md-none d-lg-block">内容</div>`只在md屏幕下隐藏 `<div class="d-none d-sm-block d-md-none">内容</div>`只在sm屏幕下显示 `<div class="d-inline">内容</div>`div行内显示
弹性盒子 Flex	创建弹性盒子（flexbox），块弹性盒子`d-flex`和`d--flex`，行内弹性盒子`d-inline-flex`和`d--inline-flex`，其中可取值断点{sm，md，lg，xl，xxl}。只有创建弹性盒子后，才能设置下面的属性值。方向，水平正向`flex-row`和`flex--row`，水平反向`flex-row-reverse`和`flex--row-reverse`，垂直正向`flex-column`和`flex--column`，垂直反向`flex-column-reverse`和`flex--column-reverse`，其中可取值断点{sm，md，lg，xl，xxl}。调整主轴（main axis）对齐方式，主轴即当前盒子方向，如盒子横向flex-row主轴就是横向。`justify-content-?`和`justify-content--?`其中?可取值{start(都靠左边，默认值), end(都靠右边), center（都居中），其中取值{sm，md，lg，xl，xxl}, between（平均，最左+中间+最右）, around（平均，每个子节点左右空隙一样）, evenly（平均，子节点空隙一样）} 调整交叉轴（cross axis）对齐方式，交叉轴是与主轴垂直的轴，如盒子横向flex-row交叉轴是纵向。`align-items-?`和`align-items--?`其中?取值｛start, end, center, baseline, or stretch（默认）｝，其中同上。调整子节点交叉轴对齐方式，单独调整需在某个子节点添加属性`align-self-?`或`align-self--?`，其中和?取值同上，如align-self-center，align-self-sm-baseline。填充，多个子节点添加`flex-fill`或`flex--fill` 伸展和收缩，子节点添加`flex-grow-1`或`flex--grow-1`表示在在其他子节点够用情况下尽量伸展空间。子节点添加`flex-shrink-1`或`flex--shrink-1`表示该节点尽可能收缩以留空间给其他子节点。其中取断点值。自动边距，子节点添加`me-auto`属性表示其后面节点都推到最右，子节点添加`ms-auto`属性表示其前面节点都推到最左。me是margin end缩写。搭配align-items将一个flex子节点移动到容器的顶部或底部，flexbox添加`d-flex align-items-start flex-column`属性，其中第一个子节点添加`mb-auto`属性。换行，完全不换行`flex-nowrap`（浏览器默认），换行`flex-wrap`，反向换行`flex-wrap-reverse`，也可以添加响应变量如flex-sm-wrap。排序，子节点设置`order-`改变显示顺序，其中取值｛1，2，3，4，5｝。也可以添加响应变量如order-sm-2。对齐内容，`align-content-* flex-wrap`，其中*可取值｛start（浏览器预设），end，center，between，around，stretch｝，注意单行没效果。媒体对象组件，见文档。
浮动 Float
互动 Interactions
溢出 Overflow
位置 Position
阴影 Shadows
尺寸 Sizing
间距 Spacing
文本 Text	对齐，左对齐`text-start` `text--start`，居中对齐`text-center` `text--center`，右对齐`text-end` `text--end`。其中可取值：{ sm, md, lg, xl }，表示在该视窗或更大下开始对齐。换行和溢出，`text-wrap`，`text-nowrap` 文字断行，	`<p class="text-center">文本本文</p>` 该文本任何视窗大小都居中显示 `<p class="text-md-center">文本本文</p>` 该文本在md视窗或更大居中显示，而在sm视窗会按原来方式显示。
垂直对齐 Vertical align
可视性 Visibility

通用类API

图标 Icon

概览

Bootstrap 默认不包含图标集，可以使用Bootstrap维护的图标集Bootstrap Icons，或其他任何图标集。下表为一些图标集：

名称	描述	网址
Bootstrap Icons	由@mdo设计并由Bootstrap 团队维护。使用MIT许可，可免费用于个人或商业项目。	https://icons.getbootstrap.com/
Font Awesome		https://fontawesome.com/
Feather		https://feathericons.com/
Octicons		https://primer.style/octicons/
Google Material Icons		https://fonts.google.com/icons

了解更多 >> Bootstrap 文档：Icons

Bootstrap Icons

安装

Bootstrap Icons有三种安装方式：

安装方式	描述	操作
npm		npm i bootstrap-icons
下载	Bootstrap Icons 发布在 GitHub 上，包括图标 SVG、字体、许可证和自述文件。	https://github.com/twbs/icons/releases/latest/
CDN		使用jsdelivr CDN示例： `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">` `@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");`

了解更多 >> Bootstrap Icons：安装

使用

用法	描述	示例
嵌入式	不需要安装任何文件，只需要在Bootstrap Icons网页查找图标，点进去后复制其HTML代码。	<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
CSS	下载 Bootstrap Icons，将`bootstrap-icons.css`和`fonts`放入项目，并在HTML页面引入 `<link rel="stylesheet" href="/assets/css/bootstrap.min.css">`。	`<i class="bi bi-emoji-smile"></i>` 显示

了解更多 >> Bootstrap Icons：使用

模板

模板商城

名称	描述	网址
Bootstrap Themes	Bootstrap 官方商城。	https://themes.getbootstrap.com/
Start Bootstrap	有开源免费和收费的模板。	https://startbootstrap.com/
BootstrapMade	有免费和收费模板。	https://bootstrapmade.com/

常见模板

名称	描述	网址
AdminLTE	开源模板，v4.0 基于 Bootstrap 5，不依赖JQuery。	官网：https://adminlte.io 源代码：https://github.com/ColorlibHQ/AdminLTE
AdminKit	开源模板，v2.0 基于 Bootstrap 5，不依赖JQuery。	官网：https://adminkit.io/ 源代码：https://github.com/adminkit/adminkit
SB Admin 2	开源模板，基于Bootstrap 4。	官网：https://startbootstrap.com/theme/sb-admin-2 源代码：https://github.com/startbootstrap/startbootstrap-sb-admin-2
PlainAdmin	开源模板，基于Bootstrap 5，不依赖JQuery。	官网：https://plainadmin.com/ 源代码：https://github.com/PlainAdmin/plain-free-bootstrap-admin-template
Volt Bootstrap	开源模板，基于Bootstrap 5，不依赖JQuery。	官网：https://demo.themesberg.com/volt/pages/dashboard/dashboard.html 源代码：https://github.com/themesberg/volt-bootstrap-5-dashboard

资源

官网

Bootstrap 官网：https://getbootstrap.com/
Bootstrap 文档：https://getbootstrap.com/docs
Bootstrap 源代码：https://github.com/twbs
Bootstrap 图标：https://icons.getbootstrap.com/
Bootstrap 博客：https://blog.getbootstrap.com/
Bootstrap 主题商城：https://themes.getbootstrap.com/

网站

文章

维基百科：Bootstrap

@@ 第6行： / 第6行： @@
 *2012年1月31日，Bootstrap 2发布。这一版增加了十二列网格布局和响应式组件，并且对许多组件进行了修改。
 *2013年8月19日，Bootstrap 3发布。
+*2020年6月，Bootstrap 5 alpha发布。移除了[[JQuery]]依赖。
 {{了解更多
 |[https://blog.getbootstrap.com/ Bootstrap 博客]
 }}
+===安装===
+==快速入门==
+===第一个示例===
+创建一个<code>index.html</code>文件，通过CDN导入boostrap的JavaScript和CSS文件，如下：
+<syntaxhighlight lang="html" >
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Bootstrap demo</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  </head>
+  <body>
+    <h1>Hello, world!</h1>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+  </body>
+</html>
+</syntaxhighlight>
+{{了解更多
+|[https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bootstrap 文档：介绍 ]
+}}
+=== 文件内容 ===
+{| class="wikitable"
+! 名称
+! 描述
+|-
+| bootstrap.css<br />bootstrap.js  <br /><br />bootstrap.min.css<br />bootstrap.min.js
+| 常用的编译版本，min为压缩删除不必要空格的版本，部署时使用。
+|-
+| bootstrap.css<br />bootstrap.bundle.js<br /><br />bootstrap.min.css<br />bootstrap.bundle.min.js
+| bundle的js包含 Popper.js和bootstrap.js，提供下拉列表、弹出框或工具提示。
+|}
+{{了解更多
+|[https://getbootstrap.com/docs/5.3/getting-started/contents/  Bootstrap 文档：内容]
+|[https://getbootstrap.com/docs/5.3/getting-started/introduction/ Bootstrap 文档：介绍 ]
+}}
 ==布局==
+===基础===
+====断点====
+Bootstrap 包括 6 个默认断点（breakpoints），用于响应式构建。断点也可以自定义宽度。
+{| class="wikitable"
+|-
+! Breakpoint !! CSS类!! 尺寸!! 示例
+|-
+| Extra small || None || <576px  || <code>.col-6</code>
+|-
+| Small || sm || ≥576px  || <code>.col-sm-4</code>  <br /><code>.container-sm</code>
+|-
+| Medium || md || ≥768px|| <code>.col-md-4</code>
+|-
+| Large || lg || ≥992px|| <code></code>
+|-
+| Extra large || xl || ≥1200px||
+|-
+| Extra extra large || xxl || ≥1400px||
+|-
+| Example || ex || ≥1600px||
+|}
+{{了解更多
+|[https://getbootstrap.com/docs/5.3/layout/breakpoints/ Bootstrap 文档：Breakpoints]
+}}
-==主件==
+====容器====
+容器（containers），是Bootstrap基本构建块，使用默认的响应式网格（grid）必须位于容器里。
+<syntaxhighlight lang="HTML" >
+<div class="container">
+  <!-- Content here -->
+</div>
+</syntaxhighlight>
+{{了解更多
+|[https://getbootstrap.com/docs/5.3/layout/containers/ Bootstrap 文档：Containers ]
+}}
+===响应式网格===
+响应式网格（Grid system）
+<syntaxhighlight lang="HTML" >
+<div class="container text-center">
+    <div class="row">
+        <div class="col-3 text-bg-success ">
+(占3列)
+        </div>
+        <div class="col-6 text-bg-primary">
+(占6列)
+        </div>
+        <div class="col-3 text-bg-danger ">
+(占3列)
+        </div>
+    </div>
+</div>
+</syntaxhighlight>
+{{了解更多
+|[https://getbootstrap.com/docs/5.3/layout/grid/ Bootstrap 文档：Grid system]
+}}
+==组件==
@@ 第88行： / 第185行： @@
 ===通用类API===
+== 图标 Icon==
+=== 概览 ===
+Bootstrap 默认不包含图标集，可以使用Bootstrap维护的图标集Bootstrap Icons，或其他任何图标集。下表为一些图标集：
+{| class="wikitable"  style="width: 100%;
+! 名称
+! 描述
+! 网址
+|-
+| Bootstrap Icons
+| 由[https://github.com/mdo @mdo]设计并由Bootstrap 团队维护。使用MIT许可，可免费用于个人或商业项目。
+| https://icons.getbootstrap.com/
+|-
+| Font Awesome
+|
+| https://fontawesome.com/
+|-
+| Feather
+|
+| https://feathericons.com/
+|-
+| Octicons
+|
+| https://primer.style/octicons/
+|-
+| Google Material Icons
+|
+| https://fonts.google.com/icons
+|}
+{{了解更多
+|[https://getbootstrap.com/docs/5.1/extend/icons/ Bootstrap 文档：Icons]
+}}
+=== Bootstrap Icons ===
+==== 安装 ====
+Bootstrap Icons有三种安装方式：
+{| class="wikitable"  style="width: 100%;
+! 安装方式
+! 描述
+! 操作
+|-
+| npm
+|
+| npm i bootstrap-icons
+|-
+| 下载
+| Bootstrap Icons 发布在 GitHub 上，包括图标 SVG、字体、许可证和自述文件。
+| https://github.com/twbs/icons/releases/latest/
+|-
+| CDN
+|
+| 使用jsdelivr CDN示例：<br /><code><nowiki><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"></nowiki></code> <br /><code><nowiki>@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");</nowiki></code>
+|}
+{{了解更多
+|[https://icons.getbootstrap.com/#install  Bootstrap Icons：安装]
+}}
+==== 使用 ====
+{| class="wikitable"  style="width: 100%;
+! 用法
+! 描述
+! 示例
+|-
+| 嵌入式
+| 不需要安装任何文件，只需要在[https://icons.getbootstrap.com/ Bootstrap Icons]网页查找图标，点进去后复制其HTML代码。
+| <syntaxhighlight lang="python">
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
+</syntaxhighlight>
+|-
+| CSS
+| [https://github.com/twbs/icons/releases/latest/ 下载] Bootstrap Icons，将<code>bootstrap-icons.css</code>和<code>fonts</code>放入项目，并在HTML页面引入<code> <link rel="stylesheet" href="/assets/css/bootstrap.min.css"></code>。
+|<code><nowiki><i class="bi bi-emoji-smile"></i></nowiki></code> 显示<i class="bi bi-emoji-smile"></i>
+|}
+{{了解更多
+|[https://icons.getbootstrap.com/#usage Bootstrap Icons：使用]
+}}
 ==模板==
@@ 第108行： / 第284行： @@
 |https://bootstrapmade.com/
 |}
-===后台模板===
+===常见模板===
 {| class="wikitable"  style="width: 100%;
 ! 名称
-! 版本
 ! 描述
 ! 网址
+|-
+| [[AdminLTE]]
+| 开源模板，v4.0 基于 Bootstrap 5，不依赖[[JQuery]]。
+| 官网：https://adminlte.io<br \>源代码：https://github.com/ColorlibHQ/AdminLTE
 |-
 | AdminKit
-| Bootstrap 5
+| 开源模板，v2.0 基于 Bootstrap 5，不依赖[[JQuery]]。
-| 开源模板，不需要jQuery
 | 官网：https://adminkit.io/<br \>源代码：https://github.com/adminkit/adminkit
+|-
+|SB Admin 2
+| 开源模板，基于Bootstrap 4。
+|官网：https://startbootstrap.com/theme/sb-admin-2 <br />源代码：https://github.com/startbootstrap/startbootstrap-sb-admin-2
+|-
+|PlainAdmin
+| 开源模板，基于Bootstrap 5，不依赖[[JQuery]]。
+|官网：https://plainadmin.com/ <br />源代码：https://github.com/PlainAdmin/plain-free-bootstrap-admin-template
+|-
+|Volt Bootstrap
+|开源模板，基于Bootstrap 5，不依赖[[JQuery]]。
+|官网：https://demo.themesberg.com/volt/pages/dashboard/dashboard.html <br />源代码：https://github.com/themesberg/volt-bootstrap-5-dashboard
 |}