带有 Bootstrap Barrio 的 Drupal 8/9 中的 Bootstrap 4

我们将在 Drupal 8/9 中使用 Bootstrap 4 和 Bootstrap Barrio。 Drupal 8/9 的 Bootstrap Barrio 主题将 Bootstrap 4（或 Bootstrap 5，如果需要）与您的 Drupal 站点集成。

Bootstrap 是一个非常流行的网站构建框架。 它为设计人员和开发人员提供了一种通用语言进行交流，使开发过程变得更加容易。

创建 Barrio 的子主题是一个简单的过程。 本教程将探索主题的基本配置选项，这些选项通过完整的图形用户界面进行管理。

继续阅读以了解如何操作！

步骤 # 1.- 安装主题

在我们开始之前，请确保您的网站至少有一篇文章，以便您在更改主题设置后进行比较。 第二个区域侧边栏内也放置一个块（结构>块布局>放置块）。

• 打开操作系统的终端应用程序。
• 将光标放在 Drupal 安装的根目录中。
• 类型：作曲家需要 drupal/bootstrap_barrio

这会将主题的最新稳定版本下载到： /web/themes/contrib/bootstrap_barrio

步骤 # 2.- 创建子主题

• 将光标放在 bootstrap_barrio 主题目录上
• 类型：

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

这将使脚本文件夹中名为 create_subtheme 的脚本可执行，并且还将执行它。

该脚本将询问您的自定义子主题的机器名称和描述性名称。

输入最适合您的值。 请记住，机器名称必须是小写的，并且不能包含空格。

此步骤是可选的：

• 在代码编辑器中打开子主题的目录（/web/themes/custom/mytheme）
• 将“Bootstrap Barrio”的所有实例替换为“主题名称”
• 保存所有文件

在这里，我们只是更改描述性文本，因此如果您保持原样，则完全没有问题。

步骤#3.- Bootstrap Barrio 设置

• 单击Drupal 站点后端的外观
• 向下滚动到您的自定义主题
• 单击安装并设置为默认值

安装主题后，

• 点击主题设置链接

您将在屏幕左侧看到一组垂直选项卡，其中包含以下选项：

1. 布局（活动选项卡）
2. 组件
3. 词缀
4. 卷轴间谍
5. 字体和图标
6. 颜色

布局

默认情况下，“布局”选项卡处于活动状态。 第一个选项 `Container` 指定站点的元素是否具有固定宽度，或者相反将显示在整个屏幕大小上。 现在保持此选项不变。

在“区域”部分中，可以将自定义 CSS 类分配给站点的区域。

• 将您自己的自定义类添加到特定区域

• 关闭“区域”部分
• 打开“侧边栏位置”
• 将“侧边栏位置”的值更改为左
• 打开`Sidebar first layout` 和 `Sidebar first layout`
• 将值分别更改为 3 cols 和 2 cols

组件

• 单击“组件”垂直选项卡
• 将 Button 元素更改为大纲格式
• 选中将 img-fluid 样式应用于所有内容图像

这将使您通过内容编辑器的图像按钮插入的图像默认响应。 图像将按比例缩小以适合屏幕大小。

“导航栏结构”部分处理导航栏容器的大小。 您必须区分两个导航栏（导航栏顶部和导航栏）。 导航栏是您网站的主导航菜单。

• 将导航栏位置更改为固定底部，将导航栏链接颜色更改为深色
• 检查“导航栏行为”部分的滑动导航栏，以便在小屏幕上显示滑动主菜单

`Components` 配置选项的最后 3 部分指的是 Drupal 内部消息系统传递的消息的位置、本地任务的选项卡（如编辑内容选项卡）以及表单元素的外观。 保持这些选项不变。

词缀

使用 affix，可以固定元素，即将 CSS 位置属性的值设置为固定。

卷轴间谍

Scrollspy 用于自动更新导航菜单的链接，基于光标的位置，即如果您在网站上向上或向下滚动。 这个主题将在以后的教程中介绍。

字体和图标

您可以在此处为您的网站文本选择不同的 Google Fonts 字体组合。 此外，您可以在要在帖子上使用的预定义图标集之间进行选择。

• 选择您喜欢的字体组合和图标集

颜色

您可以在此处选择自定义 Drupal 内部消息的颜色。 有一些选项可以自定义站点的表格，例如，使用 Views 模块生成的表格。

如果您继续向下滚动，您会找到子主题的“配色方案”。 您可以自定义默认主题区域的文本和背景颜色。

您可以使用锁定图标根据自己的喜好自定义每个元素的颜色并阻止它。

页面元素显示、徽标图像和网站图标

这些是所有 Drupal 主题中的默认选项。

加载库

您可以在多个在线即用型 Bootswatch 库之间进行选择，只需单击一下即可增强主题的外观和感觉。 这些选项值得检查。

如果您想在本地或通过 CDN 加载 Bootstrap（Bootstrap CSS 和 JS），可以在这里选择。 此处不应更改此配置。 更改.info.yml文件中的代码会更好。

• 点击保存配置

看看你的网站。 本教程不打算教你 UI 设计，而是解释 Barrio 主题可用的可能性。

但是，您现在可以从设计开始并尝试使主题适应它。

我希望你喜欢这个教程。 谢谢阅读！