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をガンガン作っていきましょう！