bootstrap dashboard-layout 2
次はサイドのメニュー
<div class="container-fluid"> <div class="row"> <!-- サイドメニュー --> <div class="col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> <!-- メイン --> <div class="col-md-10"> </div> </div> </div>
.sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #f5f5f5; border-right: 1px solid #eee; } .nav-sidebar { margin-right: -21px; margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > a { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; }
サイドバーはデフォルトのクラスやスタイルが用意されているわけではないのでul, li を自分でスタイリングする。
次からはAngularJS2を組み合わせていく