bootstrap 轮播效果

最新推荐文章于 2023-10-22 20:57:58 发布

两鬓已不能斑白

最新推荐文章于 2023-10-22 20:57:58 发布

阅读量858

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u010429424/article/details/78441474

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先来看一下效果：

这里写图片描述

废话不多说，上代码：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>&copy; 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其他的内容）：

这里写图片描述

两鬓已不能斑白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 轮播效果

先来看一下效果：废话不多说，上代码：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-
复制链接

扫一扫

专栏目录