Bootstrap3.3.7の使い方

1. 1
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap
０からHTMLを書いてかっこいいサイトを作るのは
なかなか大変です。
そこで、Bootstrapというテンプレート集の様なものを
用いて、簡単にかっこいいサイトを作ってみましょう。

2. 2
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(1/9)
 Bootstrapとは・・・
- かっこいいサイトを簡単に作れるテンプレート集のようなもの
本当はテンプレート集ではなくCSSフレームワークという

3. 3
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(2/9)
 Bootstrapの使い方(version 3.3.7時点 2018/4/1)
- Step1:Download Sourceから開発キッドを
ダウンロードする
- Step2:ダウンロードしたbootstrap-3.3.7.zipを
ダブルクリックする（Zipとは圧縮という意味）
bootstrap-3.3.7フォルダが作成される
これをクリック

4. 4
Copyright (c) HEART QUAKE All rights reserved .
Windowsの方へ
- Windowsの人限定！
- Step1. Zipファイルがデスクトップにできる
zipとは圧縮されているファイルであり、
解凍しないと使えない
- Step2. ダブルクリックするとフォルダが
- 表示される
- Step3. フォルダをデスクトップに
- 移動する
zipファイル
解凍後の
フォルダ
補足

5. 5
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(3/9)
- Step3:
- docs > examples > carousel > index.html をダブルクリックする

6. 6
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(4/9)
- Step4:以下の様なサイトが表示されたらOKです
Bootstrapとはこのようなかっこいいページが
簡単に作れるテンプレート集なのです。
- 他のテンプレートも見てみましょう。

7. 7
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(5/9)
- Step5: index.htmlを右クリックでSublime Text2で開いてみま
しょう。
Windowsの方は「プログラムから開く」でSublimeを選択し
ましょう。
上手く出来なかった人はSublime Text2の左上の
- File > Open から開いてみましょう。

8. 8
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(6/9)
- Step6: 下のサイトの Example headline. という文字を
変えてみましょう
- Step7: 90行目の Example headline.の文字を
「◯◯のページへようこそ」にしてみましょう。
h1タグを使っているので文字が大きかったんですね

9. 9
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(7/9)
- Step8: 変更できたら上書き保存してみましょう。
- Step9: index.htmlを
ダブルクリックすると
変更が反映されています。

10. 10
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(8/9)
- Step10: 続いて、「Sign up Today」ボタンの色を
変えてみましょう
- Step11: Bootstrapのサイトで色の変え方を見てみましょう。
CSSタブのButtonsのページをみてみましょう。
btn-primaryと書くと青、btn-dangerなら赤になるようです

11. 11
Copyright (c) HEART QUAKE All rights reserved .
Bootstrap(9/9)
- Step12: 91行目のbtn-primaryの部分を赤くなるように変更して
みましょう。（上書き保存するのを忘れずに！）
- Step13: index.htmlをダブルクリックすると
変更が反映されています。
btn-lgと書くとボタンのサイズを大きくしてくれる
http://getbootstrap.com/css/#buttons-sizes
ここを修正

12. 12
Copyright (c) HEART QUAKE All rights reserved .
Bootstrapをアップロードする(1/2)
- Bootstrapをアップロードするには
docsフォルダの中の、assets、dist、examples
の3つのフォルダをフォルダごとアップロードする
必要があります。

13. 13
Copyright (c) HEART QUAKE All rights reserved .
Bootstrapをアップロードする(2/2)
- 動作を確認しましょう
マイフォルダから examples > carousel を開くと
以下の様なサイトが表示されました

14. 14
Copyright (c) HEART QUAKE All rights reserved .
お疲れ様でした！！