この記事はAizu Advent Calender 2021の１日目の記事です。
##はじめに
最近、Webページを作成しています。レスポンシブなWebサイト作成にBootStrap使ってみました。皆さんにも紹介をしたいと思って今回の記事を書きました。
##BootStraptって？
ナビゲーションバーや、入力フォームなどのクラスが用意されており、クラス名を組み込むだけで、簡単にサイトを作成できる。
また、レスポンシブなサイトを簡単に作れる。
##導入方法
- みんな大好きCDN(下に例があります!!)
- npm,yarnなどのパッケージ
- 他は公式ページ見てね
##Gridシステムとは
- #####12カラムのシステム
下図のように、ウィンドウは12個のカラムで、分割されています。
自分の好みに応じて、カラムの大きさを変えれます。(数字はカラムの数を表している)
- #####6段階のレスポンシブ
6つのデフォルトのブレークポイントが用意されている。
ブレークポイントに応じて、グリッドのレイアウトを変更できる。
ブレークポイントを**sm(576px)**にした、コードはこのようになります
See the Pen Untitled by suzu144 (@mattya144) on CodePen.
#####ブレークポイント576px
#####ブレークポイント768px
##終わりに
BootStrapのグリッドシステムについて、少しは理解できたでしょうか？？
今回初めての記事なので、分かりづらい部分があると思いますが、ご了承ください🙇♀️🙇♀️
##参考資料
BootStrap公式ページ