当使用自定义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;
}
}
解决方法
在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中的现有样式,并且还会应用其他样式！