2017-01-03 18 views
1

私は、ブートストラップから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>

ポンポンファイル

<?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のスラッシュが欠落していたこれは私の元の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

あなたはプロパティがプロパティはeffect.I'mは以下のスニペットを追加参照していること.SET ボーダータイプ境界線の幅を指定していなかったので、あなたが効果を見ることができません。 ボーダーを使用:border_width border_type border_colour;私のcssファイル

をインポートするときに、私はそれを解決し

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

関連する問題