Bootstrap 大图片自适应轮播

使用Bootstrap框架可以很方便实现轮播,不过,为了让大图片的宽度自动调整到容器的宽度,需要在img标签中加入

class="carousel-inner img-responsive img-rounded"

一个完整的例子如下

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
<head>
   <title>Bootstrap 大图片自适应轮播</title>
   <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <link href="css/customize.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
   <script src="bootstrap/js/bootstrap.min.js"></script>
   <script src="js/customize.js" type="text/javascript" language="javascript"></script>
   <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="bootstrap/assets/js/html5shiv.js"></script>
      <script src="bootstrap/assets/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--轮播图片-->
      <div id="career-carousel-generic" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#career-carousel-generic" data-slide-to="0" class="active"></li>
          <li data-target="#career-carousel-generic" data-slide-to="1"></li>
          <li data-target="#career-carousel-generic" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img class="carousel-inner img-responsive img-rounded" src="images\carousel\Chrysanthemum.jpg" alt="...">
            <div class="carousel-caption">
              <h1>Large Desktops are everywhere</h1>
              <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
            </div>
          </div>
          <div class="item">
            <img class="carousel-inner img-responsive img-rounded" src="images\carousel\Desert.jpg" alt="...">
            <div class="carousel-caption">
              <h1>Mobiles are outnumbering desktops</h1>
              <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
            </div>
          </div>
          <div class="item">
            <img class="carousel-inner img-responsive img-rounded" src="images\carousel\Hydrangeas.jpg" alt="...">
            <div class="carousel-caption">
              <h1>Enterprises are adopting Cloud computing fast</h1>
              <p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
            </div>
          </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#career-carousel-generic" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#career-carousel-generic" data-slide="next">
          <span class="icon-next"></span>
        </a>
      </div>

</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

5 + 17 =

− 4 = 1