Bootstrap简介

1Bootstrap简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

2官网链接

http://www.bootcss.com/

3Bootstrap包含的组件

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件:

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、图片轮播、进度条、媒体对象等

4Bootstrap实现图片轮播

<!DOCTYPE html>
<html>
<head>
 <title>图片轮播</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 文件引入 -->
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
 <script src="https://cdn.bootcss.com/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>1</h3>
       <p>Java资源社区!</p>
     </div>
   </div>
   <div class="carousel-item">
     <img src="../images/2.jpg">
     <div class="carousel-caption">
       <h3>2</h3>
      <p>Java资源社区!</p>
     </div>
   </div>
   <div class="carousel-item">
     <img src="../images/3.jpg">
     <div class="carousel-caption">
       <h3>3</h3>
      <p>Java资源社区!</p>
     </div>
   </div>

 <div class="carousel-item">
     <img src="../images/4.jpg">
     <div class="carousel-caption">
       <h3>4</h3>
      <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>