Bootstrap僅適用於mixins /佔位符 - 具有語義類

Question

我在考慮在HTML中只使用語義類，而仍然在語義類中使用Bootstrap的類樣式。

例如：

混入：

.newsItem { 
    @include span4; 
} 

或佔位符/擴展：

.newsItem { 
    extend span4; 
} 

是否有可能呢？你看到有什麼理由不推薦這麼做嗎？謝謝。

Answer 1

@include span4;和@extend .span4;不會起作用，因爲：

• 在第一個，沒有任何混入叫引導的方式。
• 在第二個中，沒有任何選擇器調用span4，選擇器正在使用mixin生成，如grid-core-span-x。

有爲此目的建立mixin：makeRow()和makeColumn()。

在你的情況，如果你想在你的.newsItem div來使用span4，你必須把這個在你的SASS：

.newsItem { 
    @include makeColumn(4); 
} 

的代碼從這些混入很簡單。

@mixin makeRow() { 
    margin-left: $gridGutterWidth * -1; 
    @include clearfix(); 
} 

@mixin makeColumn($columns: 1, $offset: 0) { 
    float: left; 
    margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2); 
    width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)); 
} 

這混入有缺點。我不使用它們，因爲響應式網格不會在您的語義類中使用。爲什麼？因爲如果您查看提供自舉響應的文件（例如，_responsive-767px-max.scss），則只有spanX類轉換爲100％寬度。代碼：

@media (max-width: 767px) { 
    /* ... */ 

    [class*="span"], 
    .uneditable-input[class*="span"], 
    .row-fluid [class*="span"] { 
     float: none; 
     display: block; 
     width: 100%; 
     margin-left: 0; 
     @include box-sizing(border-box); 

     /* ... */ 
}