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

Question

[注意:对于那些可能会将此问题与"为什么不使用表格进行HTML布局"混淆的人,我不是在问这个问题.我问的问题是为什么网格布局与表格布局根本不同.

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

我们都知道使用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>

和

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

Answer 1

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

虽然使用像Bootstrap这样的CSS软件包需要你将类分配给非语义但非表现性的HTML元素,这是正确的,这减少了内容和表示的分离,使得差异有点没有实际意义.您应该为元素分配语义上有意义的类,并使用lesscss mixins(或类似技术)将CSS框架中定义的表示行为分配给这些类,而不是直接将表示类分配给元素.

说:

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

.products {
    .row;
}

.products > .product {
    .span16;
}

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

Answer 2

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

避免div.A 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同一个字段更好.HTML5标准定义了许多新的容器元素,例如article,section,header,footer 和许多更多.在某些情况下,你将不得不使用div's,但如果你最小化它的使用,那么你的代码将更加语义化.

Answer 3

根本区别在于您只需使用媒体查询就可以使用Bootstrap"重排"布局以获得不同的显示大小,而无需更改标记.例如,我可以决定在台式机上,我希望你的4个div位于同一行,因为用户具有高分辨率宽显示,但在手机上我希望在一行上进行2次潜水,然后在下一行进行下一次div.所以这样我可以使用媒体查询调整每行的列数.如果您使用硬编码的HTML表格,那么很难做到这一点.

话虽如此,我不喜欢bootstrap实现,原因如下:

1. 它具有以像素为单位硬编码的断点.这意味着,随着手机和桌面的显示分辨率提高,您的网站可能会开始在这些设备上显示意外的布局.像素数不足以代表显示尺寸.
2. 它将最大使用显示区域限制为1170px,这对于具有良好宽屏显示的用户来说再次无聊,他们实际上可以使用它来查看应用中的更多内容.
3. Bootstrap的布局不依赖于源,即,您无法更改在HTML中设置的列顺序.然而,这更多是一个迂腐点.
4. 默认布局是针对非常小的分辨率和更高分辨率的布局触发仅在媒体查询触发时,IMO是一个糟糕的选择,考虑到手机将继续具有更好的分辨率,并且很快您的网站将为过时的移动设备设置默认布局.
5. Bootstrap布局并不是真正的"无忧",因为你必须阅读他们的精美印刷品才能看到他们认为不值得支持但你可能关心的所有错误和浏览器.例如,如果您针对的是韩国或中国的用户,您会感到惊讶.

所以,并不是所有东西都是黄金的自举,他们的方法并不一定总是最好的(另外,我在引导程序中鄙视的另一件事是他们对所谓的"jumbotrones"的痴迷 - 那些浪费在你面前不方便的房地产标题 - 我希望社区不会开始采用"新标准").我个人display:table最近使用CSS表布局(),它与<table>我的标记中没有硬编码的bootstrap具有相似的好处.例如,我仍然可以使用媒体查询来重新排列行,具体取决于纵向或横向.然而,最重要的好处是我的布局是真正的像素甚至百分比独立.例如,在3列布局中,我让内容决定第一列和最后一列应占用多少空间.没有像素甚至百分比宽度.中间栏抓住了所有剩余的空间(这对我的应用程序来说是好事,但可能不适合其他人).另外,我在媒体查询断点中使用ems,其中bootstrap令人惊讶的没有.