Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
http://www./
Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件: 下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、图片轮播、进度条、媒体对象等
html> head> title>图片轮播title> meta charset='utf-8'> meta name='viewport' content='width=device-width, initial-scale=1'> link rel='stylesheet' href='https://cdn./bootstrap/4.0.0-beta/css/bootstrap.min.css'> script src='https://cdn./jquery/3.2.1/jquery.min.js'>script> script src='https://cdn./popper.js/1.12.5/umd/popper.min.js'>script> script src='https://cdn./bootstrap/4.0.0-beta/js/bootstrap.min.js'>script> style> /* 样式设置 */ .carousel-inner{ width: 1300px; height: 800px; } .carousel-inner img { width: 100%; height: 100%; } style> head> body>
div id='demo' class='carousel slide' data-ride='carousel'> ul class='carousel-indicators'> li data-target='#demo' data-slide-to='0' class='active'>li> li data-target='#demo' data-slide-to='1'>li> li data-target='#demo' data-slide-to='2'>li> li data-target='#demo' data-slide-to='3'>li> ul>
div class='carousel-inner'> div class='carousel-item active'> img src='../images/1.jpg'> div class='carousel-caption'> h3>1h3> p>Java资源社区!p> div> div> div class='carousel-item'> img src='../images/2.jpg'> div class='carousel-caption'> h3>2h3> p>Java资源社区!p> div> div> div class='carousel-item'> img src='../images/3.jpg'> div class='carousel-caption'> h3>3h3> p>Java资源社区!p> div> div>
div class='carousel-item'> img src='../images/4.jpg'> div class='carousel-caption'> h3>4h3> p>Java资源社区!p> div> div> div> a class='carousel-control-prev' href='#demo' data-slide='prev'> span class='carousel-control-prev-icon'>span> a> a class='carousel-control-next' href='#demo' data-slide='next'> span class='carousel-control-next-icon'>span> a>
div>
body> html>
|