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

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

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

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

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

Bootstrapのコードスニペット

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

コピペ

サンプル

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

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

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

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this
  important alert message.
</div>

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

ドロップダウンボタン

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

モーダル(modal)

モーダル

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel1">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

タブ(nav-tabs)

タブ

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ページネーション(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>

<nav>
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

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

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

<div class="table-responsive">
  <table class="table">
  <!-- table content here -->
  </table>
</div>

関連記事

人気の記事

目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
目的別おすすめのWordPressテーマ(無料・有料)【2017年版】
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

コメント

  • Posted on
  • Updated on
  • Views 877