在项目中使用 Bootstrap CSS 辅助类

威廉·戈里塞
2015 年 10 月 7 日
分钟阅读

您是否知道 Bootstrap 附带了一系列 CSS 辅助类，旨在帮助您处理视图？您是否有兴趣优化主题活动并充分利用 Mendix的 Bootstrap 集成？如果是，请继续阅读。

什么是辅助类

首先，什么是辅助类？要完全理解这个概念，最好先退一步，看看 CSS 的总体情况。虽然很多开发人员会认为 CSS 不是一种编程语言，但良好的 CSS 实践与成熟的编码最佳实践非常相似。尤其是像 DRY（不要重复自己）这样的实践，以及使用架构的概念来构建（BEM、OOCSS 和 Smaccs 是其中最受欢迎的三个）。

就其本身而言，CSS 有很大的趋势会变成“意大利面条式代码”，每个程序员可能都会在自己的第一个项目中认识到这一点。代码杂乱无章，缺乏任何像样的结构，并且包含大量重复代码和未使用的代码片段。CSS 本身没有作用域的概念，完全绑定到 HTML（这对您来说是一种很好的依赖关系），并且由于特殊性等概念，CSS 往往相当晦涩难懂。

很合乎逻辑的是，许多人认为 – 在这个现代时代 – 这是完全不行的。因此，他们提出了架构概念，以使 CSS 代码更加模块化、可扩展、可维护和可重用，即使 HTML 视图本身会发生变化。Bootstrap 的 CSS 代码就是这些做法的一个很好的例子。比较以下 CSS 规则：


#newButton {
display: inline-block;
padding: 6px 12px;
color: #333;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #fff;
}

#deleteButton {
display: inline-block;
padding: 6px 12px;
color: #fff;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
background-color: #f00;
}

想象一下，即使是一个中型项目，也需要用这种写作方式来主题化（我们需要针对整个应用程序中的每个按钮，基本上一遍又一遍地编写相同的代码）。更糟糕的是，想象一下需要对应用程序进行哪怕是很小的重新设计。幸运的是，我们在 Bootstrap 中发现的正确架构和最佳实践使生活变得轻松得多：


.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
text-align: center;
border: 1px solid transparent;
background-image: none;
}
.btn-default {
color: #333;
background-color: #fff;
}
.btn-warning {
color: #fff;
background-color: #f00;
}

现在，我们已经拥有了完全模块化的 CSS。这只是在 HTML 元素上组合类名的问题。（注意：如果您设计了十个按钮的样式，这种编写方式的好处将变得更加明显，但我不想用那么多重复的 CSS 代码让您感到厌烦）。

基本上，我们不再设计单个元素的样式，而是开始为元素添加视觉行为。我们正在创建一个系统或架构，为我们完成所有艰苦的工作。现在，辅助类这样的概念应运而生。

从本质上讲，辅助类可以描述为“独立的视觉行为规则”，这意味着它不依赖于任何特定的 HTML 元素或元素组，而是用作对象的额外类，以帮助防止代码重复，但仍能实现所需的行为。基本上，当您只需要元素上的一点额外行为时，其好处就很明显了，例如，将按钮放置在屏幕的右侧而不是左侧。

尽管数量有限，Bootstrap 还是有一些非常漂亮的辅助类，我们可以在 Mendix 项目。我将列出最重要的项目并简要描述其目的。

Bootstrap 颜色助手类

颜色辅助类可以分为两类：改变文本颜色的类和改变背景颜色的类。

文字颜色：

.text-muted
.text-primary
.text-success
.文本信息
.text-警告
.text-危险

背景颜色：

.bg-主要
.bg-成功
.bg-信息
.bg-警告
.bg-危险

如果您之前曾使用过 Bootstrap 样式，您可能会从按钮类型或可以使用的类型中认出“主要”、“成功”、“信息”等。在整个 Bootstraps 中，这些术语用于定义颜色类型。

Bootstrap 定位辅助类

通常，元素本身的具体样式应该独立于其在页面上的位置。为了适应正常布局无法自动支持的位置，我们提供了一些辅助类来帮助我们将元素定位在正确的位置。

浮子调节器：

.pull-left
.pull-right
.clearfix

我们可以使用 .pull-left 和 .pull-right 类在布局中浮动元素，分别创建左浮动或右浮动。浮动行为最常见的问题是父容器不再知道其内容的尺寸。我们可以使用 .clearfix 辅助类来解决这个问题，让父容器再次具有正确的高度。

居中内容：

.center-block

不幸的是，内容的居中非常依赖于其所处的上下文，尤其是垂直居中的内容。 .center-block 辅助类有助于已知宽度的块级元素的水平居中。

Bootstrap 可见性帮助器类

除了定位元素之外，交互式应用程序还经常需要改变可见性，例如，这是由于我们正在查看的页面的状态所致。

标准可见性助手：

。无形的
。隐
。节目

CSS 使用两种“隐藏”内容：将可见性设置为无或将显示设置为无。可见性为无意味着元素不可见，但仍然是页面布局中的“播放器”——占用空间。显示为无意味着浏览器将忽略该元素，就像它不存在一样。我们可以使用 .invisible 使项目不可见，并使用 .hidden 将其显示真正设置为无。.show 辅助类实际上用于对抗 .hidden 类。这些基本的可见性辅助类可以为通过 JavaScript 自定义小部件构建自定义交互行为提供巨大帮助。

奇异的可见性助手：