見出し画像

今日の学習:Boostrapについて

Bootstrapとは

便利なパーツ(HTML/CSS/JavaScriptファイルまたはコード)が沢山用意されており、指定のクラスを記述するだけで様々な表現ができる。

グリッドシステム

画面を12カラムに分割して、管理するシステム。
画面幅に合わせてグリッドの配置を変えることでどんなデバイスでも綺麗に見せてくれます。

ちなみにPCの場合はコンテンツが横並びになりますが、スマホで見た場合にはコンテンツが縦並びになります。

コンテンツをコンテナで囲み、コンテナに class="row"を記述します。
コンテンツには、class="col-ブレークポイント-カラム数"を記述します。

ブレークポイントについては割愛します。

また、横並びで複数のコンテンツを並べて配置したいという時があるかと思います。そのような時は、横一列(rowの中)で合計が12カラムとなるように指定しなければなりません。

軽くですが今日のコーディングの学びでした。
colとrowで横並びで表現できるぞと聞いたものの記述しても横並びにならず悩んでいたのですが、Boostrapというものがあるのですね。
初めて知りました。勉強することたくさんあるなあ、、
なにから手を付ければいいのかわからなくなってきますが、基礎の部分を学びながら新しい表現を聞いた際に調べてやってみる、ということをコツコツ続けていこうと思います。

参考サイト:


この記事が気に入ったらサポートをしてみませんか?