如何在保持語義 HTML 標記的同時使用 Bootstrap？

Question

Bootstrap提供了諸如text-left ( Alignment classes )、 text-lowercase ( Transformation classes ) 等類，這與定義內聯樣式相同（不是技術上的，而是邏輯上的）。

在另一種方法中，例如bem ，它強制要求類應該反映“物理”塊和元素及其修飾符（或元素的狀態，例如active 、 current ），並且任何樣式都應完全應用在 CSS 中。

Bootstrap 方法似乎沒有很好地分離結構和表示之間的關注點，並且與W3C 網站管理員提示背道而馳。

這個問題得到了很多人的共鳴：

1. Niko Sams - 為什么我不喜歡 Twitter Bootstrap
2. Paradax - Bootstrap 好的、壞的和丑陋的
3. bvision - 請停止在您的 HTML 中嵌入 Bootstrap 類！

如何在保持 HTML 標記語義的同時使用 Bootstrap？

Answer 1

Bootstrap 提供了可以使用的mixin 。 因此，不要在 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 中的5 個有用的 Sass混合中找到更多 Bootstrap 混合示例。

Answer 2

我發現了 2 個不需要使用 css 類的 css 框架。 只是普通的 HTML5

https://github.com/yegor256/tacit

https://github.com/Kimeiga/bahunya