Utilisation d'une grille avec Bootstrap

**abc.xyz** · 18/12/2014, 11h21

Bonjour,

je dois intégrer des maquettes photoshop

Alors voilà, la question que je me pose est la suivante: puis je utiliser la grille de Bootstrap pour me simplifier la vie pour ce site?

Et bien ma réponse est non, en effet les maquettes décrivent un site au contenu de 900 pixels de large centré sur la page (width:900 pixels et un margin: auto) et donc je me dis que là c'est déjà trés mal barré pour Bootstrap car la grille de Bootstrap découpe la largeur de la page en 12 unités de longueur et là, dans mon exemple, on parle déjà de respecter une longueur en pixels pour le corps du site centré sur la page donc l'utilisation de Bootstrap n'est pas appropriée ici. Est ce que ce raisonnement est le bon?

Mon analyse est que on peut utiliser Bootstrap en intégration quand on sait que on a un bloc à gauche de 40% de largeur et un bloc à droite de 60% de longuer par ex, et là Bootstrap prend tout son sens je pense...et non lorsqu'on a un contenu centré sur la page de 900pixels par ex.

Merci

**valaendra** · 18/12/2014, 12h59

Comme je l'avais dit dans un autre de tes posts sur le même sujet, l'unité PX ne gène pas bootstrap si elle n'est pas utilisée n'importe comment.

Si tu définis un conteneur de 900px de large, la grille de bootstrap s'adaptera à cette largeur. Il suffit ensuite, via les media queries, de redéfinir la largeur de ce conteneur afin de l'adapter aux différents formats.

Exemple simpliste :

Code html :

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

1
2
3
4
5
6
7
<body>
  <div class="container">
    <div class="row">
      <!-- contenu -->
    </div>
  </div>
</body>

Code :

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

1
2
3
4
5
6
7
8
9
.container {
  width: 900px;
  margin: 0 auto;
}
@media all and (max-width: 899px) {
  .container { 
    width: 100%; 
  }
}

**abc.xyz** · 18/12/2014, 13h40

Merci, un petit exemple est tout est plus clair.

**abc.xyz** · 20/12/2014, 11h57

Bonjour valaendra,

je te remercie de ton intervention tout est plus clair maintenant seulement tu as fait une petite étourderie, en effet pour que la taille de 900 pixels du container soit prise en compte à l'usage il ne faut pas faire:

Code :

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

1
2
3
4
.container {
  width: 900px;
  margin: 0 auto;
}

mais:

Code :

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

1
2
3
4
.container {
  max-width: 900px;
  margin: 0 auto;
}

De plus, je voudrai ton avis sur le code suivant:

si je fais exit les 900 pixels pour 80% donc je dois coder:

Code :

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

1
2
3
4
.container {
  max-width: 80%;
  margin: 0 auto;
}

je n'ai donc plus besoin de faire un code comme le suivant pour les différents supports:

Code :

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

1
2
3
4
5
6
@media all and (max-width: ...px) {
  .container { 
    max-width: ...%; 
  }
}
}

puisque le container s'adaptera automatiquement sur tous les supports à 80% de la largeur de l'écran du support.

tu es d'accord?

Merci

Invité · 21/12/2014, 03h04

Bonjour,
au lieu de disserter et d'"analyser" (

), tu peux aussi :
- étudier (les cours CSS sont là pour ça : déjà dit)
- TESTER TOI-MEME.

Code :

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

1
2
3
4
5
6
7
.container {
 
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
 
}

Et le tour est joué.

Envoyé par abc.xyz

...je dois intégrer des maquettes photoshop...

OK. Mais si tu penses encore qu'il faut reporter la maquette au pixel près, c'est que tu vis toujours au siècle dernier.

Aujourd'hui, un bon graphiste sait qu'il doit adapter son design aux supports (medias).

**abc.xyz** · 22/12/2014, 11h19

Bonjour,

merci de vos éclairages.

Utilisation d'une grille avec Bootstrap

Grille CSS (CSS Grid)

Discussions similaires

Partager

Partager