Twitter Bootstrap自定义CSS包含 [英] Twitter Bootstrap Custom CSS inclusion

问题描述

当使用自定义css以及覆盖某些样式的Twitter Bootstrap时，最好是在引导响应css之前或之后放置自定义css链接。

When using custom css along with Twitter Bootstrap that overwrites some styles is it better to place the custom css link before or after the bootstrap-responsive 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">

每个的优点和缺点是什么？

and what are the pros and cons of each?

如果我在bootstrap-responsive.css之后编辑body填充，像这样：

If I edit the body padding after the bootstrap-responsive.css like so:

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

然后我还必须使用媒体查询修复响应布局全局主体样式。

Then I must also fix the responsive layout using a media query as I have overwritten the global body style.

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

推荐答案

通常最好将自定义CSS放在Bootstrap CSS之后。我想象你想要自定义CSS来覆盖Bootstrap CSS。

It's usually better to place your custom CSS after the Bootstrap CSS. I'd imagine that you're wanting the custom CSS to override the Bootstrap CSS.

在Bootstraps之后放置自定义样式的优点是，您可以通过使用与它们相同的选择器来更改在Bootstraps 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.

我真的看不到在自定义CSS之后放置Bootstrap CSS的任何优势，编写自己的样式然后覆盖它们真的没有什么意义与Bootstrap的...

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

例如，这不是引导CSS，但它将工作方式相同，如果你在头部有以下： p>

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

然后在 framework.css

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

但是你意识到你想添加一个红色的背景..）并更改边框半径，您可以在 custom-styles.css 中具有以下内容：

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

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

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

因为 custom-styles.css 覆盖 framework.css 中现有的那些，其他的也应用了！ ：）

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

这篇关于Twitter Bootstrap自定义CSS包含的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！