zoukankan      html  css  js  c++  java
  • 关于bootstrap--导航栏

    1、普通导航:class .nav-tabs

    <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="#">PHP</a></li>
    </ul>

    2、胶囊式导航: class .nav-pills 。

    <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="#">PHP</a></li>
    </ul>

    3、垂直胶囊式导航:class .nav-stacked.nav-pills 。

    <ul class="nav nav-pills nav-stacked">
       <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="#">PHP</a></li>
    </ul>

    4、两端对齐的导航:在屏幕宽度大于 768px 时,通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified,让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上,导航链接会堆叠。

    <div class="col-md-6">
            <p>两端对齐的导航元素</p>
            <ul class="nav nav-pills nav-justified">
               <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="#">PHP</a></li>
            </ul><br><br><br>
    
            <ul class="nav nav-tabs nav-justified">
               <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="#">PHP</a></li>
            </ul>
        </div>

    5、禁用链接:在<li>中添加disabled

    <ul class="nav nav-pills">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">SVN</a></li>
       <li class="disabled"><a href="#">iOS(禁用链接)</a></li>
       <li><a href="#">VB.Net</a></li>
       <li><a href="#">Java</a></li>
       <li><a href="#">PHP</a></li>
    </ul>
  • 相关阅读:
    EyeWitness
    中间件解析漏洞
    反思
    【转载】python的logging模块
    RobotFramework中使用Exit For Loop If退出For循环
    python使用ssl的单向认证和双向认证的客户端代码
    使用iptables监测端口流量
    打开GUI面板通过可视化的形式来创建Vue项目
    C#程序设计: 猫大叫一声,所有的老鼠都开始逃跑,主人被惊醒。
    递归算法
  • 原文地址:https://www.cnblogs.com/shark1100913/p/5645789.html
Copyright © 2011-2022 走看看