bootstrap响应式布局 - 懒懒喵

bootstrap响应式布局

一、导航栏

　　1，

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="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>
            <a href="#" class="navbar-brand" >
                <img src="img/1.jpg" alt="logo" >
            </a>
        </div>
        <div class="collapse navbar-collapse" >
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
            </ul>
        </div>
    </div>
</nav>

给nav标签设置navbar，navbar-default的类，navbar-fixed-top将导航栏固定在窗口上方，随着窗口移动，将ul的类设置为nav和navbar-nav；响应式导航栏需要设置可折叠区域，即给一个div加collapse和navbar-collapse的类，同时将折叠按钮的data-toggle事件设置为collapse，目标data-target指向可折叠的div，一般用id属性来连接，其中按钮中的span标签是为了显示按钮的样式，即三条横线

二、图片轮播

图片轮播需要用到图片轮播插件carousel

<div  class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active" >
            <img src="img/ad2.jpg" alt="second">
        </div>
        <div class="item" >
            <img src="img/ad3.jpg" alt="third">
        </div>
        <div class="item" >
            <img src="img/ad4.jpg" alt="forth">
        </div>
    </div>
    <a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
    <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
</div>

用一个有序列表来实现图片的导向，设置类为carousel-indicators，同时将li的目标指向当前轮播的div块，data-slide-to为每个li指向的图片，将包裹图片的整个div设为.carousel-inner，每张图片的div设置为item

最后设置两个a标签来链接到轮播块，data-slide设为前一个和后一个，“prev”和“next”，类为carousel-control，，，，

此时的a标签位于图片的顶部位置，为了让其居中，可将a标签的行高设置为图片的高度，但当浏览器窗口改变时图片高度会自适应变化，因此要在js中完成设置，但是每次改变浏览器窗口需要刷新才能完成，因此在js中添加window.resize()事件，实现每次改变窗口的时候自适应居中

$(".carousel-control").css(\'line-height\', $(".carousel-inner img").height()+\'px\');
    $(window).resize(function(){
        $(".carousel-control").css(\'line-height\', $(".carousel-inner img").height()+\'px\');
    })

但此时会出现问题：若当前是第二张或第三张图片时改变窗口大小，此时获取到的图片高度为0，因为

$(".carousel-inner img").height()

获取的是第一张图片的高度，当显示第二张图片时，此时第一张图片高度为0，因此对其进行设置

$(window).resize(function(){
        var $height=$(".carousel-inner img").eq(0).height()||
            $(".carousel-inner img").eq(1).height()||
            $(".carousel-inner img").eq(2).height();
        $(".carousel-control").css(\'line-height\', $height+\'px\');
    })

$height的作用为获取当前图片的高度，即如果第一张图片有高度的话其他两张图片值均为0，以此类推，即可获得显示出的图片的高度。