目指せ！Bootstrapでテンプレート作成

Bootstrapの復習も兼ねて、最終的に今後も使いまわせるテンプレートを作りたいと思い、せっかくならその工程を記録することにしました。
そのため、最初は基本的な内容になると思いますが一緒に復習がてらご確認いただけると嬉しいです!

モバイルファーストのコンセプトに基づいて設計されているので、画面サイズの小さいものからブレイクポイントによってスタイルを上書きしていく仕組みです。
デバイスごとにカラム数を切り替えるレスポンシブなクラスがあり、その切り替えのためのブレイクポイントが５つあります。

５段階のレイアウト制御

カラムにcol-md-△のようなクラスを追加します。
※◯には１〜１２の数字が入ります。

col-△ （Extra small < 576px）
画面幅が０以上５７６px未満、container最大幅なし（自動）

col-sm-△　（Small ≧ 576px）
５７６px以上７６８px未満、container最大幅540px

col-md-△　（Medium ≧ 768px）
７６８px以上９９２px未満、container最大幅720px

col-lg-△　（Large ≧ 992px）
９９２px以上１２００px未満、container最大幅960px

col-xl-△　（Extra large ≧ 1200px）
１２００px以上、container最大幅1140px

ブレイクポイントによる切り替え

col-smクラスを指定して、Small（576px)より小さなデバイスでは縦に積み重なり、Small以上になると水平に並ぶ

<div class="container">
    <div class="row">
        <div class="col-sm-8">class="col-sm-8"</div>
        <div class="col-sm-4">class="col-sm-4"</div>
    </div>       
</div>
<div class="container">
    <div class="row">
        <div class="col-sm">class="col-sm"</div>
        <div class="col-sm">class="col-sm"</div>
        <div class="col-sm">class="col-sm"</div>
    </div>
</div>

可変幅カラム

col-autoクラスを使用したカラムは、コンテンツによって幅を変化させることが可能です。
col-md-autoクラスを指定すると、通常(Medium未満）は幅が100％、Medium以上で可変幅になります。

<div class="container">
    <div class="row">
        <div class="col">
            等幅表示
        </div>
        <div class="col-auto">
            コンテンツによって幅が可変し、残りのcolを指定した要素は等幅で表示される。
        </div>
        <div class="col">
            等幅表示
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col">
            text text text text
        </div>
        <div class="col-md-auto">
            通常<span class="red">Medium（768px）</span>未満は幅が100%、<span class="red">Medium以上</span>で可変する。
        </div>
        <div class="col">
           text text text text
        </div>  
    </div>
</div>

Medium以上

Medium未満

等幅カラムを複数行に分割

複数の等幅カラムに改行をして複数行に分割する場合、改行する箇所にSizingユーティリティのw-100クラスを挿入します。これは、幅100％を指定するクラスで、後に続く要素は２行目に表示されます。

<div class="container">
    <div class="row">
        <div class="col">
                    
        </div>
        <div class="col">
                    
        </div>
        <div class="w-100">
                    
        </div>
        <div class="w-75">
            親要素を基準に、75%幅で表示される。             
        </div>
        <div class="col">
                   
        </div>  
        <div class="col">
                    
        </div>  
    </div>
</div>

Medium以上

Medium未満

行の分割をブレイクポイントで切り替え

Displayユーティリティを使用すると、ブレイクポイントごとに分割の仕方を切り替えることも可能です。
非表示のd-noneクラスと、Medium以上で表示するd-md-blockクラス(medium以上は、display:block)を組み合わせると、Medium以上の画面幅では表示され、それ未満は非表示となります。

<div class="container">
    <div class="row">
        <div class="col">
            <span class="red">
                Sizingユーティリティは、ブレイクポイントで行分割を変化させる場合に便利。
            </span>
        </div>
        <div class="col">
            ブレイクポイントごとに分割仕様を変える場合は、Displayユーティリティを使用する方法もある。
        </div>
        <div class="w-100 d-none d-md-block">
            Medium以上では（display:block）、未満では（display:none）　　<span class="red">＝＝ここで改行される＝＝</span>
        </div>        
        <div class="col">
            後に続く要素は２行目に表示される
        </div>          
        <div class="col">
            表示しないクラス d-noneクラス（display:none)と、Medium以上で表示する d-md-blockクラス（medium以上は、display:block）の組み合わせ。 
        </div>          
    </div>
</div>

Medium以上

Medium未満

複数クラスの組み合わせ

カラム数を切り替える方法として、基本のcolクラスや、ブレイクポイントの接頭辞の着いたcol-mdやcol-lgクラスなどが用意されており、w-100クラスやd-noneクラスなどのユーティリティクラスを組み合わせることで、複雑な表示の切り替えができるレスポンシブWebデザインも実装可能です。

<div class="container">
    <div class="row">
        <div class="col-12 col-md-8">
            基本：全幅、Medium以上：８列カラム
        </div>
        <div class="col-6 col-md-4">
            基本：半カラム、Medium以上：４列カラム
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-6 col-md-4">
            基本：半カラム×３、Medium以上：４列カラム×３
        </div>
        <div class="col-6 col-md-4">
            基本：半カラム×３、Medium以上：４列カラム×３
        </div>
        <div class="col-6 col-md-4">
            基本：半カラム×３、Medium以上：４列カラム×３
        </div>
    </div>
</div>

Medium以上

Medium未満