html - 在 Twitter Bootstrap 框架中将语义有意义的 block 放在哪里？

Question

这是我的第一个问题，所以请不要严格判断。本质如下:我将文档的 block 结构想象成一台打印机——但当然是非常遥远的——因为打印机已经有内容和语义，而 div 的文档结构——只是它的骨架，并且必须添加两个提到的主题.我关心的一个问题是我应该把这个语义放在文档框架中的什么地方，由 twitter bootstrap 和定义结构组成——例如:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
      Content, which must be wrapped in some semantically meaningfull element -    like, for example - article-preview class
        </div>
    </div>
</div>

我看到了两种不同的方式，但不知道在标记 html 文档时哪种方式更好:

1) 向元素添加语义类，该元素已经具有形成我的文档结构的类 - col-xs-12 - 或按我的类比。

<div class="container">
    <div class="row">
        <div class="col-xs-12 article-preview">
        'Content, which must be wrapped in some semantically meaningfull element like, for example - article-preview class'
        </div>
    </div>
</div>

2) 或者在结构 block 下添加全新的 semanit block 并将我的内容放在这里:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="article-preview">
      Content, which must be wrapped in some semantically meaningfull element -    like, for example - article-preview class
            </div>
        </div>
    </div>
</div>

如果这个问题对你来说有点愚蠢，我很抱歉，但我考虑了很长时间，从现在开始，在解决之前什么也做不了。

谢谢!

Answer 1

我更喜欢第二种方式。因为 bootstrap cols 有自己的样式和结构，所以如果您有其他样式或代码，请尝试使用第二种方式。

我认为我们应该保留 Bootstrap 结构。