今回はBootstrapとは?についてです。またBootstrapを使うための準備を説明していきます。BootstrapはCSSのフレームワークになります。
Bootstrapはよく使うCSSを、決まったclassを使う事で簡単にデザインをすることができるようになります(画像を丸くしたり等)。同じようなデザインは溢れているので、いちいちCSSを書かなくてもなって効率的です。よく使うコードをまとめたものになります。
またBootstrapはPCやスマホなどで見た時のデザインを整えてくれる機能があります。レシポンシブルデザインの事。

それでは最初にBootstrap学んでいくフォルダを作ります。

次にbootstrap_practice.htmlというファイルを作成します。

!+Tabキーを行い、langをjaに変更します。今回は以前までは消していた5・6行目は消さずにそのままにします。5行目がレシポンシブルデザインを適用するために必要な1行になります。6行目はインターネットエクスプローラーの表記誤差をなくすためのものになります。

タイトルを変えます。

bootstrapで検索して、Bootstrap・The most popular HTML, CSS, and・・・をクリックします。

3系で学んでいるので、4系ではなく3系ですすめていきます。矢印のところをクリック。

ⅴ3.4.1をクリック。

Getting startedをクリック。

囲んだ部分をコピー。

タイトルの上に貼り付け。

囲んでいる部分をコピー。

bodyタグの一番下に貼り付け。

Getting startedの下の方で上記の部分をコピー。

先ほど張り付けた所の上に貼り付け。これでBootstrapを使う準備が整いました。
コメント