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

当前回答

参见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";

2019-08-05 20:12:32

其他回答

对于ruby on rails用户——

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

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

2022-05-26 03:01:00

给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

链接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;)

2013-12-21 16:50:28

检查控制台上的目标按钮。转到元素选项卡，然后将鼠标悬停在代码上，确保找到默认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

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

我如何重写引导CSS样式?

推荐文章

最新文章

标签