我加入的导航条效果怎么不可以点开隐藏的内容啊?没有效果啊!

来源:3-3 响应式布局之Bootstrap实际案例

qq_谢兴中_0

2015-01-27 12:41


<!DOCTYPE HTML>

<html>

<head  lang="en">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1" />


<title>无标题文档</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="css/bootstrap.min.css">

<!--[if lt IE 9]> 

  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->


</head>


<body>

<nav class="navbar navbar-inverse" role="navigation">


  <div>

    <!-- Brand and toggle get grouped for better mobile display -->

    <div>

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

        <span>Toggle navigation</span>

        <span></span>

        <span></span>

        <span></span>

      </button>

      <a href="#">Brand</a>

    </div>


    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li><a href="#">Link <span>(current)</span></a></li>

        <li><a href="#">Link</a></li>

        <li>

          <a href="#" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span></span></a>

          <ul role="menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li></li>

            <li><a href="#">Separated link</a></li>

            <li></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <form class="navbar-form navbar-left" role="search">

        <div>

          <input type="text" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

      </form>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

        <li>

          <a href="#" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span></span></a>

          <ul role="menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->


</nav>

  

 </div>


    

 </div>

</body>

</html>


写回答 关注

0回答

还没有人回答问题,可以看看其他问题

认识响应式布局

使用Bootstrap前端框架,本教程让网站兼容不同终端不再是梦

132122 学习 · 278 问题

查看课程

相似问题