Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[Bootstrap ] 初めてのBootstrap

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

追記:Bootstrap5がリリースされています。基本は同じです。

INDEX

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

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

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

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

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

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

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる