• Bootstrap-各式导航栏和下拉菜单


    1,最简单的下拉菜单

        文件组成:

              

           效果图:

       

    HTML代码:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title> 应用</title>
      <link href="bootstrap.min.css" rel="stylesheet" style="test/css">
      <script src="jquery-2.2.3.min.js"></script>
      <script src="bootstrap.min.js"></script>
    
    
     </head> 
     <body>
          <div class="dropdown" id="myDropdown">
              <button id="dLabel" class="btn btn-primary" type="button" data-toggle="dropdown">
                  下拉菜单
                  <span class="caret"></span>
              </button>
              <ul class="dropdown-menu"role="menu">
                  <li><a href="#">我的</a></li>
                  <li><a href="#">我的</a></li>
                  <li><a href="#">我的</a></li>
              </ul>
          </div>
    
     </body>
    </html>
    View Code

    如果下拉菜单展示时,要弹出信息,加入代码:

    <script>
    $("#myDropdown").on("shown.bs.dropdown",function(e){
    alert("Heelo")
    })
    </script>

    2,跟着内容滚动的导航栏

           文件组成:

              

           效果图:

                  

         HTML代码:

    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title> 应用</title>
      <link href="bootstrap.min.css" rel="stylesheet" style="test/css">
      <script src="jquery-2.2.3.min.js"></script>
      <script src="bootstrap.min.js"></script>
    
     </head> 
     <body data-spy="scroll" data-target=".navbar" data-offset="70">
         <div class="container">
              <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                   <div class="container-fluid">
                        <div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScrollspy">
                            <ul class="nav navbar-nav">
                                <li><a href="#iwen">iwen</a></li>
                                <li><a href="#ime">ime</a></li>
                                <li><a href="#luo">luo</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        下拉菜单
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                         <li><a href="#one" tabindex="-1">@one</a></li>
                                         <li><a href="#two" tabindex="-1">@two</a></li>
                                         <li><a href="#three" tabindex="-1">@three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                   </div>
              </nav>
              <h2 id="iwen">@iwen</h2>
              <p>。。。</p>
               <h2 id="ime">@ime</h2>
              <p>。。。</p>
              <h2 id="luo">@luo</h2>
              <p>。。。</p>
              <h2 id="one">@one</h2>
              <p>。。。</p>
              <h2 id="two">@two</h2>
              <p>。。。</p>
              <h2 id="three">@three</h2>
              <p>。。。</p>
         <div>
    <!--     <script>
             $("#myScrollspy").on("activate.bs.scrollspy",function(e){
                 alert("Hello");
             })
         </script>
    -->
     </body>
    </html>
    View Code

    3,下拉菜单带标题

               效果图:

                     

             代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">   <!--����IE�����-->
      <meta name="viewport" content="width=device-width,initial-scale=1">  <!---->
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <link type="text/css" href="bootstrap.min.css" rel="stylesheet">
      <link type="text/css" href="style.css" rel="stylesheet">
      <script src="jquery-2.2.3.min.js"></script>
      <script src="bootstrap.min.js"></script>
      <link  type="text/css" rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
      
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>    <![endif]-->
          <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
     </head>
    
     <body>
     <Br/>
    <Br/>
          <div class="container">
            <div class="dropdown pull-left">
              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">
                     地铁线路   
              <span class="caret"></span>
              </button>
              <ul class="dropdown-menu dropdown-menu-right" role="menu">
                 <li role="presentation" class="dropdown-header">北京地铁</li>
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">一号线</a></li>
                 <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">十三号线</a></li>
                 <li role="presentation" class="divider"></li>
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">十五号线</a></li>
              </ul>
             </div>
    
             <br/>
             <br/>
             <Br/>
             <Br/>
             <br/>
             <br/>
             <Br/>
             <Br/>
             <Br/>
             <Br/>
             <div class="btn-toolbar" role="btn-toolbar">
                  <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default">Left</button>
                  <button type="button" class="btn btn-default">Middle</button>
                  <button type="button" class="btn btn-default">Right</button>
             </div>
    
    <Br/>
    <Br/>
    
             <div class="btn-group-vertical" role="group">
                  <button type="button" class="btn btn-default">Left
                      <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
                  </button> 
                  <button type="button" class="btn btn-default">Middle
                     <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                  </button>
                  <button type="button" class="btn btn-default">Right
                   <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
                  </button>
    
             <div class="btn-group" role="group">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                  aria-expanded="false">下拉菜单
                     <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                      <li><a href="#">1</a></li>
                      <li><a href="#">2</a></li>
                      <li><a href="#">3</a></li>
    
                  </ul>
                </div>  
                  
             </div>
         </div>
          </div>
          
        
    
     </body>
    </html>
     
    View Code
  • 相关阅读:
    mysql主从延迟高的原因
    OpenStack云平台网络模式及其工作机制
    maps.reg
    dnion的remap.conf文件
    linux的tar命令
    traffic server文件目录
    records.config文件参数解释
    VNC配置
    KVM详情
    cache.config文件配置模板
  • 原文地址:https://www.cnblogs.com/147258llj/p/5508293.html
Copyright © 2020-2023  润新知