帶有 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 主題可用的可能性。

但是，您現在可以從設計開始並嘗試使主題適應它。

我希望你喜歡這個教程。 謝謝閱讀！