个人中心
gpt4 book ai didi

spring - Bootstrap 不适用于 spring-boot？

转载 作者：行者123 更新时间：2023-12-03 23:15:39 24 4
gpt4 key购买 nike

我正在尝试安装 bootstrap 以在我使用 thymeleaf 的 spring boot 项目中使用。我在模板(index.html，如下所示)中收到此错误:

Malformed markup: Attribute "class" appears more than once in element

我认为这是因为 bootstrap 没有正确安装。下面我也有文件的图像。
我很确定所有的依赖都是正确的。

索引 HTML: 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script src="/bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <!-- <link rel="stylesheet" type="text/css"
        th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" />
    <script
        src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"> 
    </script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> -->
    <title>Home</title>
    <style></style>
</head>
<body>


<div class="navbar navbar-default" role="navigation" id="topnavbar">
    <div class="container">
        <div class="navbar-header">

            <button class="navbar-toggle" type="button" data-
                    toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span> <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="navbar-collapse collapse" id="navbar-main">
            <ul class="nav navbar-nav">
                <li><a href="/"><span class="glyphicon glyphicon-home"></span>Profile</a></li>
                <li>
                    <a href="/competition">
                        <span class="glyphicon glyphicon-star"></span> Competitions
                    </a>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/logout"> <span class="glyphicon glyphicon-user"></span>&nbsp;
                        <strong>Log out</strong>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>


<div class="container" class="row">
    <div class="page-header" id="banner">
        <div class="row">
            <div class="col-lg-8 col-md-7 col-sm-6">
                <img src="ban.png">
            </div>
            <div class="col-lg-4 col-md-5 col-sm-6">
                <div class="sponsor"></div>
            </div>
        </div>
    </div>
</div>

<div class="container"></div>

</body>

<script th:inline="javascript">
    $(document).ready(function () {
        var panels = $('.user-infos');
        var panelsButton = $('.dropdown-user');
        panels.hide();

        //Click dropdown
        panelsButton.click(function () {
            //get data-for attribute
            var dataFor = $(this).attr('data-for');
            var idFor = $(dataFor);

            //current button
            var currentButton = $(this);
            idFor.slideToggle(400, function () {
                //Completed slidetoggle
                if (idFor.is(':visible')) {
                    currentButton.html('<i class="glyphicon glyphicon- 
                    chevron - up
                    text - muted
                    "></i>');
                }
                else {
                    currentButton.html('<i class="glyphicon glyphicon- 
                    chevron - down
                    text - muted
                    "></i>');
                }
            })
        });


        $('[data-toggle="tooltip"]').tooltip();

        $('button').click(function (e) {
            e.preventDefault();
            alert("This is a demo.\n :-)");
        });
    });

</script>

</html>

POM文件: 
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
         http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>com.finalYearProject</groupId>
    <artifactId>student-life</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>student-life</name>
    <description>Jill's Student Life Final Year Project</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.8.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-
            8
        </project.reporting.outputEncoding>
        <java.version>1.8</java.version>

        <!-- upgrade to thymeleaf version 3 -->
        <thymeleaf.version>3.0.8.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-
            dialect.version>
            <thymeleaf-extras-springsecurity4.version>3.0.2.RELEASE</thymeleaf-
                extras-springsecurity4.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap-datepicker</artifactId>
            <version>1.0.1</version>
        </dependency>

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency> -->

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.2.1</version>
        </dependency>


        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf.extras</groupId>
            <artifactId>thymeleaf-extras-springsecurity4</artifactId>
        </dependency>
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.2.1</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.hsqldb</groupId>
            <artifactId>hsqldb</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <scope>provided</scope>
        </dependency>


        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
        </dependency>

        <!-- <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId>spring-session-data-redis</artifactId>
        </dependency> 

        <dependency>
            <groupId>org.springframework.session</groupId>
            <artifactId1>spring-session</artifactId>
            <version>1.2.2.RELEASE</version>
        </dependency> -->

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

项目结构:

enter image description here

最佳答案

异常将在发生错误的 html 中给出第 # 行......无论如何，实际问题在这里:

<div class="container" class="row">

Thymeleaf 不允许一个元素有两个同名的属性( Attribute "class" appears more than once in element )。只需将其更改为: 
<div class="container row">

关于spring - Bootstrap 不适用于 spring-boot？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51390127/

24 4 0
文章推荐： react-native - 如何更改 createMaterialBottomTabNavigator 标签样式(react-native)？
文章推荐： stored-procedures - 如何将 boolean 数据类型作为参数传递给存储过程？
文章推荐： apache-nifi - Apache Nifi - 使用 Kafka + 合并内容 + 放置 HDFS 以避免小文件
文章推荐： perforce - 如何在不修改本地文件的情况下取消跟踪 Perforce 更改列表中的更改(P4V 2015.2)？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com