使用BootStrap进行轮播图的制作
Bootstrap轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
<!DOCTYPEhtml> <htmllang="zh-cn"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>轮播图</title> <linkhref="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"rel="stylesheet"/> </head> <style> .carousel{ height:500px; } .carousel.item{ height:500px; } .carousel.itemimg{ width:100%; } </style> <body> <divid="carousel-example-generic"class="carouselslide"data-ride="carousel"> <!--Indicators轮播指标--> <olclass="carousel-indicators"> <lidata-target="#carousel-example-generic"data-slide-to="0"class="active"></li> <lidata-target="#carousel-example-generic"data-slide-to="1"></li> <lidata-target="#carousel-example-generic"data-slide-to="2"></li> </ol> <!--Wrapperforslides轮播项目--> <divclass="carousel-inner"role="listbox"> <divclass="itemactive"> <imgsrc="http://img.mukewang.com/5412ad400001e52014280484.jpg"alt="..."> <divclass="carousel-caption"> 11英寸MacBookAir充电一次可运行长达9小时,而13英寸机型则可运行长达12小时。 </div> </div> <divclass="item"> <imgsrc="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg"alt="..."> <divclass="carousel-caption"> 无论是什么任务,配备IntelHDGraphics5000图形处理器的第四代IntelCore处理器都能应对自如。 </div> </div> <divclass="item"> <imgsrc="http://img.mukewang.com/5412ae5c0001653b12800644.jpg"alt="..."> <divclass="carousel-caption"> 有了新一代802.11ac技术,MacBookAir令Wi-Fi速度超越极限。 </div> </div> </div> <!--Controls--> <aclass="leftcarousel-control"href="#carousel-example-generic"role="button"data-slide="prev"> <spanclass="glyphiconglyphicon-chevron-left"></span> <spanclass="sr-only">Previous</span> </a> <aclass="rightcarousel-control"href="#carousel-example-generic"role="button"data-slide="next"> <spanclass="glyphiconglyphicon-chevron-right"></span> <spanclass="sr-only">Next</span> </a> </div> <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
以上所述是小编给大家介绍的使用BootStrap进行轮播图的制作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!