Coursera 笔记

Module 02 · Intermediate BootstrapBootstrap 进阶

[OPTIONAL] Reading: React Integration with Bootstrap可选阅读：React 与 Bootstrap 集成

Coursera ↗

预计所需时间： 5 分钟

介绍

React 是一个用于构建动态用户界面的 JavaScript 库。Bootstrap 是一个广泛使用的前端框架，提供现成的 CSS 样式和组件。将 React 与 Bootstrap 集成将使您能够利用这两种技术的优势，创建高度响应和视觉吸引力强的 web 应用程序。

目标

完成此实验后，您将能够：

  • 探索如何将 React 与 Bootstrap 集成
  • 讨论一起使用 React 和 Bootstrap 的好处

设置 React 和 Bootstrap

要开始将 React 与 Bootstrap 集成：

  1. 您必须对这两种技术有基本的了解。如果您在考虑从哪里开始，使用 Create React App 或您喜欢的设置创建一个新的 React 项目是合乎逻辑的第一步。
    注意： 有多种方法可以设置新的 React 项目。您可以使用 create-react-app，它仍在使用中，但不久将被弃用。因此，建议您使用 Vite 等工具进行未来的开发。
  2. 设置您的项目。
  3. 将 Bootstrap 添加到 React 项目中。您可以通过以下任一方法实现：
  • 方法 1： 在您的 React 应用程序的 <head> 部分复制并粘贴 Bootstrap 链接。
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  • 方法 2： 使用 npm 将 Bootstrap 添加到您的 React 应用程序
    1. 运行 npm install bootstrap
    2. 然后，在 index.js 文件或您的 React 应用程序的入口 JavaScript 文件中，导入 bootstrap.min.css。以下是示例代码。
      import 'bootstrap/dist/css/bootstrap.min.css';
  1. 设置项目后，您可以通过将其 CSS 和 JavaScript 文件包含在相关项目文件夹中，继续为项目设置 Bootstrap。

同时使用 React 和 Bootstrap 的好处

轻松实现一致的响应式用户界面

Bootstrap 提供了多种预构建组件，如导航栏、按钮、表单和模态框。您可以轻松地将任何预构建组件导入到 React 应用程序中，并像使用其他 React 组件一样使用它们。这使您能够快速创建响应式和一致的用户界面。

无缝融合组件

在 React 项目中使用 Bootstrap 组件时，您可能希望根据项目需求修改一个或多个组件的外观或行为。Bootstrap 允许您通过利用 CSS 类或自定义 Sass 变量来覆盖其默认样式。通过覆盖样式，您可以确保 Bootstrap 组件与您应用程序的其余设计无缝融合。

灵活和响应式设计

Bootstrap 提供了强大的网格系统。网格系统允许您通过将页面划分为行和列来创建响应式布局。使用 React 的组件化方法和 Bootstrap 的网格系统，您可以轻松创建适应不同屏幕尺寸的灵活和响应式设计。

增强组件功能

除了 CSS 样式，Bootstrap 还提供 JavaScript 插件来增强其组件的功能。

注意： 在将 React 与 Bootstrap 集成时，您可能需要以不同的方式处理 JavaScript 组件，因为它们依赖于 jQuery 或其他非 React 库。为了解决这个问题，您可以使用第三方包装器来封装原始的 Bootstrap JavaScript 插件，或找到替代的专门针对 React 的库。

结论

React-Bootstrap 集成为网页开发者提供了多个好处。为项目设置 Bootstrap 是集成过程中的第一步。然后，您可以利用 Bootstrap 组件和插件来创建灵活、响应式和视觉吸引人的前端。