对于新手来说， Bootstrap 4是一个免费的前端框架，可让您更快，更轻松地进行Web开发。
Bootstrap包括用于排版，表单，按钮，表格，导航，模态，图像轮播等的基于HTML和CSS的设计模板，以及可选的JavaScript插件。
Bootstrap还使您能够轻松创建响应式设计。
布局实用程序：
为了更快地实现对移动设备友好的响应式开发，Bootstrap 4包含数十个实用程序类，用于显示，隐藏，对齐和分隔内容。所有这些都经过分类并列出了以下示例：
- 颜色：
- 它们用于通过少数几个颜色实用程序类通过颜色传达含义。 Bootstrap 4还支持对具有悬停状态(将光标移到项目上方的状态)的样式链接进行样式设置。
范例1：.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
.text-white
输出：
- 上下文文本类也可以在链接上使用，这将添加更深的悬停颜色。
范例2：Contextual Link Colors
Hover over the links.
Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.输出：
- 在这里，当我们将鼠标悬停在上面的代码中的文本(链接)上方时，将显示较深的颜色。
我们还可以使用.text-black-50或.text-white-50类为黑色或白色文本添加50％的不透明度，如下所示：
范例3：Black text with 50% opacity on white background
White text with 50% opacity on black background
输出：
- 它们用于通过少数几个颜色实用程序类通过颜色传达含义。 Bootstrap 4还支持对具有悬停状态(将光标移到项目上方的状态)的样式链接进行样式设置。
- 背景颜色：
与上下文文本颜色类相似，我们可以轻松地将元素的背景设置为任何上下文类。背景颜色的类别为： .bg-primary ， .bg-success ， .bg-info ， .bg-warning ， .bg-danger ， .bg-secondary ， .bg-dark和.bg-light 。注意：背景颜色不会设置文本颜色，因此在某些情况下，您需要将它们与.text- *类一起使用。
例子：
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary background color.
Dark grey background color.
Light grey background color.
输出：
- 边境公用事业：
它们用于添加或删除元素的边框。使用边框实用程序可以快速设置元素的边框和边框半径的样式。适用于图像，按钮或任何其他元素。在此处使用“边框”类。- 附加边框：用于“添加”边框。
例子：输出：
可以看到，按照上面的代码，所有4个边界都添加到了第一个正方形，然后将顶部，右侧，底部和左侧边界添加到了随后的正方形。 (边界较浅，请仔细观察)
- 减法边界：用于“去除”边界：
例子：输出：
再次从上面提供的图片中清楚地看到，按照代码，从第一个正方形中删除了所有4个边框，然后从后续正方形(从最初的4边带边框的正方形)中删除了顶部，右侧，底部和左侧边框。以上。 (边界较浅，请仔细观察)
请注意，我们只需要在代码中添加一个“ -0”(在“边界”之后)即可将其减去。 - 边框颜色：用于为边框赋予特定的颜色。
例子：输出：
上面的示例非常简单，具有带有通常指示的边框颜色，例如红色危险，黄色警告(如小心的路标)，绿色成功等。
- 边界半径：用于指定特定的半径类型：(如带有圆边)
例子：输出：
在上面的示例中，我们在前三个正方形的所有4边添加了圆角(分别为小角，正常角和大角)，然后仅对随后的正方形的顶部，右侧，底部和左侧添加了圆角从上面的代码。然后实现一个完全圆形的边界(不是正方形，圆形)和一个非圆形的边界(正方形，没有圆形边缘)。
- 附加边框：用于“添加”边框。
- 文本 ：
Bootstrap 4包含用于控制对齐，环绕，粗细等的常用文本实用程序的文档和示例。- 文本对齐方式：对于左对齐，右对齐和居中对齐，可以使用与网格系统使用相同视口宽度断点的响应类。
例子：Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
输出：
- 文本转换：我们可以使用文本大写类在组件中转换文本。
例子：Lowercased text.
Uppercased text.
Capitalized text.
输出：
- 字体粗细/斜体：我们可以更改文本的粗细/粗体或斜体。
例子：Font weight and italics
Bold text.
Normal weight text.
Light weight text.
Italic text.
输出：
- 文本对齐方式：对于左对齐，右对齐和居中对齐，可以使用与网格系统使用相同视口宽度断点的响应类。
- 浮点数和Clearfix实用程序：
我们可以使用.float-right类使元素向右浮动，或者类似于.float-left类将元素向左浮动。
例子：Float left Float right输出：
我们可以使用.clearfix类清除浮点数。- 响应式浮动广告：
我们可以根据屏幕宽度向左或向右浮动元素，使用响应浮动类( .float-*-left | right –其中*是sm(> = 576px)，md(> = 768px)，lg (> = 992px)或xl(> = 1200px))。这些不同类别(小，中，大，特大)的大小是固定的。例子：
Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
Float none输出：
- 响应式浮动广告：
- 位置：
有一些速记工具可用于快速配置元素的位置。一些快速定位类是“静态位置”，“相对位置”，“绝对位置”，“固定位置”和“固定位置”。例如，我们可以使用.fixed-top类使任何元素固定/停留在页面顶部。
类似地， .fixed-bottom类从边缘到边缘将元素定位在视口的底部。
Sticky-top会将元素从一个边缘到另一个边缘放置在视口的顶部，但是只有在您滚动经过该元素之后。 .sticky-top实用程序使用CSS的位置：sticky，并非所有浏览器都完全支持它。同样，粘性底部对底面也有相同作用。 - 浆纱：
Bootstrap 4使我们能够利用width和height实用程序轻松地将元素宽度或高度(相对于其父元素)制成。- 宽度：使用w- *类(.w-25，.w-50，.w-75，.w-100，.mw-100)设置元素的宽度。
例子：Width 25%Width 50%Width 75%Width 100%Max Width 100%输出：
- 高度：使用h- *类(.h-25，.h-50，.h-75，.h-100，.mh-100)设置元素的高度。
例子：Height 25%Height 50%Height 75%Height 100%Max Height 100%输出：
- 宽度：使用w- *类(.w-25，.w-50，.w-75，.w-100，.mw-100)设置元素的宽度。
- 间距：
Bootstrap 4具有广泛的响应边距和填充实用程序类。它们适用于所有断点(其中没有断点缩写)：xs(= 576px)，md(> = 768px)，lg(> = 992px)或xl(> = 1200px))：这些类的格式使用：{属性} {}双方- {}尺寸为XS(超小型)和{属性} {}双方-对SM，MD，LG和XL {}大小- {}断点。
财产是以下其中一项：
m –设置边距
p –设置填充
其中边是以下之一：t –设置页边空白或填充边空白
b –设置边距底边或填充边底
l –设置左边距或左边距
r –设置右边距或右边距
x –设置padding-left和padding-right或margin-left和margin-right
y –设置padding-top和padding-bottom或margin-top和margin-bottom
空白–在元素的所有4个面上设置边距或填充
其中大小是以下之一：0 –将边距或填充设置为0
1 –将空白或填充设置为.25rem(如果font-size为16px，则为4px)
2 –将边距或填充设置为.5rem(如果font-size为16px，则为8px)
3 –将边距或填充设置为1rem(如果font-size为16px，则为16px)
4 –将边距或填充设置为1.5rem(如果font-size为16px，则为24px)
5 –将边距或填充设置为3rem(如果font-size为16px，则为48px)
自动–将边距设置为自动
注意：边距也可以为负数，方法是在尺寸前面添加“ n”。n1 –将边距设置为-.25rem (如果font-size为16px，则为-4px)
n2 –将边距设置为-.5rem (如果font-size为16px，则为–8px)
n3 –将页边距设置为-1rem (如果font-size为16px，则为-16px)
n4 –将边距设置为-1.5rem (如果font-size为16px，则为-24px)
n5 –将边距设置为-3rem (如果font-size为16px，则为-48px)例子：
I only have a top padding (1.5rem = 24px)I have a padding on all sides (3rem = 48px)I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)输出：
有关间距的更多示例：
.m-# / m-*-# margin on all sides .mt-# / mt-*-# margin top .mb-# / mb-*-# margin bottom .ml-# / ml-*-# margin left .mr-# / mr-*-# margin right .mx-# / mx-*-# margin left and right .my-# / my-*-# margin top and bottom .p-# / p-*-# padding on all sides .pt-# / pt-*-# padding top .pb-# / pb-*-# padding bottom .pl-# / pl-*-# padding left .pr-# / pr-*-# padding right .py-# / py-*-# padding top and bottom .px-# / px-*-# .px-# / px-*-# 阴影：使用shadow-类向元素添加阴影。
例子：No shadowSmall shadowDefault shadowLarge shadow输出：
- 垂直对齐：
Bootstrap 4使用align-class更改元素的对齐方式(仅适用于inline，inline-block，inline-table和table单元元素)。我们可以根据需要从.align-baseline ， .align-top ， .align-middle ， .align-bottom ， .align-text-bottom和.align-text-top中选择。
例如：- 与内联元素垂直对齐：
baseline top middle bottom text-top text-bottom
输出：
- 与表格单元垂直对齐：
baseline top middle bottom text-top text-bottom 输出：
- 与内联元素垂直对齐：
- 嵌入：
Bootstrap 4使我们能够通过创建可在任何设备上缩放的固有比率，根据父级的宽度创建响应式视频或幻灯片嵌入。我们只需要将.embed-response-item添加到具有.embed-respond和我们选择的宽高比的父元素中的任何嵌入元素中即可。
例子：Create a responsive video and scale it nicely to the parent element.
Aspect ratio 1:1
Aspect ratio 4:3
Aspect ratio 16:9
Aspect ratio 21:9
输出：
在上面的代码中，将“ tgbNymZ7vqY”标签替换为所需的youtube视频或您选择的视频URL，以防您需要其他视频。 (或更改其他视频托管/共享网站的完整URL)
- 能见度：
我们可以使用可见性实用程序来控制元素的可见性，而无需修改显示。
只需使用.visible或.invisible类来控制元素的可见性。
例子：I am visibleI am invisible输出：
- 关闭图示：
我们可以使用.close类来设置关闭图标的样式。这通常用于消除警报和模态。注意：我们使用×符号来创建实际的图标(看起来更好的“ x”)。另请注意，默认情况下它会向右浮动：
例子：
(显示为空白/白色表示已关闭)输出：
- 屏幕阅读器：
我们可以使用screenreader实用程序(.sr-only )在除屏幕阅读器之外的所有设备上隐藏元素。
例子：Use the .sr-only class to hide an element on all devices, except screen readers:
I will be hidden on all screens except for screen readers.输出：
- 方块：
要将元素变成块元素，请添加.d-block类。我们可以使用任何d-*-block类来控制何时该元素应为特定屏幕宽度上的块元素。
例子：d-block d-sm-block d-md-block d-lg-block d-xl-block输出：
- 柔性：
Bootstrap 4通过全套响应式Flexbox实用程序帮助我们快速管理网格列，导航，组件等的布局，对齐和大小。对于更复杂的实现，可能需要自定义CSS。我们可以使用.flex- *类通过flexbox控制布局。- Flex行为：
我们可以应用显示实用程序来创建一个flexbox容器，并将直接子元素转换为flex项目。 Flex容器和项目可以通过其他flex属性进行进一步修改。例子：
I'm a flexbox container!I'm an inline flexbox container!输出：
方向：
我们可以使用direction实用程序在flex容器中设置flex项目的方向。在大多数情况下，您可以在此处省略水平类，因为浏览器默认为一行。但是，您可能会遇到需要显式设置此值的情况(例如响应式布局)。
使用.flex-row设置水平方向(浏览器默认设置)，或使用.flex-row-reverse从相反的一侧开始水平方向。
例子：Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3输出：
- 同样，我们可以使用.flex-column设置垂直方向，或使用.flex-column-reverse从相反的一侧开始垂直方向。
例子：Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3输出：
- 证明合法：
我们可以在flexbox容器上使用justify-content实用程序，以更改弹性项目在主轴上的对齐方式(要开始的x轴，如果flex-direction：列为y轴)。从开始(浏览器默认)，结束，居中，之间或周围进行选择。
例子：Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3Flex item 1Flex item 2Flex item 3输出：
命令：
我们还可以使用一些订购工具来更改特定弹性商品的视觉订购。我们仅提供用于使项目成为第一项或最后一项的选项，以及提供重置以使用DOM顺序的选项。当order取任何整数值(例如5)时，请为所需的任何其他值添加自定义CSS。
例子：Flex item 1Flex item 2Flex item 3输出：
- 展示：
最后，我们可以使用响应式显示实用程序类更改display属性的值。 Bootstrap 4特意仅支持显示所有可能值的一部分。可以根据需要组合类以实现各种效果。
因此，这些类使用以下格式命名：
.d- {value} for xs
.d- {breakpoint}-{value}用于sm，md，lg和xl。其中值是以下之一：
- 没有任何
- 排队
- 内联块
- 堵塞
- 桌子
- 表格单元
- 表行
- 柔性
- 内联柔性
例子：
d-inlined-inline输出：
d-block d-block输出：
另外，要隐藏元素，我们只需使用.d-none类或.d- {sm，md，lg，xl} -none类之一来响应任何屏幕变化。
同样，要仅在给定的屏幕尺寸间隔上显示元素，我们可以将一个.d-*-none类与.d-*-*类相结合，例如.d-none ， .d-md-block ， .d-xl-none将隐藏所有屏幕尺寸的元素(中型和大型设备除外)。
- Flex行为：