首页 文章

为什么Bootstrap网格布局优于HTML表格？

提问于
浏览 次
55

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

9 回答

  • 18

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

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

    说：

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

.products {
    .row;
}

.products > .product {
    .span16;
}

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

    回复于
  • 0

    我相信CBroe comment是最好的选择，所以我选择澄清它 .

    避免 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 同样适用 . HTML5标准定义了许多新的容器元素，例如 article ， section ， header ， footer and many more . 在某些情况下，您将不得不使用 div 's, but if you minimize it'，然后您的代码将更加语义化 .

    回复于
  • 0

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

    话虽如此，我不喜欢bootstrap实现，原因如下：

    • 它的断点以像素为单位进行硬编码 . 这意味着，随着手机和桌面的显示分辨率提高，您的网站可能会开始在这些设备上显示意外的布局 . 像素数不足以代表显示尺寸 .

    • 它将最大使用显示区域限制为1170px，对于具有良好宽屏显示的用户来说，这实际上可以用来查看应用中的更多内容 .

    • Bootstrap 's layout is not source independent, i.e., you can' t更改在HTML中设置的列顺序 . 然而，这更像是一个迂腐点 .

    • 默认布局是针对非常小的分辨率和更高分辨率的布局触发仅在媒体查询触发时，IMO是一个糟糕的选择，考虑到手机将继续具有更好的分辨率，并且很快您的网站将为过时的移动设备设置默认布局 .

    • Bootstrap布局并不是真正的"worry free"，因为你必须阅读他们的精美印刷品才能看到他们认为不值得支持但你可能关心的所有错误和浏览器 . 例如，如果您针对的是韩国或中国的用户，您会感到惊讶 .

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

    回复于
  • 2

    如果您只是使用表格，我认为您将错过重新调整移动设备/平板电脑文档的灵活性，而无需为每个设备制作单独的页面 . 一旦你的表结构被定义，你所能做的就是放大和缩小 .

    回复于
  • 8

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

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

    回复于
  • 2

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

    例如，要使基于表格的布局响应不同的屏幕尺寸将非常困难 . 没有办法告诉浏览器在同一行的另一个 td 下面显示一个 td 元素 . 而使用 div 示例，这很容易做到，并且相同的标记可以以不同的方式呈现，即使类是"presentational"，因为它们定义了页面上元素的相对比例和位置 .

    回复于
  • 31

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

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

    Bootstrap允许通过（大部分）纯CSS的网格布局，这就是为什么它没问题 . “大多数”部分是因为您的HTML仍然会受到布局数据的污染，但更为巧妙：

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

    这肯定比旧的表格设计更加语义和可维护，但'span4'和'span8'仍然是嵌入到我们的HTML中的显示数据 . 但是，由于设计永远不能真正与我们的数据（例如，嵌套的div）分离，因此这是一个合理的代价 .

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

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

    再加上以下LESS：

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

    这创建了完全解耦的HTML和样式表，这是理想的，因为HTML更清晰，更易读，并且可以用更少的HTML修改来重新设计 . 但是，这只适用于使用LESS或其他CSS预处理器，因为CSS目前不支持mixins（AFAIK） .

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

    回复于
  • 2

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

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

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

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

    例如，每个“单元”类可以具有100个像素的宽度，然后父“行”可以是400个像素 . 这相当于连续4列 . 想要成为2列吗？没问题！只需将“rowspan”更改为200像素宽 . 此时它全部都在CSS中，因此在不重新调整DOM中的页面结构的情况下很容易做到 .

    但是有 table 吗？不容易 . 您必须基本上使用 </tr><tr> 标记重新呈现表以创建新行 .

    回复于
  • 1

    带有table，tr，td的版本取决于浏览器算法 - 包装，动态宽度，边距，居中等 . 带有div的版本可以通过css和脚本更容易地调整 .

    回复于

相关问题