29-bootstrap框架3 布局实例

html:

 

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <!-- 1、先定义视口，适配移动端：meta:vp -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>天天生鲜-水果节</title>
    <!-- 2、按顺序先引入bootstrap.min.css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 3、再引入自定义的css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 4、按顺序先引入jquery.js -->
    <script src="js/jquery.js"></script>
    <!-- 5、再引入bootstrap.min.js -->
    <script src="js/bootstrap.min.js"></script>

</head>


<body>

    <!-- 1、导航条 -->

     <!-- 1、先写导航条 -->
    <div class="navbar navbar-inverse navbar-static-top">
        <!-- 2、再写container  -->
        <div class="container">

            <!-- 3、头部,定义logo -->
            <div class="navbar-header">
                <!-- 5、导航条在窗口缩放到最小时，就变成了好几行，我们想要在窗口变小时，将内容隐藏到头部一个菜单下： -->
                <!-- 8、button标签加上data-toggle="collapse" data-target="#mymenu"，注意要加一个# -->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                 <!-- 6、窗口变小时，导航条右侧出现三条小横杠 -->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>     
                </button>

                <a href="#" class="navbar-brand"><img src="images/logo.png" alt="天天生鲜logo"></a>
            </div>

            <!-- 7、在外层加一个div标签将ul和form包起来，这样就实现了窗口变小时隐藏菜单，只显示logl和小横杠：
            这个容器给一个id，一会给它写js，实现点击显示菜单 -->
            <div class="collapse navbar-collapse" id="mymenu">

                <!-- 3、定义菜单 -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">推荐商品</a></li>
                    <li><a href="#">手机生鲜</a></li>
                    <li><a href="#">抽奖</a></li>
                </ul>
                
                <!-- 4、定义菜单里面的表单 -->
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-default">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                </form>                
            </div>

        </div>
    </div>

    <!-- 2、banner 巨幕 -->
    <div class="jumbotron">
        <div class="container">
             <div class="row">
                 <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
                     <img src="images/banner_title.png" alt="banner-title" class="banner_title img-responsive">
                     <h2 class="banner_info">水果节介绍</h2>
                     <p class="banner_info_detail">天天生鲜将在北京、上海、杭州、苏州、成都、武汉、南京八座核心城市同时推出水果专场，借助天天生鲜产地端到用户端的渠道，果品流转效率大大提升，依托天天生鲜的渠道优势，首届果节做到了高质低价。</p>
                 </div>
                 <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
                     <img src="images/basket.png" alt="" class='img-responsive'>
                 </div>
             </div>
        </div>
    </div>


    <div class="container">
        <div class="row hahaha">
            <h3 class="text-center">活动图片</h3>
            <p class="text-center">天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块。确定具体地块后，在适合的时候采摘后，
            直接在地头包装成箱，根据订单分运到各地分仓，然后由快递员配送到用户手中，以下是本次活动的图片。</p>


            <div class="row pic_list">
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- 图片外有边框，图片缩略图效果：加thumbnail样式 -->
                    <div class="thumbnail">
                        <img src="images/active01.jpg" alt="">
                        <h4>现场采摘活动</h4>
                    </div>
                </div>
                

                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- 加thumbnail样式:产生一个边框，用图片撑开，产生类似缩略图的感觉 -->
                    <div class="thumbnail">
                        <img src="images/active02.jpg" alt="">
                        <h4>现场采摘活动</h4>
                    </div>
                </div>


                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- 图片外有边框，图片缩略图效果：加thumbnail样式 -->
                    <div class="thumbnail">
                        <img src="images/active03.jpg" alt="">
                        <h4>现场采摘活动</h4>
                    </div>
                </div>


                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!-- 图片外有边框，图片缩略图效果：加thumbnail样式 -->
                    <div class="thumbnail">
                        <img src="images/active04.jpg" alt="">
                        <h4>现场采摘活动</h4>
                    </div>
                </div> 

            </div>
        </div>
    </div>




    <div class="container">
        
        <div class="row">
            <div class="col-lg-1 www">
                <span class='goods'>推荐商品</span>
                <span class="more"><a href="#">更多></a></span>
            </div>
        </div>   
    </div>



    <div class="container">
        <div class="row goods_list">
            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>$25.6/500g</p>
                </div>
            </div>


            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>$25.6/500g</p>
                </div>
            </div>



            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>$25.6/500g</p>
                </div>
            </div>



            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>$25.6/500g</p>
                </div>
            </div>


            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>$25.6/500g</p>
                </div>
            </div>




        </div>
    </div>

</body>
</html>

 

css:

 

.navbar-brand{
    padding:7px 15px 0 15px;
}


.navbar-inverse {
    background-color:#ff722b;
    border-color:#ff722b;
}

.navbar-inverse .navbar-nav>li>a {
    color: #fff;
}

.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.active>a:focus,.navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: #c75922
}

.navbar-inverse .navbar-toggle {
    border-color:#fff
}

.navbar-inverse .navbar-toggle:focus,.navbar-inverse .navbar-toggle:hover {
    background-color:#c75922;
}

.navbar-inverse .navbar-collapse,.navbar-inverse .navbar-form {
    border-color:#fff;
}

.navbar{
    margin-bottom:0;
}

.jumbotron{
    background:url(../images/banner_bg.jpg) center center no-repeat;
    padding:25px 0;
}

.banner_title{
    margin-top:47px;
}

/*媒体查询：当窗口宽度小于1200时，这个样式生效，覆盖上面的*/
@media (max-width:1200px){
    .banner_title{
    margin-top:30px;
    }
}

@media (max-width:992px){
    .banner_title{
    margin-top:20px;
    }
}


.banner_info{
    font-size:18px;
    color:#ffff00;
}

.jumbotron .banner_info_detail{
    font-size:14px;
    color:#fff; 
    line-height:28px;
}

.hahaha{
    margin:-15px;
    margin-top:0;
 
}

.hahaha h3{
    margin-top:0;
    font-size:30px;
    color:#333;
}

.hahaha p{
    font-size:14px;
    color:#333;
}

.pic_list .thumbnail{
    max-width:260px;
    margin:0 auto 20px;
}
.pic_list .thumbnail h4{
    text-align:center;
    font-size:15px;
    color:#333;
}

.www{
    width:100%;
    height:30px;
    background-color:#ff722b;
}

.www .goods,.more{
    font-size:14px;
    color:#fff;
    line-height:30px;
}

.www .goods{
    float:left;
}
.www .more{
    float: right;
}
.www .goods,.more a{
    color:#fff;
}

.goods_con{
    border:1px solid #ddd;
    margin-bottom:20px; 
    max-width:260px;
    text-align:center;
}

.goods_con img{
    margin:0 auto;
}

.goods_list{
    margin:15px -30px;
}
.goods_list .col-lg-2{
    width:20%;

}

@media(max-width:1200px){
    .goods_list .col-lg-2{
    width:20%;
    float:left;
    }
}

@media(max-width:992px){
    .goods_list .col-lg-2{
    width:33%;
    float:left;
    }
}

@media(max-width:768px){
    .goods_list .col-lg-2{
    width:100%;
    float:left;
    }
}

 

posted @ 2019-04-22 13:09  greenfan  阅读(453)  评论(0)    收藏  举报