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

Question

Bootstrap provides classes such as text-left (Alignment classes), text-lowercase (Transformation classes) 等，这与定义内联样式相同（不是技术上的，而是逻辑上的）。

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

Bootstrap 方法似乎没有很好地分离结构和表示之间的关注点，并且违背了这一点 W3C Tip for Webmasters。

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

如何在保持 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 mixin 的更多示例 - 5 Useful Sass Mixins in Bootstrap。

Answer 2

我发现 2 css 个框架不需要使用 css 类。很简单 HTML5

https://github.com/yegor256/tacit

https://github.com/Kimeiga/bahunya

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

How to use Bootstrap whilst maintaining semantic HTML markup?

html

css

twitter-bootstrap

semantic-markup

separation-of-concerns

HTML

CSS