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>