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

[firerock]

Quand je dis que c'est du feeling, en général j'ai un design sur photoshop ou illustrator, voir même juste un screen selon l'ampleur de ton projet et je me base la dessus, tel élément prend a peu près un tiers de cette zone alors j'essaye en mettant 4 par exemple, ensuite il faut voir.

Sinon pour les tests il y a http://www.browserstack.com/ mais a pars l'essai gratuit ensuite c'est payant, il me semble que c'est pas donné alors a toi de voir si c'est un bon investissement mais sinon les navigateurs se sont mis a la page comme chrome et firefox.
Moi je suis sur chrome et en faisant f12, tu arrives en mode dev et là en haut a gauche de ta fenêtre de debug tu as un logo qui représente un mobile, tu cliques et ça resize ta fenêtre, tu peux choisir pas mal de périphérique existant et même si tu veux une résolution en particulier, tu peux la saisir.
Je te conseille quand même si tu peux, je sais que c'est pas toujours possible, d'essayer sur le maximum de périphériques physique, je test régulièrement mon code sur mon téléphone et ma tablette.

[oceane751]

ok je vais voir sous chrome
par contre je connais le site que tu as cité pour le responsive
j'ai mis pour les 2 div col-xs-12 (donc pour les smartphones) et les deux div ne font pas la taille entière de l'écran soit les 12 colonnes

donc théoriquement la div 1 devrait être au dessus de la div 2 et sur 12 colonnes ce qui n'est pas la cas
La div 2 ne fait pas toute la longueur...

[firerock]

Alors si je ne me trompe pas, tu as du laisser le div qui englobe les deux autres a col-xs-10 avec un offset de 1? Si c'est le cas tes div prennent toute la largeur du div supérieur mais comme celui ci a une marge de 1 col de chaque coté ça ne prend pas tout l'écran.

[oceane751]

en fait j'ai ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html><html lang="fr"> 
<head>
<meta charset="UTF-8" />
<style>
 
 
body {
 
    width:1000px;
    margin-left:auto;
    margin-right:auto;
 
 
}
 
 
 
 
#un {
    width:600px;    /* 7 colonnes */
    height:100px;
    float:left;
    background-color:#009;
}
 
 
#deux {
    width:400px;  /* 5 colonnes */
    height:100px;
    float:left;
    background-color:#F60;
}
 
 
</style>
<link href="css/bootstrap.css" rel="stylesheet"> 
 
<title>TEST BOOSTRAP</title>
<!--[if IE]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->
</head>
<body>
 
 
<div class="container">
    <div class="row">
        <div id="un" class=" col-lg-7 col-md-7 col-ms-7 col-xs-12">TEST</div>
        <div id="deux" class="col-lg-5 col-md-5 col-ms-5 col-xs-12">JE NE SAIS PAS</div>
   </div>
</div>
 
 
 
 
 
 
 
 
<script src="js/jquery-1.11.2.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
</body>
</html>

le 1000px est dans le body, c'est pas bon?

[firerock]

En fait tu ne peux pas mettre de taille en pixels sur un div géré par Bootstrap. Tu ne peux pas être précise au pixels près comme on le fait sur un site non responsive, tu dois juste prendre les proportions de ce que tu veux faire.
Donc pas de taille sur le body ni sur les deux autres div.
Si jamais je te corrige ton code demain là je suis depuis mon téléphone.

[oceane751]

Oui c'est ce que j'ai pu comprendre en regardant sur internet
donc j'ai enlevé les width

[oceane751]

j'ai récupéré ça sur internet

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="container"><div class="row" style="border:1px solid #ddd;">
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-7 " 
style="background-color:orange;height:200px;">Texte
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 " 
style="background-color:green;height:200px;">Menu
</div>
</div>
</div>

qui fonctionne bien quand je réduis ma page chrome
mais avec l'extension de chrome pour tester sur les mobiles c'est un peu la cata!
ça s'adapte mal :/
ps : test aussi avec mon galaxy s3 : TEXTE et à côté de MENU
MENU n'est pas en dessous...

[oceane751]

Bonjour,

Bon il y a quelque temps j'avais fait du RWD sans boostrap
Et tout à l'heure je me suis dit "mais c'est bizarre il me manque pas un meta?"

Alors je regarde sur ma fiche que j'ai créé sur boostrap et effectivement il me manquait

Code html :

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

<meta name="viewport" content="width=device-width, initial-scale=1">

Et je me suis dit "p***** pourquoi j'y ai pas pensé avant?

Et donc si j'ai bien compris pour les col-sm, et col-md faut tester les valeurs et réfléchir un peu c'est bien ça?

[firerock]

Hello,

Je pense que tu devrais revoir toute la théorie de base sans te lancer à corps perdu dans bootstrap.
Le tuto bootstrap est très bien fait.
Revoit les grandes lignes et après tu peux adapter leur exercices a ce que tu as besoin de faire.

[oceane751]

oui j'y suis allé mais comme j'ai pas bien compris certaines choses, c'est pour ça que je suis venu ici