Pourquoi la disposition de la grille de Bootstrap est-elle préférable à une table HTML?

je crois que le CBroe commentaire est la meilleure option, j'ai donc choisi de le clarifier.

éviter div ' s. Un div devrait être votre dernier recours, pas votre première option. Au lieu de cela, essayez d'utiliser des classes Bootstrap sur les éléments réels. Par exemple:

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

C'est une honte d'utiliser fieldset contenir un seul champ, mais il est sémantiquement mieux que d'utiliser un div pour la même chose. Le HTML5 la norme définit de nombreux nouveaux éléments de conteneur, tels que article , section , header , footer et bien d'autres . Dans certains cas, vous devrez utiliser div 's, mais si vous le minimiser l'utilisation de votre code sera bien plus sémantique.

la différence fondamentale est que vous pouvez" refaire " la mise en page avec Bootstrap pour différentes tailles d'affichage simplement en utilisant des requêtes médias sans avoir besoin de changer votre markup. Par exemple, je peux décider que sur les ordinateurs de bureau, je veux que vos 4 divs soient sur la même ligne parce que l'Utilisateur a l'affichage large de haute résolution mais sur les téléphones je veux 2 plongées sur une ligne et les divs suivants sur les lignes suivantes. De cette façon, je peux adapter le nombre de colonnes dans chaque rangée en utilisant les requêtes médias. Si vous utilisez des tables HTML codées dur alors il est très difficile de le faire.

cela dit, Je n'aime pas vraiment l'implémentation bootstrap pour les raisons suivantes:

1. il a des points d'arrêt codés en pixels. Cela signifie que, à mesure que les téléphones et les tables avancent en résolution d'Affichage, votre site web peut commencer à afficher des mises en page inattendues sur ces appareils. Le nombre de Pixels est un mauvais proxy pour l'affichage taille .
2. il limite la surface d'affichage maximale utilisée à 1170px qui est encore une déception pour les utilisateurs avec de beaux écrans larges qu'ils peuvent réellement utiliser pour voir plus de contenu dans votre application.
La mise en page de
3. Bootstrap n'est pas indépendante de la source, c'est-à-dire que vous ne pouvez pas changer l'ordre des colonnes qui est défini en HTML. Il s'agit toutefois d'un point plus pédant.
4. la disposition par défaut est pour la résolution très petite et les dispositions de résolution supérieure déclenchent seulement lorsque les médias interrogent le feu, qui IMO, est un mauvais choix compte tenu des téléphones va continuer pour avoir une meilleure résolution et plus tôt que plus tard votre site web aurait la mise en page par défaut réglée pour les appareils mobiles périmés.
5. Bootstrap mises en page ne sont pas vraiment "sans souci", dans le sens que vous devez lire les petits caractères pour voir tous les bugs et les navigateurs ils n'ont pas jugé digne de soutien, mais qui vous peut inquiéter. Si vous ciblez des utilisateurs en Corée du Sud ou en Chine, vous serez surpris, par exemple.

donc, tout n'est pas de l'or dans bootstrap et leur approche n'est pas nécessairement toujours la meilleure possible (comme une mise à part, une autre chose que je méprise dans bootstrap est leur obsession avec les soi - disant "jumbotrones"-ces biens immobiliers gaspillant des en-têtes in - your-face incommodes-qui, je l'espère, la communauté ne commence pas à prendre comme "nouvelle norme"). Personnellement, j'utilise la disposition de la table CSS ( display:table ) ces jours qui a des avantages similaires que bootstrap sans hardcoding <table> dans mon markup. Je peux utilisez toujours les requêtes Médias pour réarranger les lignes en fonction de l'orientation du portrait ou du paysage, par exemple. Cependant l'avantage le plus important est que mes layouts sont vraiment pixel ou même pourcentage indépendant. Par exemple, dans la disposition de 3 colonnes, j'ai laissé le contenu décider combien d'espace les premières et dernières colonnes devraient prendre. Il n'y a pas de largeur de pixel ou même de pourcentage. La colonne centrale prend tout l'espace restant (ce qui est une bonne chose pour mon application, mais ce n'est peut-être pas pour les autres). En outre, j'utilise ems dans les points de rupture de requête de médias qui bootstrap étonnamment ne le fait pas.

si vous utilisez juste des tables je pense que vous allez manquer sur beaucoup de flexibilité dans le re-dimensionnement de votre document pour mobile/tablettes sans avoir à faire une page séparée pour chaque appareil. une fois que votre structure de table est définie, Tout ce que vous pouvez vraiment faire est de zoomer.

j'utilise la grille Bootstrap pour la mise en page, les tableaux pour les données tabulaires.

je pense à la grille dans Bootstrap, pas comme une grille au sens de développeur, comme un contrôle gridview, mais plus dans la page de conception-le sens de mise en page - comme une grille pour contenir le contenu de la page. Et même si la grille Bootstrap pouvait aussi être utilisée pour créer une grille conventionnelle contenant des données tabulaires, comme l'a fait remarquer deceze, ce type de grille convient mieux aux tables HTML - qui sont encore acceptable à utiliser dans ce scénario.

alors qu'il n'y a pas nécessairement beaucoup de différence sémantique entre les deux séries de markup (puisque les classes utilisées par le système de grille de Bootstrap sont en effet purement de présentation), une distinction très importante est que le système de grille est beaucoup plus flexible.

il serait très difficile, par exemple, de faire en sorte que votre mise en page basée sur une table réponde à différentes tailles d'écran. Il n'y a aucun moyen de dire au navigateur d'afficher un td élément sous un autre td dans la même rangée. Alors qu'avec l'exemple div , c'est facile à faire, et le même balisage peut être présenté de différentes façons même lorsque les classes sont" presentationnelles " dans le sens où elles définissent les proportions relatives et le positionnement des éléments sur la page.

si je peux me permettre, j'aimerais résumer ce que j'ai pu tirer des autres commentaires et du lien explosion que j'ai éprouvé à partir de cette page:

le problème avec l'utilisation de tables n'est pas la disposition de grille, c'est la tentative de l'exprimer avec HTML au lieu de CSS.

Bootstrap permet la disposition des grilles à travers (principalement) des CSS purs, c'est pourquoi C'est OK. La partie "la plupart du temps" vient parce que votre HTML sera toujours contaminé par vos données de mise en page, mais plus subtilement:

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

c'est sûrement beaucoup plus sémantique et maintenable que les anciennes conceptions tabulaires, mais les 'span4' et 'span8' sont toujours des données d'affichage intégrées dans notre HTML. Cependant, comme la conception ne peut jamais être vraiment découplée de nos données (p. ex., divs imbriqués), il s'agit d'un prix raisonnable à payer.

cela étant dit, même ce couplage peut être brisé, si vous utilisez des fonctionnalités CSS plus modernes fournies par un langage pré-traité tel que: moins . Le même exemple:

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

couplé avec le moins:

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

cela crée HTML complètement découplé et feuille de style, ce qui est idéal, parce que le HTML est plus propre et plus lisible, et les nouvelles conceptions peuvent être faites avec moins de modification HTML. Cependant, cela ne fonctionne que si vous utilisez moins ou un autre pré-processeur CSS, car CSS ne supporte pas actuellement mixins (AFAIK).

nous j'utilise déjà moins dans mon milieu de travail, donc je sais que je vais insister pour utiliser ce type de solution. Je suis un fervent partisan du HTML sémantique et du découplage de la conception de données. :)

essentiellement DIVs sont des DIVs et les éléments de Table sont simplement des éléments de table. Le problème avec les tableaux est souvent simplement garder la trace de toutes les colonnes et les lignes parce qu'il est finalement une construction de données stricte. Les DIVs sont beaucoup plus flexibles et indulgents.

par exemple, si vous voulez prendre les quatre DIVs avec la classe qui égale "span4" et juste les changer à une largeur de colonne de 2, Tout ce que vous avez besoin de faire est de régler un tout petit peu de CSS pour la classe externe "row" et peut-être la classe"span4". En fait, lorsque je fais des DIVs comme celle-ci, je voudrais éviter d'appeler DIVs individuels "span4" ou un autre numéro.

mon approche serait de créer une DIV parent wrapper appelée" rowspan "et les Div internes auraient un ID générique comme peut-être"cell".

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

chaque classe de " cellules "pourrait avoir une largeur de 100 pixels par exemple, et le parent" rowspan " pourrait être de 400 pixels. Cela équivaudrait à 4 colonnes d'affilée. Voulez faire 2 colonnes? Pas de problème! Il suffit de changer "rowspan" pour avoir 200 pixels de large. À ce stade, il est tout en CSS, Il est donc facile de faire sans modifier la structure de la page dans le DOM.

mais avec des tables? Pas facile. Vous devriez essentiellement re-rendre la table avec des tags </tr><tr> pour créer de nouvelles lignes.

Version avec table, tr, td dépend des algorithmes du navigateur - enveloppement, largeur dynamique, marges, centrage, etc. La Version avec div peut être plus facilement mise au point par css et scripts.