一起使用Bootstrap和我自己的CSS

Question

我知道基本的CSS,但我没有经验.我想使用bootstrap的CSS文件,但我也想添加自己的样式代码.我该怎么办？我应该首先添加Bootstrap样式然后再添加吗？这是最好的方式吗？

Answer 1

您将拥有这样的样式表顺序,首先您将包含bootstrap css,然后是样式表文件.这是为什么？因为这样,您可以在不使用!important的情况下覆盖框架中的类.您可以编写自己的类并将它们包含在布局中,您可以使用引导类并根据需要对它们进行调整.混合类和引导类时,检查从类中添加哪些属性,是否需要它们等等...

例

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

Answer 2

你可以在你的css中使用Bootstrap,只需这样做(在你的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" />

你甚至可以覆盖一些指令,只需将它们放在你的文件中(但这不是最佳实践).

请记住,在链接到css文件之前,始终将链接指向引导程序.

对不起我的英语不好

Answer 3

这完全取决于 CSS 的特殊性。

如果两个属性具有相同的权重，则使用后一个属性。

您可以通过声明 property 来覆盖单个 CSS 属性!important。

例子;

body {
  background-color: #000 !important;
}

如果您发现 Bootstrap 样式覆盖了您的样式（对于刚刚尝试东西的新手很有帮助），那么这是克服 CSS 选择器权重（或特异性）的简单方法。

但您应该阅读更多有关特异性的内容 - http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/。