Toggle navigation
Brand
Home
Link
Dropdown
Page1
Page2
Page3
Page4
Page5
Bootstrap
Top Nav
(White Nav)
Close
CSSのスタイルによっては、白以外の色になる場合があります。
body部html Source ソースの上で右クリックしてコピーしてください。「雛形.html」の<body>の1行下に貼り付けます。
<!-- Nav Bar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Top Page"><i class="icon-home3"></i>Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-link"></span>Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span>Page1</a></li> <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span>Page2</a></li> <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span>Page3</a></li> <li class="divider"></li> <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span>Page4</a></li> <li><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span>Page5</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://getbootstrap.com/" target="_blank" data-toggle="tooltip" data-placement="left" title="オフィシャルサイト" ><span class="glyphicon glyphicon-bookmark"></span>Bootstrap</a></li> </ul> </div> </div> </nav> <!-- Nav Bar --> <div class="container" style="padding-top:50px;"> <h1>Page Title</h1> </div>