隔行变色在表单中或者列表中非常常用，主要是让列表的每一行在奇数和偶数时，呈现不同的颜色，已达到视觉区分行的友好体验。
隔行变色大多数都是变换，一个行的背景颜色
比如我们下面代码展示的效果：
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> div{ height:50px; width:100%} div .oddbg{ background-color:#88080A} div .evenbg{ background-color:#00b777} </style> <div class="oddbg"></div> <div class="evenbg"></div> <div class="oddbg"></div> <div class="evenbg"></div> <div class="oddbg"></div> |
这里面我们使用了class=“oddbg”来代表奇数样式，使用class=“evenbg”来代表偶数样式。那么如果在Twig模板中使用循环来，输出这样的效果呢，其实很简单。来看看官网的连个页面：odd，even。
下面是twig输出11行的例子：
|
1 2 3 4 5 6 7 8 |
<style> div{ height:50px; width:100%} div .oddbg{ background-color:#88080A} div .evenbg{ background-color:#00b777} </style> {% for i in 0..10 %} <div class="{% if loop.index is odd %} oddbg {% else %} evenbg {% endif %}"></div> {% endfor %} |
在这个例子里，只使用一个方法即可，例如只使用odd，那么我们就不用去判断even了，因为有了odd，else自然是even。