Ale*_*lex 215 html css twitter-bootstrap
我需要修改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;
}
smu*_*ynn 454
使用!important不是一个好选择,因为您很可能希望将来覆盖自己的样式.这给我们带来了CSS优先级.
基本上,每个选择器都有自己的数字"权重":
在两种选择器样式中,浏览器总是会选择权重更大的选择器.样式表的顺序仅在优先级均匀时才有意义 - 这就是为什么覆盖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;
}
Mar*_*der 81
在你的html的head部分,你的custom.css位于bootstrap.css下面.
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
然后在custom.css中,您必须为要覆盖的元素使用完全相同的选择器.如果legend它只是保留legend在你的custom.css中,因为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/
其他一切只是复制/粘贴和编辑样式的问题.
Rah*_*til 26
它不应该影响加载时间,因为您要覆盖基本样式表的各个部分.
以下是我个人遵循的一些最佳做法:
!important尽可能避免使用.这可以覆盖基本CSS文件中的一些重要样式.Par*_*van 17
将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;)
要重置legendbootstrap 中定义的样式，您可以在 css 文件中执行以下操作：
legend {
all: unset;
}
参考：https : //css-tricks.com/almanac/properties/a/all/
CSS 中的 all 属性重置所有选定元素的属性，除了控制文本方向的方向和 unicode-bidi 属性。
可能的值是：initial, inherit& unset。
旁注：clear属性与float（https://css-tricks.com/almanac/properties/c/clear/）相关使用
请参阅https://bootstrap.themes.guide/how-to-customize-bootstrap.html
\n\n对于简单的 CSS 覆盖，您可以在 bootstrap.css 下方添加 custom.css
\n\n<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">\n<link rel="stylesheet" type="text/css" href="css/custom.css">\n对于更广泛的更改，推荐使用 SASS 方法。
\n\n例如，让\xe2\x80\x99s 将正文背景颜色更改为浅灰色#eeeeee，并将蓝色主要上下文颜色更改为 Bootstrap 的 $purple 变量...
\n\n/* custom.scss */ \n\n/* import the necessary Bootstrap files */\n@import "bootstrap/functions";\n@import "bootstrap/variables";\n\n/* -------begin customization-------- */ \n\n/* simply assign the value */ \n$body-bg: #eeeeee;\n\n/* or, use an existing variable */\n$theme-colors: (\n primary: $purple\n);\n/* -------end customization-------- */ \n\n/* finally, import Bootstrap to set the changes! */\n@import "bootstrap";\n2020 年更新 - Bootstrap 4、Bootstrap 5 测试版
覆盖 Bootstrap CSS 时需要遵循 3 条规则。
bootstrap.css在 CSS 规则之前导入/包含（覆盖）是的，覆盖应该放在一个单独的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 选择器与 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;
}
当CSS选择器是一样的，最后一个优先，它为什么styles.css应该遵循bootstrap.css。
| 归档时间： |
|
| 查看次数： |
306425 次 |
| 最近记录： |