Bootstrap-导航菜单-2018.07.07

Bootstrap-导航菜单 nav

<ul class="nav nav- ?">
    <li class=""  >
    </li>
</ul>

标签式导航

<ul class=nav nav-tabs>
</ul>

胶囊式导航

<ul class=nav nav-pills>
</ul>

垂直胶囊式导航

<ul class=nav nav-pills nav-stacked>
</ul>

两端对齐导航

<ul class=nav nav-pills nav-justified>
</ul>

导航元素下拉菜单

<ul class="nav nav-tabs">
    <li class="dropdown">
           <a class="dropdown-taggle" data-toggle="dropdown" href="#">输入文字<span class="caret"></span> </a>
             <ul class="dropdown-menu">
                    <li> 输入菜单</li>
                    <li> 输入菜单</li>
            </ul>
      </li>
</ul>

        <div style="width:100%; background-color: gray; float: left;">
<ul class="nav nav-pills" style="background-color: white">
    <li class="active"><a href="#">主页</a></li>
    <li><a href="#">第一部分</a></li>
    <li><a href="#">第二部分</a></li>
    <li><a href="#">第三部分</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
       第四部分 <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">第一</a></li>
        <li><a href="#">第二</a></li>
        <li><a href="#">第三</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
      </ul>
    </li>
    <li><a href="#">第五部分</a></li>
    <li><a href="#">第六部分</a></li>
    <li><a href="#">第七部分</a></li>
    <li><a href="#">第八部分</a></li>
     <li><a href="#">第九部分</a></li>
      <li><a href="#">第十部分</a></li>
 </ul>          
            
</div>