• 响应式导航页面


     1 <!DOCTYPE html>
     2 <html lang="zh-cn">
     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>Hello World</title>
     8 
     9 <link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    10 </head>
    11 <body>
    12     <nav class="navbar navbar-default" role="navitation">
    13         <div class="container-fulid">
    14             <!-- Brand and toggle get grouped for better mobile display -->
    15             <div class="navbar-header">
    16               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    17                 <span class="sr-only">Toggle navigation</span>
    18                 <span class="icon-bar"></span>
    19                 <span class="icon-bar"></span>
    20                 <span class="icon-bar"></span>
    21               </button>
    22               <a class="navbar-brand" href="#">某管理系统</a>
    23             </div>
    24             
    25              <!-- Collect the nav links, forms, and other content for toggling -->
    26         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    27           <ul class="nav navbar-nav">
    28             <li class="active"><a href="#">首页</a></li>
    29             <li class="dropdown">
    30               <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a>
    31               <ul class="dropdown-menu" role="menu">
    32                 <li class="disabled"><a href="#">业务功能</a></li>
    33                 <li><a href="#">信息建立</a></li>
    34                 <li><a href="#">信息查询</a></li>
    35                 <li><a href="#">信息管理</a></li>
    36                 <li class="divider"></li>
    37                 
    38                 <li class="disabled"><a href="#">系统设置</a></li>
    39                 <li><a href="#">设置</a></li>
    40               </ul>
    41             </li>
    42           </ul>
    43           <form class="navbar-form navbar-right" role="search">
    44             <div class="form-group">
    45               <input type="text" class="form-control" placeholder="username">
    46              
    47               <input type="password" class="form-control" placeholder="password">
    48               
    49             </div>
    50           
    51             <button type="submit" class="btn btn-default">登录</button>
    52           </form>
    53         </div><!-- /.navbar-collapse -->
    54       </div><!-- /.container-fluid -->
    55     </nav>
    56 
    57 <script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script>
    58 <script src='http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
    59 </body>
    60 </html>
  • 相关阅读:
    display
    盒子模型
    css样式
    修改页面标题前的图标
    form表单
    html中列表
    代码书写格式
    dw中的超链接
    硬盘的访问,程序重定位和加载
    Bochs调试指令
  • 原文地址:https://www.cnblogs.com/double405/p/4832418.html
Copyright © 2020-2023  润新知