Bootstrap简介

1

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

2官网链接

    

    http://www.bootcss.com/

3Bootstrap包含的组件

  

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

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

4Bootstrap实现图片轮播


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>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>

5效果展示