Bootstrap 4 CheatSheet - Bootstrap 4コンポーネントの使用法が分かるチートシート

S 20170627 184838

世界中のWebサイトで使われている人気の高いHTML/CSS/JSフレームワーク「Bootstrap」。記事執筆時安定版はv3系ですが、次期メジャーバージョンアップ版v4の開発も長く続けられています。

本日紹介するサイト「Bootstrap 4 CheatSheet」は、そのBootstrap 3の使い方を確認できるオンラインチートシート(虎の巻)サイトです。

Booststrapの有料/無料テーマを配布しているCreative TimとBootstrapbayによって作成されたサイトで、クリックするだけでBootstrap 4のコーディング方法や、見た目を確認することができます。

Bootstrap 4 CheatSheetの使用方法

Bootstrap 4 CheatSheetの使用法は簡単です。サイト上のリンクをクリックし確認したい部品を選ぶと、その部品に対応したコードスニペットとプレビューが画面の下部に表示されます。

S 20170627 184906

▲例えば画面上に情報を表示する「アラート」の中から、alert-successを選んだ場合。

S 20170627 185027

▲Bootstrapのボタンとしておなじみの、btn-primary

その他にも、フォーム用の部品や、ナビゲーション、バッジ、テーブルなどBootstap v4で利用可能な各種部品の利用法を確認することができます。

来るBootstrap 4時代にそなえ、ブックマークしておいて損はないサイトといえるでしょう。

スポンサーリンク