博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap之轮播图
阅读量:6304 次
发布时间:2019-06-22

本文共 969 字,大约阅读时间需要 3 分钟。

hot3.png

<!--轮播图-->

            Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

            <div class="carousel slide" id="myCarousel">//创建一个轮播图容器

                <!--1.小圆点page-->

                <ol class="carousel-indicators">

                    <li data-slide-to="0" data-target="#myCarousel" class="active"></li>

                    <li data-slide-to="1" data-target="#myCarousel"></li>

                    <li data-slide-to="2" data-target="#myCarousel"></li>

                </ol>

                <!--2.图片-->

                <div class="carousel-inner" id="img1">

                    <div class="item active">

                        <img src="http://imga1.pic21.com/bizhi/140212/07423/s10.jpg" />

                    </div>

                    <div class="item">

                        <img src="http://imga1.pic21.com/bizhi/140212/07423/s07.jpg" />

                    </div>

                    <div class="item">

                        <img src="http://imga1.pic21.com/bizhi/140118/06772/s05.jpg" />

                    </div>

                </div>

                <!--3.左右导航-->

                <!--hammer.js-->

                <a class="carousel-control left" data-slide="prev" href="#myCarousel">⬅️</a>

                <a class="carousel-control right" data-slide="next" href="#myCarousel">➡️️</a>

            </div>

转载于:https://my.oschina.net/6104zhang/blog/785964

你可能感兴趣的文章
PHP学习(四)---PHP与数据库MySql
查看>>
模版方法模式--实现的capp流程创建与管理
查看>>
软件需求分析的重要性
查看>>
eclipse的scala环境搭建
查看>>
UVA465:Overflow
查看>>
HTML5-placeholder属性
查看>>
Android选择本地图片过大程序停止的经历
查看>>
poj 2187:Beauty Contest(旋转卡壳)
查看>>
《Flask Web开发》里的坑
查看>>
Python-库安装
查看>>
Git笔记
查看>>
普通人如何从平庸到优秀,在到卓越
查看>>
SLAM数据集
查看>>
c#学习笔记05——数组&集合
查看>>
【图论算法】Dijstra&BFS
查看>>
注册和上传文件(头像)
查看>>
使用OVS
查看>>
键盘回收的几种方法
查看>>
Python(条件判断和循环)
查看>>
day4 linux安装python
查看>>