気まぐれWEBLOG

通常ページへ

Bootstrapレスポンシブ対応コピペで使えるカラム・モーダル他10選

CSS

Bootstrapといえば、今や欠かせないコーディングのレスポンシブに対応したフレームワークとなっています。
そんなBootstrapのよく使われる便利なclassの使い方10選を紹介致します。

目次

1.レスポンシブ対応のimg

html

<img src="" class="img-responsive" alt="">

2.レスポンシブ対応のtable

html

<div class="table-responsive">
    <table class="table">
        <tbody>
            <tr>
                <th></th>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

3.レスポンシブに対応した擬似テーブル

html

<dl class="dl-horizontal">
    <dt></dt>
    <dd></dd>
</dl>

4.スタイルなしリスト

html

<ul class="list-unstyled">
    <li></li>
</ul>

5.左寄せ・中央寄せ・右寄せ

html

<div class="text-left">
    左寄せ
</div>
<div class="text-center">
    中央寄せ
</div>
<div class="text-right">
    右寄せ
</div>

6.ブレイクポイントで非表示

html

<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

<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

<!-- モーダルのボタン -->
<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">&times;</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

<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

<!-- 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>

 

最新情報をチェックしよう！