4

I'm thinking about using only semantic classes in my HTML, while still using Bootstrap's classes styles inside the semantic classes.

For example:

mixins:

.newsItem {
    @include span4;
}

or placeholders/extends:

.newsItem {
    extend span4;
}

Is it possible at all? and do you see any reason why that's not recommended ? Thanks.

4

1 回答 1

2

@include span4;并且@extend .span4;不会工作，因为：

  • 在第一个中，在引导程序中没有任何以这种方式调用的混入。
  • 在第二个中，没有任何选择器称为span4，选择器是使用 mixins 生成的，例如grid-core-span-x.

为此目的，有内置的 mixin：makeRow()和makeColumn().

在你的情况下，如果你想span4在你的.newsItemdiv 中使用 a ，你必须把它放在你的 SASS 中：

.newsItem {
  @include makeColumn(4);
}

这些 mixin 的代码很简单。

@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));
}

这个 mixins 有缺点。我不使用它们，因为响应式网格不会在您的语义类中使用。为什么？因为如果您查看提供响应式引导的文件（例如，_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);

      /* ... */
}
于 2013-05-12T21:19:23.417 回答