Pourquoi le Bootstrap grille de mise en page préférable à un tableau HTML?
[Note: pour ceux qui peuvent être source de confusion à cette question "pourquoi ne pas utiliser des tableaux pour la mise en page HTML", je ne suis pas poser cette question. La question que je vais poser est de savoir pourquoi une grille de mise en page fondamentalement différent d'un tableau de mise en page.]
Je suis à la recherche de CSS bibliothèques (en particulier Bootstrap) pour un projet. Je suis un programmeur plutôt que d'un concepteur de sites web et je sens que je pourrais bénéficier d'une bibliothèque qui encapsule un bon design.
Nous savons tous que c'est une mauvaise pratique de l'utilisation des tableaux HTML pour accomplir de base de la mise en page du site, car il mélange la présentation avec le contenu. L'un des avantages offerts par les bibliothèques, comme le Bootstrap est qu'ils offrent la possibilité de créer des "grille" mises en page sans l'aide de tableaux. Je vais avoir un peu de mal, cependant, la compréhension de la façon dont leur grille dispositions diffèrent de manière significative, passant de l'équivalent de la table.
En d'autres termes, quelle est la fondamentaux différence entre ces deux exemples de HTML? Suis-je tort de penser que la grille de mise en page est tout simplement une table avec un autre nom?
<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>
et
<table>
<tr>
<td colspan=4></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
- double possible de Pourquoi ne pas utiliser des tableaux pour la mise en page en HTML?
- et fermez-les électeurs: Ce n'est pas dupe. Cette question n'est pas à propos de pourquoi ne pas utiliser des tableaux, il pose des questions sur la différence entre les tableaux HTML et CSS tables comme fait par Bootstrap &co, qui dans la pratique se résume à très peu de différence dans le balisage et la fonctionnalité.
- Ce n'est absolument pas un doublon de cette question (que j'ai lu). Je ne suis pas de se demander pourquoi les tables ne doivent pas être utilisés. Je me demande si et pourquoi les dispositions en grille de Bootstrap et les autres bibliothèques sont fondamentalement différentes des dispositions de table, -- c'est pourquoi la "ligne" et "span" classes sont mieux que les lignes et de cellules, les éléments et les attributs colspan.
- Et de penser, nous étions sur le chemin de l'éveil.. rappelez-vous csszengarden.com ? Sauf s'avère css est plus de l'assemblée de l'enfer que python ciel
- “Pourquoi le Bootstrap grille de mise en page préférable à un tableau HTML?” – il n'est pas, parce que c'est juste terrible DIV soupe. À mon humble avis Bootstrap s'adresse principalement à des personnes qui n'ont aucune idée de comment écrire du HTML sémantique dans la première place.
- Python est le ciel?
Vous devez vous connecter pour publier un commentaire.
La différence est que le premier exemple est sémantiquement marqué, en supposant que les données soient marqués n'est pas fait de tableau.
<table>
doit être utilisé uniquement pour données tabulaires, pas pour toutes les données qui se trouve être affichée dans une mise en page similaire à une table.Il est correct bien qu'à l'aide de CSS paquets comme Bootstrap, qui vous obligent à assigner des catégories aux éléments HTML qui sont pas sémantique mais la présentation, réduit la séparation du contenu et de la présentation, faire la différence quelque peu discutable. Vous devrait attribuer sémantiquement significatifs classes de vos éléments et les utiliser lesscss mixin (ou des technologies similaires) pour affecter de présentation de comportement définis dans le framework CSS pour ces classes, au lieu d'affecter la présentation des classes pour les éléments directement.
Dire:
Notez que je dis devrait. Dans la pratique, cela n'est pas toujours nécessairement le plus d'option possible, mais il devrait être l'objectif théorique.
row
etspan*
classes utilisées dans la grille de mise en page moins de présentation de<tr>
et<td>
éléments dans le tableau exemple?<table>
a un sémantique. Les données marquées à l'aide d'un<table>
peut être analysé dans d'autres tableaux de formats, de dire (à dieu ne plaise) une feuille Excel.<div>
éléments ont pas de signification particulière si.<div class="row">
ne signifie rien de plus que<div class="flargleborg">
. La séparation des sens et de la présentation.row
telle qu'elle impliquait rien au sujet de la présentation physique de l'objet. Mais c'est clairement pas ce que ce genre de disposition en grille ne. Les tutoriels que j'ai lu sur la grille de mise en page toujours commencer par montrer une image concrète de ce que la grille ressemble comme un contrat, plus ou moins, de la façon dont votre grille-contenu balisé apparaîtra. Ce n'est pas commeflargleborg
, mais plus commeflargleborg-red
. Suis-je tort?<table>
éléments parce que vos données n'est pas de tableaux. Si vos données est de tableaux, utiliser un<table>
.Je crois que CBroe commentaire est la meilleure option, j'ai donc choisi de le clarifier.
Éviter
div
s'. Undiv
devrait être votre dernier recours, pas à votre première option. Au lieu de cela, essayez d'utiliser Bootstrap classes sur les éléments réels. Par exemple: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. La norme HTML5 définit de nombreux nouveaux éléments conteneurs, tels quearticle
,section
,header
,footer
et beaucoup plus. Dans certains cas, vous devrez utiliserdiv
's, mais si vous le minimiser l'utilisation de votre code sera bien plus sémantique..container
sur un<form>
tag? J'ai pensé.container
est le plus externe contenant l'élément (surtout<div>
) et vous ne pouvez appliquer.form-horizontal
si vous voulez une forme horizontale, d'autre ne sont pas de joindre toutes les classes de la forme (BS3 fait déjà un peu de contrôle). alors.row
->.col-XX-yy
->.form-group
->.label-control
pour<label >
et.form-control
pour les non-case éléments. Voir les docs: getbootstrap.com/docs/3.3/css/#formsLa différence fondamentale est que vous pouvez "reflow" la mise en page avec Bootstrap pour les différentes tailles d'affichage tout simplement à l'aide de requêtes de média sans avoir à modifier le balisage. Par exemple, je peux décider que sur les ordinateurs de bureau, j'ai besoin de votre 4 divs pour être sur la même ligne que l'utilisateur a haute résolution grand écran, mais sur les téléphones je veux 2 plongées sur une ligne et suivant les divs sur les prochaines lignes. Ainsi, de cette façon je peux adapter mon nombre de colonnes dans chaque ligne à l'aide de requêtes de média. Si vous utilisez le codage en dur des tableaux en HTML, alors il est très difficile de le faire.
Cela dit, je n'aime pas vraiment bootstrap mise en œuvre pour les raisons suivantes:
Donc, tout n'est pas de l'or dans le bootstrap et leur approche n'est pas nécessairement toujours le meilleur possible (en aparté, une autre chose que je méprise dans le bootstrap est leur obsession avec ce qu'on appelle "jumbotrones" - ceux de l'immobilier perdre gênant dans-votre-visage-têtes - qui, je l'espère communauté n'est pas de commencer à prendre comme "nouvelle norme"). Personnellement, j'utilise le CSS disposition de table (
display:table
) ces jours-ci qui a les mêmes avantages que bootstrap sans coder en dur<table>
dans mon balisage. Je peux encore utiliser les media queries pour réorganiser les lignes selon l'orientation portrait ou paysage, par exemple. Cependant, l'avantage le plus important est que mes mises en page sont vraiment un pixel ou d'un même pourcentage d'indépendants. Par exemple, dans la colonne 3 de mise en page, je laisse le contenu de décider de combien d'espace première et dernière colonnes doivent prendre. Il n'y a pas de pixel ou d'un même pourcentage de la largeur. La colonne du centre attrape tout le reste de l'espace (ce qui est une bonne chose pour mon application, mais il peut ne pas l'être pour d'autres). En outre, j'utilise ems dans les médias requête des points de rupture qui bootstrap, étonnamment, n'a pas.si vous venez d'utiliser les tables je pense que vous allez passer à côté de beaucoup de souplesse dans le changement de la taille de votre document pour les mobiles/tablettes sans avoir à faire une page séparée pour chaque appareil. une fois votre structure de la table est défini tout ce que vous pouvez vraiment faire est de zoomer et dézoomer.
J'utilise le Bootstrap grille de mise en page, les tableaux de données tabulaires.
Je pense de la grille de Bootstrap, non pas comme une grille dans le développement de sens, comme un contrôle gridview, mais plus dans la conception de mise en page de sens, comme une grille pour contenir le contenu de la page. Et même si le Bootstrap grille peut également être utilisé pour créer un classique de la grille contenant des données tabulaires, comme deceze l'a souligné, ce type de grille est mieux adapté pour les tableaux HTML - qui sont encore acceptables à utiliser dans ce scénario.
Alors il n'y a pas nécessairement beaucoup sémantique différence entre les deux ensembles de balisage (depuis les classes utilisées par Bootstrap du système de grille sont en effet purement de présentation), une distinction très importante, c'est que le système de grille est beaucoup plus souple.
Il serait très difficile, par exemple, pour faire de votre table de base de mise en page de répondre aux différentes tailles d'écran. Il n'y a aucun moyen de dire au navigateur d'afficher une
td
élément ci-dessous un autretd
dans la même ligne. Alors qu'avec lediv
exemple, c'est facile à faire, et le même balisage peuvent être présentés de différentes façons même lorsque les classes sont "présentation" dans le sens où ils définissent les proportions relatives et le positionnement des éléments sur la page.Si vous me le permettez, j'aimerais résumer ce que j'ai recueillies à partir des autres commentaires et le lien de l'explosion j'ai vécu à partir de cette page:
Le problème avec l'aide de tables n'est pas de la grille de mise en page, c'est la tentative de l'exprimer avec le langage HTML au lieu de CSS.
Bootstrap permet de grille de mises en page par le biais de (presque) pur CSS, c'est pourquoi il est OK. Le "surtout" une partie provient de ce que votre code HTML sera toujours contaminés par votre mise en page de données, mais plus subtilement:
C'est sûrement beaucoup plus sémantique et maintenable que l'ancien de tableaux, de dessins, mais le "span4" et "span8" sont encore à l'affichage de données intégré dans notre HTML. Cependant, depuis la conception ne peut jamais être vraiment être découplée de nos données (par exemple, les divs imbriqués), ce qui est un prix raisonnable à payer.
Cela étant dit, même ce couplage peut être rompu, si vous utiliser un peu plus moderne CSS fonctionnalités offertes par un pré-traités de la langue tels que MOINS. Le même exemple:
Couplé avec la suite MOINS:
Cela crée entièrement découplé HTML et la feuille de style, ce qui est idéal, parce que le HTML est plus propre et plus lisible, et les remaniements peut être fait avec moins de HTML de modification. Toutefois, cela ne fonctionne que si vous utilisez MOINS ou une autre CSS pré-processeur, parce que CSS ne prend actuellement pas en charge mixin (autant que je sache).
Nous utilisons déjà MOINS dans mon milieu de travail, donc je sais que je vais pousser vers l'utilisation de ce type de solution. Je suis un croyant ferme dans la sémantique HTML et les données de conception de découplage. 🙂
Fondamentalement DIVs sont DIVs & les éléments de la Table sont simplement des éléments de la table. Le problème avec les tables est souvent juste de garder une trace de toutes les colonnes & les lignes parce que c'est finalement un strict de données construire. Les DIVs sont beaucoup plus souples & pardonner.
Par exemple, si vous vouliez prendre les quatre DIVs avec la classe qui est égal à "span4" et il suffit de changer pour un 2 la largeur de la colonne, tout ce que vous devez faire est d'ajuster un petit peu de CSS à l'extérieur pour la catégorie "ligne" et peut-être la classe "span4". En réalité, quand faire des DIVs comme cela, je voudrais éviter d'appeler un individu DIVs "span4" ou un autre nombre.
Mon approche serait de créer un parent wrapper DIV qui est appelé "rowspan" et l'intérieur de la Vrd aurait certains génériques ID comme peut-être la "cellule".
Chaque "cellule" de la classe pourrait avoir une largeur de 100 pixels par exemple, et puis le parent "rowspan" pourrait être de 400 pixels. Qui équivaudrait à 4 colonnes dans une rangée. Voulez faire 2 colonnes? Pas de problème! Il suffit de changer "rowspan" être de 200 pixels de large. À ce stade, il est tout en CSS, donc il est facile à faire sans rejiggering structure de la page dans les DOM.
Mais avec des tables? Pas facile. Vous devez tout nouveau rendu de la table avec
</tr><tr>
balises pour créer de nouvelles lignes.<tr>
élément contenant quatre<td>
s. Vous utilisez le nom de la classe "cellule". Il me semble que vous avez encodé la présentation (quatre cellules dans une ligne) dans le code HTML.<tr>
est un DOM de niveau élément. CSS réside à l'extérieur de la DOM. En utilisant<div>
éléments avec un décent CSS taxonomie vous avoir plus de souplesse & de ne pas avoir à recourir à la modification du DOM en ajoutant<tr>
éléments. Ce qui signifie que vous pouvez créer par exemple un script PHP qui peut tout simplement cracher<div>
éléments avec des classes CSS spécifiques au lieu d'avoir à faire le fou calculs on aurait à faire pour créer<table>
éléments.<tr>
est tout simplement un<table>
ligne et ne sera jamais—et ne peut—être autre chose. Mais un<div>
est plus flexible & peut permettre des mises en page qui sont visuellement la même chose qu'un<table>
mais avec beaucoup plus d'options sans avoir à déchirer & retravailler les DOM structure d'un<table>
.<div>
offre plus de flexibilité pour modifier la présentation à l'aide de CSS, et pourquoi c'est précieux. Ma question n'a jamais été sur les avantages de séparer la présentation du sens. Toutefois, la présentation de la grille systèmes semblent reprendre que la flexibilité par le coder en dur de ligne et de colonne structures dans le code HTML et ma question est -- je me trompe, que c'est ce que la grille dispositions sont en train de faire?<div>
dans ce cas de manière aussi efficace comme il faut. Mais en général, je ne suis pas d'utiliser des outils tels que & faire pur CSS à la main, dans de nombreux cas. Et je peux vous assurer qu'il y a plus de maux de tête en bas de la ligne lors de l'utilisation de<table>
tags rapport<div>
& CSS. Il est beaucoup plus proactif dans la vie à long terme de la programmation.Version avec table, tr, td dépend du navigateur algorithmes d'habillage, de la dynamique de la largeur, de marges, de centrage, etc.
Version avec div peut être plus facilement réglée par les css et les scripts.