Bootstrapを使ってみる。導入編


Bootstrapを使ってみよう。導入編

CSSフレームワーク!よく耳にするので触れてみよう!
レスポンシブサイトが簡単に作れるというところ・用意されているスタイルを適用するだけで、簡単に速く見栄え良くできるところがとても良さそう。
「Bootstrap」「Foundation」「UIkit」「Webplate」などがありますが、追加プラグイン・コンポーネントが多く公開されていること、基本単位が「px」であること、情報量の多さからBootstrapを使ってみたいと思う。

Bootstrap

「Bootstrap」- 元々はTwitter社が自社内で利用するためのスタイルガイドとして用意されたもので、2011年より「Twitter Bootstrap」として、現在は「Bootstrap」へと変わる。
2015/04/15日、現時点での最新バージョンは3.3.4となっている。
バージョン4へのリリース予定もあり(4以降ではIE8は非対応になる予定)

*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Bootstrapのダウンロードと初期設定

まずはBootstrapをリンク先よりダウンロード。
記事作成時のバージョンはbootstrap-3.3.4
http://getbootstrap.com/
「Download Bootstrap」ボタンをクリック。
Bootstrap


Bootstrapの「Download Bootstrap」をクリックしてダウンロード!


Bootstrap


ダウンロードしたbootstrap-3.3.4-dist.zipを展開。
展開すると「css」「fonts」「js」フォルダが出来ているので、テキストなどを新規作成して名前変更などで「index.html」作成する。

bootstrap3


Bootstrapのダウンロードページを下にスクロールして
Basic templateの箇所のHTMLコードをコピーする。


Bootstrap


これはBootstrapがすぐに使えるように用意されたHTMLコードで、先に作ったindex.htmlをエディタやメモ帳などで開きペースト。
ペーストしたらタグ内html lang=”en”をhtml lang=”ja”に変更しておく。
それからTitleも変更しよう。
また、今回は不要なコメントを削除した。
変更したら保存。
保存する時はutf-8で保存するようにする。
(メモ帳であれば、名前を付けて保存で文字コードをutf-8を選択して保存)



ブラウザで開いてみると「Hello,World!」の画面が表示される。
Bootstrap


今回のデモ画面を表示

これでBootstrapを使う準備が整う。
続きはナビゲーションをやってみよう。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL