Bootstrap轮播, 如何一屏显示多个图片, 如下图片示例

刚开始学bootstrap,请给个示例,谢谢.... 刚开始学bootstrap, 请给个示例, 谢谢. 展开
 我来答
Tebro9
2015-10-19 · TA获得超过559个赞
知道小有建树答主
回答量:161
采纳率:100%
帮助的人:230万
展开全部

直接给代码吧,自己套就可以了

<body>
<div id="myCarousel" class="carousel slide pad_010 b_k" data-ride="carousel">
      <!-- 轮播(Carousel)指标 -->
      <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>   
      <!-- 轮播(Carousel)项目 -->
      <div class="carousel-inner bor_btm">
          <div class="item active" >
              <div class="pic">
                  <img src="img/01.jpg" >
                  <img src="img/02.jpg" >
                  <img src="img/03.jpg" >
                  <img src="img/04.jpg" >
              </div>
          </div>
          <div class="item">
              <div class="pic">
                  <img src="img/01.jpg" >
                  <img src="img/02.jpg" >
                  <img src="img/03.jpg" >
                  <img src="img/04.jpg" >
              </div>
          </div>
          <div class="item">
              <div class="pic">
                  <img src="img/01.jpg" >
                  <img src="img/02.jpg" >
                  <img src="img/03.jpg" >
                  <img src="img/04.jpg" >
              </div>
          </div>
       </div>
       <!-- 轮播(Carousel)导航 -->
       <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
       <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>      
</div>
</body>

需要JS初始化一下

$(document).ready(function(){
    $('#myCarousel').carousel();
    }
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式