Bootstrap初心者が効率的に習得するためのツールとは

プログラミング

HTMLとCSSの基礎を一通り学習したので、Bootstrapを勉強し始めて、公式サイトなどを見つつ、ちょろっと使ってみたけど、どうも使いづらいなあ。Bootstrapの各種コードを一覧で見れるまとまった情報がないかなあ?という疑問にお答えします。

Bootstrapってあまり情報が無いですね。

公式サイトをはじめとするBootstrapについてのサイトや記事は、辞書的に使ったり、学習するには良さげですが、実際に手を動かしつつBootstrapを使う際には、必要な情報にアプローチしづらいですね。

そこで、Bootstrapを使う際に便利な、コードと使用例が一覧になったシートをご紹介します。

そのシートとは、「 Cheat Sheet 」です。

正式には、「 Bootstrap4 Cheat Sheet 」といいます。

Bootstrap4 Cheat Sheetの使い方

Bootstrap4 Cheat Sheetの使い方

それではまず、cheat sheetの場所をご紹介します。

Cheat Sheetの場所

Cheat Sheetの場所

Cheat Sheetは、下記のリンクにあります。

Bootstrap 4 Cheat Sheet - The ultimate list of Bootstrap classes
Quickly find your Bootstrap classes on this interactive Bootstrap cheat sheet. It includes code samples and live preview of elements.

Cheat Sheetについてざっくりと内容をご紹介

Cheat Sheetにアクセスした画面です。

表示方法の切り替え

表示方法の切り替え

「 collapse all 」を選択して、各機能の見出しだけ表示されている状態です。

ここから見出しをクリックすると、アコーディオンパネルのように内容が展開されます。

画像では、「 Alerts 」の見出しをクリックしたので、詳細が展開されていますね。

画像では、「 Alerts 」の見出しをクリックしたので、詳細が展開されていますね。

「 collapse all 」の左側にある、「 Expand all 」をクリックすると、全ての見出しの詳細が展開された状態に表示されます。

お好みに応じて、表示を使い分けられる感じですね。

「 collapse all 」の左側にある、「 Expand all 」をクリックすると、全ての見出しの詳細が展開された状態に表示されます。

コードの使用例

コードの使用例

画像では、alert-primaryという値を選択しています。

すると、画面下の方にコードの使用例である「 Code snippet 」と、実行するとどんな表示になるかを表す「 Preview 」が表示されます。

「 Copy 」をクリックすると、使用例のコードがコピーできますので、練習用に自分の使っているテキストエディタなどに貼り付けて、いろいろ試せます。

どうでしょうか?とても便利ですね。

Bootstrapを使い始めたら、ぜひ知っておきたいCheat Sheetをご紹介しました。

コメント

タイトルとURLをコピーしました