为什么引导网格布局比HTML表更可取？

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

我正在为一个项目研究CSS库（特别是引导库）。我是一名程序员而不是网页设计师，我觉得我可以从一个封装了优秀设计的库中获益

我们都知道，使用HTML表格来完成基本的站点布局是一种不好的做法，因为它混合了表示和内容。CSS库（如Bootstrap）提供的一个好处是，它们提供了创建“网格”布局的能力，而无需使用表。然而，我在理解它们的网格布局与等效的表布局有什么有意义的不同方面遇到了一点困难

换句话说，这两个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>

及

---

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

但是，使用像Bootstrap这样的CSS包是正确的，它要求您将类分配给HTML元素，而这些元素不是语义的，而是表示性的，这减少了内容和表示的分离，使得这种区别有些毫无意义。您应该将语义上有意义的类分配给元素，并使用lesscss mixin（或类似技术）将CSS框架中定义的表示行为分配给这些类，而不是直接将表示类分配给元素

说：

.产品{
一行
}
.products>.product{
.span16；
}

---

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

基本上div就是div&表元素就是简单的表元素。表的问题通常只是跟踪所有的列&行，因为它最终是一个严格的数据构造。div更加灵活和宽容

例如，如果您想将四个div与等于“span4”的类一起使用，并将它们更改为2列宽，那么您需要做的就是为外部类“row”和类“span4”调整一点CSS。事实上，在做这样的div时，我会避免将单个div称为“span4”或其他号码

我的方法是创建一个名为“rowspan”的父包装器DIV，内部DIV将有一些通用ID，比如“cell”

例如，每个“cell”类的宽度可以是100像素，然后父“rowspan”可以是400像素。这相当于一行中有4列。想让它成为两列吗？没问题！只需将“rowspan”更改为200像素宽。在这一点上，它都在CSS中，因此不需要在DOM中重新调整页面结构就很容易做到

---

但是有桌子吗？不容易。基本上，您必须使用

标记重新呈现表格，以创建新行。

如果您只使用表格，我认为您将失去许多灵活性，可以为移动设备/平板电脑重新调整文档大小，而不必为每个设备创建单独的页面。一旦定义了表结构，您真正能做的就是放大和缩小。

我使用引导网格进行页面布局，使用表进行表格数据

---

我认为Bootstrap中的网格，不是开发人员意义上的网格，像gridview控件，而是设计页面布局意义上的网格，它包含页面内容。正如deceze所指出的，尽管引导网格也可以用于创建包含表格数据的传统网格，但这种网格更适合HTML表格，在这种情况下仍然可以使用HTML表格。

基本区别在于，您可以“回流”具有引导功能的布局可用于不同的显示大小，只需使用媒体查询，而无需更改标记。例如，我可以决定在台式机上，我希望您的4个div位于同一行，因为用户具有高分辨率宽屏幕，但在手机上，我希望一行上有2个div，下一行上有下一个div。因此，通过这种方式，我可以使用媒体查询调整每行中的列数。如果您使用硬编码的HTML表，那么很难做到这一点

话虽如此，我并不真正喜欢引导实现，原因如下：

它具有以像素为单位的硬编码断点。这意味着，随着手机和桌面显示分辨率的提高，您的网站可能会开始在这些设备上显示意外的布局。像素计数不适合显示大小

它将最大使用显示面积限制在1170px，这对于那些拥有宽屏显示器的用户来说，同样是一个麻烦，他们实际上可以使用宽屏显示器来查看应用程序中的更多内容

Bootstrap的布局不是独立于源代码的，也就是说，您不能更改HTML中设置的列顺序。然而，这更像是一个迂腐的观点

默认布局适用于非常小的分辨率，而更高分辨率的布局仅在媒体查询触发时触发，考虑到手机将继续具有更好的分辨率，并且您的网站迟早会为过时的移动设备设置默认布局，IMO认为这是一个糟糕的选择

引导布局并不是真正的“无忧”，因为您必须阅读它们的详细说明，才能看到它们没有看到值得支持但您可能会关心的所有bug和浏览器。例如，如果你的目标是韩国或中国的用户，你会感到惊讶 所以，

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

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

.products {
    .row;
}

.products > .product {
    .span16;
}

<div class="rowspan">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

<nav class="span4"> ... </nav>
<article class="span8"> ... </article>

<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}