html - template - div class row




為什麼Bootstrap網格佈局優於HTML表格? (6)

不同之處在於第一個示例是語義標記的 ,假設標記的數據實際上不是表格式的。 <table>只應用於表格數據 ,而不能用於恰好在類似於表格的佈局中顯示的任何數據。

儘管使用像Bootstrap這樣的CSS軟件包需要你將類分配給語義但非表現性的HTML元素,這是正確的,這減少了內容和表示的分離,使得差異有點沒有用。 您應該為元素分配具有語義意義的類,並使用lesscss mixins(或類似技術)將CSS框架中定義的表示行為分配給這些類,而不是直接將表示類分配給元素。

說:

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

.products {
    .row;
}

.products > .product {
    .span16;
}

請注意,我說應該 。 在實踐中,這不一定總是更可行的選擇,但它應該是理論目標。

[注意:對於那些可能會將此問題與“為什麼不使用表格進行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>

基本上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中的頁面結構的情況下很容易做到。

但是有桌子嗎? 不容易。 您必須基本上使用</tr><tr>標記重新呈現表以創建新行。


如果您只是使用表格,我認為您將錯過重新調整移動設備/平板電腦文檔的靈活性,而無需為每個設備製作單獨的頁面。 一旦你的表結構被定義,你所能做的就是放大和縮小。


帶有table,tr,td的版本取決於瀏覽器算法 - 包裝,動態寬度,邊距,居中等。帶有div的版本可以通過css和腳本更容易地調整。


我相信CBroe評論是最好的選擇,所以我選擇澄清它。

避免divdiv應該是你最後的選擇,而不是你的第一選擇。 相反,嘗試在實際元素上使用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標准定義了許多新的容器元素,例如articlesectionheaderfooter 等等 。 在某些情況下,你將不得不使用div ,但如果你最小化它的使用,那麼你的代碼將更加語義化。


根本區別在於您只需使用媒體查詢就可以使用Bootstrap“重排”佈局以獲得不同的顯示大小,而無需更改標記。 例如,我可以決定在台式機上,我希望你的4個div位於同一行,因為用戶具有高分辨率寬顯示,但在手機上我希望在一行上進行2次潛水,然後在下一行進行下一次div。 因此,我可以使用媒體查詢調整每行中的列數。 如果您使用硬編碼的HTML表格,那麼很難做到這一點。

話雖如此,我不喜歡bootstrap實現,原因如下:

  1. 它具有以像素為單位硬編碼的斷點。 這意味著,隨著手機和桌面的顯示分辨率提高,您的網站可能會開始在這些設備上顯示意外的佈局。 像素數不足以代表顯示尺寸
  2. 它將最大使用顯示區域限制為1170px,對於具有良好寬屏顯示的用戶來說,這實際上可以用來查看應用中的更多內容。
  3. Bootstrap的佈局不依賴於源,即,您無法更改在HTML中設置的列順序。 然而,這更像是一個迂腐點。
  4. 默認佈局是針對非常小的分辨率和更高分辨率的佈局觸發僅在媒體查詢觸發時,IMO是一個糟糕的選擇,考慮到手機將繼續具有更好的分辨率,並且很快您的網站將為過時的移動設備設置默認佈局。
  5. Bootstrap佈局並不是真正的“無憂”,因為你必須閱讀他們的精美打印,看看他們認為不值得支持但可能關心的所有錯誤和瀏覽器。 例如,如果您針對的是韓國或中國的用戶,您會感到驚訝。

所以,並不是所有的東西都是黃金的自舉,他們的方法並不一定總是最好的(另外,我在引導中鄙視的另一件事是他們對所謂的“jumbotrones”的痴迷 - 那些浪費在你面前不方便的房地產標題 - 我希望社區不會開始採用“新標準”)。 我個人使用CSS表格佈局( display:table ),這與我的標記中沒有硬編碼<table> bootstrap具有相似的好處。 例如,我仍然可以使用媒體查詢來重新排列行,具體取決於縱向或橫向。 然而,最重要的好處是我的佈局是真正的像素甚至百分比獨立。 例如,在3列佈局中,我讓內容決定第一列和最後一列應佔用多少空間。 沒有像素甚至百分比寬度。 中間欄抓住了所有剩餘的空間(這對我的應用程序來說是好事,但可能不適合其他人)。 另外,我在媒體查詢斷點中使用ems,其中bootstrap令人驚訝的沒有。







html-table