Bootstrapはとても便利なのですが、全部覚えようとするとけっこうな量があるので使うものを絞ってみました

絞り込む基準

CSSを直接書いてもできるけれど、記述が簡単になるもの
とりあえずのレイアウト確認に使用できるもの

他のライブラリでできるものはライブラリで

swiperとか

ボタン系

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="">Disabled button</button>

レイアウト確認に便利

Emmet使うと即ですし

バッジ系

<p>example<span class="badge badge-secondary">new</span></p>
<span class="badge badge-pill badge-primary">Secondary</span>
<span class="badge badge-primary">Primary</span>

これもレイアウト確認に便利

ドロップダウン

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">item1</a>
    <a class="dropdown-item" href="#">item2</a>
  </div>
</div>

フォーム系

<form>
  <div class="form-group">
    <label for="form-input">label</label>
    <input type="text" class="form-control" id="form-input" placeholder="input">
  </div>
</form>

グリッド系

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <!-- Content1 -->
    </div>
    <div class="col-md-4">
      <!-- Content2 -->
    </div>
    <div class="col-md-4">
      <!-- Content3 -->
    </div>
  </div>
</div>

簡単にレスポンシブ化できるのでとても好き

モーダル系

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  modal
</button>
<div class="modal" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <!-- Content -->
      </div>
    </div>
  </div>
</div>

ナビ(nav)

<nav class="nav">
  <a class="nav-link" href="#!">nav1</a>
  <a class="nav-link" href="#!">nav2</a>
</nav>

次のnavbarのほうが個人的お好み

ナビゲーションバー(navbar)

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">item1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">item2</a>
      </li>
    </ul>
  </div>
</nav>

仕組みを理解するのにちょっと時間かかるかも

カスタマイズするにはコードの意味やクラス名とかDOM関連知る必要あり

テーブル系

<table class="table">
  <thead class="thead-light">
    <tr>
      <th>head1</th>
      <th>head2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>item1</td>
      <td>item2</td>
    </tr>
  </tbody>
</table>

まとめ

好みもだいぶいれましたが、Bootstrapはとても便利です

とくに初学者の人はCSSの知識を深めるのにいいと思います

どうしてこの記述なのだろうとか考えると面白いです

Bootstrapで使うものと使わないものを分けていいとこどりをする