Bootstrap ナビゲーション(Navbar)
基本
<nav class="navbar navbar-default">
 ヘッダー部分
 <div class="navbar-header">
  <button type="button"
   スマホ時ã€ã€Œã‚¹ãƒžãƒ›æ™‚ã®è¡¨ç¤ºéƒ¨åˆ†ã€ã‚’表示ã•ã›ã‚‹
   class="navbar-toggle"
   data-toggle="collapse"
   ヘッダー部ã¨ãƒ¡ã‚¤ãƒ³éƒ¨åˆ†ã‚’対応ã•ã›ã‚‹
   data-target="#mynavi">
   スマホ時ã®è¡¨ç¤ºéƒ¨åˆ†(ãƒãƒ³ãƒãƒ¼ã‚¬ãƒ¼ãƒœã‚¿ãƒ³)
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 メイン部分
 <div
  id="mynavi"
  class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>
</nav>
メニューå
<nav class="navbar navbar-default">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <a href="#" class="navbar-brand">æ ªå¼ä¼šç¤¾ç±³è‰¯å¤ªäº‹å‹™æ‰€</a>
 </div>
 <div id="mynavi" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>
</nav>
サブメニュー
<nav class="navbar navbar-default">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi5">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 <div id="mynavi5" class="collapse navbar-collapse">
  <ul class="nav navbar-nav" style="margin: 0 auto;">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
   <li class="dropdown">
    <a href="#"
     class="dropdown-toggle"
     data-toggle="dropdown"
     role="button"
     aria-haspopup="true"
     aria-expanded="false">サブメニュー <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#">サブメニュー1</a></li>
     <li><a href="#">サブメニュー2</a></li>
     <li><a href="#">サブメニュー3</a></li>
     <li role="separator" class="divider"></li>
     <li><a href="#">サブメニュー4</a></li>
    </ul>
   </li>
  </ul>
 </div>
</nav>
ä»–è¨å®š
<nav class="navbar
 白メニュー
 navbar-default
 黒メニュー
 navbar-inverse
 上部固定
 navbar-fixed-top
 下部固定
 navbar-fixed-bottom
 ">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 <div id="mynavi" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>
</nav>
ä¸å¤®å¯„ã›
<nav class="navbar navbar-default">
 <div class="navbar-header">
  <button type="button"
   class="navbar-toggle"
   data-toggle="collapse"
   data-target="#mynavi">
   <span class="sr-only">メニュー</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
 </div>
 <div id="mynavi" class="collapse navbar-collapse">
  <ul class="nav navbar-nav mycenter">
   <li class="active"><a href="#">メニュー1</a></li>
   <li><a href="#">メニュー2</a></li>
  </ul>
 </div>
</nav>
<style>
 @media (min-width: 768px){
  .mycenter {
    margin: 0 auto;
    display: table;
    table-layout: fixed;
    float:none;
  }
 } 
</style>