Bootstrapは、フロントエンド開発者の主要な選択です。
信頼されているオープンソースのフロントエンドフレームワークで、モバイル応答性などの機能を備えたモダンなウェブサイトを簡単に開発することができます。
魅力的で機能的なウェブサイトを構築するために、Bootstrapは、デバイスの応答性に役立つ定義済みのクラスを持つHTMLとCSSの基本的な構造を提供します。
2013年にはBootstrap 3が発表され、その後2017年8月にはBootstrap 4がリリースされました。
1. テーマのインストール
Bootstrap 3はパッケージにBootstrapをインストールするオプションが1つしかないのに対し、Bootstrap 4は4つのオプションがあります。
手間はそれほど変わらないのですが、4のほうが選択肢が広いです。
2. CSSソースファイルをLESSからSASSに更新
SASSはLESSよりも強力です。SASSには論理演算子、ループ、ミキシング、em、rem、ネストされたメディアクエリ、extendなどの機能があります。
LESSは学習が簡単だったので、SASSへのステップアップが早かったです。というわけで、今がSASSに慣れる時のようです。
SASSをCSSにコンパイルするためのオプションがたくさんあるので、その方が使いやすいです。
3. フォントサイズをpxからremに変更
ウェブ上のタイポグラフィのベストプラクティスは、rem, em, pxの相対単位を使用することです。
Bootstrap 4ではremを使用しています。pxと比較して、より柔軟性があります。
remを使えば、固定サイズにとらわれることなく、要素を拡大縮小することができます。これにより、開発中にデザインを調整しやすくなり、コンテンツのデバイスレスポンシブ化が可能になります。
4. グリッドシステムの変更
Bootstrap3は4つのグリッドクラス（col-xs-3, col-sm-3, col-md-3, col-lg-3）を持っていますが、バージョン4は5つのグリッドクラス（.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3）を持っています。
Bootstrap 4では、最低のブレークポイントからxsが削除されました。Bootstrap 3では、下点はxs(.col-xs)で動作していましたが、Bootstrap 4ではそれが削除され、下点のブレークポイントには(.col-)のみ使用されています。
5. アクセシビリティ
Bootstrapで構築されたプロジェクトの全体的なアクセシビリティは、作者のマークアップ、追加のスタイリング、および含まれているスクリプトに大きく依存します。
しかし、これらが正しく実装されていれば、BootstrapでWebサイトやアプリケーションを作成することは完全に可能です。
Bootstrapによって提供されるテーマは、常に一般的なウェブ標準に従っており、開発者が誰もがアクセスできるサイトを作成するための頭痛の種を少なくしています。
Bootstrap 3はスキップナビゲーション、ネストされた見出し、カラーコントラストを提供していましたが、Bootstrap 4はそのコンポーネントでアクセシビリティを向上させました。
バージョン4からのスタイリングとレイアウトは、広範囲のマークアップ構造に適用することができます。
モーダルダイアログ、ドロップダウンメニュー、カスタムツールチップなどのコンポーネントは、タッチ、マウスからキーボードまで、ユーザーのために動作するように設計されています。
また、これらのコンポーネントは、スクリーンリーダーなどの支援技術でも理解しやすく、操作しやすいようになっています。
著者は、適切なカラーコントラスト比を確保するために、デフォルトの色を手動で変更/拡張することができるようになりました。
視覚的に隠される必要があるが、支援技術にアクセス可能なままのコンテンツは、.sr-onlyクラスを使用してスタイル設定することができるようになりました。
Bootstrap 4には、 prefers-reduced-motionメディア機能のサポートも含まれています。しかし、現在のところ、サポートはmacOSとiOSのSafariに限定されています。
Bootstrapのコンポーネントは、潜在的なアクセシビリティの懸念に対処できるように意図的に設計されています。
6. Flexboxベースのグリッドが追加
Flexboxは、Bootstrap 3とは異なるBootstrap 4の重要かつ重要な機能の一つです。レイアウトのアラインメントを素早く管理したり、グリッド列のサイズを変更したり、コンポーネントのナビゲーションを変更したり、複雑なレイアウトの形成を簡単に管理することができます。
Bootstrap 3では、Bootstrap 4のflexboxとは異なり、レイアウトを扱うためにフロートを使用していました。
フレックスボックスレイアウトを使うことで、フロートや配置を使わずに、柔軟なレスポンシブレイアウト構造を簡単に設計することができます。
レスポンシブ機能を持っていますが、カスタムCSSではBootstrap 4では実装が複雑になってしまいました。
7. Bootstrapテーマ
Bootstrapテーマは、素晴らしいスタイリング、UIコンポーネント、ページレイアウトを提供するHTML、CSS、JavaScriptコードの究極のパッケージです。
さらに、それらは、あなたが適応して構築するための事前に構築されたウェブサイトのテンプレートです。
Bootstrap 4は、簡単かつ迅速にあなたのウェブサイトを作成するためのより良いと即興的なオプションを持っています。 バージョン4では、あなたのウェブサイト、cPanel、ダッシュボード、およびソフトウェアのために利用可能なテーマの多くを使用することができます。
Bootstrap 3からそのようなテンプレートはありませんでしたが。
8. ポップオーバーとツールチップの使い方
Bootstrap 4のポップオーバーは、ツールチップに似ています。それは、ユーザーが任意の種類の要素をクリックしたときに表示されるポップアップボックスです。
<a href=”#” title=”Dismissible popover” data-toggle=”popover” data-trigger=”focus” data-content=”ドキュメント内のどこかをクリックしてこのポップアップを閉じる”>私をクリック</a>
9. 画像のクラス名を変更する
.img-responsive が .img-fluid に変更されました。
.img-rounded が .rounded に変更されました。
.img-circleから丸い円へ – 他の要素（ボックス、アイコン、ボタン）に使用することができます。
10. ブラウザサポート
Bootstrap 3 は IE8 と iOs 6 のバージョンをサポートし、Bootstrap 4 は IE9+ と iOS 7+ のみをサポートするようになりました – 以前のバージョンを落としながら。