Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その11 サイドメニュー

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その10 グリッドシステム

基本は概ね抑えました。
今回は左側にサイドメニューを作ってみます。

こちらを参考にしました。
http://www.sakc.jp/blog/archives/32683



サイドメニュー



基本的な使い方はわかってきたのですが、いざサイドバーをつくろうと思ったら
どうやったらいいかさっぱりわからない。

http://www.sakc.jp/blog/archives/32683
こちらをみて、なるほどグリッドシステムを使うのかと。


グリッドシステムはここで勉強しました。
プログラマのためのBootstrap入門 その10 グリッドシステム

列を12分割して、いい感じで使うのでした。
これを応用して、
・サイドメニュー分のスペースを4
・残りの8をコンテンツ表示部分に使う。

こういう感じでレイアウトすればいいわけです。


メニューの作り方は
プログラマのためのBootstrap入門 その5 タブ
ここの「タブを縦並びで表示」

パネルの表示方法は
プログラマのためのBootstrap入門 その9 パネルとWells
ここで学びました。

超簡単なサンプルはこんな感じ。

444_01.png


  1. <!DOCTYPE html> <html lang="ja">
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>Bootstrap</title>
  7.     <!-- Bootstrap -->
  8.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  9. </head>
  10. <body>
  11.     <div class="container">
  12.      <div class="row">
  13.         
  14.         <!-- 4列をサイドメニューに割り当て -->
  15.         <div class="col-xs-4">
  16.          <ul class="nav nav-pills nav-stacked">
  17.             <li class="active"><a href="#">ダッシュボード</a></li>
  18.             <li><a href="#">サーバー1</a></li>
  19.             <li><a href="#">サーバー2</a></li>
  20.             <li><a href="#">サーバー3</a></li>
  21.          </ul>
  22.         </div>
  23.         
  24.         
  25.         <!-- 残り8列はコンテンツ表示部分として使う -->
  26.         <div class="col-xs-8">
  27.          <div class="panel panel-info">
  28.             <div class="panel-heading">
  29.              <div class="panel-title">sv-01</div>
  30.             </div>
  31.             <div class="panel-body">サーバー1のステータスOK</div>
  32.          </div>
  33.         
  34.          <div class="panel panel-info">
  35.             <div class="panel-heading">
  36.              <div class="panel-title">sv-02</div>
  37.             </div>
  38.             <div class="panel-body">サーバー2のステータスOK</div>
  39.          </div>
  40.         
  41.          <div class="panel panel-info">
  42.             <div class="panel-heading">
  43.              <div class="panel-title">sv-03</div>
  44.             </div>
  45.             <div class="panel-body">サーバー3のステータスOK</div>
  46.          </div>
  47.         </div>
  48.      </div>
  49.     </div>
  50.     
  51.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  52.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  53. </body>
  54. </html>



徐々にやりたいことができてきました。
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/08/03(日) 22:26:03|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<PHPフレームワーク「Laravel」をDebian 7 + nginx + php-fpmで動作させる | ホーム | プログラマのためのBootstrap入門 その10 グリッドシステム>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1457-10ed8c3f
この記事にトラックバックする(FC2ブログユーザー)