zoukankan      html  css  js  c++  java
  • Bootstrap基础5(各类型导航)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Bootstrap导航</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.js"> </script>
    <script src="js/bootstrap.js"></script>
    </head>
    </head>
    <body>
    <div class="container">
    <h2 class="page-header">标签页导航</h2>
    <ul class="nav nav-tabs">
    <li class="active"><a href="">守望先锋</a></li>
    <li ><a href="">虚幻争霸</a></li>
    <li ><a href="">神之浩劫</a></li>
    <li ><a href="">枪火游侠</a></li>
    </ul>
    </div>
    <h3 class="page-header">胶囊式导航</h3>
    <ul class="nav nav-pills">
    <li class="active"><a href="">守望先锋</a></li>
    <li ><a href="">虚幻争霸</a></li>
    <li ><a href="">神之浩劫</a></li>
    <li ><a href="">枪火游侠</a></li>
    </ul>


    <h3 class="page-header">胶囊式垂直导航</h3>
    <ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="">守望先锋</a></li>
    <li ><a href="">虚幻争霸</a></li>
    <li ><a href="">神之浩劫</a></li>
    <li ><a href="">枪火游侠</a></li>
    </ul>
    <h3 class="page-header">胶囊式自适应导航</h3>
    <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="">守望先锋</a></li>
    <li ><a href="">虚幻争霸</a></li>
    <li ><a href="">神之浩劫</a></li>
    <li ><a href="">枪火游侠</a></li>
    </ul>
    <h3 class="page-header">多级下拉菜单导航(二级导航)</h3>
    <ul class="nav nav-pills nav-justified"> <!--胶囊导航-->
    <li class="active"><a href="">虚幻争霸</a></li>
    <li ><a href="#" class="dropdown-toggle" data-toggle="dropdown">守望先锋<span class="caret"></span></a>
    <ul class="dropdown-menu nav-justified"> <!--隐藏的下拉菜单-->
    <li><a href="#">网易游戏</a></li>
    <li><a href="#">腾讯游戏</a></li>
    <li><a href="#">畅游在线</a></li>
    <li><a href="#">世纪天成</a></li>
    </ul>
    </li>
    <li ><a href="">神之浩劫</a></li>
    <li ><a href="">枪火游侠</a></li>
    </ul>
    </div>

    </body>
    </html>
  • 相关阅读:
    Css时间轴布局_Css时间轴布局案例整理
    Java Efficient data transfer through zero copy
    Interviewing at Amazon — Leadership Principles
    【转】golang 锁使用---里面的读写锁解析
    【转】MySQL GRANT:用户授权
    【转】mysql处理高并发,防止库存超卖
    [转]Character encoding for commit messages
    【转】git tag的用法
    【转】断网后VirtualBox连接不上问题解决
    【转】sql基础left join, inner join, full join , right join 的理解
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6892060.html
Copyright © 2011-2022 走看看