Bootstrap 5 Alpha 2の注目しておきたい新機能、ダークテーマのコンポーネント・新しいユーティリティclassなど

Post on:2020年10月14日

Bootstrap 5 Alpha 2がリリース

9/29にBootstrap 5 Alpha 2がリリース（公式ブログ）され、ダークコンポーネント、ドキュメントナビゲーション、再設計されたクローズボタン、positionのユーティリティclass、およびスタイルに関するいくつかのマイナーアップデートが導入されました。

Bootstrap 5 alphaは2020年6月にリリースされ、依存関係としてのjQueryを削除、IE10とIE11のサポート終了、ユーティリティAPIの導入、JavaScriptとCSSとHTMLのマークアップに関する多くの変更など、大きな変更がおこなわれました。

この記事では、Bootstrap 5 Alpha 2のアップデートを解説します。

Bootstrap 5 Alpha 2で導入されたダークコンポーネント

これは驚くべきことではないでしょう。世界で最も人気が高いCSSフレームワークでついにダークコンポーネントが追加されたのは、歓迎すべきアップデートです。現時点で、ダークテーマで追加されたコンポーネントは、ダークカルーセルとダークドロップダウンの2つです。

ダークテーマのカルーセル

カルーセルコンポーネントのダークテーマへの切り替えは、.carousel-darkのclassを.carousel要素に追加するだけで簡単に実装できます。この値はSass変数を更新することで変更できます。

カルーセルコンポーネント

ダークテーマのカルーセルを実装するHTMLは、下記の通りです。

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#carouselExampleDark" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleDark" data-slide-to="1"></li>
    <li data-target="#carouselExampleDark" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
    </div>
    <div class="carousel-item" data-interval="2000">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
    </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleDark" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
    </a>
</div>

</ol>

<h5>First slide label</h5>

<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>

</div>

<h5>Second slide label</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<h5>Third slide label</h5>

<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

</div>

<span class="visually-hidden">Previous</span>

</a>

</a>

</div>

ダークテーマのドロップダウン

ドロップダウンコンポーネントのダークテーマへの切り替えは、.dropdown-menu-darkのclassを.dropdown-menu要素に追加するだけで簡単に実装できます。この値はSass変数を更新することで変更できます。

ドロップダウンのコンポーネント

ダークテーマのドロップダウンを実装するHTMLは、下記の通りです。

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
    </button>
    <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div>

Dropdown button

</button>

<li><a class="dropdown-item active" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

<li><a class="dropdown-item" href="#">Separated link</a></li>

</ul>

</div>

ドキュメントナビゲーションの再設計

Bootstrapの開発チームは、オンラインドキュメントのナビゲーションを再設計し、その外観をシンプルにしました。これは、より小さなデバイスで簡単に使用でき、概要が分かりやすくなっています。

ドキュメントナビゲーション

Bootstrap 5 Alpha 2で新しくなったクローズボタン

Bootstrap 5 Alpha 2では、クローズボタンが大きく変わりました。デザインは新しくなり、名前が変わり、新しいフォーカス状態が追加され、新しいカラーのオプションも追加されています。classは、.closeから.btn-closeに変更され、×メソッドではなく、CSSソリューションを介したSVGベースの背景画像を使用するようになりました。

クローズボタン

positionの新しいユーティリティclass

私はBootstrapのプロジェクトで新しいインスタンスを作成するたびに最初に行っていたのは、特定の要素を絶対配置するためにpositionのclassを作成することでした。しかし、Bootstrap 5 Alpha 2ではデフォルトの機能になり、デベロッパーの時間と労力を確実に節約できることは素晴らしいことです。

絶対配置のclassがデフォルトに

.top-*, .right-*, .bottom-*, .left-*の新しいclassは、要素を絶対配置にします。*には、0から100の数字が入ります。詳しくは、公式ドキュメントをご覧ください。

<div class="position-relative">
  <div class="position-absolute top-0 left-0"></div>
  <div class="position-absolute top-0 right-0"></div>
  <div class="position-absolute top-50 left-50"></div>
  <div class="position-absolute bottom-50 right-50"></div>
  <div class="position-absolute bottom-0 left-0"></div>
  <div class="position-absolute bottom-0 right-0"></div>
</div>