Bootstrapといえば、今や欠かせないコーディングのレスポンシブに対応したフレームワークとなっています。
そんなBootstrapのよく使われる便利なclassの使い方10選を紹介致します。
目次
1.レスポンシブ対応のimg
html
|
1 |
<img src="" class="img-responsive" alt=""> |
2.レスポンシブ対応のtable
html
|
1 2 3 4 5 6 7 8 9 10 |
<div class="table-responsive"> <table class="table"> <tbody> <tr> <th></th> <td></td> </tr> </tbody> </table> </div> |
3.レスポンシブに対応した擬似テーブル
html
|
1 2 3 4 |
<dl class="dl-horizontal"> <dt></dt> <dd></dd> </dl> |
4.スタイルなしリスト
html
|
1 2 3 |
<ul class="list-unstyled"> <li></li> </ul> |
5.左寄せ・中央寄せ・右寄せ
html
|
1 2 3 4 5 6 7 8 9 |
<div class="text-left"> 左寄せ </div> <div class="text-center"> 中央寄せ </div> <div class="text-right"> 右寄せ </div> |
6.ブレイクポイントで非表示
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="hidden-xs"> 768px以下で非表示 </div> <div class="hidden-sm"> 768px〜991pxで非表示 </div> <div class="hidden-md"> 992px〜1119pxで非表示 </div> <div class="hidden-lg"> 1200px以上で非表示 </div> |
7.ブレイクポイントで表示
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="visible-xs"> 768px以下で表示 </div> <div class="visible-sm"> 768px〜991pxで表示 </div> <div class="visible-md"> 992px〜1119pxで表示 </div> <div class="visible-lg"> 1200px以上で表示 </div> |
8.コピペでモーダルウインドウ
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- モーダルのボタン --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> クリックでモーダル表示 </button> <!-- モーダル部分 --> <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">×</span> </button> <h4 class="modal-title" id="myModalLabel1">タイトル</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> |
9.タブ
html
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
10.レスポンシブ対応カラム
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- 3カラム --> <div class="container"> <div class="row"> <div class="col-sm-4"> コンテンツ内容 </div> <div class="col-sm-4"> コンテンツ内容 </div> <div class="col-sm-4"> コンテンツ内容 </div> </div> </div> |