我如何重写引导CSS样式?

我需要修改bootstrap.css以适合我的网站。我觉得最好创建一个单独的custom.css文件，而不是直接修改bootstrap.css，一个原因是应该bootstrap.css得到更新，我将遭受尝试重新包括我所有的修改。我将为这些样式牺牲一些加载时间，但对于我覆盖的少数样式来说，这可以忽略不计。

我Hw重写bootstrap.css，以便我删除一个锚/类的风格?例如，如果我想删除图例的所有样式规则:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

我可以在bootstrap.css中删除所有这些，但如果我对覆盖CSS的最佳实践的理解是正确的，我应该做什么呢?

为了明确起见，我想删除所有这些图例的样式，并使用父CSS值。结合Pranav的回答，我会做下面的事情吗?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(我希望有一种方法可以做到以下几点:)

legend {
  clear: all;
}

当前回答

这应该不会对加载时间造成太大影响，因为您覆盖了基本样式表的部分内容。

以下是我个人遵循的一些最佳实践:

总是在基本CSS文件之后加载自定义CSS(没有响应)。尽可能避免使用!important。这可以覆盖基本CSS文件中的一些重要样式。如果你不想丢失媒体查询，总是在custom.css之后加载bootstrap-responsive.css。-必须遵循更喜欢修改所需的属性(不是全部)。

2013-12-21 16:54:36

其他回答

使用jquery css而不是css…Jquery有优先级比bootstrap css…

e.g

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

2017-05-29 02:04:24

更新2021 -引导4和引导5

有3条规则来遵循当覆盖引导CSS..

import/include bootstrap.css在你的CSS规则之前(覆盖) 使用比Bootstrap CSS选择器更多的CSS专一性(或相等) 如果任何规则被重写，请使用!important属性强制执行规则。如果你遵循规则1和规则2，这应该是不必要的，除非使用Bootstrap实用程序类，这些类通常包含!important，就像这里解释的那样

是的，重写应该放在一个单独的styles.css(或custom.css)文件中，这样bootstrap.css就不会被修改。这使得在不影响覆盖的情况下更容易升级Bootstrap版本。对styles.css的引用紧跟在bootstrap.css之后，以便重写工作。

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">

只需在自定义CSS中添加任何需要的更改。例如:

legend {
  display: block;
  width: inherit;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: initial;
}

注意:在重写CSS中使用!important不是一个好的实践，除非您正在重写一个引导实用程序类。CSS 特异性一个CSS类覆盖另一个CSS类总是有效的。只要确保你使用的CSS选择器和bootstrap.css一样，或者比bootstrap.css更具体

例如，考虑Bootstrap 4深色导航条链接颜色。这里是bootstrap.css…

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}

所以，要覆盖导航栏的链接颜色，你可以使用相同的选择器，或更具体的选择器，如:

#mynavbar .navbar-nav .nav-link {
    color: #ffcc00;
}

例如:https://codeply.com/p/FyQapHImHg

当CSS选择器相同时，最后一个优先，这就是为什么styles.css应该跟随bootstrap.css。

2018-08-28 02:15:45

这应该不会对加载时间造成太大影响，因为您覆盖了基本样式表的部分内容。

以下是我个人遵循的一些最佳实践:

2013-12-21 16:54:36

给ID图例和应用css。像添加id hello到legend()， css如下:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

2018-05-25 07:10:44

要重置在引导中为图例定义的样式，您可以在css文件中执行以下操作:

legend {
  all: unset;
}

裁判:https://css-tricks.com/almanac/properties/a/all/

CSS中的all属性重置所有所选元素的属性属性，除了方向和unicode属性控制文本方向。

可能的值有:initial, inherit & unset。

附注:clear属性用于float (https://css-tricks.com/almanac/properties/c/clear/)

2018-08-28 04:57:24

我如何重写引导CSS样式?

推荐文章

最新文章

标签