レスポンシブデザインBootstrap プログラミング学習 土曜

スマフォのように画面の小さい時は表示項目を折りたたんで少なくし、画面が大きい時は通常通り一覧表示をさせたいということはないでしょうか。

Bootstrapのグリッドシステムを使うと画面サイズに応じて表示される内容を調整することができます。

グリッドシステムを利用するためには、まずcontainerクラスで適用したい範囲全体を囲みます。

<div class="mt-4 container">
略
</div>

更にその下にはrowクラスを追加します。

<div class="mt-4 container">
  <div class="row">
  略
  </div>
</div>

上記の略の中に、グリッドシステムを適用させたい要素を配置します。

この考えが基本です。

今回は、form要素を例に、576px以上の時、左側に名前、右側に入力フォームが並ぶようなコードを作成します。

<div class="container">
  <div class="form-group row">
    <label class="col-sm-3 col-form-label">名前:</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" name="name">
    </div>
  </div>
</div>

コードを確認してみます。

作成イメージは、左側に名前、右側にインプットフォームを配置したものを作ります。

まず、全体をcontainerクラスで囲い、rowクラスも追加しています。

その中に、左右に並べたい要素を配置します。

左側に、名前、右側にインプットフォームを配置しました。

但し、col-sm-3のため、名前は576pxサイズ以上の場合、横幅３つ分を有します。

右側のインプットフォームも同様に、col-sm-9のため、576px以上の際、横幅９つ分を有します。

Bootstrapのグリッドを利用して、画面サイズに応じて表示方法を変えるコードを作成しました。
Bootstrapは、ページの見た目を整えることができ、プログラミングの中では、比較的難易度も低い部類になるようです。

【土曜日】

業務である以上、ある程度定型に沿ったもののであるものの、問い詰め、騒がしさが絶えない職場であれば、疲れの回復に時間を要することもあります。

その分、休日とはいえ、やれることは減るため、別のことをする方が有意義な曜日にもなります。