为什么Bootstrap网格布局更适合HTML表格？ [英] Why is the Bootstrap grid layout preferable to an HTML table?

问题描述

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

和

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

解决方案

区别在于第一个例子是语义标记，假设数据被标记为实际不是表格。 < table> 只能用于表格数据，而不能用于任何类似于表格的布局中显示的数据。 / p>

正确的做法是，使用像Bootstrap这样的CSS包，它需要将类分配给 语义但表示性的HTML元素，内容和演示的分离，使得这个区别有些不切实际。您应该为您的元素指定语义上有意义的类，并使用lesscss mixins（或类似技术）将CSS框架中定义的表现行为分配给这些类，而不是直接将表示类指派给元素。

说：

 < div class =products> ; 
< div class =product>< / div> 
< / div> 
 
 .products {
 .row; 
} 
 
 .products> .product {
 .span16; 
} 
  

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

[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.]

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.

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.

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

<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>

解决方案

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.

It is correct though that using CSS packages like Bootstrap, which require you to assign classes to HTML elements which are not semantic but presentational, reduces the separation of content and presentation, making the difference somewhat moot. You should be 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.

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.

这篇关于为什么Bootstrap网格布局更适合HTML表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！