zoukankan      html  css  js  c++  java
  • Bootstrap导航条学习使用(一)

    本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下

    navbar: 导航条的基础样式
    nav navbar-nav :导航条里菜单的的固定样式组合的class
    navbar-default :导航条的默认样式
    navbar-inverse:黑色的导航条
    navbar-static-top:直角导航
    navbar-fixed-top:导航条固定在最上边
    navbar-fixed-bottom :导航条固定在最下边,不会随滚动条的移动而移动

    具体代码:

     1 <!doctype html>
     2 <html>
     3 <head>
     4  <meta charset="utf-8">
     5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6  <meta name="viewport" content="width=device-width, initial-scale=1">
     7  <title>Bootstrap</title>
     8  <link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" />
     9 </head>
    10 <body>
    11  <div class="container">
    12  <nav class="navbar navbar-default"><!--默认的导航条-->
    13   <ul class="nav navbar-nav">
    14   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
    15   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
    16   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
    17   </ul>
    18  </nav>
    19  <nav class="navbar navbar-inverse"><!--黑色的导航条-->
    20   <ul class="nav navbar-nav">
    21   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
    22   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
    23   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
    24   </ul>
    25  </nav>
    26  <nav class="navbar navbar-default navbar-static-top"><!--直角导航-->
    27   <ul class="nav navbar-nav">
    28   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
    29   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
    30   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
    31   </ul>
    32  </nav>
    33  <nav class="navbar navbar-inverse navbar-fixed-top"><!--固定在上方的导航条,并将第一个导航条盖住-->
    34   <ul class="nav navbar-nav">
    35   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
    36   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
    37   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
    38   </ul>
    39  </nav>
    40  <nav class="navbar navbar-inverse navbar-fixed-bottom"><!--底部-->
    41   <ul class="nav navbar-nav">
    42   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
    43   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
    44   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
    45   </ul>
    46  </nav>
    47  </div>
    48  <script src="js/jquery-2.1.0.js"></script>
    49  <script src="js/bootstrap.js"></script>
    50 </body>
    51 </html>

    效果图:

    这里写图片描述

  • 相关阅读:
    C++程序设计基础(7)位运算
    C++程序设计基础(1)程序的编译和执行
    深度学习看过的文档留存
    Linux常用快捷键
    从Zero到Hero,一文掌握Python关键代码
    三角测量原理与双目视觉景深恢复
    动态规划——DP算法(Dynamic Programing)
    算法-动态规划 Dynamic Programming--从菜鸟到老鸟
    语义分割--全卷积网络FCN详解
    2014-VGG-《Very deep convolutional networks for large-scale image recognition》翻译
  • 原文地址:https://www.cnblogs.com/huangxu/p/8179677.html
Copyright © 2011-2022 走看看