我如何重写引导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;
}

当前回答

给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

其他回答

给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

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

2014-12-30 11:13:41

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

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

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

2017-11-25 10:21:03

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

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

2013-12-21 17:11:20

检查控制台上的目标按钮。转到元素选项卡，然后将鼠标悬停在代码上，确保找到默认id 或引导程序使用的类。使用jQuery/javascript调用函数来覆盖样式/文本。

请看这个例子:

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

2019-08-03 17:48:06

我如何重写引导CSS样式?

推荐文章

最新文章

标签