html - 为什么 Bootstrap 网格布局优于 HTML 表格？

Question

[注意:对于那些可能将此问题与“为什么不使用表格进行 HTML 布局”混淆的人，我不是在问这个问题。我要问的问题是为什么网格布局从根本上不同于表格布局。]

我正在为一个项目研究 CSS 库(尤其是 Bootstrap)。我是一名程序员而不是网页设计师，我觉得我可以从封装了良好设计的库中受益。

我们都知道使用 HTML 表格来完成基本站点布局是一种不好的做法，因为它混合了表示和内容。像 Bootstrap 这样的 CSS 库提供的好处之一是它们提供了在不使用表格的情况下创建“网格”布局的能力。然而，我在理解它们的网格布局与等效表格布局有何有意义的不同之处时遇到了一些麻烦。

换句话说，这两个 HTML 示例之间的根本区别是什么？我是否错误地认为网格布局只是一个具有另一个名称的表格？

<div class="row">
    <div class="span16"></div>
</div>

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

和

<table>
  <tr>
    <td colspan=4></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 1

区别在于第一个示例是语义标记，假设被标记的数据实际上不是表格。 <table>应仅用于表格数据，不适用于恰好以类似于表格的布局显示的任何数据。

虽然使用像 Bootstrap 这样的 CSS 包是正确的，它要求您将类分配给 不是 语义但表示的 HTML 元素，减少了内容和表示的分离，使差异有点无意义.您应该将语义上有意义的类分配给您的元素，并使用 lesscss mixins(或类似技术)将 CSS 框架中定义的表示行为分配给这些类，而不是直接将表示类分配给元素。

说:

<div class="products">
    <div class="product"></div>
</div>

.products {
    .row;
}

.products > .product {
    .span16;
}

请注意，我说的是应该。在实践中，这不一定总是更可行的选择，但它应该是理论上的目标。