MENU

【スキルハックス】Bootstrapってなに?使うまでの準備をする!

今回は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を使う準備が整いました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次
閉じる