bootstrap 响应式的导航栏

最新推荐文章于 2024-08-28 22:42:07 发布

安果移不动

最新推荐文章于 2024-08-28 22:42:07 发布

阅读量2.5k

点赞数 2

分类专栏： # css

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/81940223

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

响应式的导航栏

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<nav class="navbra navbar-default" role="navigation">

    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">LIUAN</a>

    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">IOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Jueter</a></li>
                    <li><a href="#">Jueter</a></li>
                    <li><a href="#">Jueter</a></li>
                    <li><a href="#">Jueter</a></li>
                    <li class="divider"></li>
                      <li><a href="#">Jueter</a></li>
                </ul>
            </li>

        </ul>
    </div>
    </div>
</nav>


<div class="container">
    <h3>响应式的导航栏</h3>
    <code class="pull-left">
        为了给导航栏添加响应式特性，您要折叠的内容必须包裹class.collapse、.navbar-collapse 的&lt;div&gt;中。折叠起来的导航栏实际上是
一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle，用于告诉JavaScript 需要对按钮做什么，第二个是data-target
        ，指示要切换到哪一个元素.三个带有class.icon-bar的&lt;span&gt;创建所谓的汉堡按钮。这些会切换为.nav-collapse&lt;div&gt;中的元素。为了
        实现以上这些功能，您必须包含Bootstrap 折叠(Collapse插件)
        下面实例演示了这点:

    </code>



</div>
</body>
</html>