Bootstrap：修订间差异

2021年7月25日 (日) 06:59的版本

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

简介

时间轴

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

了解更多 >> Bootstrap 博客

布局

主件

通用类

概览

类别	描述	示例
背景 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`表示该节点尽可能收缩以留空间给其他子节点。其中取断点值。
浮动 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

资源

官网

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

@@ 第1行： / 第1行： @@
 Bootstrap是一个用于网站和网络应用程序开发的开源前端框架。包括[[HTML]]、[[CSS]]及[[JavaScript]]的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。
-<div class="d-md-none">c测试</div>
-<div class="d-block">c测22222</div>
 ==简介==
 ===时间轴===
@@ 第11行： / 第10行： @@
 |[https://blog.getbootstrap.com/ Bootstrap 博客]
 }}
@@ 第45行： / 第43行： @@
 | <code><nowiki><div class="d-block">内容</div></nowiki></code>任何视窗大小都显示<br /> <code><nowiki><div class="d-md-block">内容</div></nowiki></code>在md屏幕及更大显示<br /> <code><nowiki><div class="d-none">内容</div></nowiki></code>任何视窗大小都隐藏 <br /><code><nowiki><div class="d-md-none">内容</div></nowiki></code>在md屏幕及更大隐藏 <br /><code><nowiki><div class="d-md-none d-lg-block">内容</div></nowiki></code>只在md屏幕下隐藏 <br /><code><nowiki><div class="d-none d-sm-block d-md-none">内容</div></nowiki></code>只在sm屏幕下显示        <br /><code><nowiki><div class="d-inline">内容</div></nowiki></code>div行内显示 <br />
 |-
-| 弹性盒子<br />Flex
+| [https://getbootstrap.com/docs/5.0/utilities/flex/ 弹性盒子]<br />Flex
-|
+| 创建弹性盒子（flexbox），块弹性盒子<code>d-flex</code>和<code>d-*-flex</code>，行内弹性盒子<code>d-inline-flex</code>和<code>d-*-inline-flex</code>，其中*可取值断点{sm，md，lg，xl，xxl}。只有创建弹性盒子后，才能设置下面的属性值。 <br /><br />方向，水平正向<code>flex-row</code>和<code>flex-*-row</code>，水平反向<code>flex-row-reverse</code>和<code>flex-*-row-reverse</code>，垂直正向<code>flex-column</code>和<code>flex-*-column</code>，垂直反向<code>flex-column-reverse</code>和<code>flex-*-column-reverse</code>，其中*可取值断点{sm，md，lg，xl，xxl}。 <br /><br />调整主轴（main axis）对齐方式，主轴即当前盒子方向，如盒子横向flex-row主轴就是横向。<code>justify-content-?</code>和<code>justify-content-*-?</code>其中?可取值{start(都靠左边，默认值), end(都靠右边), center（都居中），其中*取值{sm，md，lg，xl，xxl}, between（平均，最左+中间+最右）, around（平均，每个子节点左右空隙一样）, evenly（平均，子节点空隙一样）} <br /><br />调整交叉轴（cross axis）对齐方式，交叉轴是与主轴垂直的轴，如盒子横向flex-row交叉轴是纵向。<code>align-items-?</code>和<code>align-items-*-?</code>其中?取值｛start, end, center, baseline, or stretch（默认）｝，其中*同上。<br /><br />调整子节点交叉轴对齐方式，单独调整需在某个子节点添加属性<code>align-self-?</code>或<code>align-self-*-?</code>，其中*和?取值同上，如align-self-center，align-self-sm-baseline。<br /><br />填充，多个子节点添加<code>flex-fill</code>或<code>flex-*-fill</code> <br /><br />伸展和收缩，子节点添加<code>flex-grow-1</code>或<code>flex-*-grow-1</code>表示在在其他子节点够用情况下尽量伸展空间。子节点添加<code>flex-shrink-1</code>或<code>flex-*-shrink-1</code>表示该节点尽可能收缩以留空间给其他子节点。 其中*取断点值。
 |
 |-