为什么Bootstrap网格布局更适合HTML表格？

2018-05-29 20:14:37

[注意：对于那些可能将此问题与“为什么不使用表格进行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>

不同之处在于第一个示例是在语义上标记的，假设数据被标记为实际不是表格。 <table>只能用于表格数据，不能用于任何恰好以类似于表格的布局显示的数据。

不过，使用像Bootstrap这样的CSS软件包是正确的，它要求您将类分配给非语义但表示性的HTML元素，从而减少了内容和表示的分离，使得这种差异有点没有实际意义。您应该为您的元素指定语义上有意义的类，并使用lesscss mixins（或类似技术）将CSS框架中定义的表示行为分配给这些类，而不是直接将表示类指派给元素。

说：

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

.products {
    .row;
}

.products > .product {
    .span16;
}

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

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

避免div的。 div应该是你的最后一招，而不是你的第一选择。相反，尝试在实际元素上使用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像素，对于具有漂亮宽屏幕显示的用户而言，它们实际上可以用于查看更多内容。

引导程序的布局不是独立于源代码的，即不能更改HTML中设置的列顺序。然而，这更多是一个迂腐点。

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

Bootstrap布局并不是真正的“无忧”，因为您必须阅读他们的精美版本才能看到他们认为不值得支持但您可能关心的所有错误和浏览器。例如，如果您针对韩国或中国的用户，那么您会感到惊讶。

所以，并非所有的东西都是自助的黄金，他们的做法并不一定总是最好的（因为在旁边，我鄙视自己的另一件事是他们对所谓的“超大型电脑”的痴迷 - 那些房地产在你的脸上浪费不便标题 - 我希望社区不会将其视为“新标准”）。就我个人而言，我现在使用CSS表格布局（ display:table ），与我的标记中没有硬编码<table> bootstrap具有相似的好处。例如，我仍然可以使用媒体查询重新排列行，具体取决于纵向还是横向。然而，最重要的好处是我的布局是真正的像素或甚至百分比独立。例如，在3列布局中，我让内容决定第一列和最后一列需要占用多少空间。没有像素或甚至百分比宽度。中间列抓取所有剩余的空间（这对我的应用程序来说是好事，但它可能不适用于其他应用程序）。另外，我在媒体查询中断点使用了ems，而引导程序令人惊讶的是没有。

链接地址: http://www.djcxy.com/p/2545.html

上一篇: Why is the Bootstrap grid layout preferable to an HTML table?

下一篇: Can you do this HTML layout without using tables?