1

当使用自定义 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;
  }
}
4

2 回答 2

7

通常最好将自定义 CSS 放在 Bootstrap CSS 之后。我想您希望自定义 CSS 覆盖 Bootstrap CSS。

The advantages of placing your custom styles after Bootstraps is that you can change anything that is set in Bootstraps CSS by using the same selectors that they do. Making it very easy to change minor things. If you use the same selector then the browser will use the last rules applied to an element.

I can't really see any advantages of placing the Bootstrap CSS after your custom CSS, it wouldn't really make much sense to write your own styles and then override them with Bootstrap's...

For example, this isn't bootstrap CSS, but it would work the same way, if you had the following in your head section:

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

Then in framework.css you had the following:

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

But then you realised you wanted to add a red background (why oh why...) and change the border radius, you could have the following in custom-styles.css:

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

The resulting CSS applied to the element would be this:

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

Because the styles from custom-styles.css override the existing ones in framework.css and the additional ones are applied too! :)

于 2013-01-31T10:33:04.950 回答
0

我认为如果您将 style.css 放在顶部，那么 bootstarp 样式将覆盖它。如果您将 style.css 放在底部，则引导样式将被您的自定义样式覆盖

于 2013-01-31T10:29:40.333 回答