IDEA使用BootStrap做轮播图

最新推荐文章于 2023-10-16 18:00:25 发布

慕杰员

最新推荐文章于 2023-10-16 18:00:25 发布

阅读量737

点赞数

文章标签： java spring boot maven html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_44456650/article/details/129650186

版权

在官网找做轮播图的插件地址：JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)。

在官网找到轮播图代码如下：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

打开IDEA新工程

给大家一个链接。一键生成SpringBoot代码。使用IDEA一键生成SpringBoot流程_15311078077的博客-CSDN博客

bootstrap-3.4.1-dist下载地址

起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)

别忘了先下载jquery-3.3.1。

下载完之后放置位置如下图。

启动类继承WebMvcConfigurationSupport

index.html首页代码如下：

<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}" type="text/css">
    <link rel="stylesheet" href="../static/css/bootstrap-theme.css" th:href="@{/css/bootstrap-theme.css}" type="text/css">
</head>
<body>
<div>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../static/img/1.png" th:src="@{/img/1.png}" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="../static/img/2.png" th:src="@{/img/2.png}" alt="...">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            ...
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<script src="../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}" type="text/javascript" ></script>
<script src="../static/js/bootstrap.js" th:src="@{/js/bootstrap.js}" type="text/javascript" ></script>
</body>
</html>

点击运行

网页显示的轮播图

慕杰员

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
IDEA使用BootStrap做轮播图

在官网找做轮播图的插件地址：JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)。打开IDEA新工程给大家一个链接。一键生成SpringBoot代码。使用IDEA一键生成SpringBoot流程_15311078077的博客-CSDN博客起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)别忘了先下载jquery-3.3.1。下载完之后放置位置如下图。
复制链接

扫一扫