我需要修改 bootstrap.css
才能适合我的网站 . 我觉得最好创建一个单独的 custom.css
文件而不是直接修改 bootstrap.css
,其中一个原因是 bootstrap.css
应该获得更新,我会为这些样式牺牲一些加载时间,但它会覆盖's negligible for the few styles I'm .
我是否重写 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;
}
10 回答
将custom.css文件链接为bootstrap.css下面的最后一个条目 . Custom.css样式定义将覆盖bootstrap.css
HTML
复制custom.css中图例的所有样式定义并对其进行更改(如margin-bottom:5px; - 这将覆盖margin-bottom:20px;)
我发现(bootrap 4)将你的onss css放在bootstrap.css and .js 后面是最好的解决方案 .
找到你想要改变的项目(检查元素)并使用完全相同的声明,然后它将覆盖 .
我花了一些时间才弄明白这一点 .
有点晚了,但我做的是我在根
div
中添加了一个类,然后扩展自定义样式表中的每个引导元素:使用
!important
不是一个好选择,因为您将来很可能想要覆盖自己的样式 . 这让我们有了CSS的优先事项 .基本上,每个选择器都有自己的数字“权重”:
ID为100分
类和伪类的10分
1个标签选择器和伪元素
在两种选择器样式中,浏览器总是会选择权重更大的选择器 . 样式表的顺序仅在优先级均匀时才有意义 - 这就是为什么覆盖Bootstrap并不容易 .
您可以选择检查Bootstrap源,了解如何定义某些特定样式,并复制该选择器以使您的元素具有相同的优先级 . 但是我们在这个过程中放松了所有的Bootstrap甜味 .
解决此问题的最简单方法是为页面上的一个根元素分配其他任意ID,如下所示:
<body id="bootstrap-overrides">
这样,您可以使用您的ID为任何CSS选择器添加前缀,立即向该元素添加100个权重点,并覆盖Bootstrap定义:
要重置在bootstrap中为
legend
定义的样式,可以在css文件中执行以下操作:参考:https://css-tricks.com/almanac/properties/a/all/
可能的值为:
initial
,inherit
&unset
.附注:
clear
属性与float
(https://css-tricks.com/almanac/properties/c/clear/)有关使用jquery css而不是css . . . jquery优先于bootstrap css ...
例如
它不应该影响加载时间,因为你要覆盖基本样式表的一部分 .
以下是我个人遵循的一些最佳做法:
始终在基本CSS文件之后加载自定义CSS(无响应) .
如果可能,请避免使用
!important
. 这可以覆盖基本CSS文件中的一些重要样式 .如果您不想丢失媒体查询,请始终在custom.css之后加载bootstrap-responsive.css . - 必须遵循
首选修改所需属性(不是全部) .
为传奇提供ID并应用css . 就像向legend()添加id hello一样,css如下:
如果您计划进行任何相当大的更改,最好直接在引导程序中进行更改并重建它 . 然后,您可以减少加载的数据量 .
有关构建指南,请参阅Bootstrap on GitHub .
在你的html的head部分,你的custom.css位于bootstrap.css下面 .
然后在custom.css中,您必须为要覆盖的元素使用完全相同的选择器 . 在
legend
的情况下,它只是在custom.css中保留legend
,因为bootstrap没有任何更具体的选择器 .但是在例如
h1
的情况下,你必须照顾更具体的选择器,如.jumbotron h1
因为不会覆盖
以下是对css选择器特异性的有用解释,您需要了解这些解释器以确切了解哪些样式规则将应用于元素 . http://css-tricks.com/specifics-on-css-specificity/
其他一切只是复制/粘贴和编辑样式的问题 .