Question

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

Answer 1

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

实施例

＆＃13;

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

＆＃13;

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文件之前，始终将链接放到bootstrap。

抱歉我的英文

Answer 3

它看起来像这样：

<head>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="yourstyle.css" rel="stylesheet" />
</head>

您可以根据需要添加尽可能多的CSS链接。我发现通常最好把框架CSS文件放在你自己的上面。

Answer 4

你应该首先添加bootstrap css然后自己使用，但由于bootstrap的css，它会很棘手。确保始终检查引导类的功能。

Answer 5

关于CSS的特殊性。

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

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

实施例

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

如果您注意到Bootstrap样式会覆盖您的（有助于新手只是尝试一些东西），这是一种克服CSS选择器权重（或特异性）的简单方法。

但你应该阅读更多关于特异性的信息 - http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/。

一起使用Bootstrap和我自己的CSS

5 个答案: