Bootstrapの使い方の基礎の基礎 - プログラミング学習ノート

f:id:endoakak:20200727195747j:plain

オリジナルアプリのフロント実装のためにBootstrapと格闘していますが、使えば使うほどフロントの奥の深さに圧倒されています。

それでもごく浅い部分については感覚がつかめてきたので、基本的な使い方を書いてみようと思います。

Bootstrap自体や導入方法についてはこちら。

endoakak.hatenablog.com

グリッドシステム

初めて聞いた言葉だったんですが、画面を格子状に分割したレイアウトのことだそうです。

Bootstrapでは横幅を12分割しているので、かたまり(カラム)の大きさを1~12で指定します。

例えばカラムが3つ並んでいる時、全ての大きさを４に指定すると横幅ぴったりに3つが並び、大きさを６に指定すると2つが横に並び3つ目は２列目に並びます。

このあと例が出てきます。

基本の書き方

基本的にはcontainerの中にrow、その中にcolumnというように配置します。containerという箱を作って、その中に行を積んでいく、そして行の中には列が横に並んでいる、というイメージです。

例えば以下のように記述します。

<div class="container">
  <div class="row bg-info">
    <div class="col-4 border">カラム１</div>
    <div class="col-4 border">カラム２</div>
    <div class="col-4 border">カラム３</div>
  </div>
</div>

するとこのように表示されます。

f:id:endoakak:20200821193248p:plain

bg-infoは背景色を指定するもので、ここではrowに色をつけています。

col-4というのは大きさが4のカラムということです。全体の横幅が12なので、カラムの合計が12より小さければ横に並び、12を越えれば折り返して２列目に並びます。

borderはその要素に枠線をつけています。ここでは各カラムに枠線がついています。

大きさを変えて試してみる

いろいろいじって表示がどのように変わるか試してみます。

カラムをcol-4からcol-6に変える

<div class="container">
  <div class="row bg-info">
    <div class="col-6 border">カラム１</div>
    <div class="col-6 border">カラム２</div>
    <div class="col-6 border">カラム３</div>
  </div>
</div>

f:id:endoakak:20200822090939p:plain

3つ目のカラムが2段目に移動しました。

カラムをcol-10にしてみる

<div class="container">
  <div class="row bg-info">
    <div class="col-10 border">カラム１</div>
    <div class="col-10 border">カラム２</div>
    <div class="col-10 border">カラム３</div>
  </div>
</div>

f:id:endoakak:20200822091117p:plain

縦に3つ並び、左に詰めているので右に余白ができました。

カラムをcol-3にしてみる

<div class="container">
  <div class="row bg-info">
    <div class="col-3 border">カラム１</div>
    <div class="col-3 border">カラム２</div>
    <div class="col-3 border">カラム３</div>
  </div>
</div>

f:id:endoakak:20200822091240p:plain

また1行に3つが並び、左に詰めています。

justify-content

rowのクラスにjustify-contentをつけることで、カラムの横の位置を指定することもできます。

<div class="container">
  <div class="row bg-info justify-content-around">
    <div class="col-3 border">カラム１</div>
    <div class="col-3 border">カラム２</div>
    <div class="col-3 border">カラム３</div>
  </div>
</div>

f:id:endoakak:20200822091626p:plain

間隔を開けて並びました。もちろんjustify-content-centerやjustify-content-betweenなども使うことができます。

rowを重ねる

rowを重ねると、新しい行を作ることができます。

<div class="container">
  <div class="row bg-info justify-content-around">
    <div class="col-3 border">カラム１</div>
    <div class="col-3 border">カラム２</div>
    <div class="col-3 border">カラム３</div>
  </div>
  <div class="row bg-info">
    <div class="col-4 border">カラム４</div>
    <div class="col-4 border">カラム５</div>
    <div class="col-4 border">カラム６</div>
  </div>
</div>