bootstrap下实现轮播图的响应式

来源：互联网发布：淘宝怎么打折编辑：程序博客网时间：2024/06/09 14:47
bootstrap下实现轮播图的响应式

重要的是思想，其实很简单，因为bootstrap是支持栅格布局的，而恰好栅格布局是响应式的主要布局，所以我们可以把轮播图放入栅格布局中，先来一个大的栅格布局，分三块左2，中8，右2，然后在中间的主体部分出放入需要的轮播图组件即可！
代码如下：
<div class="container">            <div class="row">                <!--左侧栅格-->                <div class="col-xs-3 col-sm-2">                </div>                <!--3:2 自适应比例，xs和sm-->                <!--中间栅格-->                <div class="col-xs-12 col-sm-8">                    <!--轮播图-->                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">                        <!-- Indicators -->                        <ol class="carousel-indicators">                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>                        </ol>                        <!-- Wrapper for slides -->                        <div class="carousel-inner" role="listbox">                            <div class="item active" style="background: ;background-size: cover;">                                <img src="img/豆果1.jpg" alt="...">                                <div class="carousel-caption">                                </div>                            </div>                            <div class="item">                                <a href="#"><img src="img/豆果2.jpg" alt="..."></a>                                <div class="carousel-caption">                                </div>                            </div>                            <div class="item">                                <img src="img/豆果3.jpg" alt="...">                                <div class="carousel-caption">                                </div>                            </div>                        </div>                        <!-- Controls -->                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">                            <span class="glyphicon glyphicon-chevron-left"></span>                            <span class="sr-only">Previous</span>                        </a>                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">                            <span class="glyphicon glyphicon-chevron-right"></span>                            <span class="sr-only">Next</span>                        </a>                    </div>                    <!-- 清除浮动 -->                    <div class="clearfix" style="margin-bottom: 10px;"></div>                    <div class="clearfix" style="margin-bottom: 10px;"></div>                    <div class="clearfix" style="margin-bottom: 10px;"></div>                    <!--正文-->                    <div class="row">                        <div class="col-xs-6 col-sm-4">                            <img src="img/m1.jpg" class="img-responsive" />                            <p><a href="">秋冬滋补～砂锅牛腩煲</a></p>                            <p>by <a href="">萌萌麻麻0407</a></p>                        </div>                        <div class="col-xs-6 col-sm-4">                            <img src="img/m2.jpg" class="img-responsive" />                            <p><a href="">懒人榴莲酥</a></p>                            <p>by <a href="">烧果果</a></p>                        </div>                        <div class="col-xs-6 col-sm-4">                            <img src="img/m3.jpg" class="img-responsive" />                            <p><a href="">四川年夜饭必备--冬笋烧牛肉</a> </p>                            <p>by <a href="">飘泊的湖</a></p>                        </div>                        <div class="col-xs-6 col-sm-4">                            <img src="img/m1.jpg" class="img-responsive" />                            <p><a href="">秋冬滋补～砂锅牛腩煲</a></p>                            <p>by <a href="">萌萌麻麻0407</a></p>                        </div>                        <div class="col-xs-6 col-sm-4">                            <img src="img/m2.jpg" class="img-responsive" />                            <p><a href="">懒人榴莲酥</a></p>                            <p>by <a href="">烧果果</a></p>                        </div>                        <div class="col-xs-6 col-sm-4">                            <img src="img/m4.jpg" class="img-responsive" />                            <p><a href="">嫩滑蒸蛋羹#宴客拿手菜#</a> </p>                            <p>by <a href="">Summer_夏天_</a></p>                        </div>                    </div>                </div>                <!--右侧栅格-->                <div class="col-xs-3 col-sm-2">                </div>            </div>        </div>
0 0