0
Help us understand the problem. What are the problem?

posted at

updated at

BoootStrap のGridシステムについて

この記事はAizu Advent Calender 2021の1日目の記事です。

はじめに

最近、Webページを作成しています。レスポンシブなWebサイト作成にBootStrap使ってみました。皆さんにも紹介をしたいと思って今回の記事を書きました。

BootStraptって?

ナビゲーションバーや、入力フォームなどのクラスが用意されており、クラス名を組み込むだけで、簡単にサイトを作成できる。
また、レスポンシブなサイトを簡単に作れる。

導入方法

  • みんな大好きCDN(下に例があります!!)
  • npm,yarnなどのパッケージ
  • 他は公式ページ見てね

BootStrapダウンロードはここから

Gridシステムとは

  • 12カラムのシステム

    下図のように、ウィンドウは12個のカラムで、分割されています。
    col-12.png
    自分の好みに応じて、カラムの大きさを変えれます。(数字はカラムの数を表している)
    col-12-width

  • 6段階のレスポンシブ

    6つのデフォルトのブレークポイントが用意されている。
    ブレークポイントに応じて、グリッドのレイアウトを変更できる。
    breakPoint.png

ブレークポイントをsm(576px)にした、コードはこのようになります

See the Pen Untitled by suzu144 (@mattya144) on CodePen.

ブレークポイント576px

576.png

ブレークポイント768px

768px.png

終わりに

BootStrapのグリッドシステムについて、少しは理解できたでしょうか??
今回初めての記事なので、分かりづらい部分があると思いますが、ご了承ください🙇‍♀️🙇‍♀️

参考資料

BootStrap公式ページ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?