Question

Bootstrap提供text-left（Alignment classes），text-lowercase（Transformation classes）等类，与定义内联样式相同（不是技术上，但逻辑上。）

在另一种方法中，例如bem，它强制类应该反映'物理'块和元素及其修饰符（或元素的状态，例如active，{{1并且，任何样式都应该纯粹应用于CSS。

Bootstrap方法似乎很难分离结构和表示之间的关注，并且违背了W3C Tip for Webmasters。

这个问题得到了很多人的反响：

Niko Sams - Why I don't like Twitter Bootstrap
Paradax - Bootstrap The good, the bad and the ugly
bvision - Please stop embedding Bootstrap classes in your HTML!

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

Answer 1

Bootstrap提供您可以使用的mixins。因此，您不必在HTML中添加类似col-xs-12的类，而是在元素的选择器块内使用@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示例 - 5 Useful Sass Mixins in Bootstrap。

Answer 2

我发现了2个不需要使用CSS类的CSS框架。只是纯HTML5

https://github.com/yegor256/tacit

https://github.com/Kimeiga/bahunya

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

2 个答案:

HTML

CSS