-1
我想知道如果有人告訴我如何使用twitter引導更改我的index.jsp頁面的背景顏色？我試過改變主體背景顏色，但它從不改變索引頁。它總是改變我創建的其他頁面的顏色，我不知道爲什麼。如果有人能告訴我如何將背景顏色更改爲黑色，我將非常感激。謝謝:)如何更改使用CSS的單個頁面的背景顏色 - twitter引導
我繼續前進，清理了我的代碼，我正在從頭開始嘗試。我已經發布了我的index.jsp和CSS代碼以供參考。
的index.jsp：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Database Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<spring:url value="/webjars/bootstrap/3.2.0/css/bootstrap.min.css" var="bootstrap"/>
<spring:url value="/webjars/jquery/1.11.1/jquery.min.js" var="jquery"/>
<spring:url value="/webjars/bootstrap/3.2.0/js/bootstrap.min.js" var="bootstrapJS"/>
<spring:url value="/resources/css/index.css" var="indexCss"/>
<link href="${bootstrap}" rel="stylesheet"/>
<link href="${indexCss}" rel="stylesheet"/>
</head>
<body>
<!--<div class="container">
<form action="test" method="post">
<input type="Submit" name="Submit">
</form>
</div>-->
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Test</h3>
<nav>
</nav>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">test Web-App</h1>
<p class="lead">Add or view your stuff below.</p>
<p><form action="books" method="post" ><input type="Submit" value="Books" name="Submit" class="btn btn-lg btn-default"></form></p>
<p> <form action="movies" method="post" ><input type="Submit" value="Movies" name="Submit" class="btn btn-lg btn-default"> </form></p>
<p><form action = "music" method = "post"><input type ="Submit" value = "Music" name = "Submit" class ="btn btn-lg btn-default"></form></p>
<p><form action = "contacts" method = "post"><input type ="Submit" value = "Contact" name = "Submit" class ="btn btn-lg btn-default"></form></p>
</div>
<img class="visible-xs img-responsive src="C:/Users/test/Documents/CODING/JobProjects/Hibernate Projects/EntertainmentApp/src/main/webapp/resources/images/title.jpg"/>
<img src="resources/images/title.jpg" class="img-fluid" alt="Responsive image">
<div class="container">
<form action="test" method="post">
<input type="Submit" name="Submit">
</form>
</div>
<div class="mastfoot">
<div class="inner">
<p>Created by <a href="test">test</a></p>
</div>
</div>
</div>
</div>
</div>
<script src="${jquery}"></script>
<script src="${bootstrapJS}"></script>
</body>
</html>
CSS頁面：
.entertainmentDisplay {
margin-top: 20%;
margin-left:25%;
margin-right: 25%;
}
.bottomColor {
color: #282828 ;
}
a,
a:focus,
a:hover {
color: #fff;
}
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
background-color: #fff;
border: 1px solid #fff;
margin: 5px;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
color: #333;
text-shadow: none;
background-color: #fff;
border: 1px solid #000000;
margin: 5px;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #989898 ;
}
body {
color: #fff;
text-align: center;
/*text-shadow: 0 1px 3px rgba(0,0,0,.5);*/
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: inline;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff; /* IE8 proofing */
color: rgba(255,255,255,.75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
table.zebra-style {
font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align:left;
margin-bottom:25px;
border: 2px solid black;
}
table.zebra-style th {
color: #fff;
font-size: 16px;
font-weight: normal;
padding: 10px 8px;
background:#666;
}
table.zebra-style td {
color: black;
padding: 8px;
font-size:14px;
}
table.zebra-style tr.odd {
background:#f2f2f2;
}
'<！DOCTYPE HTML PUBLIC 「 - // W3C // DTD HTML 5過渡// EN」' - 有沒有這樣的！DOCTYPE。使用[正確的HTML 5文檔類型]（https://www.w3.org/TR/html5/syntax.html#the-doctype） – Quentin