阅读(2021) (0)

Bootstrap5 概览

2021-08-30 18:23:49 更新

了解如何使用Sass设置主题,自定义和扩展Bootstrap,一系列全局选项,扩展的色彩系统等等。

  • Sass  使用的源Sass文件来利用变量,映射,mixin和函数。
  • 控件   使用内置变量自定义Bootstrap,轻松切换全局CSS首选项。
  • 颜色   了解并自定义整个工具箱的颜色系统。
  • 组件   了解如何通过基类和修饰符类快速构建所有组件。
  • CSS    变量使用Bootstrap的CSS自定义属性进行快速和前沿性的设计和开发。
  • 优化   保持项目精简、快速响应和可维护性,时刻得到最好的体验。

概述

有多种方法可以自定义Bootstrap。 最佳方法取决于你的项目、构建工具的复杂性、所使用的Bootstrap版本、浏览器支持等等。

我们首选的两种方法是:

  1. 通过 软件包管理器 使用Bootstrap,以便你可以使用和扩展我们的源文件。
  2. 使用Bootstrap编译的分发文件或 jsDelivr,这样你就可以添加或覆盖Bootstrap的样式。

尽管我们无法在此处详细介绍如何使用每个软件包管理器,但是我们可以为在你自己的Sass编译器中 使用Bootstrap 提供一些指导。

对于那些想要使用分发文件的用户,请查看 入门页面,了解如何包含这些文件以及示例HTML页面。从那里,请查阅文档以了解您想要使用的布局、组件和操作。

在你熟悉Bootstrap时,请继续查阅本节,以获取有关如何利用全局选项,使用和更改颜色系统,如何构建组件,如何使用不断增长的CSS自定义属性列表以及如何使用它们的更多详细信息。在使用Bootstrap构建代码时优化代码。

CSPs和嵌入式svg

一些Bootstrap组件在我们的CSS中包含嵌入式SVG,以在浏览器和设备之间一致且轻松地对组件进行样式设置。对于具有更严格的CSP配置的组件,我们已记录了嵌入式SVG的所有实例(所有实例均通过 background-image 应用),如此你可以更清楚地查看你的选项。

社区中,在你自己的代码库中解决此问题的一些选项包括用本地托管的资产替换URL,删除图像和使用内联图像(并非在所有组件中都可用)以及修改CSP。 我们的建议是仔细检查你自己的安全策略,并在必要时决定最佳方案。