如何在维护语义 HTML 标记的同时使用 Bootstrap？答案

【问题标题】：How to use Bootstrap whilst maintaining semantic HTML markup?如何在维护语义 HTML 标记的同时使用 Bootstrap？
【发布时间】：2015-03-03 05:29:58
【问题描述】：

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

在另一种方法中，例如bem，它要求类应该反映“物理”块和元素，以及它们的修饰符（或元素的状态，例如active、current），以及任何样式应该完全应用在 CSS 中。

Bootstrap 方法似乎在结构和表示之间没有很好地分离关注点，与 W3C Tip for Webmasters 背道而驰。

很多人都赞同这个问题：

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

【问题讨论】：

标签： html css twitter-bootstrap semantic-markup separation-of-concerns

【解决方案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 文章 - 5 Useful Sass Mixins in Bootstrap 中找到更多 Bootstrap mixin 示例。

【讨论】：

【解决方案2】：

我找到了 2 个不需要使用 css 类的 css 框架。只是普通的 HTML5

https://github.com/yegor256/tacit

https://github.com/Kimeiga/bahunya

【讨论】：