Bootstrap Sample

これはBootstrap4を使用して作っているサンプルページです。

Components

Bootstrapには、様々なコンポーネントが用意されています。以下が一部のコンポーネントになります。

「badge」というクラスを使えば、バッジをつけることができます。「badge-pill」を追加すれば、丸型のバッジにもなります。背景色も好きな色を選ぶことができます。

「pagination」というクラスを使えば、簡単にページ送りを作ることができるので、長いページの場合はページを分割してページネーションをつけることで見やすくなるでしょう。

「btn」というクラスを使えば、簡単にボタンを作ることができます。背景色をつけたり、アウトライン型のボタンも作れ、ボタンのサイズも変更できます。

「nav」というクラスを使えば、ナビゲーションリンクも簡単に作れます。通常のナビリンクからタブ型、ドロップダウンなど様々な形式のナビリンクが作れます。

Bootstrapには、様々なユーティリティが揃っています。以下が一部のユーティリティとなります。

「border」というクラスを使えば、簡単に枠線を引くことができます。角丸の枠線や色付きの枠線を引いたりすることもできます。

文字色や背景色など様々な色をつけることができます。文字色の場合は「text-色名」、背景色の場合は「bg-色名」といった感じで使います。

「text-***」や「font-***」というクラスを使えば、テキストの位置や太さ、フォントスタイルなどいろいろ変更することができます。

Bootstrap 4では4つのブレークポイントが設けられていて、下記の名前をつけることでブレークポイントを設定することができます。

-xs（Extra Small）	-sm（Small）	-md（Medium）	-lg（Large）	-xl（Extra Large）
0～575px	576～767px	768～991px	992～1199px	1200px～