Bootstrap篇之 响应式导航

最近又重新复习了下bootstrap的使用,发现任然有许多不太懂得地方,故特此记录下来

回顾了下响应式导航,说实话,有点神奇,
bootstrap的好处就是几乎可以不用再编写css 就能直接写出一个漂亮的样式
但是也要求我们熟练掌握各种存在的组件:

今天回顾一下吧

首先:先建立好主体部分, 使用.nav 来建立一个导航标签

<ul class="nav" >//加入.nav-tabs  nav-pills   ,还可以分别于nav-stacked 组合变成竖直样式

            <li class="active"><a href="#">HTML</a></li>
            <li><a href="#">Css</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">jQuery</a></li>
    </ul>

结果是这样的:

当然这不是我们最后得到的;我们再在ul 标签中可以加入.nav-tabs 与.nva-pills 分别为:
而且在加上.nav-stacked 使之变成竖向导航样式




但是如果我们就这样使用导航元素就可以吗:

<div class="container navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">JUST A TEST</a>
            <button  class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>//这里视为视障人士提供的提示
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
         

            </button>
            
        </div>
    

<div class="collapse navbar-collapse">
            <ul class="nav  nav-pills" >
                <li class="active"><a href="#">HTML</a></li>
                <li><a href="#">Css</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </div>


    </div>

结果,当我们缩小的时候

缩小后:, 因为是.nav是水平排列的标签,最后展开的时候任然还是水平的,与我们实际的有些差别:

那我们既要在大宽度下为水平展示: 在尺寸小的时候为竖向排列的时候:这时的ul 标签使用原来的就不行了;
需要使用另一个标签 .navbar 来达到目的:

使用.nvabar 外面在套个 collapse 的div 可以实现在宽度大的时候为水平展示;
当宽度不足时为竖向排列;

<div class="collapse navbar-collapse">
        <ul class="nav  navbar-nav ">
            <li class="active"><a href="#">HTML</a></li>
            <li><a href="#">Css</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
</div>

结果:

但这里 由于没有加上前的代码,所以宽度小的时候,里面的内容会消失;

注:collapse 为倒塌隐藏的意思

对于汉堡式的导航, 首先我们需要加入一个button ;
使用navbar-toggle 来触发刚才隐藏的导航栏; 而 data-toggle 与data-target 分别使用了javascript的函数调用来指向需要操作的元素, 正好与上面的加的div 来进行对应;<div class="collapse navbar-collapse">

span的元素为横线 , 加的越多, 汉堡式的横线显示的也越多;

<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

</button>

最后还需在button套上两个div 使之更加美观;
最终结果如下:

<div class="container navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">JUST A TEST</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>

        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav  navbar-nav ">
                <li class="active"><a href="#">HTML</a></li>
                <li><a href="#">Css</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
            </ul>
        </div>


    </div>