Bootstrap-05-插件——导航

导航

使用下拉和按钮组合可以制作导航

• 基本样式：.nav 与nav-tab、nav-pills组合制作导航
• 分类：
  • 标签型（nav-tab）导航
  • 胶囊型（nav-pills）导航
  • 堆栈（nav-stacked）导航
  • 自适应（nav-justified）导航
  • 面包屑（breadcrumb）导航，单独使用，不与nav一起使用，主要作用：提醒用户当前位置
• 状态：
  • 选中状态 active样式
  • 禁用状态：disable
• 二级菜单

演示

    <p class="lead">标签式的导航菜单</p>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB.NET</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">PYTHON</a></li>
    </ul>
    <br>
    <p class="lead">胶囊式的导航菜单</p>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB.NET</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">PYTHON</a></li>
    </ul>
    <br>
    <p class="lead">面包屑式的导航菜单</p>
    <ul class="breadcrumb">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">SVN</a></li>
        <li><a href="#">IOS</a></li>
        <li><a href="#">VB.NET</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">PYTHON</a></li>
    </ul>   
    <!-- 
        分页导航
            页码导航: ul+pagination/[pagination-lg|pagination-sm]
            翻页导航: ul+pager
     -->

    <br>
    <p class="lead">分页导航</p>
    <ul class="pagination">
        <li ><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">&raquo</a></li>
    </ul>   
    <br>
    <p class="lead">翻页导航</p>
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>
    </ul>