移动web——bootstrap响应式轮播图

2021-11-20 20:01:24

基本介绍

1、bootstrap有轮播图的模板，我们只需要改动下就行。

2、这里我们将介绍桌面版本和移动版本最后是综合版本

桌面版本

1、这里的图片设置是有窍门的，不再去添加img标签，而是作为a标签的背景图片

2、背景图片的设置必须是两边很长，中间是内容，设置cover，居中

<!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">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .item a {

            display: block;

            height: 410px;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

        }

        .item a.a1 {

            background-image: url("images/slide_01_2000x410.jpg");

        }

        .item a.a2 {

            background-image: url("images/slide_03_2000x410.jpg");

        }

        .item a.a3 {

            background-image: url("images/slide_04_2000x410.jpg");

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div id="carousel-example-generic" class="carousel slide" 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>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

            <a class="a1 hidden-xs"></a>

        </div>

        <div class="item">

            <a class="a2 hidden-xs"></a>

        </div>

        <div class="item">

            <a class="a3 hidden-xs"></a>

        </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>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

移动web——bootstrap响应式轮播图

移动版本

1、移动版本需要注意img标签和a标签的宽度都是100%

<!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">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .item a {

            display: block;

            width: 100%;

        }

        .item a img {

            width: 100%;

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div id="carousel-example-generic" class="carousel slide" 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>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test01.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test02.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test03.jpg" alt="...">

            </a>

        </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>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

移动web——bootstrap响应式轮播图

综合版本

1、将两者融合在一起，在不同设备下，有不同的显示效果

2、注意使用响应式工具就行了

<!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">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <style>

        .item a:nth-child(1) {

            display: block;

            height: 410px;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

        }

        .item a:nth-child(1).a1 {

            background-image: url("images/slide_01_2000x410.jpg");

        }

        .item a:nth-child(1).a2 {

            background-image: url("images/slide_03_2000x410.jpg");

        }

        .item a:nth-child(1).a3 {

            background-image: url("images/slide_04_2000x410.jpg");

        }

        .item a:nth-child(2) {

            display: block;

            width: 100%;

        }

        .item a img {

            width: 100%;

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<div id="carousel-example-generic" class="carousel slide" 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>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

        <div class="item active">

            <a class="a1 hidden-xs"></a>

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test01.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="a2 hidden-xs"></a>

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test02.jpg" alt="...">

            </a>

        </div>

        <div class="item">

            <a class="a3 hidden-xs"></a>

            <a class="hidden-lg hidden-md hidden-sm">

                <img src="data:images/test03.jpg" alt="...">

            </a>

        </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>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>
上一篇：【学习总结】IOS程序运行过程 、UIWindow 、controller 、 UIView 创建过程的总结


下一篇：用.Net如何访问Linux下目录