---

Bootstrap4 颜色

Bootstrap4 颜色是网页设计中最重要的元素之一，可以帮助网页设计师创造出丰富、高效的视觉体验，增强用户对页面的印象和对品牌的认知感受。Bootstrap4提供了一套集成的颜色系统，方便设计师快速搭建网页，并提供了多种可定制的样式类，使得颜色的应用更加灵活多样。本文将详细介绍Bootstrap4的颜色体系以及常用的样式类。

颜色体系

Bootstrap4 的颜色体系包括了16种标准颜色和9种灰度颜色。这些颜色可以在任何场景下使用，如背景、文本、按钮、边框、阴影等。

标准颜色

Bootstrap4 的16种标准颜色分别为：primary、secondary、success、danger、warning、info、light、dark、white、black、red、orange、yellow、green、teal、indigo。其中，primary、secondary、success、danger、warning、info为最常用的颜色，也是Bootstrap4的视觉语言中最基本的部分。

primary：一般用于页面的主色调，强调最重要的内容，比如导航、按钮、图标等。

secondary：用于副标题、背景、边框等。

success：表示成功，一般用于表单数据提交成功或者其他操作成功。

danger：表示失败，一般用于表单数据提交失败或者操作失败。

warning：表示警告，一般用于需要用户注意的情况，比如提示用户是否要离开当前页面。

info：表示信息，一般用于提醒用户一些重要信息，如新闻、公告、通知等。

灰度颜色

Bootstrap4 的9种灰度颜色从浅到深依次为：white、faint-grey、light-grey、lighter-grey、lightest-grey、dark-grey、darker-grey、darkest-grey、black。

这些灰度颜色几乎可以覆盖所有页面的背景、文本、边框等颜色，能够很好地与标准颜色组合使用，给页面创造出优美、协调的整体效果。

样式类

Bootstrap4 提供了丰富的样式类，让颜色的应用更灵活。这些样式类都基于预设的颜色体系，可以通过仅改变样式类名称的方式来实现颜色的变化。

例如，想要改变按钮的颜色，可以使用以下样式类：

.btn-primary //主色调按钮 .btn-secondary //副色调按钮 .btn-success //成功按钮 .btn-danger //失败按钮 .btn-warning //警告按钮 .btn-info //信息按钮

需要注意的是，Bootstrap4的样式类都带有前缀，比如btn-表示按钮，text-表示文本，bg-表示背景等，这样的设计既方便了代码的书写，也使得样式类清晰易读。

另外，还有一些特殊的样式类用于边框、阴影、背景等的应用，例如：

.border-primary //主色调边框 .shadow-sm //小阴影 .bg-info //信息背景

总结

通过本文的介绍，我们可以看出Bootstrap4的颜色体系是十分丰富而富有创意的，标准颜色和灰度颜色的搭配使得整个颜色体系具有协调性和可扩展性，而样式类的灵活应用则满足了不同场景下的需要。因此，熟练掌握Bootstrap4的颜色体系及样式类使用，可以帮助开发者快速、高效地构建优美、直观的网页，为用户提供更好的使用体验。