合同会社アルティマシステム
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を作成する方法についての紹介をしていきます!

関連投稿

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

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

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

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

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

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

第8回目 Bootstrap footerを作成してみよう!

前回の復習 前回は、headerのレスポンシブ対応・固定する方法について紹介をしました。 第8回目は、footerを作成する方法について紹介をします。 こちらの記事は、初心者の方に向けての記事となっており...

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

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