Twitter Bootstrap自定义CSS包含

Question

当使用自定义css和Twitter Bootstrap覆盖某些样式时,最好在引导响应css之前或之后放置自定义css链接吗？

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">

要么

<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Your custom css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

各自的优点和缺点是什么？

如果我在bootstrap-responsive.css之后编辑主体填充,如下所示:

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">

/* Add padding for navbar-top-fixed */
body {
  padding-top: 60px;
  padding-bottom: 40px;
}

然后我还必须使用媒体查询来修复响应式布局,因为我已经覆盖了全局体型.

/* Fix to remove top padding for narrow viewports */
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
}

Answer 1

在Bootstrap CSS之后放置自定义CSS通常会更好.我想你想要自定义CSS覆盖Bootstrap CSS.

在Bootstraps之后放置自定义样式的好处是,您可以使用与它们相同的选择器来更改Bootstraps CSS中设置的任何内容.让改变小事很容易.如果使用相同的选择器,则浏览器将使用应用于元素的最后一个规则.

我无法看到在自定义CSS之后放置Bootstrap CSS的任何优点,编写自己的样式然后用Bootstrap覆盖它们真的没有多大意义......

例如,这不是bootstrap CSS,但如果您在head部分中有以下内容,它将以相同的方式工作:

<link href="framework.css" rel="stylesheet" type="text/css" />
<link href="custom-styles.css" rel="stylesheet" type="text/css" />

然后framework.css你有以下内容:

div.row {
    border: 1px solid #eee;
    border-radius: 3px;
    margin-bottom: 50px;
    padding: 15px;
}

但后来你意识到你想添加一个红色背景(为什么哦为什么......)并改变边界半径,你可以在以下方面custom-styles.css:

div.row {
    background-color: red;
    border-radius: 10px;
}

应用于元素的结果CSS将是:

div.row {
    background-color: red;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 50px;
    padding: 15px;
}

因为样式来自custom-styles.css覆盖现有的样式,framework.css并且还应用了其他样式!:)