如何覆盖Bootstrap CSS样式？

234

我需要修改bootstrap.css以适合我的网站。我觉得最好创建一个单独的custom.css文件而不是bootstrap.css直接进行修改，原因之一是应该bootstrap.css进行更新，因此尝试重新包含所有修改会很麻烦。我会为这些样式牺牲一些加载时间，但是对于我覆盖的几种样式而言，这可以忽略不计。

为何要重写，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;
}
html  css  twitter-bootstrap 
— 亚历克斯
source

Answers:

491

使用!important不是一个好的选择，因为将来您很可能会希望覆盖自己的样式。这给我们留下了CSS优先事项。

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

  • 积分100分
  • 类和伪类10分
  • 1点用于标记选择器和伪元素
  • 注意：如果元素具有自动获胜的内联样式（1000分）

在两种选择器样式中，浏览器将始终选择权重更大的一种。样式表的顺序仅在优先级均匀时才重要-这就是为什么覆盖Bootstrap并不容易的原因。

您的选择是检查Bootstrap源代码，找出确切定义某些特定样式的方式，然后复制该选择器，以便您的元素具有相同的优先级。但是，在此过程中，我们有点松开了所有Bootstrap的甜味。

解决此问题的最简单方法是为页面上的一个根元素分配其他任意ID，如下所示： <body id="bootstrap-overrides">

这样，您可以为任何CSS选择器添加ID前缀，立即为元素添加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;
}
— 走私者弗林
source
由于ID只能使用一次，为什么不创建#bootstrap-overrides一个类呢？
— chharvey
2
@chharvey：因为您最终不得不进行更好的计算。如果在此示例中是一个类，则它将是prio 11，并且如果css定义在bootstrap.css之后，那么我们将很好。但是，这非常接近，并将其设置为ID，可以大大增加prio的使用时间，我们不必担心计算prio并进行艰苦的测试来确定是否总是正确的。如果您想明确地覆盖默认值，则使用id更容易。
— hogan 2015年
刚刚度过了我的一天。我知道这一点，但仍然想弄清楚为什么不解释我的样式，仍然会陷入困境。
— hogan 2015年
3
是您提到的要点（id为100，类/伪类为10，标记选择器/伪元素为1）是文字，还是您在本示例中只是将这些值补齐？
— 凯尔·瓦塞拉
2
您的解释很好，可以作为向css新手解释的一种方式，但是具有误导性。您提到的正确名称是css specificity，它定义了每个css选择器的“权重”。以下是有关它的更多详细信息：css-tricks.com/specifics-on-css-specificity/…–
— Adriano
85

在html的头部，将您的custom.css放在bootstrap.css之下。

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

然后，在custom.css中，必须为要覆盖的元素使用完全相同的选择器。在这种情况下，legend它仅保留legend在您的custom.css中，因为引导程序没有更具体的选择器。

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/

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

— 马库斯·科特兰德
source
28

因为您要覆盖基本样式表的各个部分，所以它不会对加载时间产生太大影响。

以下是一些我个人遵循的最佳做法：

  1. 始终在基本CSS文件之后加载自定义CSS（无响应）。
  2. !important尽可能避免使用。这可以覆盖基本CSS文件中的一些重要样式。
  3. 如果您不想丢失媒体查询，请始终在custom.css之后加载bootstrap-sensitive.css。-必须遵循
  4. 建议修改必需的属性（并非全部）。
— 拉胡尔·帕蒂尔（Rahul Patil）
source
10
既然bootstrap-responsive.css不再存在，这是否仍然成立，还是不再相关？
— 肖恩·威尔逊
20

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

HTML

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

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

— 帕拉马西文
source
是的，我已经做到了。对不起，我的问题不清楚。我的问题是问在custom.css中做什么以覆盖bootstrap.min.css中的样式。
— 亚历克斯
如果我还使用bootstrap-theme.min.css怎么办？
— Quasaur
即使最小的css也为我工作
— mimi
3

如果您打算进行任何较大的更改，那么最好直接在引导程序本身中进行更改并重新构建它。然后，您可以减少加载的数据量。

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

— 维克多·黑格维斯特（VictorHäggqvist）
source
根据所需定制的程度，这可能是最简单的选择。例如，更改任何主题颜色将需要大量替代，因此我宁愿选择模板更改和自定义构建。
— David Kirkland 2014年
@alex碰撞源并重建？
— VictorHäggqvist2015年
3

参见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. 对于更广泛的更改，建议使用SASS。

    • 创建自己的custom.scss
    • custom.scss中的更改后导入Bootstrap

    • 例如，让我们将主体背景色更改为浅灰色#eeeeee，并将蓝色主要上下文颜色更改为Bootstrap的$ purple变量...

      /* 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";
— 科尼亚克
source
2

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

.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>
— 5号
source
-1
  1. 检查控制台上的目标按钮。
  2. 转到元素选项卡，然后将鼠标悬停在代码上，并确保找到引导程序使用的默认ID或类。
  3. 使用jQuery / javascript通过调用函数覆盖样式/文本。

请参阅以下示例：

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });
— 阿南德·乔杜里（Anand Chaudhary）
source
-1

我发现（引导4）将您自己的CSS放在后面 bootstrap.css，.js是最好的解决方案。

找到要更改的项目（检查元素），并使用完全相同的声明，它将被覆盖。

我花了一些时间来解决这个问题。

— 亨利
source
-3

给图例提供ID并应用CSS。像向legend（）添加ID hello一样，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;
}
— 阿玛·高尔（Amar Gaur）
source
-9

使用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;

}
— 阿耶特·桑赫瓦尔（Ajeet Sankhwal）
source
6
应该使用HTML提供结构，使用CSS提供样式，使用Javascript（包括jQuery）仅提供交互性。使用jQuery覆盖样式与良好架构的原则背道而驰，对于六个月后尝试使用该代码的人来说，这将是极大的困惑。
— 史蒂芬·史密斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.