html - Bootstrap 改变背景色-6ren

html - Bootstrap 改变背景色

转载作者：行者123 更新时间：2023-11-28 16:05:27

25

4

在报价生成器网站上工作。我添加了 Bootstrap ，在 css 代码中，我有一部分将 HTML 元素的背景颜色设置为蓝绿色混合阴影。 bootstrap 只是决定覆盖 CSS 代码，并将页面中包含内容背景颜色的部分设置为白色。为什么以及如何将我的背景颜色保持为我想要的颜色

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() {
	if (currentQuote >= 5) {
		currentQuote = 0;	
	}
	var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
	document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
	document.getElementById("paragraph").innerHTML = Quote[1];
	currentQuote++;
}

html {
	background-color: #33cccc;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	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">
	<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>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

最佳答案

选项 1:确保您的 css 在 bootstrap.css 文件之后加载。

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() {
	if (currentQuote >= 5) {
		currentQuote = 0;	
	}
	var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
	document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
	document.getElementById("paragraph").innerHTML = Quote[1];
	currentQuote++;
}

<script src = "script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {
	background-color: #33cccc;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	font-size: 20px;
}
  </style>
<body>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

选项 2:使用 !important 关键字:

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() {
	if (currentQuote >= 5) {
		currentQuote = 0;	
	}
	var Quote = [quotes[currentQuote][0], quotes[currentQuote][1]];
	document.getElementById("header").innerHTML = "\"" + Quote[0] + "\"";
	document.getElementById("paragraph").innerHTML = Quote[1];
	currentQuote++;
}

body {
	background-color: #33cccc !important;
}

#header, #paragraph {
	font-family: sans-serif;
	
}

#header {
	padding-top: 10%;
	font-size: 60px;
}

#paragraph {
	padding-left: 80%;
	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">
	<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>
	<div class = "container">
    <h1 id="header">Click the button to generate a quote!</h1>
	<p id="paragraph"></p>
	<button type="button" class="btn btn-info" onclick="showNewQuote()">Generate New Quote</button>
	</div>
</body>
</html>

(请注意，我还在您的 css 中将 html 更改为 body)

关于html - Bootstrap 改变背景色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39319709/

25

4

0

文章推荐： javascript - bing map 滚动功能访问的默认箭头

文章推荐： javascript - 搜索字符串并插入新行 javascript

文章推荐： javascript - 在 Javascript 函数中获取 div 的最后一个子元素

notepad++ - 如何更改文本行的Notepad++背景色？
更新的(未保存的)文本行有明亮的粉红色(＃ffc286)背景色，更改和保存的文本行有明亮的绿色(＃b5ffb5)。任何颜色样式的背景都是相同的。我在Style Configurator中找不到它(我
Eclipse IDE - 背景色
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: Change background color of UI elements in eclipse IDE 你们可能
Android selectableItemBackground 背景色
在构建布局时，我注意到 selectableItemBackground 的背景颜色与 UI 其余部分的背景颜色不匹配。为了缓解这种情况，我想导入 {android_sdk}/platforms/{p
ios - UITableViewController 背景色
我正在努力让 UITableView 后面的颜色成为我想要的灰色。 UITableView 的背景似乎工作正常，但其后面的区域仍然保持白色？我的观点到此结束。其中只有一个单元格，并且它不是裁剪后的图
ios - CALayer 背景色
我有一个 CALayer 背景使用: CAGradientLayer *bgLayer = [BackgroundLayer blueGradient]; bgLayer.frame = self.v
css - 水平菜单 - 背景色
我有一个水平菜单。我想在菜单周围有一个边框(不是整行，只有空间菜单被覆盖)。当我在 ul 上放置边框时，它覆盖了整行，当我在 li 上放置边框时，它在菜单项之间也有边框。
css - 背景色 Css
我正在使用 bootstrap 3.0，以下是我的 HTML 代码，我遇到了背景颜色问题。 HTML代码 Collection
JQuery 背景色 Chrome
我遇到了一个示例问题，它应该在 JQuery 中的悬停事件上更改背景颜色。(符合 .css("background-color","rgba(78, 175, 212, 0.75)");) 所有其他更
php - Laravel 背景色
我正在尝试为我的 View 页面提供背景色，但当我想要所有内容时，它总是只给我 3/4 的页面浅蓝色。 (见截图)任何人都可以帮助我吗？非常感谢这是我使用的CSS代码:背景.css .contain
忽略 CSS 背景色
我正在尝试为 www.livejournal.com 上的所有页面制作时尚的用户样式。我想为文本设置样式并选择具有特定背景颜色的类型输入框，但背景颜色并未在所有输入框上设置，即使 color 已设置。
html - Bootstrap 背景色
我正在学习 Bootstrap。我在做一个主题。但是在页面底部，我在页脚标签处添加了页脚背景颜色，它没有改变。并且还注意到 footer 标签的类属性没有显示在 Firebug 检查元素中。出了什么问
html - CSS 背景色
我的 CSS 文件包含我的网页显示，网页比屏幕小(如果你知道我的意思)我试图用背景颜色填充容器的外部，但它不起作用。有人可以帮忙吗？这是我的 CSS #container { wid
matlab imagesc 背景色
我使用的是最新版本的 matlab。我正在使用带有 jet 颜色图的 imagesc 命令绘制矩阵。矩阵的背景值为零，在图像中绘制为颜色条上的最低颜色，即深蓝色。有没有办法使背景零值绘制为白色？谢谢
HTML/CSS 背景色
我一直在研究网站以弄清楚它们是如何工作的。通过下载它们并在 dream weaver cs6 中打开。但是当我在浏览器中打开下载的 html 文件时，除了绿色背景被默认的白色背景替换之外，一切都显示正
仅应用于文本的文本框的 CSS 背景色
我有两个相互重叠的文本框。第一个文本框“TextBox1”由用户输入定义。第二个“TextBox2”由自动完成功能填充。我的目标是让第一个文本框的背景仅对于已键入的文本为白色，以便生成的“TextBo
android - SlidingTabLayout 背景色
我正在尝试更改(https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/S
Android设计——RelativeLayout(背景色)
我有以下 RelativeLayout 但我想改进它。 (做一个漂亮的设计) .
Android ImageButton 背景色
我有一个 ImageButton，其背景图像具有一定的透明度。默认情况下，按钮在透明像素所在的位置获得灰色背景 - 由于 Holo.Light 主题。我尝试通过 setBackgroundColor(
iphone - UITableViewCell 背景色
我有一个 UITableViewController，我正在尝试自定义样式。我已经完成了 95%，但无法从单元格背景中移除奇怪的阴影。我在这个屏幕截图中突出显示了我要删除的内容: 为了尝试解决这个问题
Iphone UIButton 背景色
我正在循环中以编程方式创建一些 UIButton，但我在设置按钮的背景颜色时遇到了一些问题。按钮的颜色始终显示为白色。但是我在背景颜色中只使用 2 种颜色时效果很好。例如:红色:255 绿色:0 蓝

首页

博学

6Ren·AI

商城

html - Bootstrap 改变背景色