Twitter的引导自定义CSS列入(Twitter Bootstrap Custom CSS in

当使用自定义的CSS与Twitter的引导覆写一些风格是它更好地放置自定义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">

什么是各自的利弊？

如果我编辑，像这样的自举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:

它通常是更好地将您的自定义CSS的引导CSS以后。 我想像你正在想自定义CSS重写引导CSS。

将您的自定义样式后白手起家的是，你可以更改在白手起家CSS通过使用他们做同样的选择设置任何的优势。 使它很容易改变的小事。 如果使用相同的选择，然后浏览器将使用应用于元素的最后一个规则。

我实在看不出放置引导CSS自定义CSS后的任何好处，它不会真正使多大意义，写你自己的风格，然后用引导的覆盖他们。

例如，这不是引导CSS，但它的工作方式相同，如果你有你的头部分以下内容：

<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和附加的人太应用！ :)

Answer 2:

我想，如果你把style.css的顶部，然后bootstarp样式将覆盖它。如果你把style.css中在底部，那么引导风格将与您的自定义样式被重写

文章来源: Twitter Bootstrap Custom CSS inclusion