Bootstrap (Barrio)

安裝 Bootstrap (Barrio)

site=drupal
cd /var/www/$site

composer require drupal/bootstrap_barrio:^4
# - Installing twbs/bootstrap (4.5.2): Loading from cache
# - Installing drupal/bootstrap_barrio (4.32.0): Loading from cache
chwww .

# 顯示目前安裝的版本
composer show | grep bootstrap_barrio

安裝後已有 Subtheme Bootstrap Barrio Subtheme 8.x-4.xx，css 及 js 是採用外部網站。可進入 <site>/admin/appearance 啟用它先測試，但別用來當做站台主題，應另外建立 Subtheme 。

建立 Subtheme

另外建立，可避免誤刪或者更新時被更改，步驟如下：

themes/contrib/bootstrap_barrio/subtheme 目錄複製至 themes/<自定主題名稱>
檔名及內容中的 bootstrap_barrio_subtheme 改為 <自定主題名稱>
修改主題名稱以便跟 Bootstrap Barrio Subtheme 有所區分。
調整下列內容
- themes/<自定主題名稱>/<自定主題名稱>.info.yml
- themes/<自定主題名稱>/<自定主題名稱>.libraries.yml

複製 Bootstrap 已建好的 bootstrap_barrio_subtheme 並調整

site=drupal

# 自定主題目錄及檔案名稱(Machine name)
CUSTOM_BARRIO=bootstrap_custom (1)

# 自定主題說明
CUSTOM_NAME='Bootstrap Custom'

cd /var/www/$site/themes

# 刪除自定主題目錄
rm $CUSTOM_BARRIO -r

# 將 themes/contrib/bootstrap_barrio/subtheme 複製至 themes/<自定主題名稱>
cp -r contrib/bootstrap_barrio/subtheme $CUSTOM_BARRIO
cd $CUSTOM_BARRIO

# 以下路徑應為 /var/www/$site/themes/$CUSTOM_BARRIO
# bootstrap_barrio_subtheme 改檔名為 <自定主題名稱>
for file in *bootstrap_barrio_subtheme.*;\
do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done

for file in config/*/*bootstrap_barrio_subtheme.*;\
do mv $file ${file//bootstrap_barrio_subtheme/$CUSTOM_BARRIO}; done

# 將 _bootstrap_custom.theme 改名為 bootstrap_custom.theme
mv {_,}$CUSTOM_BARRIO.theme

# 將檔案內容 bootstrap_barrio_subtheme 改名為 <自定主題名稱>
grep -rl bootstrap_barrio_subtheme | xargs sed -i "s/bootstrap_barrio_subtheme/$CUSTOM_BARRIO/"

# 將 name 改名，安裝 theme 後才能跟 Bootstrap Barrio Subtheme 區分。
# 先檢查一下原始設定
cat $CUSTOM_BARRIO.info.yml | grep 'name: '

# 以 sed 改設定值並檢查 (尚未存檔)
sed "s/name: .*/name: $CUSTOM_NAME/" \
$CUSTOM_BARRIO.info.yml | grep 'name: '

# 沒有問題則直接修改檔案
sed -i "s/name: .*/name: $CUSTOM_NAME/" $CUSTOM_BARRIO.info.yml

1	Block layout 跟主題有關，當主題變更後其設定必須重做。Drupal 是採用主題檔名作為 Machine name，如果檔名一樣則不必重新設定。

bootstrap_custom.info.yml

name: Bootstrap Custom (1)

libraries:
  - bootstrap_custom/bootstrap_cdn (2)
  - bootstrap_custom/global-styling

...
# version: '8.x-4.32' (3)

1	將 name 改名 (前面的步驟已經修改)，安裝 theme 後才能跟 `Bootstrap Barrio Subtheme` 區分。
2	bootstrap_custom/bootstrap_cdn 表示採用 libraries.yml 中的 bootstrap_cdn 的設定， bootstrap_custom/bootstrap 表示採用 libraries.yml 中的 bootstrap 的設定，會設定成下載 Bootstrap 發行版本的檔案。如果是採用 Bootstrap Library 擴充模組，該行需註消，前置 `#` 即可。
3	為什麼主要的主題更新後 Subtheme 的版本號碼不會改變？因為版本號碼是固定在 .info.yml 檔案中。

bootstrap_custom.libraries.yml

bootstrap:
  js:
    /libraries/popper.js/dist/umd/popper.min.js: {} (1)
    /libraries/bootstrap/dist/js/bootstrap.min.js: {}  (2) (4)
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}  (3) (4)
bootstrap_cdn: (5)
  js:
    //cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js: {}
    //stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js: {}
  css:
    component:
      //stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css: {}

1	一般情況可註消，前置 `#` 即可，該功能可參閱: Popovers · Bootstrap 。
2	為主要的 script 需修改成實際路徑。如 `/libraries/bootstrap-4.5.2-dist/js/bootstrap.min.js: {}`
3	為主要的 css 需修改成實際路徑。如 `/libraries/bootstrap-4.5.2-dist/css/bootstrap.min.css: {}`
4	如果是安裝 Bootstrap source 那麼將 `-` 改成 `/`，當重新下載新版的 Bootstrap，應配合實際安裝路徑。
5	bootstrap_cdn 的配置是讀取外部網站。

參考網站: Create a Bootstrap Barrio Sub-Theme

安裝 Bootstrap 發行版本

查看一下 Download · Bootstrap v4.5 的版本號碼，如 Bootstrap v4.5.2，只需要版本號碼 4.5.2。

下載 dist 版本

site=drupal
version=4.5.2
mkdir /var/www/$site/libraries
cd /var/www/$site/libraries
wget https://github.com/twbs/bootstrap/releases/download/v$version/bootstrap-$version-dist.zip
unzip bootstrap-$version-dist.zip
# <site>/libraries/bootstrap-4.5.2-dist

安裝 Bootstrap source

安裝編譯 Bootstrap source 的環境

sudo apt install ruby-full rubygems autogen autoconf libtool make -y

ruby --version
# ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]

# 安裝 ruby，安裝後則會有 gem。
gem env version
# 2.5.2.1

# 安裝 sass
sudo gem install sass
sass -v
# 3.7.4

# 安裝 npm
sudo apt install npm -y

# 取得新版 npm
sudo npm install -g n
sudo n latest
PATH="$PATH"
npm -v
# 6.14.5

# 安裝 nodejs
sudo apt install nodejs -y

node -v
# v14.3.0

下載 Bootstrap source

# 由於 github 包含 5.0 不採用 git 來安裝 (會裝 5.0)。
site=drupal
version=4.5.2

mkdir /var/www/$site/libraries
cd /var/www/$site/libraries
wget https://github.com/twbs/bootstrap/archive/v$version.zip
unzip v$version.zip
cd /var/www/$site/libraries/bootstrap-$version

# 安裝 Build tools
npm install

# 出現錯誤提示，按提示修正。
npm audit fix

# 執行編譯
cd /var/www/$site/libraries/bootstrap-$version
npm run dist

Bootstrap 佈局

修正 Bootstrap Barrio subtheme 不正確。

在修改之前確認 page.html.twig 是 subtheme 的 _page.html.twig

cd /var/www/$site
diff -u themes/bootstrap_custom/templates/page.html.twig \
themes/contrib/bootstrap_barrio/subtheme/templates/_page.html.twig

找出 page.html.twig 的 page.header_form

{% if page.header_form %}
	<div class="form-inline navbar-form float-right"> (1)
		{{ page.header_form }}
	</div>
{% endif %}

1	修改成 `<div class="form-inline navbar-form float-right ml-auto">`

參閱： form float-right in header-form region not set

Demonstrate block regions (Bootstrap Custom)

主題 Bootstrap settings (<site>/admin/appearance/settings/bootstrap_custom)

Layout
- CONTAINER
  - Fluid container
- REGION
  - TOP HEADER
    
    Clean wrapper for Top header region
    Classes for Top header region
    
    row

Components
- BUTTONS
- NAVBAR
  
  Navbar top position
  
  Normal
  
  在 Secondary menu 的下方。
  
  Fixed Top
  
  在 Secondary menu 的下方，Secondary men會蓋到 NAVBAR。
  
  Sticky top
  
  在 Secondary menu 的下方，有特效 Secondary menu 會比 NAVBAR 先顯示也最後才消失。
  
  Navbar link color
  
  不能用 Default 會看不到手機圖示，Light 實際上是黑色，Dark 實際上是白色。

Affix
- Affix navbar top
  
  Affix navbar top
- Affix navbar
  
  Affix navbar
Scroll down 時，NAVBAR 一直在最上方。

佈局模組

配置 Content type 的佈局應採用 Full content (<site>/admin/structure/types/manage/article/display/full) 不採用 Default。

Display Suite

Display Suite 可將內容 (Content) 輸出至網頁時，經由不同的 Layout 決定外觀及能顯示多少欄位。

<site>/admin/structure/types/manage/article/display
Manage display

Layout for article in default

Select a layout
[- None -]

Layout 可選取 Display Suite 或 Barrio，當 Layout 為 Display Suite 時會有 Custom classes 的選項，可設定 Class for layout、Class for Content。

Layout 選取 Barrio 2 Columns 3 and 9 示例

2 Columns 3 and 9
The default template can be found in themes/contrib/bootstrap_barrio/layouts/col2-3-9

Template suggestions:

col2-3-9—node.html.twig
col2-3-9—node-full.html.twig
col2-3-9—node-article.html.twig
col2-3-9—node-article-full.html.twig
col2-3-9—node--{id}.html.twig

檢看一下內容 col2-3-9.html.twig 其 class 是 col-sm-3、col-sm-9，配合 navbar-toggler 修改為 col-lg-3、col-lg-9，當然不是在原始的檔案修改，將 $site/themes/bootstrap_custom/templates/col2-3-9.html.twig 複製至 subtheme $site/themes/bootstrap_custom/templates/ 後再修改，並改檔名為 col2-3-9—node-article-full.html.twig 其目的為：內容類型為 article 顯示格式為 full 的情況下，才會採用該 twig。

HTML 檔案名稱建議

<!-- FILE NAME SUGGESTIONS:
   * col2-3-9--node--10158.html.twig
   x col2-3-9--node-article-full.html.twig
   * col2-3-9--node-article.html.twig
   * col2-3-9--node-full.html.twig
   * col2-3-9--node.html.twig
   * col2-3-9.html.twig
   * col2-3-9.html.twig
-->

意思是在輸出內容時，如果在 templates 目錄中有該檔案，那麼會採用該 twig 來輸出。按建議順序可發覺範圍由細至廣。在本例中前面的 x 表示以該 twig 輸出。

Layout Builder

Layout Builder (已內建) 可將內容 Content 欄位放置不同佈局，參閱 Introduction to Layout Builder | Drupal 9, Drupal 8 。

進入 Content types 選取頁面 Manage display

<site>/admin/structure/types/manage/article/display

Manage display

LAYOUT OPTIONS

Use Layout Builder
Allow each content item to have its layout customized.

Save

勾選 Use Layout Builder 按下 Save，則會出現 Manage layout。執行 Manage layout，開始配置佈局，在 Edit layout for <contant> content items 中按下 Add section 選取佈局樣式，但如果主題是 Bootstrap 則會出錯，必須加裝 Display Suite 。

加裝 Display Suite 後可發現組態不同，可決定使用 Layout Builder 或者是 Display Suite。

<site>/admin/structure/types/manage/article/display
Manage display

LAYOUT OPTIONS

Use Layout Builder

Layout for article in default

Select a layout
[- None -]

Field Group

Field Group 可增加群組 (區塊)，該群組可決定網頁的 Element、ID、CSS Classes … 建立好群組將多個欄位納入該群組。

安裝後會在 display 的頁面增加一個按鈕

<site>/admin/structure/types/manage/article/display

Manage display: +Add field group

Add field group

Add a new group *: HTML element
Label *: 輸入 Group 名稱

Save and continue

Bootstrap Classes 簡述 (建構中)

Layout

Bootstrap Layout 將畫面寬度分割成 12 個格，col-1 表示佔 1 格，col-12 全滿。

畫面寬度分割成 1 比 3，各佔 3格及 9格。

<div class="container"> (1)
  <div class="row"> (2)
    <div class="col-3">  </div>
    <div class="col-9">  </div>
  </div>
</div>

1	父代的 `container` 將容器置中，滿版寬則使用 `container-fluid`。
2	為了確保 col (欄位) 排序正確，需要用 `.row` 來包裹裡面的 `col` 類別。

依據寬度延伸出 col-sm-1，col-md-1，col-lg-1。寬度定義如：sm (≧576px)、md (≧768px)、lg (≧992px)，xl (≧1200px)，小於 576 則不需指定。

寬度小於 lg 則不分割。

<div class="row">
  <div class="col-lg-3">  </div>
  <div class="col-lg-9">  </div>
</div>

寬度在 md 時顯示 2 欄，在 lg 顯示 3 欄。

按 Bootstrap 說法： md 時佔 6 格 (12/6=2 欄)，在 lg 時佔 4 格 (12/4=3 欄)。

<div class="row">
  <div class="col-md-6 col-lg-4">  </div>
  <div class="col-md-6 col-lg-4">  </div>
</div>

上述的 md、lg 稱為 breakpoints (斷點)，col 語法為 col-{breakpoint}-{auto}，其中的 breakpoint 及 auto 可以空白。

平均分配兩個分割

<div class="row">
  <div class="col"> </div>
  <div class="col"> </div>
</div>

row 將內部元件包裹 (wrap) 在一起

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

col 會左右留白 15px。

.col ... {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

使用 Row columns 類別，可快速設置佈局的列數。語法為 row-cols-{breakpoint}-{number}，其中的 breakpoint 可以空白，而 number 顯示欄位數則為 1 至 6 欄。

寬度在 md 時顯示 2 欄，在 lg 顯示 3 欄

使用 Row columns 類別，直接指定欄位數量。

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
  <div class="col">Column</div>
  <div class="col">Column</div>
</div>

本節參閱: Grid system · Bootstrap v4.5

sticky-top (置頂)

sticky-top 跟 col 一樣是對齊功能，classes 不能放在同一個元素，在分割後才能置頂。

<div class="col-lg-3">
  <div class="sticky-top">
  </div>
</div>

sticky-top css

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020; (1)
}

1	`z-index` 數字為 1020，會覆蓋站台管理介面的彈出選單。

Spacing

設定間距類別的格式為 {property}{sides}-{size}。

property 可選如下

m - 設定邊界 (margin)
p - 設定留白 (padding)

sides 可選為

t：上， b：下， l：左， r：右， x：左右， y：上下， 空白：四邊。

size 可選為

0：0rem， 1：0.25rem， 2：0.5rem， 3：1rem， 4：1.5rem， 5：3rem， auto：置中。

或者格式為 {property}{sides}-{breakpoint}-{size} 其中的 breakpoint 的值為 sm、md、lg 或 xl。

m-4 外邊界，mt-4 上邊界，mb-4 下邊界，my-4 上下邊界，mx-4 左右邊界。

.m-4 {
  margin: 1.5rem!important
}

.mt-4,.my-4 {
  margin-top: 1.5rem!important
}

.mr-4,.mx-4 {
  margin-right: 1.5rem!important
}

.mb-4,.my-4 {
  margin-bottom: 1.5rem!important
}

.ml-4,.mx-4 {
  margin-left: 1.5rem!important
}

size 可為負數如 mt-n4，my-n4。

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

Spacing · Bootstrap v4.5

Card

Card 展示網頁： Album example · Bootstrap

<div class="row">
  <div class="col-md-4">
    <div class="card mb-4 shadow-sm h-100"> (1)
      <div class="card-body"> (2)
      <p class="card-text"> Text  </p>
      </div>
    </div>
  </div>
</div>

1	`card`：具有圓形邊框。`mb-4` 設定下方邊界，縮小寬度後顯示成一欄時，才不會疊在一起。`shadow-sm`：加入陰影。`h-100`：高度一致。
2	`card-body` 主要的功能是內部元素跟父代邊框留白。

Grid cards

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3"> (1)
  <div class="col mb-4">
    <div class="card">
    </div>
  </div>
</div>

1	使用 Row columns 類別

本節參閱: Cards · Bootstrap v4.5

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column; (1)
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125); (2)
  border-radius: .25rem; (2)
}

1	內部元素按垂直方向排列，參閱： flex-direction - CSS: Cascading Style Sheets \| MDN
2	card 具有圓形邊框

card 其他相關 css

.card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; (1)
  min-height: 1px;
  padding: 1.25rem;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

1	剩餘空間會被平分給內部元素。

h-100

.h-100 {
  height: 100% !important;
}

Media

Media 示例

  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="media">
          <img src="images/fa/windows.svg" alt="" style="width: 20px; filter: invert(58%) sepia(47%) saturate(4666%) hue-rotate(163deg) brightness(98%) contrast(101%);" />
          <div class="media-body"> (1)
            <p> Text </p>
          </div>
          <img class="align-self-center" src="images/fa/ubuntu.svg" alt="" style="width: 20px; filter: invert(39%) sepia(83%) saturate(4072%) hue-rotate(356deg) brightness(91%) contrast(90%);" />
        </div>
      </div>
    </div>
  </div>

1	`media-body` 改用 `card-body` 也可以，並不影響 `flex` 對齊的功能。

Text

Media Objects in Bootstrap with Examples - GeeksforGeeks

Borders

<div class="bd-example-border-utils">
  <span class="border"></span>
  <span class="border rounded"></span>
  <span class="border rounded shadow-sm"></span>
</div>

其他

在區塊中將超連結加入 stretched-link 則整個區塊都為該連結。

...
  <div class="col-12 mb-4">
    ...
    <a href="#" class="stretched-link">Continue reading</a> (1)

1	若沒有文字，則不會佔用任何空間。

Stretched link · Bootstrap

stretched-link

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

資源

12 Bootstrap Card Hover Effects (With Source Code!)
Material Design for Bootstrap 4 - the most popular & free UI KIT - Material Design for Bootstrap