合同会社アルティマシステム
Bootstrap3

第5回目 Bootstrap .rowの入れ子!

前回の復習

前回は、offset push pullについての紹介をしました。
コンテンツの細かい配置に迷ったときにoffset push pullを使用すると全体のバランスがよくなります。
第5回目は、.rowの入れ子についての紹介をします。
こちらの記事は、初心者の方に向けての記事となっております。
Macの環境を前提に紹介をしています。

.rowの入れ子とは

.rowは入れ子にすることができます。
通常は< 参考 ① >のように、.rowの中に.col-がある形になります。

< 参考 ① >

<div class="row">
    <div class="col-xs-10">.col-xs-10</div>
</div>

.col-xs-10

.rowの入れ子は< 参考 ② >のように、.row .col-の中に更に.row .col-を作成する形になります。

< 参考 ② >

<div class="row">
    <div class="col-xs-10">
        <div class="row">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
</div>

.col-xs-10

.col-xs-6

.col-xs-6

.row .col-xs-10の中に.row .col-xs-6 .col-xs-6が入っています。

.rowの入れ子の考え方

.rowを入れ子にしたときのグリッドシステム・カラムについての紹介をしていきます。

< 参考 ③ >

<div class="row">
    <div class="col-xs-10">
        <div class="row">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
        </div>
    </div>
</div>

.col-xs-10

.col-xs-6

.col-xs-6

.rowの入れ子
.row .col-xs-10は、グリッドシステムの12の中に10カラムあることになります。
.row .col-xs-10の入れ子になっている.row .col-xs-6 .col-xs-6は、親となる.row .col-xs-10の10カラムをグリッドシステムの12と考えて、10カラムの中に6カラム+6カラム=12カラムあることになります。

.rowの入れ子を使ってみよう!

実際に.rowの入れ子を使用したhtmlの紹介をします!

< 参考 ④ >

<div class="row">
    <div class="col-xs-8">
        <div class="row">
            <div class="col-xs-6">
                <button class="btn btn-primary btn-block">ボタン</button>
            </div>
            <div class="col-xs-6">
                <button class="btn btn-primary btn-block">ボタン</button>
            </div>
        </div>
    </div>
</div>

.row .col-xs-8の中に.row .col-xs-6 .col-xs-6が入っています。

< 参考 ⑤ >

<div class="row">
    <div class="col-xs-10 col-md-6">
        <div class="row">
            <div class="col-xs-5 col-md-8">
                <button class="btn btn-warning btn-block">ボタン</button>
            </div>
            <div class="col-xs-7 col-md-4">
                <button class="btn btn-success btn-block">ボタン</button>
            </div>
        </div>
    </div>
</div>
md・lgサイズのとき、.row .col-xs-6の中に.row .col-md-8 .col-md-4が入っています。
xs・smサイズのとき、.row .col-xs-10の中に.row .col-xs-5 .col-xs-7が入っています。

まとめ・次回予告

第5回で.row .col-の紹介は最後となります。この先も.row .col-は、必要となるclassです!
Bootstrapの基本となるグリッドシステム .container .row .col-については、第3回〜第5回までの記事を参考にしてください!
次回は、Bootstrapを使用しサイトのheaderを作成する方法についての紹介をしていきます!

関連投稿

第3回目 Bootstrap グリッドシステム!

Bootstrapのコンポーネント 第3回目は、.container(.container-fluid) .row .col-について紹介をしていきます。 Bootstrapを使用する場合は、最初に.container .row .col-の仕組みを理解しておきましょう!...

第2回目 実際にBootstrapを動かしてみよう!

前回の復習 前回は、Bootstrapのダウンロード方法・ファイル・フォルダの紹介をしました。 第2回目は、Bootstrapの読み込み方・実際に動かすところまでを紹介をします。 読み込みってなんだ?と、少しややこ...

第4回目 Bootstrap offset push pullを使ってみよう!

前回の復習 Bootstrapを使用してレスポンシブサイトを作成する場合は、第3回目で紹介したグリッドシステムの12と画面サイズのxs・sm・md・lgが重要になります。 第4回目は、.rowと.col-のoffset push pullに...

第6回目 Bootstrap headerを作成してみよう!

headerについて 第6回目からは、サイトのheaderを作成する方法についての紹介をしていきます。 サイトの1番上に表示されるheaderは、デザインも動きもしっかり作りこみたいですね! レスポンシブサイトのhea...

第7回目 Bootstrap headerをレスポンシブ対応にしてみよう!

前回の復習 前回は、headerの基本となるサイト名とリンクを作成しました。 第7回目は、前回作成したheaderをレスポンシブ対応にする方法の紹介をします。 最後にheaderを固定する方法の紹介もします! こ...