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

Why is the Bootstrap grid layout preferable to an HTML table?

提问by Larry Lustig

[Note: for those who may be confusing this question with "why not use tables for HTML layout", I am not asking that question. The question I'm asking is why is a grid layout fundamentally different from a table layout.]

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

I'm researching CSS libraries (in particular Bootstrap) for a project. I am a programmer rather than a web designer and I feel I could benefit from a library that encapsulates good design.

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

We all know that it's bad practice to use HTML tables to accomplish basic site layout because it mixes presentation with content. One of the benefits provided by CSS libraries like Bootstrap is that they offer the ability to create "grid" layouts without using tables. I'm having a little trouble, however, understanding how their grid layouts differ in any meaningful way from the equivalent table layout.

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

In other words, what is the fundamentaldifference between these two examples of HTML? Am I wrong in thinking that the grid layout is simply a table with another name?

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

and

和

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

采纳答案by deceze

The difference is that the first example is semantically marked up, assuming the data being marked up is not actually tabular. <table>should only be used for tabular data, not for any data which happens to be displayed in a layout similar to a table.

不同之处在于第一个示例是语义标记的，假设被标记的数据实际上不是表格。<table>应该只用于表格数据，而不是任何碰巧显示在类似于表格的布局中的数据。

It is correct though that using CSS packages like Bootstrap, which require you to assign classes to HTML elements which are notsemantic but presentational, reduces the separation of content and presentation, making the difference somewhat moot. You shouldbe assigning semantically meaningful classes to your elements and use lesscss mixins (or similar technology) to assign presentational behavior defined in the CSS framework to these classes, instead of assigning the presentational classes to the elements directly.

虽然使用像 Bootstrap 这样的 CSS 包是正确的，它要求你为 HTML 元素分配类，这些元素不是语义而是表现形式，减少了内容和表现的分离，使差异变得有些没有实际意义。您应该为元素分配语义上有意义的类，并使用lesscss mixins（或类似技术）将CSS 框架中定义的表现行为分配给这些类，而不是直接将表现类分配给元素。

Say:

说：

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

.products {
    .row;
}

.products > .product {
    .span16;
}

Note that I say should. In practice this is not necessarily always the more workable option, but it should be the theoretical goal.

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

回答by Metalcoder

I believe that CBroe commentis the best option, so I chose to clarify it.

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

Avoid div's. A divshould be your last resort, not your first option. Instead, try to use Bootstrap classes on the actual elements. For instance:

避免div的。Adiv应该是你最后的选择，而不是你的第一选择。相反，尝试在实际元素上使用 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>

It is a shame to use fieldset to contain a single field, but it is semantically best than using a divfor the same thing. The HTML5 standard defines many new container elements, such as article, section, header, footerand many more. In some cases you will have to use div's, but if you minimize it's use then your code will be way more semantic.

使用 fieldset 来包含单个字段是一种耻辱，但在语义上比div对同一事物使用 a 更好。HTML5标准定义了许多新的容器元素，例如article，section，header，footer和许多更多。在某些情况下，您将不得不使用div's，但如果您尽量减少它的使用，那么您的代码将更加语义化。

回答by Shital Shah

The fundamental difference is that you can "reflow" the layout with Bootstrap for different display sizes simply using media queries without needing to change your markup. For example, I can decide that on desktops, I want your 4 divs to be on same row because user has high resolution wide display but on phones I want 2 dives on one row and next divs on next rows. So this way I can adapt my column count in each row using media queries. If you use hard coded HTML tables then it is very difficult to do this.

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

Having said that, I don't really like bootstrap implementation for the following reasons:

话虽如此，由于以下原因，我真的不喜欢引导程序实现：

1. It has breakpoints hard coded in pixels. This means, as phones and tables advance in display resolution, your website may start showing unexpected layouts on those devices. Pixel count is poor proxy for display size.
2. It limits maximum used display area to 1170px which is again a bummer for users with nice wide displays they can actually use to see more content in your app.
3. Bootstrap's layout is not source independent, i.e., you can't change column order that is set in HTML. This is however more of a pedantic point.
4. The default layout is for very small resolution and higher resolution layouts trigger only when media queries fire, which IMO, is a poor choice considering phones will continue to have better resolution and sooner than later your website would have default layout set for outdated mobile devices.
5. Bootstrap layouts are not truly "worry free" in the sense that you have to read their fine print to see all the bugs and browsers they didn't see worthy of supporting but which youmay care about. If you are targeting users in South Korea or China, you would be in for surprise, for example.

1. 它具有以像素为单位硬编码的断点。这意味着，随着手机和桌子显示分辨率的提高，您的网站可能会开始在这些设备上显示意外的布局。像素数不能很好地代表显示尺寸。
2. 它将最大使用显示区域限制为 1170 像素，这对于拥有漂亮宽屏的用户来说又是一个遗憾，他们实际上可以用来查看应用程序中的更多内容。
3. Bootstrap 的布局与源代码无关，即您不能更改 HTML 中设置的列顺序。然而，这更像是一个迂腐的观点。
4. 默认布局适用于非常小的分辨率，更高分辨率的布局仅在媒体查询触发时触发，IMO 是一个糟糕的选择，因为手机将继续具有更好的分辨率，并且迟早您的网站将为过时的移动设备设置默认布局。
5. Bootstrap 布局并不是真正“无忧无虑”，因为您必须阅读它们的细则才能看到他们认为不值得支持但您可能关心的所有错误和浏览器。例如，如果您的目标是韩国或china的用户，您会大吃一惊。

So, not everything is gold in bootstrap and their approach is not necessarily always the best possible (as an aside, one other thing I despise in bootstrap is their obsession with so called "jumbotrones" - those real estate wasting inconvenient in-your-face headers - which I hope community doesn't start taking as "new standard"). Personally I use CSS table layout (display:table) these days which has similar benefits as bootstrap without hardcoding <table>in my markup. I can still use media queries to rearrange rows depending on portrait or landscape orientation, for example. However the most important benefit is that my layouts are truly pixel or even percentage independent. For example, in 3 column layout, I let content to decide how much space first and last columns should take. There is no pixel or even percentage width. The center column grabs up all the remaining space (which is good thing for my app, but it may not be for others). In addition, I use ems in media query break points which bootstrap surprisingly doesn't.

所以，并不是所有的东西都是引导程序中的黄金，他们的方法不一定总是最好的（顺便说一句，我在引导程序中鄙视的另一件事是他们对所谓的“超大屏幕”的痴迷 - 那些浪费不便的房地产标头 - 我希望社区不要开始将其视为“新标准”）。display:table这些天我个人使用 CSS 表格布局 ( )，它与没有硬编码的引导程序具有类似的好处<table>在我的标记中。例如，我仍然可以使用媒体查询根据纵向或横向方向重新排列行。然而，最重要的好处是我的布局真正独立于像素甚至百分比。例如，在 3 列布局中，我让内容来决定第一列和最后一列应该占用多少空间。没有像素甚至百分比宽度。中心列占据了所有剩余空间（这对我的应用程序来说是件好事，但对其他人来说可能不是）。此外，我在媒体查询断点中使用了 ems，而引导程序出人意料地没有。

回答by DShultz

I use the Bootstrap grid for page layout, tables for tabular data.

我使用 Bootstrap 网格进行页面布局，使用表格进行表格数据。

I think of the grid in Bootstrap, not as a grid in the developer sense, like a gridview control, but more in the design page-layout sense - as a grid to contain the page contents. And even though the Bootstrap grid could be also used to create a conventional grid containing tabular data, as deceze pointed out, this kind of grid is better suited for HTML tables - which are still acceptable to use in this scenario.

我认为 Bootstrap 中的网格不是开发人员意义上的网格，如 gridview 控件，而是更多在设计页面布局意义上 - 作为包含页面内容的网格。即使 Bootstrap 网格也可用于创建包含表格数据的传统网格，正如 deceze 指出的那样，这种网格更适合 HTML 表格 - 在这种情况下仍然可以接受使用。

回答by hovrakziggler

if you just use tables i think you will miss out on alot of flexibility in re-sizing your document for mobile/tablets without having to make a separate page for each device. once your table structure is defined all you can really do is zoom in and out.

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

回答by Louis Simoneau

While there's not necessarily much semanticdifference between the two sets of markup (since the classes used by Bootstrap's grid system are indeed purely presentational), one very important distinction is that the grid system is much more flexible.

虽然两组标记之间的语义差异不一定很大（因为 Bootstrap 的网格系统使用的类确实纯粹是表示性的），但一个非常重要的区别是网格系统更加灵活。

It would be very difficult, for example, to make your table-based layout respond to different screen sizes. There's no way to tell the browser to display one tdelement belowanother tdin the same row. Whereas with the divexample, that's easy to do, and the same markup can be presented in different ways evenwhen the classes are "presentational" in the sense that they define the relative proportions and positioning of the elements on the page.

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

回答by Gilthans

If I may, I'd like to summarize what I gathered from the other comments and the link explosion I experienced from this page:

如果可以的话，我想总结一下我从其他评论中收集到的信息以及我在此页面上经历的链接爆炸：

The problem with using tables isn't the grid layout, it is the attempt to express it with HTML instead of CSS.

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

Bootstrap allows grid layouts through (mostly) pure CSS, which is why it is OK. The 'mostly' part comes because your HTML will still be contaminated by your layout data, but more subtly:

Bootstrap 允许通过（主要是）纯 CSS 进行网格布局，这就是它可以的原因。“主要”部分是因为您的 HTML 仍然会被布局数据污染，但更微妙的是：

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

This is surely significantly more semantic and maintainable than the old tabular designs, but the 'span4' and 'span8' are still display-data embedded into our HTML. However, since design can never be truly be decoupled from our data (e.g., nested divs), this is a reasonable price to pay.

这肯定比旧的表格设计更具语义和可维护性，但“span4”和“span8”仍然是嵌入到我们 HTML 中的显示数据。然而，由于设计永远无法真正从我们的数据中分离出来（例如，嵌套的 div），这是一个合理的代价。

That being said, even this coupling can be broken, if you use some more modern CSS features provided by a pre-processed language such as LESS. The same example:

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

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

Coupled with the following LESS:

再加上以下 LESS：

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

This creates fully decoupled HTML and Stylesheet, which is ideal, because the HTML is cleaner and more readable, and redesigns can be made with less HTML modification. However this only works if you use LESS or some other CSS pre-processor, because CSS currently does not support mixins (AFAIK).

这将创建完全解耦的 HTML 和样式表，这是理想的，因为 HTML 更清晰且更具可读性，并且可以通过更少的 HTML 修改进行重新设计。但是，这仅在您使用 LESS 或其他一些 CSS 预处理器时才有效，因为 CSS 当前不支持 mixins (AFAIK)。

We already use LESS in my workplace, so I know I'll be pushing towards using this type of solution. I'm a very strong believer in semantic HTML and data-design decoupling. :)

我们已经在我的工作场所使用 LESS，所以我知道我将推动使用这种类型的解决方案。我非常相信语义 HTML 和数据设计解耦。:)

回答by Andrei

Version with table, tr, td depends on browser algorithms - wrapping, dynamic width, margins, centering etc. Version with div can be more easily tuned by css and scripts.

带有表格、tr、td 的版本取决于浏览器算法——包装、动态宽度、边距、居中等。带有 div 的版本可以更容易地通过 css 和脚本进行调整。

回答by JakeGould

Basically DIVs are DIVs & Table elements are simply table elements. The problem with tables is often just keeping track of all of the columns & the rows because it is ultimately a strict data construct. DIVs are far more flexible & forgiving.

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

For example, if you wanted to to take the four DIVs with the class that equals "span4" and just change them to a 2 column width, all you would need to do is adjust a wee bit of CSS for the outer class "row" and maybe the class "span4". In fact when doing DIVs like this I would avoid calling individual DIVs "span4" or some other number.

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

My approach would be to create a parent wrapper DIV that is called "rowspan" and the inner DIVs would have some generic ID like maybe "cell".

我的方法是创建一个名为“rowspan”的父包装 DIV，内部 DIV 将具有一些通用 ID，例如“单元格”。

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

Each "cell" class could have a width of 100 pixels for example, and then the parent "rowspan" could be 400 pixels. That would equate to 4 columns in a row. Want to make it 2 columns? No problem! Just change "rowspan" to be 200 pixels wide. At this point it is all in CSS so it's easy to do without rejiggering page structure in the DOM.

例如，每个“单元格”类的宽度可以是 100 像素，然后父“行跨度”可以是 400 像素。这相当于连续 4 列。想让它变成 2 列吗？没问题！只需将“rowspan”更改为 200 像素宽。在这一点上，一切都在 CSS 中，因此无需在 DOM 中重新调整页面结构即可轻松完成。

But with tables? Not easy. You would have to basically re-render the table with </tr><tr>tags to create new rows.

但是用桌子？不容易。您必须基本上重新渲染带有</tr><tr>标签的表格以创建新行。