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