先来看一下效果：

bootstrap 轮播效果_html

废话不多说，上代码 ：homepage.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=0.7, minimum-scale=0.5, maximum-scale=2, user-scalable=yes">
  <link  href="bootstrap/css/bootstrap.min.css"  rel="stylesheet">
  <script src="bootstrap/js/jquery-3.2.1.min.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <title>Dreamera</title>
  <style type="text/css">#picture {
        text-align: center;
    }</style>
  </head>

  <body>

    <div class = "container">
      <div class="row">

        <!-- 左边的轮播图 -->
        <div class="col-md-6">
          <div class="carousel slide" id="carousel-231811" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-slide-to="0" data-target="#carousel-231811" class="active"</li>
              <li data-slide-to="1" data-target="#carousel-231811"</li>
              <li data-slide-to="2" data-target="#carousel-231811"></li>
            </ol>                        
            <div class="carousel-inner">
              <div class="item active">
                <center><img alt="" src="android.png"</center>
              </div>                        
              <div class="item">
                <center><img alt="" src="android2.png"</center>
              </div>                        
              <div class="item">
                <center><img alt="" src="android3.png"</center>
              </div>
            </div>
          </div>
        </div>

        <!-- 右边的二维码 -->
        <div class="col-md-6">
          <div id="picture" width="300px">
            <h1><small>Android v1.0</small></h1>
            <p>浏览器扫码</p>                                
            <img src="QRCode.png" alt="..." class="img-rounded">                        
            <h1><small>Android v1.0</small></h1>
            <p>浏览器扫码</p>                    
            <img src="new_branch.png" alt="..." class="img-rounded">
          </div>
        </div>                                      
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer" style="text-align:center;">
      <h1>
        <small>
        <span>© Dreamera |</span>
        <span>by 10405 |</span>
        <a href="mailto:1040591521@qq.com" data-show-count="true" data-lang="en">
            Contact Dreamera
        </a>
        </small>
      </h1>
    </footer>       
  </body>
</html>

bootstrap3.0中为我们提供了javascript插件，其中就包含轮播（carousel）
需要注意的是：在使用前，要引用jquery.js，并且要在bootstrap.min.js之前引用。

代码中用到的图片如下（可以ps其他的内容）：

bootstrap 轮播效果_bootstrap_02