首页 > 其他 > 详细

bootstrap使用详细教程,并用bootstrap实现轮播图(carousel)

时间:2019-07-12 00:26:33      阅读:109      评论:0      收藏:0      [点我收藏+]

1.下载bootstrap,下载地址:https://v3.bootcss.com

  1.1点击下载
技术分享图片
   1.2

技术分享图片

2.下载好后解压,然后把解压后的文件夹,放到自己的项目下 。该解压文件有三个文件。

技术分享图片

3.在自己的HTML文件里<head>标签中引入就能用了,如果用到js还得引入js文件

  引入css:

  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

  引入js: 

  <script src="jquery.js"></script>   (jquery.js也是下载好的,放在该项目下)
  <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

4.用bootstrap实现轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        /*.item img {*/
        /*width: 300px;*/
        /*height: 200px;*/
        /*}*/
        .carousel {
            width: 525px;
            height: 210px;
        }

        img {
            width: 525px;
            height: 210px;
        }

    </style>
</head>

<body>

<div id="carousel-example-generic" class="carousel slide center-block" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="轮播图1.jpg" alt="...">
            <div class="carousel-caption">
                图1
            </div>
        </div>
        <div class="item">
            <img src="轮播图2.jpg" alt="...">
            <div class="carousel-caption">
                图2
            </div>
        </div>
        <div class="item">
            <img src="轮播图3.jpg" alt="...">
            <div class="carousel-caption">
                图3
            </div>
        </div>
        <div class="item">
            <img src="轮播图4.jpg" alt="...">
            <div class="carousel-caption">
                图4
            </div>
        </div>
        <div class="item">
            <img src="轮播图5.jpg" alt="...">
            <div class="carousel-caption">
                图5
            </div>
        </div>
        轮播图下面的一些介绍
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>


<!--下面测试图片居中方式,carousel不能用text-aline:center 实现居中-->
<br><br>
<!--<div class="c1">-->
    <!--<img src="轮播图1.jpg">-->
<!--</div>-->

</body>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    $(‘.carousel‘).carousel({
        interval: 2000
    })
</script>
</html>

 

bootstrap使用详细教程,并用bootstrap实现轮播图(carousel)

原文:https://www.cnblogs.com/he-qing-qing/p/11173498.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!