社畜エンジニア発掘戦線

駆けだしAIエンジニア

Bootstrapで遊ぶ7(マージン)

おつかれさまです。

Bootstrapを使ってレスポンシブなレイアウトの作成が可能になってきました。ただ、このレイアウト、問題が、「すき間がない」、、JKに挟まれた満員電車ならいいのですが、ビューファイルにおけるすき間のないレイアウトは窮屈で、情報過多になりやすく、文章などが読みづらいです。

Bootstrapには、こんなキツキツのレイアウトにすき間を与えてくれる機能も備わっています。


いつもの、適当になんか書いてみます。

<h1  style="background: blue;">グリッドシステムのテスト</h1>
<div class="container-fluid">
  <div class="row">
    <div class="col" style="background: yellow; height:200px;">コンテンツ1</div>
  </div>
  <div class="row">
    <div class="col" style="background: red; height:200px;">コンテンツ2</div>
    <div class="col" style="background: green; height:200px;">コンテンツ3</div>
  </div>
</div>


このレイアウトはこんな感じ、
f:id:sutokun:20180703213817p:plain

ひとまず上の「row」と下の「row」にすき間を入れてみます、

すき間(margin)の頭文字「m」、これに方向を示す文字を続けます、「t(top:上)」、「b(bottom:下)」、「r(right:右)」、「l(left:左)」、「x(左右)」、「y(上下)」、さらにハイフンでつないですき間量「0〜5」を記述、


とりあえず下の「row」に「mt-5」を入れてみます。

<h1  style="background: blue;">グリッドシステムのテスト</h1>
<div class="container-fluid">
  <div class="row">
    <div class="col" style="background: yellow; height:200px;">コンテンツ1</div>
  </div>
  <div class="row mt-5">
    <div class="col" style="background: red; height:200px;">コンテンツ2</div>
    <div class="col" style="background: green; height:200px;">コンテンツ3</div>
  </div>
</div>


どうなるかな、
f:id:sutokun:20180703214939p:plain
おー、ねらい通り隙間が空きました。

ちなみにすき間量を5より大きくすると、認識せずに隙間がなくなります、

もういっこテストで、次は要素「col」に直接マージンをあててみます、3要素それぞれに「mx-5」「my-5」をあててスカスカにしてみます。

<h1  style="background: blue;">グリッドシステムのテスト</h1>
<div class="container-fluid">
  <div class="row">
    <div class="col mx-5 my-5" style="background: yellow; height:200px;">コンテンツ1</div>
  </div>
  <div class="row">
    <div class="col mx-5 my-5" style="background: red; height:200px;">コンテンツ2</div>
    <div class="col mx-5 my-5" style="background: green; height:200px;">コンテンツ3</div>
  </div>
</div>


ドン!
f:id:sutokun:20180703215906p:plain

おーまじでスカスカの歯抜けw


まあまあこれでだいたいのレイアウトがBootstrapで作れそうです。

次は具体的なコンポーネントについていろいろイジり倒していこうかと思います。