如何在保持语义HTML标记的同时使用Bootstrap？

Question

Bootstrap提供诸如text-left(对齐类),text-lowercase(转换类)等类,这与定义内联样式(在技术上,但在逻辑上)相同.

在另一种方法中,例如bem,它强制类应该反映"物理"块和元素,以及它们的修饰符(或元素的状态,如active,current),并且任何样式都应该纯粹应用于CSS中.

Bootstrap方法似乎很难分离结构和表示之间的关注,并违背了W3C网站管理员提示.

这个问题得到许多人的响应:

1. Niko Sams - 为什么我不喜欢Twitter Bootstrap
2. Paradax - Bootstrap好,坏和丑
3. bvision - 请停止在HTML中嵌入Bootstrap类!

如何在保持HTML标记语义的同时使用Bootstrap？

Answer 1

Bootstrap提供了可以使用的mixins.因此,不是像col-xs-12在HTML中那样添加类,而是@include make-xs-column(12)在选择器块内部使用元素.要添加一行,就有了@mixin make-row.

参考Alexey Morashko的回答,而不是这个非语义标记:

<div class="items-list row">
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

你可以改用:

HTML

<div class="items-list">
    <div class="item">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

CSS

.items-list {
    @include make-row();     
    .item 
        @include make-xs-column(12);
        @include make-sm-column(6);
        @include make-md-column(4);
    }
}

您可以在Sitepoint文章中找到更多Bootstrap mixins的示例 - Bootstrap中的5个有用的Sass Mixins.