Bootstrap 5の作業環境の構築方法、jQueryを使用しないJavaScriptでの実装方法を解説

Post on:2020年8月6日

はじめに

1ヵ月ほど前に、Bootstrap 5 alphaがついにリリースされました。
最も重要な変更点は、依存関係としてのjQueryが削除され、IE10とIE11のサポートが終了、HTMLとCSSの改善です。

変更点の詳細は、以前の記事をご覧ください。
参考: Bootstrap 5 alphaがついにリリース！注目すべき新機能

Bootstrap 5はまだalpha版で、本番環境で使用することはリスクを伴う可能性がありますが、フレームワークの新しいバージョンで作業を始めることは良いアイデアです。最も重要なことは、jQueryに慣れている場合、この変更によりデフォルトでバニラJavaScriptの使用を検討しなければならないことです。

このチュートリアルでは、Bootstrap 5のSassとGulpを使用した作業環境の設定方法、簡単なブログページの作成方法、バニラJavaScriptを使用したフレームワークの使用方法を解説したいと思います。

構築ツール: Sass、Gulp 4、BrowserSyncを使用してBootstrap 5の作業環境を用意する。
新しいマークアップで簡単なブログページを作成する。
新しいSass変数ファイルので、カラー、サイズ、フォントを変更する。
jQueryの代わりにバニラJavaScriptを使用する。
新しいユーティリティ API の説明。

Bootstrap 5の作業環境を用意する方法

CDN経由でスタイルシートとスクリプトを外部ファイルとして利用することで、Bootstrap 5をすぐに使用できますが、Bootstrap 5のすべての機能を利用するにはSassを使用することをお勧めします。

Bootstrap、Sass、Gulp、BrowerSyncをどのようにセットアップするかのチュートリアルを書いたので、より詳細なプロセスのウォークスルーが必要な場合は、下記のガイドをご覧ください。
参考: How to set up Gulp 4, Bootstrap, Sass and BrowserSync for a simple workflow

前提条件

Node

Node.jsがインストールされており、ターミナルからアクセスできることを確認してください。
Gulp

Nodeを正常にインストールした後、GulpのCLIもインストールしてください。

Nodeをインストールしたら、ターミナルで次のコマンドを実行して、Gulp CLIをグローバルにインストールします。

npm install --global gulp-cli

1	npm install --global gulp-cli

この記事のフォルダ構造は下記の通りです。
※themesbergは自由に名前を変更できます。

.
├── app
│   ├── css
│   │   └── themesberg.css
│   ├── index.html
│   ├── js
│   │   └── themesberg.js
│   └── scss
│       ├── _utilities.scss
│       ├── _variables.scss
│       └── themesberg.scss
├── gulpfile.js
├── package-lock.json
└── package.json

├── app

│ ├── css

│ │ └── themesberg.css

│ ├── index.html

│ ├── js

│ │ └── themesberg.js

│ └── scss

│ ├── _utilities.scss

│ ├── _variables.scss

│ └── themesberg.scss

├── gulpfile.js

├── package-lock.json

└── package.json

Githubからこれらのファイルを取得することもできます。

npm依存関係のインストール

npm経由で、Gulp、BrowserSync、Gulp Sass、Bootstrap 5 alphaを依存関係としてインストールします。
下記のコマンドを実行して、ローカルのpackage.jsonファイルを作成します。

npm init

npm init

プロジェクトに名前や説明をつけるように求められます。詳細のほとんどはオプションで、後で入力することもできます。
プロセスが終了すると、新しいpackage.jsonファイルが作成されます。

その後、以下のコマンドを実行して、依存関係をインストールします。

npm install browser-sync gulp gulp-sass --save-dev

1	npm install browser-sync gulp gulp-sass --save-dev

最後に、以下のコマンドを実行して最新版のBootstrap 5をインストールします。

npm install bootstrap@next --save

1	npm install bootstrap@next --save

注意: このコマンドでBootstrap 5がインストールされなかった場合（安定したデフォルトバージョンになった場合に起こります）、公式のnpmバージョンの管理ページにアクセスし、パッケージマネージャーからインストールしてください。

Sassファイルをコンパイルするためのgulpfileを作成し、BrowserSync経由でローカルサーバーを作成

まず、package.jsonが配置されているプロジェクトのルートフォルダにローカルのgulpfile.jsを作成する必要があります。次に下記のコードをファイルに追加します。

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {

    browserSync.init({
        server: "./app/"
    });

    gulp.watch("app/scss/*.scss", gulp.series('sass'));
    gulp.watch("app/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.series('serve'));

var gulp = require('gulp');

var browserSync = require('browser-sync').create();

var sass = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers

gulp.task('sass', function() {

return gulp.src("app/scss/*.scss")

.pipe(sass())

.pipe(gulp.dest("app/css"))

.pipe(browserSync.stream());

});

// Static Server + watching scss/html files

gulp.task('serve', gulp.series('sass', function() {

browserSync.init({

server: "./app/"

});

gulp.watch("app/scss/*.scss", gulp.series('sass'));

gulp.watch("app/*.html").on('change', browserSync.reload);

}));

gulp.task('default', gulp.series('serve'));

ファイルの最初の部分は、前のステップでnpm経由でインストールした依存関係を含めるものです。次はserveと呼ばれる最初のGulpコマンドです。これは基本的にはapp/フォルダ内のファイルに基づいて新しいローカルサーバーを起動し、*.scssと*.htmlファイルのappフォルダ内の変更(コードを書くときに行うファイル保存)を監視します。

2つ目のコマンドはsassと呼ばれるもので、app/scss/フォルダ内のすべての*.scssファイル（Sassファイル）を取得し、それらをthemesberg.cssと呼ばれる単一のCSSファイルにコンパイルします。これをHTMLテンプレートに含めることになります。

最後に、gulp.task('default', gulp.series('serve'));でローカルサーバーを起動し、Sassファイルの変更を監視し、コマンドラインでgulpを記述するだけでコンパイルできるようにします。これがdefaultの意味です。

BootstrapのSassファイルをワークフローに含める

次に、メインのapp/フォルダ内にscss/フォルダを作成し、themesberg.scssという新しいファイルを作成します。作成したら、以下のコードを記述します。

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

1	@import '../../node_modules/bootstrap/scss/bootstrap.scss';

これが何をするかというと、node_modules/フォルダにあるBootstrapのSassファイルをインクルードします。これにより、カラー、サイズ、スペースなどのデフォルトの変数値を上書きできるようになります。

app/フォルダ内にindex.htmlファイルを新規作成し、下記のHTMLをコピペしてみてください。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 tutorial by Themesberg</title>
        <link rel="stylesheet" href="css/themesberg.css">
    </head>
    <body>
        <button class="btn btn-primary">Primary</button>
        <button class="btn btn-secondary">Secondary</button>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 5 tutorial by Themesberg</title>

</head>

<body>

<button class="btn btn-primary">Primary</button>

<button class="btn btn-secondary">Secondary</button>

</body>

</html>

全体をテストするには、gulpfile.jsがあるフォルダ（つまりルートフォルダ）にあるターミナルでgulpを実行します。新規タブがブラウザにポップアップされ、http://localhost:3000/というURLで2つのボタンが表示されます。

期待通りに表示されなかった場合は、npm経由ですべての依存関係をダウンロードしなおし、フォルダとファイルの構造が同じであることを確認してください。

ボタンのテキストをThemesbergに変更してみてください。ファイルを保存してブラウザに戻ると、ブラウザをリロードしなくても変更されたことが分かります。
すごいですね！時間の節約になります。
これからは手動でリロードする手間が省けます🥳

新しいマークアップで簡単なブログページを作成する

ここまでは大丈夫ですか？ Bootstrap 5からSassファイルをコンパイルし、コードを記述するとすぐに変更が反映されるローカルサーバーを作成するための作業環境を構築することに成功しました。

今までの作業は2つボタンを表示するためだけのものではありません。この作業環境で、Bootstrap 5のコンポーネントを使用して、ナビゲーションバー、カードのリスト、ページネーション、フッタを備えたページを作成します。

ナビゲーションバーの実装

Bootstrap 5にはすべてのコンポーネントに実装方法を解説したドキュメントが用意されています。ナビゲーションバーのドキュメントに掲載されているコードを利用して実装してみましょう。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Bootstrap 5 tutorial</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
            <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Blog</a>
            </li>
        </ul>
        <form class="d-flex">
            <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
        </div>
    </div>
</nav>

<a class="navbar-brand" href="#">Bootstrap 5 tutorial</a>

</button>

</li>

</li>

</ul>

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

メインのコンテンツ、カードとサイドバー

メインのコンテンツ部分を実装します。最初の要素はコンテナで、2つの子要素（カードセクションとサイドバー）を作ります。<nav>要素の直後に下記のHTMLを記述します。

<div class="container my-5">
    <div class="row d-flex justify-content-center">
        <!-- Main row for blog posts -->
        <div class="col-12 col-lg-6">
        <div class="card">
            <img src="https://themesberg.s3.us-east-2.amazonaws.com/public/posts/bootstrap-version-5-alpha-launched.jpg" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Bootstrap 5 no longer requires jQuery and also drops support for IE 10 and 11</h5>
                <p class="card-text">The first alpha version of Bootstrap 5 has finally arrived with many exciting changes and updates including dropping jQuery as a dependency and support for IE 10 and 11. Read more about the changes in this article.</p>
                <a href="#" class="btn btn-primary">Read more</a>
            </div>
            </div>
        </div>
        <!-- Sidebar (related articles, newsletter signup etc) -->
        <div class="col-12 col-lg-4">
	  <!-- Sidebar content goes here -->
        </div>
    </div>
</div>

<h5 class="card-title">Bootstrap 5 no longer requires jQuery and also drops support for IE 10 and 11</h5>

<p class="card-text">The first alpha version of Bootstrap 5 has finally arrived with many exciting changes and updates including dropping jQuery as a dependency and support for IE 10 and 11. Read more about the changes in this article.</p>

</div>

</div>

簡単でしょ？でもこれだけだと寂しいので、最初のカードに.mb-4のユーティリティclassを追加して、カード間に適切なスペースを与えてみてください。

たくさんのカードが必要な場合はどうなるでしょうか？
あまりにも多くのカードを表示するとページのロード時間が長くなってしまいます。ページに表示するカードの数を制限し、ページネーションを実装してみましょう。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

</ul>

</nav>

メインのコンテンツばかりを実装したので、サイドバーはスカスカです。サイドバーに、ニュースレーターにサインアップするためのセクションを実装してみます。
サイドバー内に下記のコードを加えます。

<div class="card" >
    <div class="card-body">
        <h5>Subscribe to our weekly newsletter</h5>
        <form action="#">
            <div class="input-group my-3">
                <span class="input-group-text" id="email-at">@</span>
                <input type="email" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="email-at" required>
            </div>
            <button type="submit" class="btn btn-block btn-primary">Subscribe</button>
        </form>
    </div>
</div>

<h5>Subscribe to our weekly newsletter</h5>

</div>

<button type="submit" class="btn btn-block btn-primary">Subscribe</button>

</form>

</div>

もちろん、このセクションはサイドバーの1つのアイテムに過ぎません。関連記事やソーシャルメディアや注目記事などのセクションを追加することもできます。

Bootstrap 5のSass変数を使用してプロジェクトをカスタマイズする

見た目は良いですが、これはBootstrapのデフォルトのスタイルとカラーです。少し個性的にしてみましょう。Bootstrap 5の変数を使用すると簡単にカスタマイズができます、Sassの真の力が発揮されるところです。プライマリーカラーをお気に入りのカラーに変更してみます。

まずは、scss/フォルダ内に_variables.scssファイルを新規作成し、このファイルにthemesberg.scssファイルをインポートします。

@import 'variables';

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

@import 'variables';

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

あとは、_variables.scssに変数を追加するだけです。デフォルトではブルーの$primary変数のカラーを上書きします。

$primary: #e06b54;

1	$primary: #e06b54;

これはたった1つの変数にすぎません。他の変数をどのように見つければよいと思いますか？その答えは簡単です。node_modules/フォルダからbootstrapフォルダ内の_variables.scssファイルを探すだけです。

ファイルのフルパスは、node_modules/bootstrap/scss/_variables.scssです。基本的には、このファイルから任意の変数を取得し、それをローカルの_variables.scssファイルに上書きすることで、プロジェクトのスタイルを簡単に変更できます。
便利ですね！

jQueryの代わりにバニラJavaScriptを使用する

公式のドキュメントによると、Bootstrap 5でjQueryを引き続き使用できますが、バニラJavaScriptを使用することが推奨されています。依存関係を含まないことでロード時間を節約し、プロジェクトをより高速で無駄のないものにすることができます。document.querySelectorは、$セレクタの代わりとして問題なく動作します。

今までjQueryを使用していたツールチップやモーダルをどのようにバニラJavaScriptで実装するか、Bootstrap 5での実装方法を見てみましょう。

バニラJavaScriptによるBootstrap 5のツールチップの実装

記事を読んだ後に、コミュニティに参加したい人のために、ソーシャルメディアへのリンクをサイドバーに追加してみます。下記のHTMLで、ボタンにカーソルを合わせるとツールチップが表示されるようにします。

<div class="card mb-4">
    <div class="card-body">
        <h5>Follow us on social media</h5>
        <a href="https://www.facebook.com/themesberg/" class="btn btn-secondary mr-2" data-toggle="tooltip" data-placement="top" title="Like us on Facebook">
            Facebook
        </a>
        <a href="https://twitter.com/themesberg" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Follow us on Twitter">
            Twitter
        </a>
    </div>
</div>

<h5>Follow us on social media</h5>

Facebook

</a>

Twitter

</a>

</div>

しかし、これだけではツールチップは機能しません。JavaScriptを少しだけ記述して、ツールチップを機能させましょう。

jsフォルダ内にthemesberg.jsファイルを作成し、下記のコードを記述しました。このファイルも必ずindex.htmlに外部ファイルとして含めてください。

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

return new bootstrap.Tooltip(tooltipTriggerEl)

})

このJavaScriptは、data-toggle="tooltip"属性を持つページ上のすべての要素を取得し、それらのすべてを初期化します。また、tooltipList変数に利用可能な要素の完全なリストも表示されます。

バニラJavaScriptによるBootstrap 5のモーダルの実装

Bootstrap 5でモーダルの使用法を紹介するために、モーダル・トグルによるアカウント登録機能を実装します。最初は、ナビゲーションバーの検索要素の後にボタンを追加します。

<button class="btn btn-primary" id="registerAccountButton">Register account</button>

1	<button class="btn btn-primary" id="registerAccountButton">Register account</button>

次に、bodyタグ内の最後に、下記のモーダルを記述します。

<div class="modal" tabindex="-1" id="registerAccountModal">
    <div class="modal-dialog">
    <form action="#" class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title">Register account</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
        <div class="mb-3">
            <label for="email" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com" required>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" required>
        </div>
        <div class="mb-3">
            <label for="confirmPassword" class="form-label">Confirm password</label>
            <input type="password" class="form-control" id="confirmPassword" required>
        </div>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
    </form>
    </div>
</div>

<h5 class="modal-title">Register account</h5>

</button>

</div>

<label for="email" class="form-label">Email address</label>

</div>

<label for="password" class="form-label">Password</label>

</div>

<label for="confirmPassword" class="form-label">Confirm password</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="submit" class="btn btn-primary">Save changes</button>

</div>

</form>

</div>

これでHTMLは完了したので、ボタンがクリックされた時にモーダルが表示されるように、themesberg.jsファイルに下記のコードを追加します。

var registerAccountButton = document.getElementById('registerAccountButton');
var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {
    keyboard: false
})
registerAccountButton.addEventListener('click', function () {
    registerAccountModal.toggle();
})

var registerAccountButton = document.getElementById('registerAccountButton');

var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {

keyboard: false

})

registerAccountButton.addEventListener('click', function () {

registerAccountModal.toggle();

})

Bootstrap 5のモーダルオブジェクトを作成し、ボタンがクリックされるとモーダルに切り替わります。

もちろん、これらはデータ属性を使用して実装することもできますが、この方法ではJavaScriptのコードの中でモーダルをオブジェクトとして使用することができ、プログラムでの操作が非常に簡単になります。
参考: <dialog>要素で、ダイアログボックスを実装する方法と注意点

Bootstrap 5の新しいユーティリティAPI

Bootstrap 5の新しいユーティリティAPIは、ユーティリティファーストのフロントエンド開発、特にTailwind CSSの採用が拡大していることに対応するものです。
参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる

新しいユーティリティAPIはカスタムユーティリティクラスを簡単に作成して、不透明度、幅、カラー、サイズ、スペースなどのプロパティを簡単に変更して利用できます。さらに素晴らしいのは、いくつかのパラメーターを受け取ると、自動的にCSSのクラスを生成することです。scssフォルダ内に_utilities.scssというファイルを作成し、themesberg.scssファイルにインポートして、次のコードを追加するだけです。

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

$utilities: (

"opacity": (

property: opacity,

values: (

0: 0,

25: .25,

50: .5,

100: 1,

)

);

これにより、下記のCSSが生成されます。

.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: .25;
}
.opacity-75 {
    opacity: .75;
}
.opacity-100 {
    opacity: 1;
}

.opacity-0 {

opacity: 0;

}

.opacity-25 {

opacity: .25;

}

.opacity-75 {

opacity: .75;

}

.opacity-100 {

opacity: 1;

}

何が起こったのかを見てみましょう。
まず最初に、コードのopacityの部分は、クラスの最初の部分が持つ名前を設定します（すなわち、.name-value）。次に、クラスの実際のプロパティ（この場合はopacityですが、box-shadowやwidthやheightなども）を定義してから、実際の値を定義します。

この場合では、opacityの値として0-100の範囲の4つの値を追加しました。1つ目の値はクラス名で使われるもので、2つ目の値はopacityプロパティに使われる実際の値になることに注意してください。

もう1つ別の例を見てましょう。
responsive: trueフラグを加えると、すべてのユーティリティクラスのレスポンシブクラス (sm, md, lg) を生成します。

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

$utilities: (

"opacity": (

property: opacity,

responsive: true,

values: (

0: 0,

25: .25,

50: .5,

100: 1,

)

);

これにより、下記のCSSが生成されます。

.opacity-0 {
    opacity: 0;
}
.opacity-25 {
    opacity: .25;
}
.opacity-75 {
    opacity: .75;
}
.opacity-100 {
    opacity: 1;
}
@media (min-width: 576px) {
    .opacity-sm-0 {
        opacity: 0;
    }
    .opacity-sm-25 {
        opacity: .25;
    }
    .opacity-sm-75 {
        opacity: .75;
    }
    .opacity-sm-100 {
        opacity: 1;
    }
}
@media (min-width: 768px) {
    .opacity-md-0 {
        opacity: 0;
    }
    .opacity-md-25 {
        opacity: .25;
    }
    .opacity-md-75 {
        opacity: .75;
    }
    .opacity-md-100 {
        opacity: 1;
    }
}
@media (min-width: 992px) {
    .opacity-lg-0 {
        opacity: 0;
    }
    .opacity-lg-25 {
        opacity: .25;
    }
    .opacity-lg-75 {
        opacity: .75;
    }
    .opacity-lg-100 {
        opacity: 1;
    }
}
@media (min-width: 1200px) {
    .opacity-xl-0 {
        opacity: 0;
    }
    .opacity-xl-25 {
        opacity: .25;
    }
    .opacity-xl-75 {
        opacity: .75;
    }
    .opacity-xl-100 {
        opacity: 1;
    }
}

.opacity-0 {

opacity: 0;

}

.opacity-25 {

opacity: .25;

}

.opacity-75 {

opacity: .75;

}

.opacity-100 {

opacity: 1;

}

@media (min-width: 576px) {

.opacity-sm-0 {

opacity: 0;

}

.opacity-sm-25 {

opacity: .25;

}

.opacity-sm-75 {

opacity: .75;

}

.opacity-sm-100 {

opacity: 1;

}

@media (min-width: 768px) {

.opacity-md-0 {

opacity: 0;

}

.opacity-md-25 {

opacity: .25;

}

.opacity-md-75 {

opacity: .75;

}

.opacity-md-100 {

opacity: 1;

}

@media (min-width: 992px) {

.opacity-lg-0 {

opacity: 0;

}

.opacity-lg-25 {

opacity: .25;

}

.opacity-lg-75 {

opacity: .75;

}

.opacity-lg-100 {

opacity: 1;

}

@media (min-width: 1200px) {

.opacity-xl-0 {

opacity: 0;

}

.opacity-xl-25 {

opacity: .25;

}

.opacity-xl-75 {

opacity: .75;

}

.opacity-xl-100 {

opacity: 1;

}

かなり便利ですよね！
これらは実装する際に作業を容易するために使用できるユーティリティAPIの機能の一部です。さらに詳しい情報は、公式のドキュメントをご覧ください。

これにてチュートリアルは、終了です。
Gulp 4、Sass、BroeserSyncを使用して作業用の開発環境を構築する方法を学び、ブログページを作成し、Bootstrap 5でバニラJavaScriptの使用例を学び、新しいユーティリティAPIの機能を学びました。
ここで紹介したファイルは、Bootstrap 5 tutorial -GitHubにリポジトリを作成しました。気に入ってくれた人は、スターをお願いします⭐️