欢迎来到我的造型系列的第二部分，我将介绍一些流行的造型库/框架。在本博客中，我们将回顾 Bootstrap。 Bootstrap 是一个功能强大的开源前端框架，通过提供直观的网格系统、UI 组件和广泛的实用程序，使构建网站变得更快、更容易。

设置

当然，在介绍一些功能之前，我们必须先谈谈在项目中设置 Bootstrap。 在撰写本文时，Bootstrap 的当前版本是 5.3.3，这就是我将用于任何示例的版本。

通过 CDN 引导

Bootstrap 可以通过使用 CDN 或内容交付网络非常快速地设置。此方法不需要任何安装，只需将 Bootstrap 的 CSS 和 JavaScript 链接添加到您的 HTML 文件中，您就可以开始比赛了！
您将把以下 CSS 链接放入 HTML 的

之后，您将在结束

通过包管理器

如果您正在处理较大的项目，或使用现代前端工具，您可能需要通过项目管理器进行安装。对我们来说幸运的是，这也很简单！在您的终端中，如果使用 npm，只需编写 npm install bootstrap ，或者如果使用yarn，则编写yarn add bootstrap 。安装后，您需要将 bootstrap 的 CSS 和 JavaScript 导入到您的主 CSS 和 JS 文件中：

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

网格系统

Bootstrap 最强大的功能之一是它的网格系统。这允许您创建自动调整以适应不同屏幕尺寸的响应式布局。

结构

网格基于 12 列结构来组织内容。它的基本结构看起来像这样：

  

    
Column 1
    
Column 2
    
Column 3
  

• 容器：容器容纳列和行，同时对齐它们
• 行：行将列水平组合在一起
• Col：列是您的内容所在的位置，每行可以有 12

尺寸

列也可以有自己的大小！这可用于提供不同的布局。它们通过它们在行上占据的列数来表示。

  

    
100% Width
  
  

    
50% Width
    
50% Width
  
  

    
33.33% Width
    
33.33% Width
    
33.33% Width
  

断点

Bootstraps 网格是移动优先的，这意味着它是为移动设备构建的，然后再扩展到更大的设备。因此，Bootstrap 具有定义列如何在不同屏幕尺寸上运行的类。这些都是：

• xs：适用于小于 576px 的屏幕
• sm：适用于超过 576px 的屏幕
• md：适用于超过 768px 的屏幕
• lg：适用于超过 992px 的屏幕
• xl：适用于超过 1200px 的屏幕

例如：

  

    
Wide on medium and larger screens
    
Narrower on medium and larger screens
  

在此示例中，第一列在小屏幕上占据整个宽度，但在中型或更大屏幕上仅占据八个网格单元。第二个在小屏幕上将占据一半宽度，在中型或更大屏幕上仅占据四个单位。

通用组件

Bootstrap 为我们提供了各种预构建组件，帮助我们使用最少的自定义 CSS 创建有吸引力的、用户友好的网站。有很多组件，因此我将介绍一些您可能会使用的更常见的组件。

版式

我们将从讨论文本开始，因为您的用户需要阅读才能相信。版式类使定义一致的文本样式变得容易，从标题到正文，再到列表。例如，不同的标题由其显示类别表示：

Heading 1
Heading 2
Heading 3
This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
This is small text, which stands out from regular paragraph text.

您还可以使用实用程序类定义段落文本来修改正文文本，如上所示。

按钮

每个网站或应用程序都需要按钮！ Bootstrap 提供了多种开箱即用的按钮样式。他们的类定义如下：

Primary Button
Secondary Button
Danger Button


Large Button
Small Button


Success Outline
Warning Outline

导航栏

Bootstrap 的导航栏组件带有用于对齐、下拉菜单等的内置类！

在此示例中，导航栏将在较小的屏幕上折叠。

实用程序类

Bootstrap 还包括广泛的实用程序类，以帮助加快开发速度并减少对自定义 CSS 的需求。只需几个类名，您就可以调整间距、对齐方式、显示属性等等！

间距

间距在开发中对于用户可读性极其重要。值得庆幸的是，Bootstrap 为我们提供了调整元素边距和填充的类。它们都遵循类似的格式：{property}{sides}-{size}.

• 属性：m为margin，p为padding
• 边：t 上、b 下、l 左、r 右、x 左和右、y 上和下，或所有边为空白
• 大小：0、1、2、...或自动

例如：

Margin Top of 3
Padding of 5
Horizontally Centered with Auto Margin

展示

显示实用程序有助于控制元素的可见性和布局。它们可用于显示、隐藏或更改元素的行为方式。显示类包括：

• d-block：显示为块元素
• d-inline：显示为内联元素
• d-none：隐藏元素
• d-flex：启用 Flexbox
• d-inline-block: 显示为内联块

Bootstrap 还提供了这些类的响应式版本，适用于断点，例如 d-none d-md-block，这会在小屏幕上隐藏元素。

Visible on medium and larger screens
Centered with Flexbox

文本实用程序

Bootstrap 提供了大量的文本自定义，例如：

文本对齐

• text-start：将文本左对齐
• text-end：文本右对齐
• text-center：将文本居中对齐

文字环绕

• text-nowrap：防止文本换行到下一行
• text-truncate：如果文本太长，则用省略号截断文本

文字颜色

• text-primary：具有原色的文本（默认：蓝色）
• text-success：带有成功颜色的文本（默认：绿色）
• text-danger：带有危险颜色的文本（默认：红色）

This text is centered and green
This text is right-aligned and blue

结论

Bootstrap 是一个强大而灵活的框架，允许开发人员高效地构建响应式网站。通过掌握这些基本概念，您将能够简化工作流程并更多地关注网站的设计和功能，而不是自定义 CSS 和布局管理。所以潜入吧！尝试一些示例并构建一个令人惊叹的应用程序！

来源

引导程序