为什么是引导网格布局最好的HTML表？(Why is the Bootstrap grid layo

[注：对于那些谁可以与困惑这个问题，“为什么不使用表格HTML布局”，我没有问这个问题。 我要问的问题是，为什么是网格布局从表中的布局完全不同的。]

我研究的CSS库（尤其是引导）的一个项目。 我是一个程序员，而不是一个网页设计师，我觉得我可以从一个封装好的设计库中受益。

我们都知道，这是不好的做法是使用HTML表格来完成基本的网站布局，因为它混合呈现的内容。 一个由像引导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>应只用于表格数据 ，而不是为这恰好显示在类似表的布局的任何数据。

这是正确的，虽然是使用CSS包，比如引导，这需要你指定类HTML 不属于语义，但表象的元素，降低了内容与表现分离，使该误差有点无实际意义。 你应该分配语义含义类的元素，并使用lesscss混入（或类似技术）来分配的，而不是分配的表象类直接元素的CSS框架，这些类定义的表象行为。

说：

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

.products {
    .row;
}

.products > .product {
    .span16;
}

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

Answer 2:

我相信， CBroe评论是最好的选择，所以我选择了澄清。

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

它是用字段集，包含单场一个耻辱，但它在语义上比使用最好的div同样的事情。 HTML5标准定义了许多新的容器元素，如article ， section ， header ， footer 以及更多 。 在某些情况下，你将不得不使用div的，但如果你尽量减少它的使用你的代码会方式更多的语义。

Answer 3:

最根本的区别是，你可以“回流”与引导的布局不同的显示屏大小简单地使用媒体查询，而无需改变你的标记。 例如，我可以决定在台式机，我要你的4个格是在同一行，因为用户是高分辨率的宽屏显示器，但在手机上我想在一排2次下潜并在下一行旁边的div。 于是就这样，我可以使用媒体查询适应每排在我的列数。 如果您使用硬编码的HTML表格则是很难做到这一点。

话虽如此，我真的不喜欢引导实施，原因如下：

1. 它在像素硬编码断点。 这意味着，如手机和表格中显示分辨率前进，你的网站可能会开始显示在这些设备上意外布局。 像素数是显示尺寸代理差。
2. 它限制使用的最大显示面积1170px这又是与他们实际上可以用它来查看您的应用程序更多的内容漂亮宽大的显示器的用户一个无赖。
3. 引导的布局不受源代码独立的，也就是说，你不能更改在HTML设置列的顺序。 但是，这是更迂腐点。
4. 默认的布局是非常小的分辨率和更高的分辨率布局触发只有当媒体查询火，这海事组织，是一个糟糕的选择考虑手机将继续有更好的分辨率和较后您的网站迟早将不得不默认布局过时的移动设备的设置。
5. 引导布局不是真正的，你必须阅读他们的小字看到所有的错误和浏览器的意义上的“无后顾之忧”他们没有看到值得支持，但你可能关心。 如果你的目标在韩国或中国的用户，你会在惊喜，例如。

所以，并非一切都是金自举和他们的方法不一定总是最好的可能的（顺便说一句，我在引导鄙视另一件事情是他们与所谓的“jumbotrones”痴迷 - 那些房地产浪费在你面前不方便头 - 我希望社会不开始采取的“新标准”）。 我个人使用CSS表格布局（ display:table ）这些天，这也有类似的好处，引导没有硬编码<table>在我的标记。 我仍然可以使用媒体查询重新排列取决于纵向或横向行，例如。 然而最重要的好处是，我的布局是真正的像素甚至是个独立的。 例如，在3列布局，我让内容来决定应该多少空间第一和最后一列走。 没有像素，甚至百分比宽度。 该中心柱抓住了所有的剩余空间（这是我的应用程序是好事，但它可能不是为别人）。 另外，我用EMS在引导出奇的没有媒体查询断点。

Answer 4:

如果你只是使用表我想你会错过的灵活性，很多在重新调整您的文档，移动/平板电脑，而无需进行单独的页面为每个设备。 一旦你的表结构是指所有你能做的，只能是在放大和缩小。

Answer 5:

我用的是引导网格页面布局，表格数据表。

我认为，在引导电网，而不是在开发者的意义在设计页面布局意义上的网格，就像一个GridView控件，但更多的 - 作为一个网格，包含页面内容。 而且即使在引导电网也可用于创建一个包含表格数据的传统电网，为deceze指出，这种网格更适合HTML表格 - 这是仍然可以接受的，这种情况下使用。

Answer 6:

虽然未必有没有两套标记之间没有太大的语义差别（因为基于Bootstrap的网格系统所使用的类确实是纯粹的表象），一个非常重要的区别是，网格系统更加灵活。

这将是非常困难的，例如，做出不同的屏幕尺寸您的基于表格的布局响应。 有没有办法告诉浏览器显示一个td 下面的另一个元素td同一排。 而用div例子，这是很容易做到，而相同的标记可以以不同的方式， 即使类在他们定义的相对比例和页面元素的定位意义上的“表象”呈现。

Answer 7:

如果可以的话，我想总结一下我从其他评论和链接爆炸我从这个页面经历聚集：

使用表格的问题是不是网格布局，它与HTML而不是CSS来表达它的尝试。

引导允许网格布局通过（大部分）纯CSS，这就是为什么它是确定。 该“主要”部分来，因为你的HTML仍然会通过您的布局数据被污染，但更加微妙：

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

这无疑是显著比老表格的设计更多的语义和维护，但“span4”和“span8”仍然显示数据嵌入到我们的HTML。 然而，由于设计永远不能真正地从我们的数据（例如，嵌套的div）脱钩，这是一个合理的价格支付。

话虽这么说，即使这种耦合可以被打破，如果你使用由预处理语言提供了一些更现代的CSS功能，例如LESS 。 同样的例子：

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

再加上以下数值：

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

这产生完全去耦的HTML和样式表，这是理想的，因为HTML是更清洁和更可读的，和重新设计可以以较少修改HTML制成。 然而这仅适用于如果使用得少或者一些其他CSS预处理器，因为CSS目前不支持混合类型（据我所知）。

我们已经在我的工作场所使用较少，所以我知道我会倾向于使用这种类型的解决方案来推动。 我在语义HTML和数据设计的去耦一个非常坚定的信徒。 :)

Answer 8:

基本上的DIV是的DIV＆表元素只是表元素。 与表中的问题往往只是跟踪的所有列和行的，因为它毕竟是一个严格的数据结构。 资料核实是更加灵活和宽容。

例如，如果你想采取四个的DIV与等于“span4”，只是他们更改为2列宽类，所有你需要做的是调整CSS一丁点儿的外部类的“行”也许类“span4”。 其实这样做时的DIV这样我会避免调用个人资料核实“span4”或其他号码。

我的方法是创建一个父DIV包装被称为“行跨度”和内部的DIV将有一些通用的ID一样，也许“细胞”。

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

每个“小区”类可以具有的100个像素，例如宽度，然后将亲本“行跨度”可以是400个像素。 这将等同于4列在一排。 要使它两列？ 没问题！ 只要改变“行跨度”是200个像素宽。 在这一点上它是所有在CSS所以它不容易在DOM rejiggering页面结构做。

但是，随着表？ 不容易。 你将不得不基本上重新渲染与表</tr><tr>标签来创建新行。

Answer 9:

与表版本，TR，TD取决于浏览器算法 - 包裹，动态宽度，边距定心等版本与DIV可以通过CSS和脚本被更容易地调节。

文章来源: Why is the Bootstrap grid layout preferable to an HTML table?