1
Arbeiten an einer Zitat-Generator-Website. Ich habe Bootstrap hinzugefügt, und im CSS-Code habe ich einen Teil, wo ich die Hintergrundfarbe des HTML-Elements auf eine blau-grüne Mischfarbe setze. Bootstrap entscheidet sich nur dafür, den CSS-Code zu überschreiben und setzt den Teil der Seite, der die Hintergrundfarbe des Inhalts hat, auf Weiß. Warum und wie kann ich meinen Hintergrund-Farbe behalten, was ich will esBootstrap changing background-color
var quotes = [
[
"To be prepared for war is one of the most effectual means of preserving peace.",
"George Washington"
],
[
"One man with courage is a majority.",
"Thomas Jefferson"
],
[
"National honor is a national property of the highest value.",
"James Monroe"
],
[
"The only thing we have to fear is fear itself.",
"Theodore D. Roosevelt"
],
[
"Ask not what your country can do for you, but what you can do for your country.",
"John F. Kennedy"
]
];
var currentQuote = 0;
function showNewQuote() {
\t if (currentQuote >= 5) {
\t \t currentQuote = 0; \t
\t }
\t var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
\t document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
\t document.getElementById("paragraph").innerHTML = Quote[1];
\t currentQuote++;
}html {
\t background-color: #33cccc;
}
#header, #paragraph {
\t font-family: sans-serif;
\t
}
#header {
\t padding-top: 10%;
\t font-size: 60px;
}
#paragraph {
\t padding-left: 80%;
\t font-size: 20px;
}<!DOCTYPE html>
<html>
<head>
<title>Random Quote Generator</title>
<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
\t <div class = "container">
<h1 id="header">Click the button to generate a quote!</h1>
\t <p id="paragraph"></p>
\t <button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
\t </div>
</body>
</html>
Dank es funktionierte. Es lässt mich das nicht als die Antwort markieren, bis 5 Minuten vergangen sind, aber ich werde es markieren, wenn die Abklingzeit beendet ist. Es funktioniert perfekt jetzt –
Sure :) Sie sind willkommen – Dekel