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- py-5

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

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框架中用于响应式设计的一部分，它允许你根据不同的屏幕尺寸自动调整布局，以提供更好的用户体验。