为什么Bootstrap网格布局更适合HTML表格？
[注意：对于那些可能混淆这个问题的人来说，为什么不使用表格来进行HTML布局呢，我不是在问这个问题。 我问的问题是为什么网格布局与表格布局根本不同。]
我正在研究一个项目的CSS库（特别是Bootstrap）。 我是一名程序员而不是网页devise师，我觉得我可以从封装好devise的图书馆中受益。
我们都知道，使用HTML表格来完成基本的网站布局是不好的做法，因为它将performance与内容混合在一起。 像Bootstrap这样的CSS库提供的好处之一就是它们可以在不使用表的情况下创build“网格”布局。 然而，我有一点麻烦，理解他们的网格布局与等效的表格布局有何不同。
换句话说，这两个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>
不同的是，第一个例子是语义标记 ，假设数据被标记不是实际的表格。 <table>只能用于表格数据 ，不能用于任何类似于表格的布局中显示的数据。
不过，使用像Bootstrap这样的CSS软件包是正确的，它要求您将类分配给非语义但表示性的HTML元素，从而减less了内容和表示的分离，使得这种差异有些不切实际。 您应该为您的元素分配语义上有意义的类，并使用lesscss mixins（或类似技术）将在CSS框架中定义的表示行为分配给这些类，而不是直接将表示类分配给元素。
说：
<div class="products"> <div class="product"></div> </div> .products { .row; } .products > .product { .span16; }
请注意，我说应该 。 在实践中，这不一定总是更可行的select，但它应该是理论目标。
我相信CBroe的评论是最好的select，所以我select澄清它。
避免div 。 div应该是你的最后一招，而不是你的第一select。 相反，尝试在实际元素上使用Bootstrap类。 例如：
<form class="container"> <fieldset class="row"> <label class="span4" for"search">Type your search</label> <input class="span6" type="text" id="search" /> </fieldset> </form>
使用fieldset来包含单个字段是一件div的事情，但是它在语义上比使用div来处理同样的事情要好得多。 HTML5标准定义了许多新的容器元素，例如article ， section ， header ， footer 等等 。 在某些情况下，你将不得不使用div ，但是如果你最小化它的使用，那么你的代码将会更加语义化。
根本区别在于，只要使用媒体查询，您可以使用Bootstrap“重新布置”不同的显示大小，而无需更改标记。 例如，我可以决定，在桌面上，我希望你的4个div在同一行，因为用户有高分辨率的宽屏显示，但是在手机上，我想在一个行上进行2次潜水，在下一行上进行下一个div。 这样，我可以使用媒体查询来调整每行的列数。 如果你使用硬编码的HTML表格，那么这是非常困难的。
话虽如此，我真的不喜欢bootstrap的实施，原因如下：
- 它有断点硬编码像素。 这意味着，随着手机和桌子的显示分辨率的提高，您的网站可能会开始在这些设备上显示意外的布局。 像素数是代表显示器尺寸的糟糕代理。
- 它将最大使用的显示区域限制为1170像素，对于具有漂亮的宽显示器的用户而言，他们实际上可以用来在您的应用中看到更多的内容，这又是一个令人失望的事情
- Bootstrap的布局不是独立于源的，即不能更改HTML中设置的列顺序。 然而，这更多的是一个迂腐点。
- 默认的布局是非常小的分辨率和更高的分辨率布局，只有在媒体查询触发时才会触发，哪个国际海事组织是一个糟糕的select，因为手机将继续拥有更好的分辨率，并且早些时候您的网站将为过时的移动设备设置默认布局。
- Bootstrap的布局并不是真正的“无忧”，因为你必须仔细阅读他们的印刷版，才能看到所有他们认为不值得支持但你可能关心的bug和浏览器。 例如，如果您针对韩国或中国的用户，那么您会感到惊讶。
所以，并不是所有的东西都是黄金，他们的做法并不一定总是最好的（作为一个例外，另外一个我不屑一顾的东西就是他们对所谓的“超大型电影”的痴迷 – 那些房地产在你面前浪费不便标题 – 我希望社区不要开始采取“新标准”）。 就我个人而言，我现在使用CSS表格布局（ display:table ），与我的标记中没有硬编码<table> bootstrap具有相似的优点。 例如，我仍然可以使用媒体查询重新排列行，具体取决于纵向还是横向。 然而，最重要的好处是我的布局是真正的像素，甚至是独立的百分比。 例如，在3列布局中，我让内容来决定第一列和最后一列应该占用多less空间。 没有像素，甚至没有百分比宽度。 中间的列抓取所有剩余的空间（这对我的应用程序是好事，但可能不适用于其他人）。 另外，我在媒体查询中断点使用了ems，而bootstrap却没有。
如果你只是使用表格，我想你会错过很大的灵活性，重新调整文档的手机/平板电脑，而不必为每个设备单独的页面。 一旦你的表格结构被定义，你所能做的就是放大和缩小。
我使用引导网格页面布局，表格数据。
我想到Bootstrap中的网格，而不是开发人员意义上的网格，比如gridview控件，但更多的是在devise页面布局的意义上，作为包含页面内容的网格。 即使Bootstrap网格也可以用来创build一个包含表格数据的传统网格，正如deceze所指出的那样，这种网格更适合于HTML表格 – 在这种情况下仍然可以接受。
虽然这两组标记之间没有太多的语义差异（因为Bootstrap网格系统使用的类确实是纯粹的表示），但一个非常重要的区别是网格系统更加灵活。
例如，要使基于表格的布局能够响应不同的屏幕尺寸，将会非常困难。 没有办法告诉浏览器在同一行的另一个td 下面显示一个td元素。 而对于div例子来说，这很容易做到， 即使类是“表示性的”，也就是说定义页面上的元素的相对比例和位置，这个标记可以以不同的方式呈现。
如果可以的话，我想总结一下我从其他评论中收集的内容，以及我在本页面遇到的链接爆炸事件：
使用表格的问题不是网格布局，而是用HTML而不是CSSexpression的尝试。
Bootstrap允许通过（大部分）纯CSS的网格布局，这就是为什么它可以。 “主要”部分是因为您的HTML仍然会被您的布局数据所污染，但更为巧妙：
<nav class="span4"> ... </nav> <article class="span8"> ... </article>
这确实比旧的表格devise更有语义和更好的可维护性，但“span4”和“span8”仍然是embedded到我们HTML中的显示数据。 但是，由于devise永远不可能真正与我们的数据（如嵌套divs）分离，所以这是一个合理的价格。
也就是说，如果使用一些预处理语言（如LESS）提供的一些更新的CSSfunction，即使这种耦合也可能被破坏。 同样的例子：
<nav id="secondary-nav"> ... </nav> <article id="main-content"> ... </article>
加上以下LESS：
#secondary-nav{ .span4; // More styling (padding, etc) if needed } #main-content{ .span8; }
这创build了完全分离的HTML和样式表，这是理想的，因为HTML更清晰，更易读，重新devise可以用更less的HTML修改。 但是，这只适用于使用LESS或其他CSS预处理器，因为CSS目前不支持mixins（AFAIK）。
我们已经在我的工作场所使用了LESS，所以我知道我会推动使用这种types的解决scheme。 我非常信任语义HTML和数据devise解耦。 🙂
基本上DIV是DIV和表格元素只是表格元素。 表的问题往往只是跟踪所有的列和行，因为它最终是一个严格的数据结构。 DIV更加灵活和宽容。
例如，如果您想要使用等于“span4”的类的四个DIV，并将它们更改为2列宽度，则只需调整一小部分CSS作为外部类“row”也许是class级“span4”。 事实上，当做这样的DIV时，我会避免调用个人DIV“span4”或其他一些数字。
我的做法是创build一个名为“rowspan”的父包装DIV，内部的DIV会有一些类似于“cell”的通用ID。
<div class="rowspan"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div>
例如，每个“单元格”类可以具有100个像素的宽度，然后父“rowspan”可以是400个像素。 这相当于连续4列。 想使它2列？ 没问题！ 只需将“rowspan”更改为200像素宽。 在这一点上，所有这一切都在CSS中，所以很容易做到不需要在DOM中重新调整页面结构。
但是有桌子？ 不容易。 你必须基本上用</tr><tr>标签重新渲染表格来创build新的行。
带有表格，tr，td的版本取决于浏览器algorithm – 包装，dynamic宽度，边距，居中等。带有div的版本可以通过css和脚本更容易地进行调整。
