bootstrap 导航栏，有form查询，下拉菜单，响应式折叠，登录注册

最新推荐文章于 2021-05-31 04:53:11 发布

原创最新推荐文章于 2021-05-31 04:53:11 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

Bootstrap 专栏收录该内容

3 篇文章

订阅专栏

本文展示了一个使用Bootstrap实现的倒置导航栏示例，包括响应式布局、搜索框及下拉菜单等功能，适用于创建美观且实用的网站导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <title>Bootstrap 实例 - 倒置的导航栏</title>
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class='navbar navbar-inverse'>
  <div class='container-fluid'>
    <div class='navbar-header'>
    <button class='navbar-toggle' data-toggle='collapse' data-target='#demo'>
      <span class='icon-bar'></span>
      <span class='icon-bar'></span>
      <span class='icon-bar'></span>
    </button>
      <a href="" class='navbar-brand'>菜鸟教程</a>
    </div>
    <div>
      <form class='navbar-form navbar-left col-lg-3' role='search'>
       <div class='form-group'>
         <input type="text" class='form-control' placeholder="Search">
       </div>
       <button type='submit' class='btn btn-info'>提交</button>
      </form>
    </div>
    <div class='collapse navbar-collapse' id='demo'>
      <ul class='nav navbar-nav'>
        <li class='active'><a href="">IOS</a></li>
        <li><a href="">Python</a></li>
        <li class='dropdown'>
          <a href="" class='dropdown-toggle' data-toggle='dropdown'>Java <b class='caret'></b></a>
          <ul class='dropdown-menu' role='menu'>
            <li><a href="">jmeter</a></li>
            <li><a href="">EJB</a></li>
            <div class='divider'></div>
            <li><a href="">Jasper Report</a></li>
          </ul>
        </li>
      </ul>
      <ul class='nav navbar-nav navbar-right'>
        <li><a href=""><span class='glyphicon glyphicon-user'></span>注册</a></li>
        <li><a href=""><span class='glyphicon glyphicon-log-in'></span>登录</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>