入门有关覆盖样式的引导问题



在自定义外观和感觉时,究竟如何知道引导样式需要覆盖的所有内容?

有没有技巧可以找出我需要设置样式的确切位置,以便它优先于引导样式?

例如,我已经在努力使表单字段看起来像客户想要的那样。当包装在窗体组行和窗体控件嵌套层中时,引导程序的默认值带有一个带有圆角边缘的高字段。我创建了自己的类,将填充和边距的所有内容设置为 0。我还将高度设置为仅 18px。什么都没有被捡到。

我之前的外观和感觉几乎完美,但我没有使用任何引导的东西,只是html和css。首席开发人员说我们需要使用引导样式,只需调整需要调整的内容以适应外观和感觉。好吧,这肯定是说起来容易做起来难。


我怀念设计师指定外观和感觉的日子,我们只是编写样式并完成它。这种库使用 80% 的解决方案和 80% 之上的 100% 努力似乎不是一个很好的方法,除非是为了最大化客户正在掏钱的东西。

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

不要更新引导 SCSS 文件以满足您的需求。这可能会导致许多不可预见的问题。假设您要共享或更新到新的引导程序版本。合并文件和/或重写您的工作将很麻烦。

"如果你直接对默认的引导.css样式表进行更改,维护和跟踪更改将变得非常困难。

如何自定义引导程序 – UX 星球

如果您手动将引导程序文件导入到项目中,请不要对其进行编辑。

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

有两种方法可以做到这一点。

1( 编辑引导 SCSS 以满足您的需求。通过这种方式,您可以通过生成自定义CSS来快速自定义它,而不仅仅是覆盖它。这可能是最简单的方法。

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

在我看来,潜在的问题(或者你可以说一些我不知道的事情(是 Bootstrap 的默认值具有大于 0 的填充、边距和其他设置。因此,我需要覆盖我使用的引导程序的任何标签以将值设置为 0,以便按照客户端需要布局内容。

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

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

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

最新更新