zoukankan      html  css  js  c++  java

  • Bootstrap导航栏实例讲解

    导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。

    1、默认的导航栏
    创建一个默认的导航栏的步骤如下：

    向 <nav> 标签添加 class .navbar、.navbar-default（白底黑字），navbar-inverse（黑底白字）

    向上面的元素添加 role="navigation"，有助于增加可访问性。

    向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。

    为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

    下面的实例演示了这点：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10.    
    11. <nav class="navbar navbar-inverse" role="navigation">  
    12.    <div class="navbar-header">  
    13.       <a class="navbar-brand" href="#">林炳文在此～</a>  
    14.    </div>  
    15.    <div>  
    16.       <ul class="nav navbar-nav">  
    17.          <li class="active"><a href="#">导航一</a></li>  
    18.          <li><a href="#">导航二</a></li>  
    19.          <li class="dropdown">  
    20.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
    21.                下拉菜单  
    22.                <b class="caret"></b>  
    23.             </a>  
    24.             <ul class="dropdown-menu">  
    25.                <li><a href="#">我是谁呢？</a></li>  
    26.                <li><a href="#">我也不知道</a></li>  
    27.                <li><a href="#">你是谁呢？</a></li>  
    28.                <li class="divider"></li>  
    29.                <li><a href="#">分离的链接</a></li>  
    30.                <li class="divider"></li>  
    31.                <li><a href="#">另一个分离的链接</a></li>  
    32.             </ul>  
    33.          </li>  
    34.       </ul>  
    35.    </div>  
    36. </nav>  
    37.    
    38.    
    39. </body>  
    40. </html>  

    效果如下：

    把

    [html] view plain copy
     
    1. <nav class="navbar navbar-inverse" role="navigation">  

    改成

    [html] view plain copy
     
    1. <nav class="navbar navbar-default" role="navigation">  

    效果如下：

    2、响应式的导航栏
    为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

    下面的实例演示了这点：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 响应式的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10.    
    11. <nav class="navbar navbar-default" role="navigation">  
    12.    <div class="navbar-header">  
    13.       <button type="button" class="navbar-toggle" data-toggle="collapse"   
    14.          data-target="#example-navbar-collapse">  
    15.          <span class="sr-only">切换导航</span>  
    16.          <span class="icon-bar"></span>  
    17.          <span class="icon-bar"></span>  
    18.          <span class="icon-bar"></span>  
    19.       </button>  
    20.       <a class="navbar-brand" href="#">12345</a>  
    21.    </div>  
    22.    <div class="collapse navbar-collapse" id="example-navbar-collapse">  
    23.       <ul class="nav navbar-nav">  
    24.          <li class="active"><a href="#">iOS</a></li>  
    25.          <li><a href="#">fgghh</a></li>  
    26.          <li class="dropdown">  
    27.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
    28.                Java <b class="caret"></b>  
    29.             </a>  
    30.             <ul class="dropdown-menu">  
    31.                <li><a href="#">vgghhr</a></li>  
    32.                <li><a href="#">dg</a></li>  
    33.                <li><a href="#">sfg</a></li>  
    34.                <li class="divider"></li>  
    35.                <li><a href="#">分离的链接</a></li>  
    36.                <li class="divider"></li>  
    37.                <li><a href="#">另一个分离的链接</a></li>  
    38.             </ul>  
    39.          </li>  
    40.       </ul>  
    41.    </div>  
    42. </nav>  
    43.    
    44.    
    45. </body>  
    46. </html>  


    3、导航栏中的表单
    导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。

    下面的实例演示了这点：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10. <nav class="navbar navbar-default" role="navigation">  
    11.    <div class="navbar-header">  
    12.       <a class="navbar-brand" href="#">林炳文在此～</a>  
    13.    </div>  
    14.    <div>  
    15.       <ul class="nav navbar-nav">  
    16.          <li class="active"><a href="#">导航一</a></li>  
    17.          <li><a href="#">导航二</a></li>  
    18.          <li class="dropdown">  
    19.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
    20.                下拉菜单  
    21.                <b class="caret"></b>  
    22.             </a>  
    23.             <ul class="dropdown-menu">  
    24.                <li><a href="#">我是谁呢？</a></li>  
    25.                <li><a href="#">我也不知道</a></li>  
    26.                <li><a href="#">你是谁呢？</a></li>  
    27.                <li class="divider"></li>  
    28.                <li><a href="#">分离的链接</a></li>  
    29.                <li class="divider"></li>  
    30.                <li><a href="#">另一个分离的链接</a></li>  
    31.             </ul>  
    32.          </li>  
    33.       </ul>  
    34.    </div>  
    35.     <div>  
    36.       <form class="navbar-form navbar-left" role="search">  
    37.          <div class="form-group">  
    38.             <input type="text" class="form-control" placeholder="Search">  
    39.          </div>  
    40.          <button type="submit" class="btn btn-default">搜一下</button>  
    41.       </form>      
    42.    </div>  
    43. </nav>  
    44. </body>  
    45. </html>  


    效果：

    黑色效果

    4、导航栏中的按钮
    您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

    不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。
    下面的实例演示了这点：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10. <nav class="navbar navbar-inverse" role="navigation">  
    11.    <div class="navbar-header">  
    12.       <a class="navbar-brand" href="#">林炳文在此～</a>  
    13.    </div>  
    14.    <div>  
    15.       <ul class="nav navbar-nav">  
    16.          <li class="active"><a href="#">导航一</a></li>  
    17.          <li><a href="#">导航二</a></li>  
    18.          <li class="dropdown">  
    19.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
    20.                下拉菜单  
    21.                <b class="caret"></b>  
    22.             </a>  
    23.             <ul class="dropdown-menu">  
    24.                <li><a href="#">我是谁呢？</a></li>  
    25.                <li><a href="#">我也不知道</a></li>  
    26.                <li><a href="#">你是谁呢？</a></li>  
    27.                <li class="divider"></li>  
    28.                <li><a href="#">分离的链接</a></li>  
    29.                <li class="divider"></li>  
    30.                <li><a href="#">另一个分离的链接</a></li>  
    31.             </ul>  
    32.          </li>  
    33.       </ul>  
    34.    </div>  
    35.     <div>  
    36.       <form class="navbar-form navbar-left" role="search">  
    37.          <div class="form-group">  
    38.             <input type="text" class="form-control" placeholder="Search">  
    39.          </div>  
    40.          <button type="submit" class="btn btn-default">搜一下</button>  
    41.       </form>   
    42.       <button type="button" class="btn btn-default navbar-btn">  
    43.          导航栏按钮  
    44.       </button>       
    45.    </div>  
    46. </nav>  
    47. </body>  
    48. </html>  

    5、导航栏中的文本
    如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与 <p> 标签一起使用，确保适当的前导和颜色。下面的实例演示了这点：

    [html] view plain copy
     
    1. <div class="navbar-header">  
    2.       <a class="navbar-brand" href="#">林炳文在此～</a>     
    3.    </div>  
    4.    <div>  
    5.       <p class="navbar-text">导航栏中的文本</p>  
    6.    </div>  
    7.    <div>  

    效果如下：

    6、非导航链接
    如果您不想在常规的导航栏导航组件内使用标准的链接，那么请使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色，如下面的实例所示：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 默认的导航栏</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10. <nav class="navbar navbar-inverse" role="navigation">  
    11.    <div class="navbar-header">  
    12.       <a class="navbar-brand" href="#">林炳文在此～</a>     
    13.    </div>  
    14.    <div>  
    15.       <p class="navbar-text">导航栏中的文本</p>  
    16.    </div>  
    17.    <div>  
    18.       <p class="navbar-text navbar-right">我在   
    19.          <a href="#" class="navbar-link">右边</a>  
    20.       </p>  
    21.    </div>  
    22.    <div>  
    23.       <ul class="nav navbar-nav">  
    24.          <li class="active"><a href="#">导航一</a></li>  
    25.          <li><a href="#">导航二</a></li>  
    26.          <li class="dropdown">  
    27.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
    28.                下拉菜单  
    29.                <b class="caret"></b>  
    30.             </a>  
    31.             <ul class="dropdown-menu">  
    32.                <li><a href="#">我是谁呢？</a></li>  
    33.                <li><a href="#">我也不知道</a></li>  
    34.                <li><a href="#">你是谁呢？</a></li>  
    35.                <li class="divider"></li>  
    36.                <li><a href="#">分离的链接</a></li>  
    37.                <li class="divider"></li>  
    38.                <li><a href="#">另一个分离的链接</a></li>  
    39.             </ul>  
    40.          </li>  
    41.       </ul>  
    42.    </div>  
    43.     <div>  
    44.       <form class="navbar-form navbar-left" role="search">  
    45.          <div class="form-group">  
    46.             <input type="text" class="form-control" placeholder="Search">  
    47.          </div>  
    48.          <button type="submit" class="btn btn-default">搜一下</button>  
    49.       </form>   
    50.       <button type="button" class="btn btn-default navbar-btn">  
    51.          导航栏按钮  
    52.       </button>       
    53.    </div>  
    54. </nav>  
    55. </body>  
    56. </html>  


    7、组件对齐方式
    您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。下面的实例演示了这点：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.    <title>Bootstrap 实例 - 组件对齐方式</title>  
    5.    <link href="bootstrap.min.css" rel="stylesheet">  
    6.    <script src="jquery-2.1.4.min.js"></script>  
    7.    <script src="bootstrap.min.js"></script>  
    8. </head>  
    9. <body>  
    10.    
    11. <nav class="navbar navbar-inverse" role="navigation">  
    12.    <div class="navbar-header">  
    13.       <a class="navbar-brand" href="#">我在这里</a>  
    14.    </div>  
    15.    <div>  
    16.       <!--向左对齐-->  
    17.       <ul class="nav navbar-nav navbar-left">  
    18.          <li class="dropdown">  
    19.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
    20.                Java   
    21.                <b class="caret"></b>  
    22.             </a>  
    23.             <ul class="dropdown-menu">  
    24.                <li><a href="#">什么人</a></li>  
    25.                <li><a href="#">EJB</a></li>  
    26.                <li><a href="#">Jasper Report</a></li>  
    27.                <li class="divider"></li>  
    28.                <li><a href="#">分离的链接</a></li>  
    29.                <li class="divider"></li>  
    30.                <li><a href="#">另一个分离的链接</a></li>  
    31.             </ul>  
    32.          </li>  
    33.       </ul>  
    34.       <form class="navbar-form navbar-left" role="search">  
    35.          <button type="submit" class="btn btn-default">  
    36.             向左对齐-提交按钮    
    37.          </button>  
    38.       </form>   
    39.       <p class="navbar-text navbar-left">向左对齐-文本</p>  
    40.       <!--向右对齐-->  
    41.       <ul class="nav navbar-nav navbar-right">  
    42.          <li class="dropdown">  
    43.             <a href="#" class="dropdown-toggle" data-toggle="dropdown">  
    44.                Java <b class="caret"></b>  
    45.             </a>  
    46.             <ul class="dropdown-menu">  
    47.                <li><a href="#">jmeter</a></li>  
    48.                <li><a href="#">EJB</a></li>  
    49.                <li><a href="#">Jasper Report</a></li>  
    50.                <li class="divider"></li>  
    51.                <li><a href="#">分离的链接</a></li>  
    52.                <li class="divider"></li>  
    53.                <li><a href="#">另一个分离的链接</a></li>  
    54.             </ul>  
    55.          </li>  
    56.       </ul>  
    57.       <form class="navbar-form navbar-right" role="search">  
    58.          <button type="submit" class="btn btn-default">  
    59.             向右对齐-提交按钮  
    60.          </button>  
    61.       </form>   
    62.       <p class="navbar-text navbar-right">向右对齐-文本</p>  
    63.    </div>  
    64. </nav>  
    65.    
    66. </body>  
    67. </html>  


    8、固定到顶部
    Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。

    如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添加 class .navbar-fixed-top。下面的实例演示了这点：

    [html] view plain copy
     
    1. <nav class="navbar navbar-default navbar-fixed-top" role="navigation">  


    为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 <body> 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

    9、固定到底部
    如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。下面的实例演示了这点：

    如：

    [html] view plain copy
     
    1. <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">  

    10、静态的顶部
    如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向 <body> 添加内边距（padding）。

    [html] view plain copy
     
      1. <nav class="navbar navbar-default navbar-static-top" role="navigation">  
    1. // from: http://blog.csdn.net/evankaka/article/details/49516493
  • 相关阅读:
    Console命令，让js调试更简单
    Java练习 SDUT-2192_救基友记2
    Java练习 SDUT-2246_时间日期格式转换
    SDUT-3362_村村通公路
    SDUT-2139_从起始点到目标点的最短步数（BFS）
    SDUT-3361_迷宫探索
    SDUT-2138_判断可达性
    SDUT-2107_图的深度遍历
    SDUT-2124_基于邻接矩阵的广度优先搜索遍历
    Java练习 SDUT-2787_加密术
  • 原文地址：https://www.cnblogs.com/GarfieldEr007/p/5746287.html
Copyright © 2011-2022 走看看