关于覆盖样式的Bootstrap问题入门

时间:2019-08-21 18:57:00

标签: html css bootstrap-4

如何确切地了解自定义外观时需要用引导样式覆盖的所有内容?

是否有一个技巧可以找出我确切需要在哪里设置样式以便使其优先于引导样式?

例如,我一直在奋斗两天,以使表单字段看起来像客户希望的样子。引导程序默认包裹在表单组行和表单控件嵌套层中时,带有一个带有圆角边缘的高大字段。我创建了自己的类,将所有的填充和边距都设置为0。我也将高度设置为18px。什么都没捡到。

我之前的外观和感觉几乎很完美,但是我没有使用任何引导程序,只是html和css。首席开发人员表示,我们需要使用自举样式,并仅调整需要调整的内容以适合外观。 好吧,要确定,说起来容易做起来难。


我想念设计师指定外观和感觉的日子,而我们只是编码了样式并完成了工作。除非使用这种库来使用80%解决方案和在80%解决方案之上付出100%的努力,否则这似乎不是一个好方法,除非它是用于最大程度地扩展客户端的内容。

4 个答案:

答案 0 :(得分:1)

使用您自己的文件覆盖样式。

请勿根据您的需要更新Bootstrap SCSS文件。这可能会导致许多无法预料的问题。假设您要共享或更新到新的引导程序版本。合并文件和/或重写您的工作将很麻烦。

'如果直接对默认的bootstrap.css样式表进行更改,将很难维护和跟踪更改。”

How to Customize Bootstrap – UX Planet

答案 1 :(得分:0)

有两种方法。

1)编辑Bootstrap SCSS以适合您的需求。这样,您可以快速自定义它,并生成自定义CSS,而不仅仅是覆盖它。这可能是最简单的方法。

2)用自定义样式覆盖CSS。如果您知道Bootstrap以及每个元素的样式,这很容易。只需打开Boostrap CSS即可找到所需内容并将其覆盖。这可能很棘手,因为有时Bootstrap使用!important。最后一件事-将您的CSS放在Bootstrap之后!

答案 2 :(得分:0)

如果要手动将其导入到项目中,请不要编辑实际的引导文件。

只需制作自己的样式表,并确保在导入引导程序后将其导入。

答案 3 :(得分:0)

在我看来,潜在的问题(或者您可以说我不知道​​的问题)是Bootstrap的默认设置具有填充,边距和其他设置大于0的问题。因此,我使用bootstrap的任何标签我都会我将需要重写以将值设置为0,以便按客户要求进行布局。

通过覆盖,我并不是要更改Bootstrap实际的CSS文件,而是在您自己的CSS文件中指定要覆盖的引导程序样式。

感谢大家的链接和建议。非常感谢。

使用调试工具的有用提示:https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS