我如何重写引导CSS样式?

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

我Hw重写bootstrap.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;
}

我可以在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;
}
475440 次浏览
小开

链接custom.css文件作为bootstrap.css下面的最后一个条目。Custom.css样式定义将覆盖bootstrap.css

超文本标记语言

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

复制custom.css中图例的所有样式定义并对其进行更改(如margin-bottom:5px;-这将覆盖margin-bottom:20px;)

小开

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

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

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

在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/ < / p >

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

小开

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

编译指南请参考在GitHub上引导。

小开

使用!important不是一个好的选择，因为你很可能想在将来重写你自己的样式。这就留给我们CSS的优先级。

基本上，每个选择器都有自己的数字“权重”:

  • 身份证100分
  • 类和伪类10分
  • 1点标记选择器和伪元素
  • 注意:如果元素具有内联样式自动获胜(1000点)

在两种选择器样式中，浏览器总是选择权重更大的那一种。样式表的顺序只在优先级相等时才重要——这就是为什么不容易重写Bootstrap的原因。

您的选择是检查Bootstrap源，找出某些特定样式是如何定义的，并复制该选择器，使元素具有相同的优先级。但我们在这个过程中失去了Bootstrap的甜蜜。

克服这个问题最简单的方法是为页面上的根元素之一分配额外的任意ID，如:<body id="bootstrap-overrides">

这样，你可以用你的ID作为任何CSS选择器的前缀，立即为元素添加100个权重点，并覆盖Bootstrap定义:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
line-height: 1;
color: inherit;
}


/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
line-height: 1;
color: inherit;
}


/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
line-height: 1;
color: inherit;
}
小开

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

如

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




);


instead of


.mnu
{


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


}
小开

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

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

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

小开

有点晚了，但我所做的是，我在根div中添加了一个类，然后扩展了自定义样式表中的每个引导元素:

.overrides .list-group-item {
border-radius: 0px;
}
.overrides .some-elements-from-bootstrap {
/* styles here */
}

<div class="container-fluid overrides">
<div class="row">
<div class="col-sm-4" style="background-color: red">
<ul class="list-group">
<li class="list-group-item"><a href="#">Hey</a></li>
<li class="list-group-item"><a href="#">I was doing</a></li>
<li class="list-group-item"><a href="#">Just fine</a></li>
<li class="list-group-item"><a href="#">Until I met you</a></li>
<li class="list-group-item"><a href="#">I drink too much</a></li>
<li class="list-group-item"><a href="#">And that's an issue</a></li>
<li class="list-group-item"><a href="#">But I'm okay</a></li>
</ul>
</div>
<div class="col-sm-8" style="background-color: blue">
right
</div>
</div>
</div>
小开

给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;
}
小开

更新2021 -引导4和引导5

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

  1. import/include bootstrap.css在你的CSS规则之前(覆盖)
  2. 使用比Bootstrap CSS选择器更多的CSS专一性(或相等)
  3. 如果任何规则被重写，请使用!important属性强制执行规则。如果你遵守规则1 &2除非使用引导实用程序类通常包含!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;
}
注意:这是不是一个好的实践使用 !important在覆盖CSS，除非 你重写了引导实用程序之一 类< / >。CSS 特异性< / > 一个CSS类覆盖另一个CSS类总是有效的。只要确保你使用的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之后。

小开

要重置bootstrap中为legend定义的样式，可以在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/)的关联

小开
  1. 检查控制台上的目标按钮。
    2. 进入元素选项卡，然后将鼠标悬停在代码上，确保找到默认id 或bootstrap使用的类
  2. 使用jQuery/javascript调用函数来覆盖样式/文本。

请看这个例子:

  $(document).ready(function(){
$(".dropdown-toggle").css({
"color": "#212529",
"background-color": "#ffc107",
"border-color": "#ffc107"
});
$(".multiselect-selected-text").text('Select Tags');
});
小开

看到https://bootstrap.themes.guide/how-to-customize-bootstrap.html

  1. 对于简单的CSS重写，你可以在bootstrap.css下面添加一个custom.css

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

  2. 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";
小开

对于ruby on rails用户——

在应用程序CSS文件中，确保首先提到引导文件，然后是自定义CSS样式表。这样，您编写的后一个CSS代码就会覆盖前一个CSS代码。如果需要，也使用!important

 *= require 'bootstrap.min'
*= require_self
*= require 'name_of_your_stylesheet'

提交答案