使用BootStrap进行轮播图的制作
网络编程 2021-07-04 19:20www.168986.cn编程入门
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。这篇文章主要介绍了使用BootStrap进行轮播图的制作的相关资料,需要的朋友可以参考下
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
<!DOCTYPE html> <html lang="zh-"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>轮播图</title> <link href="//dna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /> </head> <style> .carousel { height: 500px; } .carousel .item { height: 500px; } .carousel .item img { width: 100%; } </style> <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"> <img src="http://img.mukewang./5412ad400001e52014280484.jpg" alt="..."> <div class="carousel-caption"> 11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。 </div> </div> <div class="item"> <img src="http://img.mukewang./5412ad7c0001d2eb10880541.jpg" alt="..."> <div class="carousel-caption"> 无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。 </div> </div> <div class="item"> <img src="http://img.mukewang./5412ae5c0001653b12800644.jpg" alt="..."> <div class="carousel-caption"> 有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。 </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></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"></span> <span class="sr-only">Next</span> </a> </div> <script src="http://libs.baidu./jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
以上所述是长沙网络推广给大家介绍的使用BootStrap进行轮播图的制作,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程