Bootstrap简介

2018年1月5日 391点热度 0人点赞 0条评论

图片

图片

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>

5效果展示

  

图片

本文属于原创,如有疑问请后台留言,如有转载请标注原作者,版权归本公众号所有。如果你喜欢我写的文章请关注 java资源社区,欢迎大家继续关注本公众号的技术博文。如果您觉得本文章对你有所帮助的话,不妨点个赞,您的支持就是我坚持原创的动力。

图片

图片

38270Bootstrap简介

这个人很懒,什么都没留下

文章评论