1. Overview
1.概述
In this quick tutorial, we’ll learn a few different ways to conditionally add CSS classes in Thymeleaf.
在这个快速教程中，我们将学习在Thymeleaf中有条件地添加CSS类的几种不同方法。
If you are unfamiliar with Thymeleaf, we recommend checking our introduction to it.
如果你不熟悉Thymeleaf，建议查看我们对它的介绍。
2. Using th:if
2.使用th:if
Let’s assume that our goal is to generate a <span> whose classes are determined by the server:
让我们假设我们的目标是生成一个<span> ，其类别由服务器决定。
<span class="base condition-true">
I have two classes: "base" and either "condition-true" or "condition-false" depending on a server-side condition.
</span>Before this HTML is served, we need a good way for the server to evaluate a condition and either include the condition-true class or the condition-false class, as well as a base class.
在这个HTML被送达之前，我们需要一个好的方法让服务器评估一个条件，并且包括条件-真类或条件-假类，以及一个基类。
When templating HTML, it’s quite common to need to add some conditional logic for dynamic behavior.
在制作HTML模板时，需要为动态行为添加一些条件逻辑是很常见的。
First, let’s use th:if to demonstrate the simplest form of conditional logic:
首先，让我们用th:if来演示条件逻辑的最简单形式。
<span th:if="${condition}" class="base condition-true">
This HTML is duplicated. We probably want a better solution.
</span>
<span th:if="${!condition}" class="base condition-false">
This HTML is duplicated. We probably want a better solution.
</span>We can see here that this will logically result in the correct CSS class being attached to our HTML element, but this solution violates the DRY principle because it requires duplicating the entire block of code.
我们在这里可以看到，这在逻辑上会导致正确的CSS类被附加到我们的HTML元素上，但是这个解决方案违反了DRY原则，因为它需要重复整个代码块。
Using th:if can certainly be useful in some cases, but we should look for another way to dynamically append a CSS class.
在某些情况下，使用th:if当然是有用的，但我们应该寻找另一种方法来动态地附加一个CSS类。
3. Using th:attr
3.使用th:attr
Thymeleaf offers us an attribute that will let us define other attributes, called th:attr.
Thymeleaf为我们提供了一个属性，它将让我们定义其他的属性，称为th:attr。
Let’s use it to solve our problem:
让我们用它来解决我们的问题。
<span th:attr="class=${condition ? 'base condition-true' : 'base condition-false'}">
This HTML is consolidated, which is good, but the Thymeleaf attribute still has some redundancy in it.
</span>You may have noticed that the base class is still duplicated. Also, there is a more specific Thymeleaf attribute we can use when defining classes.
你可能已经注意到，base类仍然是重复的。另外，在定义类的时候，我们可以使用一个更具体的Thymeleaf属性。
4. Using th:class
4.使用th:class
The th:class attribute is a shortcut for th:attr=”class=…” so let’s use it instead, along with separating the base class out of the condition result:
th:class属性是th:attr=”class=…”的一个快捷方式，所以让我们用它来代替，同时把base类从条件结果中分离出来。
<span th:class="'base '+${condition ? 'condition-true' : 'condition-false'}">
The base CSS class still has to be appended with String concatenation. We can do a little bit better.
</span>This solution is pretty good because it meets our needs and is DRY. However, there is still yet another Thymeleaf attribute that we can benefit from.
这个解决方案相当不错，因为它满足了我们的需求，而且是DRY。然而，仍有另一个Thymeleaf属性可以让我们受益。
5. Using th:classappend
5.使用th:classappend
Wouldn’t it be nice to completely decouple our base class from the conditional logic? We can statically define our base class and reduce the conditional logic to only the relevant pieces:
将我们的基类与条件逻辑完全解耦不是很好吗？我们可以静态地定义我们的基类，并将条件逻辑减少到只有相关部分：。
<span class="base" th:classappend="${condition ? 'condition-true' : 'condition-false'}">
This HTML is consolidated, and the conditional class is appended separately from the static base class.
</span>6. Conclusion
6.结语
With each iteration of our Thymeleaf code, we learned about a useful conditional technique that might come in handy later. Ultimately, we found that using th:classappend provides us with the best combination of DRY code and separation of concern while also satisfying our goal.
随着我们对Thymeleaf代码的每一次迭代，我们了解到一种有用的条件技术，这种技术可能会在以后派上用场。最终，我们发现，使用th:classappend为我们提供了DRY代码和关注点分离的最佳组合，同时也满足了我们的目标。
All of these examples can be seen in a working Thymeleaf project available over on GitHub.
所有这些例子都可以在GitHub上提供的一个工作的Thymeleaf项目中看到。