Upload
tsuyoshi-saito
View
477
Download
0
Embed Size (px)
Citation preview
Bootstrap
所属 :情報システムG
作成者:尾崎智
自己紹介
尾崎智(おざきさとし)
1983/2/14 33歳
情報システムG所属
東京都練馬区出身
趣味– 少年ジャンプ、アウトドア全般、バスケ、ドライブ
最近の心配事– 足の裏が痛い(痛風一歩手前なんじゃないかと思っている)
1
2
今日話すこと
『Bootstrap』
Bootstrapのあれこれ
CSSのフレームワーク
以前は「Twitter Bootstrap」と呼ばれておりTwitter社が開発・提供していた。(開発者が退社したから名前が変わった)
正式リリースバージョン:v3.7.7
(v4はアルファ版の段階)
3
Chrome Firefox Internet
Explorer
Opera Safari
Android ◎ ◎
該当なし
× 該当なし
iOS ◎ 該当なし × ◎
Mac OS X ◎ ◎ ◎ ◎
Windows ◎ ◎ ◎ ◎ ×
4
突然ですが、画面作る時、こんな事になってませんか??
5
自分で作るとデザインがイケてない
6
レスポンシブ対応とかめんどくさい
7
そんな時こそBootstrap!!
8
簡単に機能を紹介!!
9
Point1 グリッドシステム
10 11 121 2 3 5 6 7 8 94 121 2 3 5 6 7 8 94 1110
横幅を12分割して、合計が12になるように表示物を配置していくと、簡単にレスポンシブに出来る!!
3つのクラスから構成されている
10
Point1 グリッドシステム
11
10 11 121 2 3 5 6 7 8 94
containerクラス
rowクラス
colクラス
画面幅は5段階が用意されている
11
Point1 グリッドシステム
11
特大(Extra large)1200px以上
大(large)992px以上1200px未満
中(Medium)768px以上992px未満
小(Small)544px以上768px未満
極小(Extra small)544px未満
colクラスに画面幅に応じたプレフィックスとグリッド数を設定するだけ
12
Point1 グリッドシステム
11
画面幅Extra
smallSmall Medium Large
Extra
Large
プレフィックス xs sm md lg xl
.col- -lg 3
例えば、、、画面幅が大(Large)以上の時にグリッド3つ分のカラムを生成
という感じ
13
Point2整ったレイアウトが簡単に作れる
あらかじめ様々なクラスが用意されており、それを使うだけで、レイアウトの整った画面を作成することが出来る!(例:テーブル、ボタン、フォーム)
14
ぜひBootstrap使ってみてください!
ご清聴ありがとうございました!!