[Résolu] Bootstap 3 : responsive design

Bonjour,

J'utilise Bootstrap 3 (pour moi une délivrance ) et son system de grid intégrant le responsive design.
La stratégie d'affichage de mes éléments de formulaire est la même quelques soit le type de format : 2 colonnes pour le label et les 10 autres colonnes pour afficher le widget (imput, select, ou check-box).

<div class="col-xx-2">Mon label</div><div class="col-xx-10">Mon widget</div>

Ma question : Est-il nécessaire d'indiquer les valeurs pour tous les formats d'affichage ?
Existe-il une "feinte" pour éviter du code lourd comme suit :

<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">Mon label</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">Mon widget</div>

PS : En n'utilisant que le format "lg" (col-lg-2 et col-lg-10) le responsive design ne fonctionne pas au dessous du format lg. Il n'y a pas d'héritage sur sm, md ou xs.

Merci de vos retours d'expérience.
Modifié par ouioui2000 (06 Apr 2014 - 13:06)

Bonjour,

je n'ai pas utilisé TWBS 3 mais il me semble que c'est un framework Mobile First et si je regarde le source de less/grid(s).less, la présence de

@media (min-width: @screen-XX-min) { }

confirmerait cela (confirmation dans la doc)

La grille par défaut est celle de la plus petite résolution (xs ? À moins qu'il y en ait une sans aucun préfixe/suffixe qui l'emporte ?) et celle avec "lg" n'est appliquée que pour une largeur de viewport supérieure à "@screen-lg-min".
Essayez sans sm, md ni lg et voir la doc à partir de http://getbootstrap.com/css/#grid-example-mixed

Bonjour, si j'ai bien compris ta question, il faut que tu utilises uniquement col-md. Les autres sont optionnels. Tu peux les utiliser pour spécifier un nombre de colonnes différents en fonction de la taille de la fenêtre.

Merci beaucoup pour vos retours et vos liens. J'ai du mal avec la profusion de doc anglaise.

Si je reformule : L'héritage se fait du plus petit au plus grand format: XS , SD ->....->LG.
Un grid défini pour xs est valide pour lg, l'inverse n'est pas vrai.

C'est inverse de ce que j'ai fait .

Je vais simplement remplacer LG par XS ou bien MD (?). Je pense que cela résoudra mon problème.

@Raphi : Je vais tester aussi "MD" à la place de "XS"
Modifié par ouioui2000 (09 Apr 2014 - 14:09)

Étant donné que les colonnes passent a 100% de largeur lorsque le site est en version mobile, l'utilisation des col-xs est donc optionnelle.
col-xs est utile lorsque tu ne veux pas que tes colonnes prennent 100% de largeur.
Bootstrap fonctionne donc par défaut avec col-md.