这篇文章主要介绍了基于bootstrap实现广告轮播带图片和文字效果,效果非常棒，需要的朋友可以参考下
  代码如下所示：
  <!DOCTYPE html>
  <html lang="zh-cn">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>基于bootstrap的轮播广告页，带图片和文字</title>
  <link rel="stylesheet" href=" //netdna.bootstrapcdn/bootstrap/3.1.1/css/bootstrap.min.
css">
  <style>
  .carousel {
  height: 500px;
  }
  .carousel .item {
  height: 500px;
  }
  .carousel .item img {
  width: 100%;
  }
css特效文字  </style>
  </head>
  <body>
  <!-- 轮播广告 -->
  <div id="LBbox" class="carousel slide" data-ride="carousel">
  <!-- 圆点按钮 -->
  <ol class="carousel-indicators">
  <li data-target="#LBbox" data-slide-to="0" class="active"></li>
  <li data-target="#LBbox" data-slide-to="1"></li>
  </ol>
  <!-- 轮播内容 -->
  <div class="carousel-inner" role="listbox">
  <div class="item active">
  <img src="img.mukewang/5412ad7c0001d2eb10880541.jpg" alt="1 slide">
  <div class="carousel-caption">
  <h1>第四代 Intel Core 处理器</h1>
  <p>无论是什么任务，配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。</p>
  <p>
  <a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a>
  </p>
  </div>
  </div>
  <div class="item">
  <img src="img.mukewang/5412ae5c0001653b12800644.jpg" alt="2 slide">
  <div class="carousel-caption">
  <h1>MacBook Air</h1>
  <p>有了新一代 802.11ac 技术，MacBook Air 令 Wi-Fi 速度超越极限。</p>
  <p>
  <a href="#" class="btn btn-lg btn-primary" role="button">点我下载</a>
  </p>
  </div>
  </div>
  </div>
  <!-- 左按钮 -->
  <a href="#LBbox" class="left carousel-control" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">上一页</span>
  </a>
  <!-- 右按钮 -->
  <a href="#LBbox" class="right carousel-control" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">下一页</span>
  </a>
  </div>
  <script src="cdn.bootcss/jquery/1.11.1/jquery.min.js"></script>
  <script src="cdn.bootcss/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
  </html>
  以上所述是小编给大家介绍的基于bootstrap实现广告轮播带图片和文字效果，希望对大家有所帮助                                                                                                                   
 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。