Question

我考虑在HTML中只使用语义类，同时仍然在语义类中使用Bootstrap的类样式。

例如：

的混入：

.newsItem {
    @include span4;
}

或占位符/扩展：

.newsItem {
    extend span4;
}

有可能吗？你有没有理由不推荐这个？感谢。

Answer 1

@include span4;和@extend .span4;无效，因为：

在第一个中，没有任何mixins在bootstrap中被称为。
在第二个中，没有任何名为span4的选择器，选择器是使用像grid-core-span-x这样的mixins生成的。

为此目的构建了mixins：makeRow()和makeColumn()。

在您的情况下，如果您想在span4 div中使用.newsItem，则必须将其放入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);

      /* ... */
}

仅适用于mixins /占位符的Bootstrap - 具有语义类

1 个答案: