Question

我正在学习引导程序，并且正忙于阅读有关W3Schools的培训材料。但是，我对某些事情感到困惑：

假设我正在使用以下代码向我的网站添加按钮：

<button type="button" class="btn">Basic</button>

但是可以说我希望此按钮是粉红色而不是灰色... Bootstrap是否有特定的方式让我进行诸如颜色等的细微更改？或者，如果我要向按钮中添加自定义类并通过自定义样式表更改颜色，那是正确的吗？

像这样：

HTML

<button type="button" class="btn mypinkbutton">Basic</button>

CSS

.mypinkbutton {background:#FFC0CB;}

基本上...我是否要像我通常在style.css中所做的那样进行任何更改，或者它在引导程序中的工作方式有所不同？

Answer 1

在引导程序3和4中，您应该自定义sass / less中的所有组件并编译所有源代码： https://getbootstrap.com/docs/4.0/getting-started/theming/

这是自定义bootrap的最佳方法。

您还可以在此处生成自定义引导资源（对于引导3）：https://getbootstrap.com/docs/3.3/customize/ 但是，这不是灵活的解决方案。

Answer 2

执行此操作的“正确”方法是使用Bootstrap theming。

引导程序包括许多color variables，对于按钮（和许多其他组件），还有一堆pre-made classes，可用于应用这些颜色。例如，“主要”按钮如下所示：

<button type="button" class="btn btn-primary">Primary</button>

.btn-primary类应用$theme-colors Sass映射中的“原色”颜色，默认情况下为#007bff（蓝色）。要更改颜色，可以直接更改十六进制值，也可以（甚至更好）创建自定义Sass文件，然后使用自己的颜色modify the map。

所有这些，从技术上讲，您在问题中的处理方式没有“错” –如果您想做的只是在特定情况下更改颜色，那仍然可以使用。但是，Bootstrap的全部优点是它是一个框架，它使得在大型项目中管理和维护类似的事情变得更加容易，因此最佳实践是使用它在这些情况下提供的功能。