2017-01-03 1 views
1

Я хотел бы знать, как переопределить css из Bootstrap. Это то, что я пробовал до сих пор. Я создал отдельный файл css, и я вызываю классы Bootstrap css и вношу некоторые изменения, но я не вижу различий в классе, который я изменил.Spring + Thymeleaf + Bootstrap

Html и CSS файл

.table { 
 
    border-color: crimson; 
 
} 
 

 
.table-striped { 
 
    border-color: crimson; 
 
}
<!DOCTYPE html> 
 
<html lang="en" xmlns:th="http://www.thymeleaf.org"> 
 
<head> 
 
    <title>Spring Core Online Tutorial - List Products</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 

 
    <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css" 
 
      th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}" 
 
      rel="stylesheet" media="screen"/> 
 

 
    <script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js" 
 
      th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script> 
 

 
    <link href="../../static/css/spring-core.css" 
 
      th:href="@{css/spring-core.css}" rel="stylesheet" media="screen"/> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div th:if="${not #lists.isEmpty(products)}"> 
 
     <h2>Product List</h2> 
 
     <table class="table table-striped"> 
 
      <tr> 
 
       <th>Id</th> 
 
       <th>Description</th> 
 
       <th>Price</th> 
 
       <th>Image URL</th> 
 
       <th>Show</th> 
 
       <th>Edit</th> 
 
       <th>Delete</th> 
 
      </tr> 
 
      <tr th:each="product : ${products}"> 
 
       <td th:text="${product.id}"></td> 
 
       <td th:text="${product.description}"></td> 
 
       <td th:text="${product.price}"></td> 
 
       <td th:text="${product.imageUrl}"></td> 
 
       <td><a th:href="${'/product/show/' + product.id}">View</a> </td> 
 
       <td><a th:href="${'/product/edit/' + product.id}">Edit</a> </td> 
 
       <td><a th:href="${'/product/delete/' + product.id}">Delete</a> </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <a href="/product/new">New Product</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Pom файл

<?xml version="1.0" encoding="UTF-8"?> 

http://maven.apache.org/xsd/maven-4.0.0.xsd» > 4.0.0

<groupId>com.designfreed</groupId> 
<artifactId>spring-mvc</artifactId> 
<version>0.0.1-SNAPSHOT</version> 
<packaging>jar</packaging> 

<name>spring-mvc</name> 
<description>Demo project for Spring Boot</description> 

<parent> 
    <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-starter-parent</artifactId> 
    <version>1.4.3.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> 
</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>com.h2database</groupId> 
     <artifactId>h2</artifactId> 
     <scope>runtime</scope> 
    </dependency> 
    <dependency> 
     <groupId>mysql</groupId> 
     <artifactId>mysql-connector-java</artifactId> 
     <scope>runtime</scope> 
    </dependency> 
    <dependency> 
     <groupId>org.springframework.boot</groupId> 
     <artifactId>spring-boot-starter-test</artifactId> 
     <scope>test</scope> 
    </dependency> 

    <dependency> 
     <groupId>org.webjars</groupId> 
     <artifactId>bootstrap</artifactId> 
     <version>3.3.5</version> 
    </dependency> 
    <dependency> 
     <groupId>org.webjars</groupId> 
     <artifactId>jquery</artifactId> 
     <version>2.1.4</version> 
    </dependency> 
</dependencies> 

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

Надеюсь, что кто-то может помочь!

Большое спасибо!

+0

убедитесь, что ваш пользовательский css загружается после файла начальной загрузки – happymacarts

ответ

1

Я решил, я пропускал косую черту на моем HTML при импорте мой CSS файл

Это был мой оригинальный файл .html

<link href="../../static/css/spring-core.css" 
 
      th:href="@{css/spring-core.css}" rel="stylesheet" media="screen"/>

Это мой html с исправленной ошибкой

<link href="../../static/css/spring-core.css" 
 
      th:href="@{/css/spring-core.css}" rel="stylesheet" media="screen"/>

Спасибо за ответ, как они помогли мне нацелиться на конкретные части, которые я хотел!

0

Border цвет не применяется к .table, .table-striped классам, он устанавливается в Bootstrap со следующим селектором:

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,  
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { 
    padding: 8px; 
    line-height: 1.42857143; 
    vertical-align: top; 
    border-top: 1px solid #ddd; 
} 

Убедитесь, что вы используете селекторы, используемый Bootstrap, чтобы сделать ваши настройки.

0

вы не можете увидеть эффект, потому что вы не указали типа границы и границы ширины свойства .set, что свойства, чтобы увидеть effect.I'm добавила фрагмент ниже. использовать границу: border_width border_type border_colour; установить ваши границы

.table { 
 
    border:1px solid crimson; 
 
} 
 

 
.table-striped { 
 
    border:1px solid crimson ; 
 
}
<!DOCTYPE html> 
 
<html lang="en" xmlns:th="http://www.thymeleaf.org"> 
 
<head> 
 
    <title>Spring Core Online Tutorial - List Products</title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
 

 
    <link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css" 
 
      th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}" 
 
      rel="stylesheet" media="screen"/> 
 

 
    <script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js" 
 
      th:src="@{/webjars/jquery/2.1.4/jquery.min.js}"></script> 
 

 
    <link href="../../static/css/spring-core.css" 
 
      th:href="@{css/spring-core.css}" rel="stylesheet" media="screen"/> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div th:if="${not #lists.isEmpty(products)}"> 
 
     <h2>Product List</h2> 
 
     <table class="table table-striped"> 
 
      <tr> 
 
       <th>Id</th> 
 
       <th>Description</th> 
 
       <th>Price</th> 
 
       <th>Image URL</th> 
 
       <th>Show</th> 
 
       <th>Edit</th> 
 
       <th>Delete</th> 
 
      </tr> 
 
      <tr th:each="product : ${products}"> 
 
       <td th:text="${product.id}"></td> 
 
       <td th:text="${product.description}"></td> 
 
       <td th:text="${product.price}"></td> 
 
       <td th:text="${product.imageUrl}"></td> 
 
       <td><a th:href="${'/product/show/' + product.id}">View</a> </td> 
 
       <td><a th:href="${'/product/edit/' + product.id}">Edit</a> </td> 
 
       <td><a th:href="${'/product/delete/' + product.id}">Delete</a> </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-sm-3"> 
 
      <a href="/product/new">New Product</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>