Bootstrapを使ってみよう!

2014/03/18

こんにちは。
今回はBootstrap3.0を使ってみたいと思います。

 

Bootstrapとは

CSSフレームワークを使って一からサイトを作るより、簡単に作る事ができるサービスです。
決まったクラス名を付けるだけでかっこいいボタンやプルダウンメニュー等を実装できます。
又、レスポンシブにも対応してますので、是非マスターする事をオススメします。

 

公式サイト

bootstrap

bootstrap

http://getbootstrap.com/

 

準備

まずは公式サイトからダウンロードします。
公式サイトのgetting-startedのページの「Download Bootstrap」のボタンをクリックしてダウンロードします。

bootstrap1

 

ダウンロードしたZIPファイルを展開します。

bootstrap2

 

ダウンロードしたファイルにindex.htmlを作ります。

bootstrap3

 

先程作ったindex.htmlにBootstrapのサイトのテンプレートをコピーして貼付けます。
公式サイトのgetting-startedのページの「Basic template」のソースをコピーします。

bootstrap4

 

index.htmlにペーストします。

bootstrap5

 

先程コピーしたテンプレートは日本語に対応してませんので、対応させます。
index.htmlの

に変更します。

bootstrap6

 

実際に使って見よう!

下記のコードをコピーしてindex.htmlにペーストします。

 

ブラウザで見てみると下記のような表示になると思います。

bootstrap7

 

ソースを見てみるとクラス名をつけるだけでボタンのデザインが変更できます。
他にもたくさんありますので、公式サイトのcssのページを見て確認しましょう!

 

以上でBootstrapを使ってみよう!でした。

topへ戻る