Discussion :

[oceane751]

Bonjour à tous,

Comment définir le nombre de grilles sur un site?
Mon site fait 1000px de longueur et deux div l'une à côté de l'autre de 600px et l'autre de 400px...
Je sais qu'avec bootstrap il y a 12 colonnes, mais comment les répartir en fonction de la taille des div?

J'ai regardé plusieurs tuto mais c'est mal expliqué...


Merci beaucoup pour vos réponses

[firerock]

Hello,

Avec Bootstrap tu n'es pas censé définir la taille des blocs principaux de ton site en pixels.
C'est mieux de voir les choses en proportion.
Par exemple dans ton cas si tu veux un site de 1000 pixels de large environ, avec deux blocs de 600 et 400 pixels dedans, tu fait deux colonnes de 7 et 5 a l'intérieur de ta précédente colonne.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-10 col-lg-offset-1"><!-- Ta colonne de 1000, approximatif --> 
        <div class="row">
            <div class="col-lg-7"> </div><!-- Ta colonne de 600, approximatif --> 
            <div class="col-lg-5"> </div><!-- Ta colonne de 400, approximatif --> 
        </div>
    </div>
  </div>
</div>

Un petit exemple de code très basique, au fait tu es sur Bootstrap 3?

[oceane751]

oui boostrap 3
merci pour ce petit exemple

[oceane751]

comment tu définis la valeur pour col-xs col-sm et col-md? en testant?
et comment tu as trouver 7 et 5 ?

Merci

[firerock]

Pour les autres, tout dépend de l'interface que tu veux lorsque la résolution baisse mais voila un exemple typique.
Sinon en général je fonctionne un peu au feeling, je réfléchis un peu au proportion que mon bloc doit faire, j'entre une valeur et je regarde ce que ça donne.

Pour le 7 et le 5, c'est de la proportion, pour la colonne de 600px, ca fait 60% de 1000px, ensuite sur bootstrap tu as 12 colonnes donc 12*60/100 et tu te rapproche de 7, ensuite même principe pour les 400px même si tu peux déduire qu'il te faut une col de 5 pour faire 12.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1"><!-- Ta colonne de 1000, approximatif, sur mobile (xs) et tablette (sm) selon la quantité de contenu que tu veux tu peux mettre le offset a 0 et mettre 12 colonne  --> 
        <div class="row"><!-- Tes blocs gardent leur proportions en lg et md et viennent l'un au dessus de l'autre en sm et xs -->
            <div class="col-lg-7 col-lg-offset-0 col-md-7 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 "> </div><!-- Ta colonne de 600, approximatif.  --> 
            <div class="col-lg-5 col-lg-offset-0 col-md-5 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 "> </div><!-- Ta colonne de 400, approximatif. --> 
        </div>
    </div>
  </div>
</div>

Hésite pas si j'étais pas clair.

[oceane751]

"Pour le 7 et le 5, c'est de la proportion, pour la colonne de 600px, ca fait 60% de 1000px, ensuite sur bootstrap tu as 12 colonnes donc 12*60/100 et tu te rapproche de 7, ensuite même principe pour les 400px même si tu peux déduire qu'il te faut une col de 5 pour faire 12."
ah ouais d'accord!

donc pour le reste c'est au feeling
as tu des sites pour tester le responsive design?

Merci