18041 sujets

Questions générales et questions de débutants

Les grilles Bootstrap

Bonjour
Je suis débutante dans bootstrap, je cherche comment adapter la largeur d'une colonne à son contenu dans bootstrap
par exemple on dit que la largeur d'une colonne comme md par exemple est de 81px donc si je veux mettre un contenu de 100px soit je prend 2 colonnes soit je doit adapter la colonne au contenu, mais a ce que 'est feu sable?
Aide-moi
Merci
Par définition, Bootstrap, comme d'autres framework sont responsive. Donc comment veux-tu prévoir ou souhaiter des largeurs fixes ?

Si c'est pour du texte et que tu penses que les longueurs de lignes sont trop importante pour certains écrans ou certaines dimensions, utilise alors les Media-Queries pour jouer avec des colonnes pour le texte. Ou sinon, il faut "jouer" un peu plus avec la mise en page.

Est-ce que tu pourrais montrer un exemple plus concret ? (via un site ou une capture d'écran)
Bonjour Smiley smile
Merci pour vos réponse, mais j'arrive pas à bien comprendre ce système de grille Smiley ohwell
voici mon capture d'écran j'espère que ça vous aide à m'orienté

http://img4.hostingpics.net/pics/811842capture.png

je veux que l'image 1 proche de l'écriture Unité de.... et que l'image 2 soit aligné sur la même ligne que le reste et qu'il aura un espace en 3 pour décaler un peu en bas et que l'image 4 prend ces vrai dimension
et aussi j'ai ajouté le code réalisé 


<body> 
<div class="container"> 

<div class="row"> 
<div class="col-md-2 "> <img src="images/2.png" alt="logo" class="img-responsive" /> </div> 
<div style="color:#CCC;" class=" col-md-offset-1 col-md-pull-1 col-md-3"> Qualité, Fiabilité, Economie </div> 
<div style="color:#CCC;" class="col-md-offset-3 col-md-3"> Langue: Français/ Anglais/ Arabe </div>    

<div class="col-md-3"> Unité de fabrication de <br /> machine agricoles et traveaux public </div>  
<div style="color:#000;" class="col-md-2"> 
<div class="row"> <div class="col-md-3"> <img src="images/tel.jpg" width="39px" /></div> <div class="col-md-9 small">Tél: 030 29 26 13<br />
Fax: 030 42 72 04</div> </div>  </div> 
  
<div style="color:#000;" class="col-md-2"> 
<div class="row"> <div class="col-md-2"> <img src="images/contact.jpg" width="36px" /></div> <div class="col-md-10 small">contact@ugtp-dz.com<br />
     info@ugtp.com</div> </div> </div> 
 
<div style="color:#000;" class="col-md-2"> 
Partagez sur: <br />  <img src="images/reseau sociau.jpg" width="36px" /> </div> 

<div style="color:#000;" class="col-md-3"> <img src="images/3.png" /> </div> 
</div>
</div>
</body>

Merci d'avance
A) La réponse à votre 1ere question est OUI
il suffit de centrer le contenu situé à l intérieur du div bootstrap !
Le centrage si je me rappel doit faire l objet d'un article sur alsacreation car dépend du contexte. Vous partez de bootstrap , le layout est la partie la plus haute , cad le conteneur le plus haut de votre page . En l utilisant vous acceptez les contraintes , vous pouvez modifier ces contraintes de façon globales (mon lien en redéfinissant quelques variables ) . C'est de votre responsabilité de faire en sorte que les éléments enfants se comporte bien par rapport aux contraintes du grid ( ici grid de bootstrap ) . Sinon n utilisez pas le grid de bootsrap.

B) pour visualisez vos colonnes
Pour visualiser votre grille utiliser se bookmarklet
1 effacer les espaces entre le t de javascript et et ( avant (function
coller cela donne Smiley decu
2 charger votre page dans un navigateur et cliquer sur le bookmark du lien
3 choisissez la version de bootstrap
4 vous pouvez maintenant visualiser le grid derriere votre Layout
""""""""
javascript : ( function()%20{%20%20%20var%20head%20=%20document.getElementsByTagName("head")[0];%20%20%20var%20bklScript%20=%20document.createElement("script");%20%20%20bklScript.type%20=%20"text/javascript";%20%20%20bklScript.src%20=%20"http://alefeuvre.github.com/foundation-grid-displayer/gd-bookmarklet.min.js";%20%20%20head.appendChild(bklScript);%20})();
""""""""""""
C) bootstrap selecteurs
vous compliquez les choses avec les offset et des pull/push . mais bon ...

NB bootstrap doit pouvoir s 'utiliser avec un grid fixed !!
le responisve bootstrap me semble être que des grille fixes qui change selon les breakpoints et pas des grilles fluides ! voir pour les demos
http://blog.teamtreehouse.com/which-page-layout
Modifié par 75lionel (09 Feb 2015 - 16:15)
le bookmarklet donne ceci . Vérifiez pour une ligne la somme des colonnes .
Pour comprendre les grilles if faut aller voir le code source css et bien comprendre css !
Une fois le concept de grille compris ; la documentation bootstrap ou tout autre système de grille est compréhensible . Faites vous a différence entre offsett et push ( endroit vide ou non ?) au niveau code css (margin) ? Chaque grille à une façon de s 'utiliser , respecter la ( <container> est le context de départ ou commence la grille .....) .

upload/48731-alsa-grill.png
Modifié par 75lionel (09 Feb 2015 - 17:10)
Bonsoir,
Merci 75lionel Smiley smile pour vos explications et vos conseil
vous m'avez donner une bonne idée de quoi faire exactement vu que je débute encore avec Bootsrap
et merci aussi à vous MagicCarpet Smiley smile
je vais me concentrer plus sur ce système Smiley rolleyes à fait de bien comprendre d'abord puis je commence à coder librement
Bon courage tous le monde et merci Smiley smile
Bonsoir tout le mode Smiley smile
SVP quelqu'un peut m'aider Smiley decu j'ai du mal à comprendre la relation entre les grilles et le responsive en Bootstrap.
comment créer des lignes et des colonnes qui vont êtres responsive quelque soit la dimension de l'écran, j'ai utilisé par exemple les classe xs, sm, md en même temps pour un col- c'est à dire : 
 <div class="col-md-6 col-sm-4 col-xs-2">

mais ca n'a pas marcher.
si quelqu'un peut m'expliquer SVP
Merci d'avance
Déjà, j'aurais envie de dire, c'est quoi qui ne marche pas ?

Ensuite, c'est pas forcement utile (mais parfois oui, tout dépends de ta mise en page) de mettre le trio md sm et xs).

De plus, le total doit faire 12, comprendre que si tu as une div sur la gauche, tu utilise md-4, la div de droite sera donc à 8.

Pour finir, travaille avec des couleurs de fond au début pour voir comment réagisse tes blocs.
Merci MagicCarpet Smiley smile
Ce qui ne va pas c'est que dés fois je suis amenée à utiliser les row pour positionner certains contenus mais je trouve des problème quand je redimentionne la fenêtre à moins de 768px même si je prévoie ça en utlilisant des col-md et des col-xs
j'espère que j'ai transmis un peu l'idée Smiley rolleyes
Merci d'avance
Bonjour tout le mode Smiley smile
SVP à quoi sert la classe suivante: 
  <div class="clearfix visible-xs-block"></div>

Merci d'avance
Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.


Section CSS dans les helper classes. Enfin, je suppose que tu parlais de cette classe vu que tu en montres deux.

Si tu ne comprends pas, il y a un excellent article sur Alsa qui parle du box sizing et autres petites choses très importantes à connaitre sur le positionnement des éléments.
Sujet clos
Aller à