Bootstrap的CSS类积累学习

要看哪个的介绍，搜索关键词就行了。

001-container

这是Bootstrap中定义的一个CSS类，它用于创建一个具有固定宽度的容器。比如，container类将<div>元素包装成一个固定宽度的容器。详情见：https://blog.csdn.net/wenhao_ir/article/details/132481268

002-border

这是一个通用的CSS类，用于添加边框。边框可以有不同的样式、宽度和颜色，这通常通过CSS属性（例如border-style、border-width、border-color）来定义。

003- text-center

这是Bootstrap中的一个CSS类，它用于使元素内部的文本水平居中对齐。这是通过text-align属性实现的，将其设置为center来实现文本居中对齐。

004- align-middle

在Bootstrap中，通常使用align-items-center类来实现垂直居中。但是，align-middle不是Bootstrap中的一个标准类名，可能是你自定义的类名或来自其他CSS库的类名。通常，垂直居中可以使用Flex布局或其他技术来实现。

005-控制盒模型大小相关的类

005-1-与padding大小相关的类

005-1-01 py-5

这是Bootstrap中的一个类，用于添加垂直方向上的内边距（上下内边距）。py代表"padding-y"，后面的数字5表示内边距的大小。类似的还有px-5（水平方向内边距）和pt-5（顶部内边距）等类。

005-1-02 p-3

在Bootstrap中，类 p-3 是用于控制元素内边距（padding）的类。具体来说，p-3 这个类将会给元素添加较大的内边距，使元素的内容与边框之间有更多的空白间距。这个类的效果如下：

• p 表示 “padding”，用于控制内边距。
• -3 表示内边距的大小。数字越大，内边距越大。在这种情况下，-3 表示较大的内边距。

具体的内边距大小是根据Bootstrap的内置规则定义的，不同的数字对应不同的内边距大小。p-3通常用于为元素添加较大的内边距，以增加元素的填充空间，使其在视觉上更具吸引力或更易于阅读。

如果您想使用不同的内边距大小，可以使用类似 p-1、p-2、p-4 等类，以实现不同大小的内边距效果。

005-2-与margin大小相关的类

005-2-01 mb-3

在Bootstrap中，mb-3是一个类（class），用于添加垂直方向的外边距（margin-bottom）到一个元素上。具体效果取决于它被应用的元素和上下文。

mb-3是Bootstrap的间距类（Spacing Class）之一，用于控制元素之间的间距。这些类通常以"m"开头，后面跟着一个方向和一个数字，用来指定外边距的大小。在这种情况下，“mb"表示"margin-bottom”，数字3表示外边距的大小。数字越大，外边距越大。

例如，如果你将mb-3类应用于一个元素，它将在该元素的底部添加一个较大的外边距，从而在该元素和其下方的元素之间增加一些垂直间距。

示例：

<div class="mb-3">
  <!-- 这个元素底部会有一个较大的外边距 -->
</div>

006- bg-light

这是Bootstrap中的一个类，用于添加背景颜色。在这里，bg-light类会为元素添加浅色背景。Bootstrap提供了多个背景颜色类，例如bg-primary、bg-secondary等，可以轻松地更改元素的背景颜色。

007- row

• row 类用于创建网格系统的行（rows）。Bootstrap的网格系统是一种用于将页面内容划分为等宽或响应式列的布局工具。通过将元素包装在带有 row 类的 <div> 元素内，可以创建一个新的行，然后在该行内添加列（columns）来布局内容。
• row 类的主要作用是清除浮动（clearfix），确保列之间的正确对齐，并使其在不同屏幕尺寸下具有响应性。

示例代码：

<div class="row">
    <div class="col border py-3 bg-light">二分之一</div>
    <div class="col border py-3 bg-light">二分之一</div>
</div>

<div class="row">
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
    <div class="col border py-3 bg-light">三分之一</div>
</div>

008-01-类col、类col-7、类col-3

基础知识：Bootstrap的网格系统将屏幕宽度分为12列。

1. 类col：

   • 这是用于定义网格列的基本类。
   • 如果您只使用类col，它将默认为等宽的列，会自动均分可用的列宽，每列都会占用相同的空间。
   • 示例：<div class="col">...</div>

2. 类col-7：

   • 这是一个具有数字后缀的类，例如col-7，它用于定义一个具有指定宽度的网格列。
   • 数字后缀表示列应该占用的网格列数。在这种情况下，col-7表示该列应该占用网格系统中的7列，
   • 该类允许您创建不等宽的列，以根据设计需要分配不同的宽度。
   • 示例：<div class="col-7">...</div>

3. 类col-3：

   • 类col-3也是一个具有数字后缀的类，例如col-3，它用于定义一个具有不同宽度的网格列。
   • 数字后缀表示列应该占用的网格列数。在这种情况下，col-3表示该列应该占用网格系统中的3列。
   • 与col-7类似，col-3允许您创建不等宽的列，以满足设计需求。
   • 示例：<div class="col-3">...</div>
     详情见：https://blog.csdn.net/wenhao_ir/article/details/132667178

008-02-类col-lg-2

col-lg-2：

• col-lg-2类用于定义一个列元素的宽度在大型屏幕（lg屏幕尺寸，通常指的是大于等于1200像素的屏幕宽度）下应该占用的空间。
• 具体来说，col-lg-2表示这个列应该占据父容器的2/12（或者1/6）的宽度，因为Bootstrap的网格系统将屏幕宽度分为12列。
• 这意味着如果父容器是一个具有12列的row元素，那么这个列将占据其中的2列，占据了屏幕宽度的1/6。

008-03-类col-md-auto

col-md-auto：

• col-md-auto类用于定义一个列元素的宽度在中等屏幕（md屏幕尺寸，通常指的是大于等于768像素的屏幕宽度）下应该根据其内容自动调整。
• 当应用了col-md-auto类的列元素包含文本或其他内容时，该列将自动调整其宽度，以适应其内容的大小。
• 这个类通常用于创建响应式布局，使得在中等屏幕尺寸下，列的宽度可以根据内容的多少而自动调整，以确保内容不会溢出或显得过于拥挤。

009-类justify-content-md-center

类justify-content-md-center是Bootstrap框架中的一个类，用于实现在不同屏幕尺寸下水平居中对齐元素的布局效果。具体来说，这个类是用于调整Flex布局（弹性布局）中的水平对齐方式，特别是在中等屏幕尺寸（即md屏幕尺寸，通常指的是大于等于768像素的屏幕宽度）时进行居中对齐。

justify-content-md-center类被应用于一个<div>元素的class属性中，如下所示：

<div class="row justify-content-md-center">
    <!-- 内容 -->
</div>

这个<div>元素是一个Bootstrap的网格系统的一部分，row类表示一个行容器，而justify-content-md-center类被用于设置在中等屏幕尺寸下（md屏幕尺寸），该行内的列（col元素）在水平方向上居中对齐。

这意味着在大于等于768像素的屏幕宽度时，包含在这个行容器中的列元素会在水平方向上居中对齐，使得页面上的内容在这个屏幕尺寸下呈现为居中布局。

这个类是Bootstrap框架中用于响应式设计的一部分，它允许你根据不同的屏幕尺寸自动调整布局，以提供更好的用户体验。

010-类ml-auto、类mr-auto

详见博文 https://blog.csdn.net/wenhao_ir/article/details/132667178