Dragon Arrow written by Tatsuya Nakaji, all rights reserved animated-dragon-image-0164

Bootstrap3でサイドバーの作成

イメージ
Jul 30, 2019

Bootstrap3でサイドバーの作成


領域がわかりやすいように黄色と緑の背景をつけています。


基本となるのが、BootstrapのGridSystem(グリッドシステム)。

GridSystemとは、サイトの横幅を12分割してレイアウトするデザイン手法で、「col-{class}-{size}」で幅を表現する。

classには、以下の4種類がある

  • xs - for phones
  • sm - for tablets
  • md - for desktops
  • lg - for larger desktops

今回はsm(for tablets)のclassを使っているので、ウィンドウが768pxを下回った場合にすべてのグリッドがwidth: 100%になる。


丸コピして使ってくれて構わないので、お役に立てれば幸いです!

最後に、

<div class="left_sidebar col-sm-3 hidden-xs">

という1行ですが、hidden-xs の場合、スマホでは非表示にできるbootstrapのクラスです。

hidden-md とか hidden-lg という形でも使えるので、レスポンシブなUIをガンガン作っていきましょう!