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)

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

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選
スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Updated on
  • Views 798