[Bootstrap 4] 初めてのBootstrap

Bootstrap

レスポンシブでサイトを作る時にとっても便利なBootstrap。基本的な事だけ覚えれば、初心者でも何だか良く分かっていなくても、形になる便利なフレームワークです。何だかBootstrap4は盛り上がっていないような・・・3で作ってしまったサイトを4にするのはとても面倒なので、盛り上がっていないのかな?

考え方:グリットシステムについて

Bootstrapは12グリットで構成されています。1カラムに何グリット使うかを調節し、構築してゆきます。

  • 1カラムにしたい場合は 12×1(カラム数)=12
  • 2カラムにしたい場合は 6×2(カラム数)=12
  • 3カラムにしたい場合は 4×3(カラム数)=12
  • 4カラムにしたい場合は 3×4(カラム数)=12

複雑な事もできます。
3カラムにしたい。でも中央だけ大きくしたい場合 3+6+3=12 でもOK。とにかく合計を12グリットにすれば良いのです。

これを見ればイメージが分かると思います。Bootstrap公式ページ グリットについて

考え方:グリットを納めるclassについて

Bootstrapの基本の12のグリットを納めるclassは3種。外側から.container/.row/.col

     
.container container(容器)コンテナの横幅を保ちます。PCからスマホまで変化する横幅を.containerで制御します。これが無いと、画面の幅いっぱいに広がります。
.row row(列)その名のとおり、横の列を保ちます。
.col カラムです。12グリットをどう分割するか設定します。

グリットオプションについて

.colをデバイス毎に設定する事ができます。小さなデバイスでは2カラム、大きなデバイスでは4カラムなど、使い分ける事が出来る様になります。.col-sm-3とか・・・

グリットオプションについての詳細

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください