2017-01-03 79 views
1

我想知道如何從Bootstrap覆蓋CSS。這是我到目前爲止所嘗試的。我創建了一個單獨的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

我解決了它,我輸入我的CSS文件

時失蹤在我的HTML斜線這是我原來的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

邊框顏色不應用於.table.table-striped類,它是在引導設置有以下選擇:

.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; 
} 

確保你使用的使用引導程序,讓您的定製的選擇。

0

你看不到,因爲你沒有指定邊框類型邊框寬度性.SET是性能看effect.I'm下方增加了一個片段中的作用。 使用border: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>