セマンティック HTML マークアップを維持しながら Bootstrap を使用するにはどうすればよいでしょうか? 質問する

Bootstrapはミックスイン使用できます。したがって、col-xs-12HTML のようにクラスを追加する代わりに、@include make-xs-column(12)要素のセレクター ブロック内で を使用します。行を追加するには、 を使用します@mixin make-row。

回答を参考にアレクセイ・モラシュコ意味のないマークアップの代わりに、

<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>

<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>

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