2016年11月25日 メディアフォース社内LT大会資料の代理アップロード presenter by ozaki

1. Bootstrap
所属 ：情報システムG
作成者：尾崎智

2. 自己紹介
 尾崎 智（おざきさとし）
 1983/2/14 33歳
 情報システムG所属
 東京都練馬区出身
 趣味
– 少年ジャンプ、アウトドア全般、バスケ、ドライブ
 最近の心配事
– 足の裏が痛い（痛風一歩手前なんじゃないかと思っている）
1

3. 2
今日話すこと
『Bootstrap』

4. Bootstrapのあれこれ
 CSSのフレームワーク
 以前は「Twitter Bootstrap」と呼ばれており
Twitter社が開発・提供していた。
（開発者が退社したから名前が変わった）
 正式リリースバージョン：v3.7.7
（v4はアルファ版の段階）
3
Chrome Firefox Internet
Explorer
Opera Safari
Android ◎ ◎
該当なし
× 該当なし
iOS ◎ 該当なし × ◎
Mac OS X ◎ ◎ ◎ ◎
Windows ◎ ◎ ◎ ◎ ×

5. 4
突然ですが、
画面作る時、こんな事になってませんか？？

6. 5
自分で作るとデザインがイケてない

7. 6
レスポンシブ対応とかめんどくさい

8. 7
そんな時こそBootstrap！！

9. 8
簡単に機能を紹介！！

10. 9
Point１ グリッドシステム
10 11 121 2 3 5 6 7 8 94 121 2 3 5 6 7 8 94 1110
 横幅を12分割して、合計が12になるように表示
物を配置していくと、簡単にレスポンシブに出
来る！！

11.  ３つのクラスから構成されている
10
Point１ グリッドシステム
11
10 11 121 2 3 5 6 7 8 94
containerクラス
rowクラス
colクラス

12.  画面幅は5段階が用意されている
11
Point１ グリッドシステム
11
特大（Extra large）
1200px以上
大（large）
992px以上1200px未満
中（Medium）
768px以上992px未満
小（Small）
544px以上768px未満
極小（Extra small）
544px未満

13.  colクラスに画面幅に応じたプレフィックスとグ
リッド数を設定するだけ
12
Point１ グリッドシステム
11
画面幅
Extra
small
Small Medium Large
Extra
Large
プレフィックス xs sm md lg xl
.col- -lg 3
例えば、、、
画面幅が大（Large）以上の時にグリッド３つ分のカラムを生成
という感じ

14. 13
Point２ 整ったレイアウトが簡単に作れる
 あらかじめ様々なクラスが用意されており、そ
れを使うだけで、レイアウトの整った画面を作
成することが出来る！
（例：テーブル、ボタン、フォーム）

15. 14
ぜひBootstrap使ってみてください！
ご清聴ありがとうございました！！