我需要修改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;
}

当前回答

参见https://bootstrap.themes.guide/how-to-customize-bootstrap.html

For simple CSS Overrides, you can add a custom.css below the bootstrap.css <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/custom.css"> For more extensive changes, SASS is the recommended method. create your own custom.scss import Bootstrap after the changes in custom.scss For example, let’s change the body background-color to light-gray #eeeeee, and change the blue primary contextual color to Bootstrap's $purple variable... /* custom.scss */ /* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; /* -------begin customization-------- */ /* simply assign the value */ $body-bg: #eeeeee; /* or, use an existing variable */ $theme-colors: ( primary: $purple ); /* -------end customization-------- */ /* finally, import Bootstrap to set the changes! */ @import "bootstrap";

其他回答

我发现(bootstrap 4)把你自己的CSS放在bootstrap. CSS和.js后面是最好的解决方案。

找到您想要更改的项(inspect element)并使用完全相同的声明,然后它将被覆盖。

我花了一点时间才想明白。

要重置在引导中为图例定义的样式,您可以在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/)

在html的头部部分,将custom.css放在bootstrap.css下面。

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

然后在custom.css中,你必须对你想覆盖的元素使用完全相同的选择器。在legend的情况下,它只是在custom.css中保持legend,因为bootstrap没有任何更具体的选择器。

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

但以h1为例,你需要注意更具体的选择器比如。jumbotron h1,因为

h1 {
  line-height: 2;
  color: #f00;
}

不会覆盖

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

这里有一个css选择器的特异性的帮助解释,你需要了解确切地知道哪种样式规则将应用于一个元素。 http://css-tricks.com/specifics-on-css-specificity/

其他一切只是复制/粘贴和编辑样式的问题。

如果您计划进行任何较大的更改,那么直接在bootstrap中进行更改并重新构建可能是一个好主意。然后,可以减少加载的数据量。

请参考GitHub上的Bootstrap以获得构建指南。

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

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

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