Html5 fun@Tokyo Bootstrap Tips
•Als PPTX, PDF herunterladen•
6 gefällt mir•2,682 views
HTML5 fun第１回目で使用したスライドになります。 Bootstrapのティップスをデモを元に紹介していいます。 デモで使用したソースは、Githubに公開しています（https://github.com/abechiyo/Bootstrap-tips）
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Html5 fun@Tokyo Bootstrap Tips
Ähnlich wie Html5 fun@Tokyo Bootstrap Tips (20)
Mehr von Masayuki Abe
Mehr von Masayuki Abe (16)
Html5 fun@Tokyo Bootstrap Tips
- 2. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ●日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち 阿部 正幸（あべ まさゆき） ディレクタープログラマー プ ロ マ ネ Evangelist
- 9. が注目される理由
- 11. 2011年スマートフォン出荷台数 参照元：http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011 4億 8千万台 Smart Phones 2億 3千万台 Note Books Desktops 1億 1千万台 Pads 6千万台
- 12. 2011年スマートフォン出荷台数 参照元：http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011 4億 8千万台 Smart Phones 2億 3千万台 Note Books Desktops 1億 1千万台 Pads 6千万台 Smart Phoneが、パソコンとタブレットの 出荷台数を上回った
- 15. ITが手元にある時代に
- 18. to C サイトでは50%を越える CPIサイトの場合(2014年3月) PC : 75.3% mobile : 22% tablet : 2.7%
- 20. スマートデバイス向けサイトが必要
- 22. RWDサイトが必要
- 23. その２ ● さくっと構築できる ● なんとなくお洒落になる ● 情報量が多い
- 24. 番外編 ● オレオレで構築し丸投げ・・・ ● え、なんか崩れ (ry ● 検証したのかよ このようなことが軽減できる
- 27. 使い方 1. Bootstrap ダウンロード 2. CSS、JS のパス通す 3. コピペと微調整の繰り返し
- 29. 1. 「http://getbootstrap.com/getting-started/」 Bootstrap ダウンロード 2. 圧縮フォルダを解凍する 3. [js]、[css]、[fonts]フォルダを主に使用する
- 30. パスを通す 1. Basic templateから、ソースをコピー 2. 数カ所変更する <html lang="en"> ↓↓↓ <html lang="ja"> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> ↓↓↓ <link href="./css/bootstrap.min.css" rel="stylesheet"> <script src="../../dist/js/bootstrap.min.js"></script> ↓↓↓ <script src="./js/bootstrap.min.js"></script>
- 31. Tips
- 32. Grid System
- 33. Grid System xs (phones) sm (tablets) md (desktops) lg (larger desktops)
- 34. Grid System Push and Pull <div class="row"> <h3>push and pull</h3> <div class="col-md-9 col-md-push-3 c1”>最初のカラム</div> <div class="col-md-3 col-md-pull-9 c2”>2番目のカラム</div> </div> ( push )右に移動
- 35. Grid System clearing <div class="row"> <div class="col-xs-6 col-sm-3">1 Column <br /> </div> <div class="col-xs-6 col-sm-3">2 Column</div> <!-- Add the extra clearfix for only the required viewport--> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3"> 3 Column</div> <div class="col-xs-6 col-sm-3”>4 Column</div> </div>
- 36. Grid System Offset <div class="row"> <div class="col-sm-5 col-md-6">1 Column</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">2 Column</div> </div>
- 37. Container width and Row width xs (phones) ： Container：auto row：-15px sm (tablets)： Container：750px row：765px(-15px) md (desktops)：Container：970px row：985px(-15px) lg (larger desktops)：1170px row：1185px(-15px)
- 38. Navbar
- 39. Navbar on Mouse Hover @media only screen and (min-width : 768px) { /* Make Navigation Toggle on Desktop Hover */ .dropdown:hover .dropdown-menu { display: block; } } $('.dropdown-toggle').click(function() { var location = $(this).attr('href'); window.location.href = location; return false; });
- 42. Navbar Centering .navbar .navbar-inner {padding: 0;} .navbar .nav { margin: 0; display: table; width: 100%; } .navbar .nav li { display: table-cell; float: none; } .navbar .nav li a { text-align: center; border-left: 1px solid rgba(255, 255, 255, .75); border-right: 1px solid rgba(0, 0, 0, .1);} .navbar .nav li:last-child a { border-right: 0; border-radius: 0 3px 3px 0; }
- 43. /* Extra Small Devices, Phones */ @media only screen and (max-width : 767px) { … } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { … } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { … } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { … } 細かい微調整
- 46. Image Class
- 47. Retina Image .imgretina{ background-image: url(./abe-1x.png); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .imgretina{ background-image: url(./abe-2x.png); background-size: 100px 100px; } }}
- 49. 画面幅いっぱいに画像
- 51. さいごに