一起使用 Bootstrap 和我自己的 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26640250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Bootstrap and my own CSS together
提问by ahgk
I know basic CSS, but I'm not experienced. I want to use bootstrap's CSS file, but I want to add my own style codes too. What should I do for that? Should I add Bootstrap styles first and then mine? Is that the best way?
我知道基本的 CSS，但我没有经验。我想使用 bootstrap 的 CSS 文件，但我也想添加我自己的样式代码。我该怎么做？我应该先添加 Bootstrap 样式，然后再添加我的样式吗？这是最好的方法吗？
采纳答案by Bojan Petkovski
You will have the stylesheets order like this, first you will include bootstrap css, then your stylesheet file. Why is that? Because that way you can overwrite the classes from the framework without using !important. You can write your own classes and include them in your layout, you can use bootstrap classes and make adjustments to them as you need. When you mix your classes and bootstrap classes check what attributes are added from their classes, do you need them or not etc...
您将拥有这样的样式表顺序，首先您将包含 bootstrap css，然后是您的样式表文件。这是为什么？因为这样你就可以在不使用 !important 的情况下覆盖框架中的类。您可以编写自己的类并将它们包含在您的布局中，您可以使用引导类并根据需要对它们进行调整。当你混合你的类和引导类时，检查从它们的类中添加了哪些属性，你是否需要它们等等......
Example
例子
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Your external css file will go here. This is just for testing :) */
.mycustombtn{
background: #000;
}
</style>
<button type="button" class="btn btn-danger mycustombtn">Danger</button>回答by Omar Enrico Polo
You can use Bootstrap with your css, just do that (in your head tag):
您可以将 Bootstrap 与您的 css 一起使用，只需这样做（在您的 head 标签中）：
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<!-- Your file css -->
<link rel="stylesheet" href="your-file-css.css" />
You can even overwrite some directive, just put them in you file (but isn't a best practice).
您甚至可以覆盖一些指令，只需将它们放在您的文件中（但不是最佳实践）。
Remember, always put the link to bootstrap before the link to your css file.
请记住，始终将 bootstrap 的链接放在 css 文件的链接之前。
Sorry for my english
对不起我的英语不好
回答by phantom
It would look something like this:
它看起来像这样：
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="yourstyle.css" rel="stylesheet" />
</head>
You can put as many CSS links as you need. I find it's usually best to put framework CSS files above your own.
您可以根据需要放置任意数量的 CSS 链接。我发现通常最好将框架 CSS 文件放在您自己的文件之上。
回答by dojs
It is all about CSS specificity.
这都是关于 CSS 特异性的。
If two properties have the same weight, the latter property is used.
如果两个属性具有相同的权重，则使用后一个属性。
You can override single CSS properties by declaring the property !important.
您可以通过声明属性来覆盖单个 CSS 属性!important。
Example;
例子;
body {
background-color: #000 !important;
}
It is an easy way to overcome CSS selector weight (or specificity) if you notice that Bootstrap styles overrides yours (helpful for a novice just trying out stuff).
如果您注意到 Bootstrap 样式覆盖了您的样式，这是克服 CSS 选择器权重（或特殊性）的一种简单方法（对于刚尝试一些东西的新手很有帮助）。
But you should read more about specificity instead - http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.
但是你应该阅读更多关于特异性的信息 - http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/。
回答by Florin Pop
You should add the bootstrap css first and then user your own, but it will be tricky because of the bootstrap's css. Make sure you check always what bootstrap classes does.
您应该先添加引导程序 css，然后再使用您自己的，但由于引导程序的 css，这会很棘手。确保始终检查引导程序类的作用。
