ざっくり入門 - 3

8943 ワード
Bootstrap Bootstrap テキストリンク

列の自動レイアウト

等幅カラム

行内のカラムを等幅にするには、colクラスを使用するのがもっとも簡単です。
1行を2列にしたい場合は、colクラスを指定した要素を2つ、3列にしたい場合は3つ配置します。
colクラスを使用した場合は、1行に入る各カラムは自動的に等幅でレイアウトされます。

<div class="container">
    <div class="row"><!-- row : 1行目 -->
        <div class="col">1列目</div><!-- col : 等幅カラム -->
        <div class="col">2列目</div><!-- col : 等幅カラム -->
    </div>
    <div class="row"><!-- row : 2行目 -->
        <div class="col">1列目</div><!-- col : 等幅カラム -->
        <div class="col">2列目</div><!-- col : 等幅カラム -->
        <div class="col">3列目</div><!-- col : 等幅カラム -->
    </div>
</div>

指定幅カラム

カラムの幅を指定するには、col-*クラス(「*」には1~12までの数値が入ります)を使用します。
*に入る数字は、合計12(グリッド12列分のカラム)になるように、使用したい列分の数を指定します。
等幅カラムにしたい場合は、colクラスを指定した要素を3つ配置する代わりにcol-4クラスを指定した要素を3つ配置しても、4列カラム×3=12カラム列分となり、3つの等幅カラムになります。

<!-- 1列カラム × 12 = 12列分 -->
<div class="container"><!-- container : 箱 -->
    <div class="row"><!-- row : 行 -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
        <div class="col-1">co-1</div><!-- col-1 : 1列分のカラム -->
    </div>
</div>


<!-- 2列カラム + 4列カラム + 6列カラム = 12列分 -->
<div class="container"><!-- container : 箱 -->
    <div class="row"><!-- row : 行 -->
        <div class="col-2">co-2</div><!-- col-2 : 2列分のカラム -->
        <div class="col-4">co-4</div><!-- col-4 : 4列分のカラム -->
        <div class="col-6">co-6</div><!-- col-6 : 6列分のカラム -->
    </div>
</div>


<!-- 5列カラム + 7列カラム = 12列分 -->
<div class="container"><!-- container : 箱 -->
    <div class="row"><!-- row : 行 -->
        <div class="col-5">co-5</div><!-- col-2 : 5列分のカラム -->
        <div class="col-7">co-7</div><!-- col-4 : 7列分のカラム -->
    </div>
</div>

インデックス

Bootstrapざっくり入門
Bootstrapざっくり入門 - 2

あとがき

最後までご高覧いただきましてありがとうございます。（＾人＾）感謝