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

Point１ グリッドシステム

10 11 121 2 3 5 6 7 8 94 121 2 3 5 6 7 8 94 1110

横幅を12分割して、合計が12になるように表示物を配置していくと、簡単にレスポンシブに出来る！！

３つのクラスから構成されている

10

Point１ グリッドシステム

11

10 11 121 2 3 5 6 7 8 94

containerクラス

rowクラス

colクラス

画面幅は5段階が用意されている

11

Point１ グリッドシステム

11

特大（Extra large）1200px以上

大（large）992px以上1200px未満

中（Medium）768px以上992px未満

小（Small）544px以上768px未満

極小（Extra small）544px未満

colクラスに画面幅に応じたプレフィックスとグリッド数を設定するだけ

12

Point１ グリッドシステム

11

画面幅Extra

smallSmall Medium Large

Extra

Large

プレフィックス xs sm md lg xl

.col- -lg 3

例えば、、、画面幅が大（Large）以上の時にグリッド３つ分のカラムを生成

という感じ

13

Point２整ったレイアウトが簡単に作れる

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

14

ぜひBootstrap使ってみてください！

ご清聴ありがとうございました！！