元素類名中包含（方括號）括號的原因是什麼？

Question

我被這種說法class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]"在引導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

這只不過是用分組的方式在視覺上分開類。

你給的例子都做同樣的事情。

括號允許在類屬性中使用，並且在技術上有效，只要它們在括號和類本身之間有空格。

關於這項技術的更多信息，請csswizardy發現，和對子孫後代的，這裏是摘錄解釋他是如何使用它：

它是如何工作

沒有硬性關於如何以及何時開始分組 您的課程，但我爲自己設定的指南是：

必須有多個「集合」類。一套'一套'必須包含多於一個類別的 。這基本上只是ringfences是 需要它的羣體，例如：

<!-- 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 ]"> 

你如何將它們分組 可以完全你的選擇，這個概念在這裏只是涉及事實上我們根本就是在分組事物 。

Answer 2

基本上它只有在那裏，使代碼在某種程度上更好可讀。

據：Which characters are valid in CSS class names/selectors?

~ ! @ $ %^& * () + = , ./' ; : " ? > < [ ] \ { } | ` # 

僅作爲類選擇但僅限於在類屬性使用它是有效無效。如果你仍然想爲你的類選擇器添加上面的一個字符，那麼你需要使用\來逃避它，它會看起來像：\[字符[。

我真的很喜歡xengravity的回答也比我的更多 - 仍然是可讀性相同的想法，但有更多的細節爲什麼，也有參考如何使用。