Bootstrap5 alpha1 vs beta1

はじめに

みなさん、こんにちは。
UIT室DEV8チームで、フロントエンド開発を担当しているイジュヨンと申します。

2020年6月17日 Bootstrap5 alpha1 版が公開されてからついに、2020年12月7日、Bootstrap5 beta1 が公開されました!!!

LINE では Bootstrap4 をベースとした管理画面向けの koromo と Bootstrap5 をベースとした社内プロダクト向けの UIT Toolkit “Astro” を開発しています。

今回は alpha1 と beta1(alpha2, alpha3含め) の差についてざっくり紹介します。alpha1 から beta1 への変更点としては下記のようです。

詳細は公式サイトでご確認ください。

Migration

RTL(right-to-left)

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/)

一番大きい変化じゃないかと思います。もちろん今までも RTL の対応はされていたんですが、もっと強力になりました。

Grid, Reboot, Utilities 標準バンドルに加えて、RTL が新しく追加されました。

まず、RTL CSS プロジェクトで構築することにしました。LTR から RTL に変更する際の変更やオーバーライドを管理するための強力な機能が得られます。また、一つのコードベースから二つのバージョンの Bootstrap を構築することができます。

第二に、次の話と繋がってるんですが論理的なプロパティのアプローチを使うために、水平方向のポジショニングに関するクラス名を変更しました。

例えば、margin-left の .ml-3 の代わりに .ms-3 を使用します。これにより、クラス名と値は無理せず、LTR や RTL に適したものになります。

Renamed classes for logical properties

RTL を追加するための一部で、水平方向に敏感な変数、ユーティリティや mixins は、より論理的な名前に変更されました。

下記は一部かもしれませんが、全ての left や right のような方向のプロパティが start と end に置き換えます。

変更の大きさとインパクトのため、リスクの高い変更ですが、LTR や RTL に適したものとなり、今後の追加の負担はありません。

Components・.dropleft / .dropright → .dropstart / .dropend
・.dropdown-menu-*-left / .dropdown-menu-*-right → .dropdown-menu-*-start / .dropdown-menu-*-end
・.bs-popover-left / .bs-popover-right → .bs-poppover-start / .bs-popover-end
・.bs-tooltip-left / .bs-tooltip-right → .bs-tooltip-start / .bs-tooltip-end
・.carousel-item-left / .carousel-item-right → .carousel-item-start / .carousel-item-end
Utilities・.left-* / .right-* → .start-* / .end-*
・.float-left / .float-right → .float-start / .float-end
・.border-left / .border-right → .border-start / .border-end
・.rounded-left / .rounded-right → .rounded-start / .rounded-end
・.ml-* / .mr-* → .ms-* / .me-*
・.pl-* / .pr-* → .ps-* / .pe-*
・.text-left / .text-right → .text-start / .text-end
・.text-md-left → .text-md-start 
Mixins・border-left-radius() / border-right-radius() → border-start-radius() / border-end-radius()
・border-bottom-left-radius() → border-bottom-start-radius()
・caret-left() / caret-right() → caret-start() / caret-end()
Variables・$navbar-brand-margin-right → $navbar-brand-margin-end
・$pagination-margin-left → $pagination-margin-start
・$form-checkout-padding-left → $form-checkout-padding-start
・$form-switch-padding-left → $form-switch-padding-start
・$form-check-inline-margin-right → $form-check-inline-margin-end
・$form-select-feedback-icon-padding-right → $form-select-feedback-icon-padding-end

Color system

イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/)

color-level() および $theme-color-interval で動作していたカラーシステムは削除され、新しいカラーシステムが採用されました。

lighten() および darken() 変数は、tint-color() および shade-color() に置き換えられました。

この関数は色の明度を一定量だけ変えるのではなく、色を白か黒のいずれかと混ぜ合わせます。

shift-color() (alpha3 までは scale-color() でした。)は、その$weight パラメータが負数か陽数かに応じて色の色合いを明るくしたり暗くしたりします。

scss/_functions.scss

// scss-docs-start color-functions
// Tint a color: mix a color with white
@function tint-color($color, $weight) {
  @return mix(white, $color, $weight);
}
 
// Shade a color: mix a color with black
@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}
 
// Shade the color if the weight is positive, else tint it
@function shift-color($color, $weight) {
  @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
}
// scss-docs-end color-functions

States in the utilities API

これは新しく追加された機能です。擬似要素(:hover, :focus)のスタイルを state option を使って追加する機能です。

例えば、hover で不透明度を変更するには`state: hover` を追加すると、

scss/_utilities.scss

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

コンパイルされた CSS に .opacity-hover:hover が生成されます。

compile css

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

もしかして、複数の擬似クラスが必要ですか?スペースで区切されたリストを使用すれば問題ありません。

scss/_utilities.scss

$utilities: (
  "opacity": (
    ...
    state: hover focus,
    ...
  )
);

JavaScript

Bootstrap alpha1 で jQuery は削除されもう使わなくなりましたよね。
今回はサードパーティや独自のコードからBootstrap の機能を区別するのに役立つように、全ての JavaScript plugins data 属性の名前空間が変更されました。

全てのデータ属性の名前が変更されて、インフィックスとして bs を含むようになりました。これにより、プロジェクト全体で Bootstrap が必要とする JavaScript のトリガーを明確に識別できるようになります。

例えば、data-toggle の代わりに data-bs-toggle を使用しています。

dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" 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>
  </ul>
</div>

また、Popper.js を v1.x から v2.x にアップグレードし、Tooltips/Popover から offset option の削除などのいくつかの小さな変更が加えられています。
Popper.js v2 では、主要な依存関係のファイルサイズが小さくなり、位置計算が更新され、その他多くの機能が追加されました。

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/)

Evolution of Position utilities

新しいポジショニングユーティリティが追加されました。新しい上、下、左、右のユーティリティを使用して要素を素早く配置し、各プロパティの値として、0, 50%, 100%をサポートしています。

新しい translate utilities と組み合わせて、端や角にある要素を中央に配置することもできます。

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/09/29/bootstrap-5-alpha-2/)

このようなポジショニングユーティリティの助けを借りて、Toastを手軽に .toast-container 中に配置できるようになりました。

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/)

Added new components

New accordion

.card ベースのアコーディオンを削除して、新しい .accorddion コンポーネントに変更し、いくつかのバグが解消されています。

新しいアコーディオンはまだ Collapse JavaScript plugin を使用していますが、それをサポートするために Custom HTML と CSS を使用することで、これまで以上に使いやすくなっています。


(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/)

New block buttons

.btn-block を削除し、CSS grid ユーティリティを使用するようになりました。

個々のボタンに .btn-block を適用する代わりに、ボタンのグループは親の .d-grid クラスにラップされ、間隔に .gap-* を使用できるようになりました。

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/)

New floating labels

本格的な Form layout option として Floating labels が追加されました。

これは textual inputs, selects, textareas をサポートしています。textareas では、複数行のテキストが floating labels によって見えなくなってしまうという制限があります。

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/)

New file input

全体的なデザインは同じですが、HTML を改良した file input コンポーネントが更新されました。

.form-file クラスを削除し、.form-control クラスにスタイルを追加しました。これは file input のスタイルを機能させるために追加の JavaScript を必要としなくなったことを意味します。

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/)

Dark/White theme

Dark テーマが carousel と dropdown に追加されました。

明るい背景に最適な暗いテキスト、コントロール、インジケータのスタイリングが含まれている .carousel-dark と .dropdown-menu-dark が追加されました。


また .close クラスの名前がかなり一般的な .btn-close に変更されました。

さらに、CSS による SVG の背景イメージのために、&times; の使用が削除され、スタイリングが一新されたことで、close ボタンのフォーカス状態がより明確になり、さらには全く新しい白のバリエーション .btn-close-white が追加されました。

(イメージの引用元 : Bootstrap blog, https://blog.getbootstrap.com/2020/09/29/bootstrap-5-alpha-2/)

おわりに

今回は Bootstrap5 alpha1 と比べて最新版 beta1 までの変更について紹介しました。いかがでしたか?早く使ってみたくなったのではないでしょうか。

これから先は、機能、バグ、ドキュメントの微調整のみで、安定した v5 のリリースを目指しているらしいので、もうすぐ正式の v5 に会えそうです。

楽しみです。

LINE では beta1にアップグレードされた Bootstrap5 日本語版も対応しています。

一緒に作って行きませんか。LINEではフロントエンドエンジニアを募集しております。興味がある方はぜひご応募ください。

まだ、応募は考えていないけど情報交換からスタートしたい方はカジュアル面談もご利用ください。