仅适用于mixin /占位符的引导程序-具有语义类 [英] Bootstrap only for mixins/placeholders - with semantic classes

问题描述

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

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

例如：

mixins：

.newsItem {
    @include span4;
}

或占位符/扩展名：

.newsItem {
    extend span4;
}

有可能吗？您看到任何不建议这样做的原因吗？

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

推荐答案

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

• 在第一个中，没有


• 在第二个中，没有任何名为 span4 的选择器，使用 grid-core-span-x 之类的混合生成的。

• In the first one, there isn't any mixins called that way in bootstrap.
• In the second one, there isn't any selector called span4, the selectors are being generated with mixins like grid-core-span-x.

为此目的构建了混合器： makeRow（）和 makeColumn（）。

There are built mixins for that purpose: makeRow() and makeColumn().

在您的情况下，如果要使用 span4 在您的 .newsItem div中，您必须将其放在SASS中：

In your case, if you want to use a span4 in your .newsItem div, you have to put this in your SASS:

.newsItem {
  @include makeColumn(4);
}

这些mixins中的代码很简单。

The code from those mixins is simple.

@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具有缺点。我不会使用它们，因为在您的语义课中不会使用自适应网格。为什么？因为如果您查看提供响应引导的文件（例如 _sensitive-767px-max.scss ），则仅 spanX 类转换为100％的宽度。代码：

This mixins have downsides. I don't use them since the responsive grid won't be used in your semantics class. Why? Because if you look at the files that provide bootstrap a responsive (for instance, _responsive-767px-max.scss), only the spanX classes converts to a 100% width. The code:

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

      /* ... */
}

这篇关于仅适用于mixin /占位符的引导程序-具有语义类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！