初めてBootstrapを使う際に確認するサイト
ブログやECサイトなどを作るときに、
cssが設定された状態であるBootstrapは大変便利です。
classを任意のものにすれば、デザインも幅も自由自在なので
手っ取り早くサイトを作りたい、
フロントデザインよりバックエンドやフロントエンドの開発を
作り込みたい人にはオススメでしょう。
今回はそんなBootstrap使い始めの人に対してBootstrapのサイトの見方を紹介します。
Bootstrapのホーム
https://getbootstrap.com/
getstartedでhtmlコードをコピペするだけでBootstrapが導入可能なページへ、
downloadでbootstrapを構成しているファイルをDLすることができ、自分で好きなように変えられます。
初心者はgetstartに乗っているcssやjsを当てられるurlを使用する事をオススメします。
Bootstrapのパーツ
https://hackerthemes.com/bootstrap-cheatsheet/#text-info
このチートシートを見る事で、
navvarやcontainerやbadgesなどclassが当たったパーツが一まとまりになっています。
極論これらを組み合わせる事で好きにサイトを作ることが出来るのでコピペしながら遊んで覚えましょう。
Bootstrapで出来るサイトの例
https://getbootstrap.com/docs/4.4/examples/
blogやshoppingなど目的に合わせたサイトがまとまっています。
自分の目的に合わせたサイトのhtmlをみながら学ぶと効率が良さそうです。
Bootstrapで使えるicon
https://icons.getbootstrap.com/
iconもBootstrapにはあります。
好きなアイコンを使ってみやすいサイトを心がけましょう。
BootstrapのGrid
https://getbootstrap.com/docs/4.4/layout/grid/
Bootstrapでは有名なGridシステムがまとめられています。
簡単に言うと、横幅を12分割で考えるのがBootstrapです。
それらのうち幾つをcontainerに割り当てるかなどで占有面積を導き出すことができます。
Bootstrapはまず使ってみるべし
htmlやcssの知識がつきづらいBootstrapですが、
目的に合わせるのであればサクサク作れて良いと思います。
初心者ほどまずは触って抵抗をなくすことも大事かと思います。