Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20161125 尾崎 bootstrap

569 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

20161125 尾崎 bootstrap

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

×