今回から、4-7Bootstrapで見た目を整えようをスタートします。
早速ですが、この本で取り扱われているBootstrapは多分、私が試したものと少し違うよう
です。
私が試したのはBootstrap5です。
ですので、 ｓｔａｒｔｅｒ template からして違うものでした。
ざっくりですが、違いをまとめてみます。
・ JQUERYの使用をやめた
・ ＩＥ 非サポート
・ ブレークポイント「XXL」追加
・ Gutters (ガター)ユーティリティが登場
・ CSS カスタムプロパティ(CSS変数)が利用できる
・ クラス名などの小さな変更点
気になる方はググってみてね(*'▽')
p134のリスト４は特に変更なく書きました。
デザインいじってみたい方は
本家サイトの ＴＯＰ ＞ ドキュメント ＞ Components からいろいろな変更方法が記載
されてます。
Bootstrap ネタはp155 のJumbotronでもでてきます。
v4のジャンボトロンのクラス（.jumbotron, .jumbotron-fluid）はv5.0.0で削除されたため、ここでは他のユーティリティクラスを使用した設定例を表示。
Bootstrap５から Jumbotron は使えなくなりました(-_-;)
ですので、p156のリスト４は修正しましょう！
<div class="jumbotron">
<h1 class="display-4">ブログ</h1>
<p class="lead">記事一覧です</p>
</div>
上記は文字が出るだけとなるので、デザインまで反映されるのは下記となります。
<div class="bg-light p-3 p-sm-5 my-4 rounded">
<h1 class="display-4">ブログ</h1>
<p class="lead">記事一覧です</p>
</div>
どうですか？？どんどん進んでますか？
ある程度、使い方の基礎は理解できたと思うので、私は次回から自作のシステムを作って
いこうと思います。
そこには、この本の中でも取り扱われる ログインなどなども必要となるため、抜粋でまた
お伝えできることがあれば記載していこうと思います。