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>
