マニュアル: Bootstrap

投稿日: 更新日:

Bootstrap 4.1が対象です。

クラスからの逆引き

公式には見当たらないので、以下のサイトでチェック。

ブレイクポイント

ブラウザ(デバイス)の幅で表示を制御できるようにするためのシステムです。 ブラウザの幅が基準のため、PCでも幅を狭くすれば、 スマートフォン向けの表示確認ができます。

  • xs: 576px未満(スマートフォンの縦)
  • sm: 768px未満(スマートフォンの横)
  • md: 992px未満(タブレット)
  • lg: 1200px未満(デスクトップ)
  • xl: それ以上(広いデスクトップ)

ちなみに、V3からは1つズレています。

  • V4のxsはV3では存在しない
  • V4のsm ←→V3のxs
  • V4のmd ←→V3のsm
  • V4のlg ←→V3のmd
  • V4のxl ←→V3のlg

マージン・パディング

Spacing

ラベル・バッジ

Badges

Bootstrap 3ではLabelだったが、Bootstrap 4ではBadgeに名称が変わっている。 注意すべきは、デフォルトではfont-weight: boldになっていること。 日本語で太字にすると潰れがちなので、タグとかに使わないほうがいいかも。

位置指定