Bootstrap轮播图

最新推荐文章于 2024-01-15 19:39:34 发布

xx-03

最新推荐文章于 2024-01-15 19:39:34 发布

阅读量1.5k

点赞数 1

分类专栏： java 文章标签： bootstrap javascript 前端

本文链接：https://blog.csdn.net/weixin_65736978/article/details/124570618

版权

本文介绍了如何使用Bootstrap创建图片轮播。首先，你需要至少两张图片。接着，获取Bootstrap的CSS和JS文件以及jQuery 1.10+的JS文件，并正确放置在项目目录中。然后，将CSS文件放入css目录，JS文件放入js目录，图片放入img目录。最后，在HTML中编写代码，利用Bootstrap Carousel插件的方法和事件来设置轮播顺序。

摘要由CSDN通过智能技术生成

1.准备轮播需要的图片，大于等于两张。

2.准备bootstrap的css和js以及jquery1.10+的js文件文件，这个网上一搜一大堆，也可以去官网下载。

3.将下载的css文件放入项目的css目录内，js文件放如js目录内，以及图片放在img(专放图片)的文件夹内。

4.在html中写代码，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>