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

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 {*/
        /* 300px;*/
        /*height: 200px;*/
        /*}*/
        .carousel {
             525px;
            height: 210px;
        }

        img {
             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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/he-qing-qing/p/11173498.html