Twitter Bootstrap自定义CSS包含

发布时间：2020-12-18 00:14:39 所属栏目：安全来源：网络整理

导读：当使用自定义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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!