Bootstrapユーザーなら持っておきたい!コピペで使える便利なチートシート「Bootstrap 4 Cheat Sheet」

コピペで使えるBootstrapの便利なチートシートを紹介します。

Bootstrapを使うなら持っておきたい便利なチートシート
Bootstrap 4 Cheat Sheet

Bootstrap 4 Cheat Sheetは、Bootstrapのコードスニペットをまとめたチートシートです。

200個以上のコードスニペットがまとめられています。

Bootstrapのコードスニペット

左にコードスニペット、右にプレビュー画面が表示されます。実装したいレイアウトを探して、コードはコピペで利用することができます。

コピペ

スポンサーリンク

サンプル

いくつかスニペットをピックアップして紹介したいと思います。

成功メッセージ(alert-success)

成功メッセージ(alert-success)

ドロップダウンボタン(dropdown-toggle)

ドロップダウンボタン

モーダル(modal)

モーダル

タブ(nav-tabs)

タブ

ページネーション(pagination-lg)

<nav> <ul class="pagination pagination-lg"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>

レスポンシブ対応のテーブル(table-responsive)

レスポンシブ対応のテーブル

スポンサーリンク
Bootstrap 4 Cheat Sheet – Bootstrapユーザーなら持っておきたい!コピペで使える便利なチートシート

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2016.05.27
  • Views 429