在元素的类名中有(方括号)括号的原因是什么？

Question

我class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]"对bootstrap 3模板中的这个语句感到非常惊讶,我不确定它们之间有什么区别

class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]"   

和

class="col-xs-12 col-sm-offset-1 col-sm-5"

您能否详细介绍一下这个括号的含义以及使用它们时的一些情况？

Answer 1

除了在视觉上分离类以分组它们之外,这只不过是另外一点.

你给出的例子都做了同样的事情.

括号在class属性中是允许的,并且在技术上是有效的,只要它们在括号和类本身之间有空格即可.

关于这种技术的更多信息可以在csswizardy上找到,对于后人,这里有一个摘录,解释他如何使用它:

这个怎么运作

关于如何以及何时开始对您的课程进行分组没有严格的规则,但我为自己设定的指南是:

必须有多个"集合"类.一个'set'必须包含多个类.这基本上只是响应任何需要它的组,例如:

<!-- Only one set. Nothing needs grouping. -->
<div class="foo  foo--bar">

<!-- Two sets, but only one class in each. Nothing needs grouping. -->
<div class="foo  bar">

<!-- Two sets, one of which contains more than one class. This set needs grouping. -->
<div class="[ foo  foo--bar ]  baz">

<!-- Two sets, both of which contain more than one class. These sets needs grouping. -->
<div class="[ foo  foo--bar ]  [ baz  baz--foo ]">

如何将它们分组可以完全是您的选择,这里的概念只涉及我们将事物分组的事实.