Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Découvrir Bootstrap : un framework très utile et connu
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Maxence ES" data-source="post: 3678045" data-attributes="member: 232782"><p style="text-align: center"><img src="http://cdn.flaticon.com/png/256/29600.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"><strong><span style="color: #2C3E50">Découvrir Bootstrap</span></strong></p> <p style="text-align: center"><span style="color: #2c3e50"><strong>Un framework connu et utile</strong></span></p><p>[tabs]</p><p>[tab=Informations concernant ce tutoriel]▪ <span style="color: #2c3e50"><strong>T</strong></span>emps de lecture :<span style="color: #2c3e50"><strong> 15 minutes</strong></span></p><p>▪ <span style="color: #2c3e50"><strong>D</strong></span>ifficulté : <span style="color: #2c3e50"><strong>2</strong></span> / <span style="color: #2c3e50"><strong><span style="font-size: 15px">5</span></strong></span></p><p>▪ Tutoriel proposé par la <a href="http://reality-gaming.fr/teams/realitygamingpc.998/" target="_blank"><span style="color: #2c3e50"><strong>RGPC</strong></span></a>, écrit par <span style="color: #2c3e50"><strong>Maxence103 RPC</strong></span></p><p>▪ cc [USER=14838]@Wayz RPC[/USER] , [USER=152965]@Djamel RPC[/USER] , [USER=33070]@Rivals[/USER] , n'hésitez pas à donner vos avis <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></p><p>▪ Dernier édit 14/06 10h35 : <strong>correction des bugs du bbcode </strong></p><p>[/tab]</p><p>[/tabs]</p><p></p><p><strong>[USER=34147]@Louki[/USER]</strong> a déjà fait ce tutoriel sous forme de <strong>vidéo</strong>, je le reprends en <strong>écrit</strong> (avec ma façon de faire). <strong><a href="http://reality-gaming.fr/threads/installation-et-utilisation-de-bootstrap-sur-son-site.318355/" target="_blank">Voir son topic</a></strong>.</p><p></p><p style="text-align: center"><img src="http://cdn.flaticon.com/png/256/827.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p><p>Un <strong><span style="color: rgb(0, 89, 179)">framework</span></strong><span style="color: #000000"> est une sorte de <strong>bibliothèque externe</strong> qui rajoute des <strong>classes prédéfinies</strong> pour créer un site et un design <strong>plus rapidement</strong>. Il en existe des centaines, mais inutile de toutes les citer, car <strong>une seule</strong> est très connue : <strong>bootstrap</strong>. Toute personne développant des sites web en a déjà parlé. C'est pour ça que je vais vous le présenter. Ce qui est bien avec <strong>bootstrap</strong>, c'est que c'est compatible <strong>multiplateforme : </strong>le responsive design.</span></p><p><span style="color: #000000"></span></p><p><span style="color: #000000"></span></p><p style="text-align: center"><span style="color: #000000"><img src="http://cdn.flaticon.com/png/256/532.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="text-align: center"><span style="color: #000000"></span></p><p><span style="color: #000000">Vous avez <strong>deux choix</strong>. Soit vous téléchargez <strong>bootstrap</strong>, soit (et ça c'est super), <strong>dans l'entête du site</strong> vous prenez directement les fichiers <strong>en ligne</strong>. Dans les deux cas ça reviendra <strong>au même. </strong></span></p><p><span style="color: #000000"></span></p><p style="text-align: center"><span style="font-size: 18px"><span style="color: #000000"><a href="http://getbootstrap.com/" target="_blank">Site officiel de <strong>bootstrap</strong></a> (pour téléchargement) (inutile de viruscan)</span></span></p> <p style="text-align: center"><span style="font-size: 18px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000">Pour les personnes <strong>ne voulant pas télécharger bootstrap</strong> comme je l'ai dit vous pourrez <strong>récupérer les fichiers en ligne</strong>. C'est simple et efficace : mais en cas de défaillance du <strong>serveur de bootstrap</strong> (du site) , vous êtes dans le caca...</span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000">Si vous avez télécharger bootstrap, <strong>mettez le dans le même dossier que votre site</strong>.</span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p style="text-align: center"><span style="font-size: 15px"><span style="color: #000000"><img src="http://cdn.flaticon.com/png/256/7637.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></span></p> <p style="text-align: center"><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000">Maintenant passons à son <strong>utilisation. </strong>Pour utiliser bootstrap, il faut d'abord <strong>un code source</strong>, un code <strong>type</strong>, un <strong>fichier type</strong>. Celui ci est tout simplement:</span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p>[spoiler="code"]</p><p></p><p><span style="font-size: 15px"><span style="color: #000000">[HTML]<!DOCTYPE html></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"><html lang="en"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <head></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <meta charset="utf-8"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <meta http-equiv="X-UA-Compatible" content="IE=edge"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <meta name="viewport" content="width=device-width, initial-scale=1"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <title>Bootstrap 101 Template</title></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <!-- Bootstrap --></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <link href="css/bootstrap.min.css" rel="stylesheet"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <!--[if lt IE 9]></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <![endif]--></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> </head></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <body></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <h1>Hello, world!</h1></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <!-- Include all compiled plugins (below), or include individual files as needed --></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> <script src="js/bootstrap.min.js"></script></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"> </body></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></html>[/HTML]</span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000"><strong>ATTENTION: ce code a été fait si vous avez téléchargé bootstrap.</strong></span></span></p><p>[/spoiler]</p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000">Si jamais <strong>vous n'avez pas téléchargé bootstrap</strong>, au lieu de mettre cette ligne dans le <strong>head</strong> : </span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000">[HTML]</span></span></p><p><span style="font-size: 15px"><span style="color: #000000"><link href="css/bootstrap.min.css" rel="stylesheet"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000">[/HTML]</span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span></p><p><span style="font-size: 15px"><span style="color: #000000">Vous mettez tout ça ( fiou <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" /> ):</span></span></p><p><span style="font-size: 15px"><span style="color: #000000"></span></span>[/COLOR][/SIZE]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000">[HTML]<!-- Latest compiled and minified CSS -->[/COLOR][/SIZE][/SIZE][/COLOR]</span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000">[COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=4][COLOR=#000000]<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000"></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000"><!-- Optional theme --></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000"></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000"><!-- Latest compiled and minified JavaScript --></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000"><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000">[/HTML]</span></span></span></span></p><p></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000">Et là ça sera ok. </span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 15px"><span style="color: #000000">Bon, la page ressemble à rien, on est d'accord. Mais, en voyant quelques classes elle servira <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></span></span></span></span></p><p></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://cdn.flaticon.com/png/256/13706.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></span></span></span></p><p><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 15px">Alors sachez tout d'abord <strong>que je ne vais pas vous énoncer toutes les classes</strong> qui existent, il existe le site <strong>officiel de bootstrap</strong> très complet et très bien expliqué (avec un rendu et le code) qui explique tout. </span></span></span></p><p><span style="color: rgb(0, 0, 0)"></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 15px">Tout d'abord, avec un minimum de connaissances en HTML, <strong>on va toujours se positionner dans le </strong><body></body>, et <strong>au dessus</strong> du code javascript en bas.</span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 15px">Comme la plus part des sites web, il y a une <strong>marge</strong>, c'est à dire, <strong>une marge</strong>. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite129" alt=":d:" title="Regard de travers :d:" loading="lazy" data-shortname=":d:" /> Plus sérieusement, le texte va commencer à par exemple 20px d'à gauche de l'écran. Cette fameuse classe <strong>existe dans bootstrap</strong> et se forme sous forme de <strong><div></strong>. </span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[spoiler="Code"]</span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="container"></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Marge</span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/spoiler]</span></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></span></span></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><strong><span style="font-size: 22px"><span style="color: rgb(0, 128, 255)"><u>Des petits symboles</u></span></span></strong></span></span></p> <p style="text-align: center"></p><p></p><p style="text-align: left"><span style="font-size: 18px">Vous pouvez faire des <strong>petits symboles </strong>directement à l'aide de <strong>bootstrap</strong>.</span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[spoiler="Symboles"]</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/f80f2b9bfe2d322f52f4f408ccded07d.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Il y en a +</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/spoiler]</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">La liste des symboles se <strong><a href="http://getbootstrap.com/components/" target="_blank">trouve ici</a> (</strong>tout en haut). Vous voyez qu'en dessous de chaque symbole se trouve <strong>un code</strong>, et bien ce code sera très important.</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Pour faire apparaître un symbole, ça se présente de cette manière:</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="font-size: 18px">[spoiler="code"][/spoiler]</span>[spoiler="code"]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span class="CODE"></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></p><p>[/spoiler]</p><p></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><strong><span style="font-size: 22px"><span style="color: rgb(0, 128, 255)"><u>Une "navbar"</u></span></span></strong></span></span></p> <p style="text-align: center"></p><p><span style="font-size: 18px">Super pratique, on peut faire une <strong>navbar</strong>, qui sera comme ça:</span></p><p></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/a03ccb0b8faf932058a5d60c7f893d0d.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="font-size: 18px">Pour la faire, ça va être ... <strong>un peu plus compliqué</strong>. D'abord, <strong>il faut la faire en dehors du container</strong> (la marge), <strong>au dessus précisément</strong>.</span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Puis à l'intérieur on créera une classe <strong>container-fluid</strong> pour rapprocher la marge. Bon, j'vous explique mais vous comprenez rien, alors voici le code <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[spoiler="code"]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><nav class="navbar navbar-default" role="navigation"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="container-fluid"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <!-- Brand and toggle get grouped for better mobile display --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="navbar-header"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <span class="sr-only">Toggle navigation</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <span class="icon-bar"></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <span class="icon-bar"></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <span class="icon-bar"></span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </button></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <a class="navbar-brand" href="#">Brand</a></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <!-- Collect the nav links, forms, and other content for toggling --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <ul class="nav navbar-nav"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="active"><a href="#">Link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="dropdown"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <ul class="dropdown-menu" role="menu"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Another action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Something else here</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="divider"></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Separated link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="divider"></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">One more separated link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </ul></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </ul></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <form class="navbar-form navbar-left" role="search"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="form-group"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <input type="text" class="form-control" placeholder="Search"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <button type="submit" class="btn btn-default">Submit</button></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </form></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <ul class="nav navbar-nav navbar-right"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="dropdown"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <ul class="dropdown-menu" role="menu"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Another action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Something else here</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="divider"></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Separated link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </ul></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </ul></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /.navbar-collapse --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /.container-fluid --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></nav></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/spoiler]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">C'est maintenant à <strong>vous</strong> de pouvoir <strong>trouver les informations</strong> et les modifier. Pas de panique, rien de très compliqué.</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><strong><span style="font-size: 22px"><span style="color: rgb(0, 128, 255)"><u>Maintenant une "nav"</u></span></span></strong></span></span></p> <p style="text-align: center"></p><p></p><p style="text-align: left"><span style="font-size: 18px">La (principale) différence entre <strong>une navbar</strong> et une <strong>nav</strong> c'est que la <strong>navbar</strong> c'est une barre <strong>horizontale</strong> ( comme ça <strong>---------------</strong>) et une nav c'est ... <strong>vertical</strong>. Mais il en existe de toutes les formes</span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Une nav ressemble horizontale ressemble à ça:</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/66caa990ccd00aabc6be8a786d95dfb4.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Une verticale à ça:</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/5127f15646ae20d0931099201550671b.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Comment les faire ? Alors pour la <strong>nav horizontale</strong> (la première), le code est ceci:</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="font-size: 18px">[spoiler="code"][/spoiler]</span>[spoiler="code"]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><ul class="nav nav-pills"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><li class="active"><a href="#">Home</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><li><a href="#">Profile</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><li><a href="#">Messages</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></ul></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></p><p>[/spoiler]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><strong>La class "active" signifie que c'est le bouton qui va avoir un fond <span style="color: #0080ff">bleu.</span></strong></span></span></p><p></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Maintenant, pour la faire à la <strong>vertical</strong>, il vous suffit de changer la class du <strong><ul></strong> en <strong><em>"</em></strong></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><em><strong>nav nav-pills nav-stacked"</strong></em>.</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: #0080ff"><span style="font-size: 22px"><strong><u>Les formulaires</u></strong></span></span></span></span></p> <p style="text-align: center"></p><p></p><p style="text-align: left"><span style="font-size: 18px">Les formulaires dans bootstrap <strong>sont très interessants</strong> , car vous pouvez faire de mutltitudes de choses avec.</span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Par exemple:</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/58090ae961f16af9653455c8bb67cf19.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Pour faire le <strong>@</strong> devant un champs <strong>ou derrière</strong> (c'est la même classe), il suffit d'utiliser la <strong>classe</strong></span></span></p><p><span style="font-size: 18px"><strong><em>input-group-addon</em></strong>. En contre partie, le <strong>input</strong> devra avoir la classe <em><strong>form-control</strong></em>. Dur tout ça ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite171" alt=":D" title="Awesome face :D" loading="lazy" data-shortname=":D" /></span></p><p><span style="font-size: 18px">[spoiler="Code"][/spoiler]</span>[spoiler="Code"]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="input-group"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span class="input-group-addon">@</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><input type="text" class="form-control" placeholder="Username"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="input-group"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><input type="text" class="form-control"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span class="input-group-addon">.00</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="input-group"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span class="input-group-addon">$</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><input type="text" class="form-control"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span class="input-group-addon">.00</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></p><p>[/spoiler]</p><p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Vous pouvez aussi ajuster sa <strong>taille</strong>:</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/42315e3e705adaa1151df37bdc8e43bc.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">En modifiant la classe du <strong>div</strong>.</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="font-size: 18px">[spoiler="code"][/spoiler]</span>[spoiler="code"]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="input-group input-group-lg"> <!-- On voit 'lg' = grand --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <span class="input-group-addon">@</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <input type="text" class="form-control" placeholder="Username"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="input-group"> <!-- Taille normale --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <span class="input-group-addon">@</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <input type="text" class="form-control" placeholder="Username"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="input-group input-group-sm"> <!-- Petite taille --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <span class="input-group-addon">@</span></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <input type="text" class="form-control" placeholder="Username"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></p><p>[/spoiler]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Vous pouvez aussi mettre des listes déroulantes avant un input mais je vous avouerai que je ne comprends pas trop le code, néanmoins je vous le laisse.</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/38c97610b1d967b8aa7aca4b374ad516.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[spoiler="code"]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="row"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="col-lg-6"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="input-group"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="input-group-btn"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <ul class="dropdown-menu" role="menu"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Another action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Something else here</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="divider"></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Separated link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </ul></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /btn-group --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <input type="text" class="form-control"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /input-group --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /.col-lg-6 --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="col-lg-6"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="input-group"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <input type="text" class="form-control"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <div class="input-group-btn"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <ul class="dropdown-menu dropdown-menu-right" role="menu"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Another action</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Something else here</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li class="divider"></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> <li><a href="#">Separated link</a></li></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </ul></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /btn-group --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /input-group --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"> </div><!-- /.col-lg-6 --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div><!-- /.row --></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/spoiler]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/LEFT]</span></span></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: #0080ff"><span style="font-size: 22px"><strong><u>Les alertes</u></strong></span></span></span></span></p> <p style="text-align: center"></p><p></p><p style="text-align: left"><span style="font-size: 18px">Une fonction <strong>très utile</strong> sur <strong>bootstrap</strong> qui sont les <strong>alertes</strong>. Au fait , elles se présentent comme ceci (plusieurs couleurs)...</span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/da5fab74d39475e9af9949f38b013061.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="font-size: 18px">[spoiler="code"][/spoiler]</span>[spoiler="code"]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[html]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="alert alert-success" role="alert"> Vert</div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="alert alert-info" role="alert">bleu.</div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="alert alert-warning" role="alert">Orange</div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="alert alert-danger" role="alert">Rouge</div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/html]</span></span></p><p>[/spoiler]</p><p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">Mais... maintenant, vous voulez <strong>que l'on puisse fermer l'alerte</strong> ? Bootstrap peut gérer ça en mettant <strong>une croix à droite</strong>.</span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><img src="http://i.gyazo.com/c3fc87633afba9dfeaf6183dc6d1e547.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></span></p> <p style="text-align: left"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="font-size: 18px">[spoiler="code"][/spoiler]</span>[spoiler="code"]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[HTML]</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><div class="alert alert-warning alert-dismissible" role="alert"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><strong>Warning!</strong> Better check yourself, you're not looking too good.</span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></div></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px">[/HTML]</span></span></p><p>[/spoiler]</p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"></span></span></p><p></p><p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="color: #0080ff"><span style="font-size: 22px"><strong><u>Fin ?</u></strong></span></span></span></span></p> <p style="text-align: center"></p><p></p><p style="text-align: left"><span style="font-size: 18px">Comme je vous l'ai dit, je ne vais pas tout dire au sujet de bootstrap<strong>, car en étant développeur web on a toujours un nez à fouiller partout</strong>. Je vous propose la <strong>documentation de bootstrap</strong>, complète, précise (là où je fais mes screens depuis tout à l'heure :rofl: ) , franchement passez y. Elle est en anglais, mais en bon français, <strong>google chrome + traduction</strong> ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" /></span></p> <p style="text-align: left"></p><p></p><p style="text-align: center"><span style="font-size: 18px"><span style="font-size: 26px"><span style="color: #0080ff"><strong><a href="http://getbootstrap.com/components" target="_blank">Bootstrap's documentation</a></strong></span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 26px"><span style="color: #0080ff">Voilà c'est la fin <img src="/images/smiley-pack/coeur.gif" class="smilie" loading="lazy" alt="<3" title="♥ <3" data-shortname="<3" /></span></span></span></span></p> <p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 26px"><span style="color: #0080ff">En espérant que le énormous tuto vous a plus !</span></span></span></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(0, 0, 0)"><span style="font-size: 18px"><span style="font-size: 26px"><span style="color: #0080ff">A++</span></span></span></span></p> <p style="text-align: center"></p></blockquote><p></p>
[QUOTE="Maxence ES, post: 3678045, member: 232782"] [CENTER][IMG]http://cdn.flaticon.com/png/256/29600.png[/IMG] [B][COLOR=#2C3E50]Découvrir Bootstrap[/COLOR][/B] [COLOR=#2c3e50][B]Un framework connu et utile[/B][/COLOR][/CENTER] [tabs] [tab=Informations concernant ce tutoriel]▪ [COLOR=#2c3e50][B]T[/B][/COLOR]emps de lecture :[COLOR=#2c3e50][B] 15 minutes[/B][/COLOR] ▪ [COLOR=#2c3e50][B]D[/B][/COLOR]ifficulté : [COLOR=#2c3e50][B]2[/B][/COLOR] / [COLOR=#2c3e50][B][SIZE=4]5[/SIZE][/B][/COLOR] ▪ Tutoriel proposé par la [URL='http://reality-gaming.fr/teams/realitygamingpc.998/'][COLOR=#2c3e50][B]RGPC[/B][/COLOR][/URL], écrit par [COLOR=#2c3e50][B]Maxence103 RPC[/B][/COLOR] ▪ cc [USER=14838]@Wayz RPC[/USER] , [USER=152965]@Djamel RPC[/USER] , [USER=33070]@Rivals[/USER] , n'hésitez pas à donner vos avis :D ▪ Dernier édit 14/06 10h35 : [B]correction des bugs du bbcode [/B] [/tab] [/tabs] [B][USER=34147]@Louki[/USER][/B] a déjà fait ce tutoriel sous forme de [B]vidéo[/B], je le reprends en [B]écrit[/B] (avec ma façon de faire). [B][URL='http://reality-gaming.fr/threads/installation-et-utilisation-de-bootstrap-sur-son-site.318355/']Voir son topic[/URL][/B]. [CENTER][IMG]http://cdn.flaticon.com/png/256/827.png[/IMG] [/CENTER] Un [B][COLOR=rgb(0, 89, 179)]framework[/COLOR][/B][COLOR=#000000] est une sorte de [B]bibliothèque externe[/B] qui rajoute des [B]classes prédéfinies[/B] pour créer un site et un design [B]plus rapidement[/B]. Il en existe des centaines, mais inutile de toutes les citer, car [B]une seule[/B] est très connue : [B]bootstrap[/B]. Toute personne développant des sites web en a déjà parlé. C'est pour ça que je vais vous le présenter. Ce qui est bien avec [B]bootstrap[/B], c'est que c'est compatible [B]multiplateforme : [/B]le responsive design. [/COLOR] [CENTER][COLOR=#000000][IMG]http://cdn.flaticon.com/png/256/532.png[/IMG] [/COLOR][/CENTER] [COLOR=#000000]Vous avez [B]deux choix[/B]. Soit vous téléchargez [B]bootstrap[/B], soit (et ça c'est super), [B]dans l'entête du site[/B] vous prenez directement les fichiers [B]en ligne[/B]. Dans les deux cas ça reviendra [B]au même. [/B] [/COLOR] [CENTER][SIZE=5][COLOR=#000000][URL='http://getbootstrap.com/']Site officiel de [B]bootstrap[/B][/URL] (pour téléchargement) (inutile de viruscan) [/COLOR][/SIZE][/CENTER] [SIZE=4][COLOR=#000000]Pour les personnes [B]ne voulant pas télécharger bootstrap[/B] comme je l'ai dit vous pourrez [B]récupérer les fichiers en ligne[/B]. C'est simple et efficace : mais en cas de défaillance du [B]serveur de bootstrap[/B] (du site) , vous êtes dans le caca... Si vous avez télécharger bootstrap, [B]mettez le dans le même dossier que votre site[/B]. [/COLOR][/SIZE] [CENTER][SIZE=4][COLOR=#000000][IMG]http://cdn.flaticon.com/png/256/7637.png[/IMG] [/COLOR][/SIZE][/CENTER] [SIZE=4][COLOR=#000000]Maintenant passons à son [B]utilisation. [/B]Pour utiliser bootstrap, il faut d'abord [B]un code source[/B], un code [B]type[/B], un [B]fichier type[/B]. Celui ci est tout simplement: [/COLOR][/SIZE] [spoiler="code"] [SIZE=4][COLOR=#000000][HTML]<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>[/HTML] [B]ATTENTION: ce code a été fait si vous avez téléchargé bootstrap.[/B][/COLOR][/SIZE] [/spoiler] [SIZE=4][COLOR=#000000] Si jamais [B]vous n'avez pas téléchargé bootstrap[/B], au lieu de mettre cette ligne dans le [B]head[/B] : [HTML] <link href="css/bootstrap.min.css" rel="stylesheet"> [/HTML] Vous mettez tout ça ( fiou :troll: ): [/COLOR][/size][COLOR=#000000][/color][/COLOR][/SIZE] [COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=4][COLOR=#000000][HTML]<!-- Latest compiled and minified CSS -->[/COLOR][/SIZE][/SIZE][/COLOR] [COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=4][COLOR=#000000]<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> [/HTML][/COLOR][/SIZE][/SIZE][/COLOR] [COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=4][COLOR=#000000]Et là ça sera ok. [/COLOR][/SIZE][/SIZE][/COLOR] [COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=4][COLOR=#000000]Bon, la page ressemble à rien, on est d'accord. Mais, en voyant quelques classes elle servira :D[/COLOR][/SIZE][/SIZE][/COLOR] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][COLOR=rgb(0, 0, 0)][SIZE=5][IMG]http://cdn.flaticon.com/png/256/13706.png[/IMG] [/SIZE][/COLOR][/SIZE][/COLOR][/CENTER] [SIZE=5][COLOR=rgb(0, 0, 0)][SIZE=4]Alors sachez tout d'abord [B]que je ne vais pas vous énoncer toutes les classes[/B] qui existent, il existe le site [B]officiel de bootstrap[/B] très complet et très bien expliqué (avec un rendu et le code) qui explique tout. [/SIZE][/COLOR][/SIZE] [COLOR=rgb(0, 0, 0)] [SIZE=5][COLOR=rgb(0, 0, 0)][SIZE=4]Tout d'abord, avec un minimum de connaissances en HTML, [B]on va toujours se positionner dans le [/B]<body></body>, et [B]au dessus[/B] du code javascript en bas.[/SIZE][/COLOR][/SIZE] [SIZE=5][COLOR=rgb(0, 0, 0)][SIZE=4]Comme la plus part des sites web, il y a une [B]marge[/B], c'est à dire, [B]une marge[/B]. (d) Plus sérieusement, le texte va commencer à par exemple 20px d'à gauche de l'écran. Cette fameuse classe [B]existe dans bootstrap[/B] et se forme sous forme de [B]<div>[/B]. [/SIZE][/COLOR][/SIZE] [SIZE=5][COLOR=rgb(0, 0, 0)][SIZE=5] [spoiler="Code"] [HTML] <div class="container"> Marge </div> [/HTML] [/spoiler] [/SIZE][/COLOR][/SIZE][/COLOR] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][B][SIZE=6][COLOR=rgb(0, 128, 255)][U]Des petits symboles[/U][/COLOR][/SIZE][/B][/SIZE][/COLOR] [/CENTER] [LEFT][SIZE=5]Vous pouvez faire des [B]petits symboles [/B]directement à l'aide de [B]bootstrap[/B].[/SIZE] [COLOR=rgb(0, 0, 0)][SIZE=5][spoiler="Symboles"] [IMG]http://i.gyazo.com/f80f2b9bfe2d322f52f4f408ccded07d.png[/IMG] Il y en a + [/spoiler] La liste des symboles se [B][URL='http://getbootstrap.com/components/']trouve ici[/URL] ([/B]tout en haut). Vous voyez qu'en dessous de chaque symbole se trouve [B]un code[/B], et bien ce code sera très important. Pour faire apparaître un symbole, ça se présente de cette manière: [/SIZE][/COLOR][/LEFT] [SIZE=5][spoiler="code"][/spoiler][/SIZE][spoiler="code"] [COLOR=rgb(0, 0, 0)][SIZE=5][HTML] <span class="CODE"></span> [/HTML][/SIZE][/COLOR] [/spoiler] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][B][SIZE=6][COLOR=rgb(0, 128, 255)][U]Une "navbar"[/U][/COLOR][/SIZE][/B][/SIZE][/COLOR] [/CENTER] [SIZE=5]Super pratique, on peut faire une [B]navbar[/B], qui sera comme ça:[/SIZE] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][IMG]http://i.gyazo.com/a03ccb0b8faf932058a5d60c7f893d0d.png[/IMG] [/SIZE][/COLOR][/CENTER] [SIZE=5]Pour la faire, ça va être ... [B]un peu plus compliqué[/B]. D'abord, [B]il faut la faire en dehors du container[/B] (la marge), [B]au dessus précisément[/B].[/SIZE] [COLOR=rgb(0, 0, 0)][SIZE=5] Puis à l'intérieur on créera une classe [B]container-fluid[/B] pour rapprocher la marge. Bon, j'vous explique mais vous comprenez rien, alors voici le code :D [spoiler="code"] [HTML] <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> [/HTML] [/spoiler] C'est maintenant à [B]vous[/B] de pouvoir [B]trouver les informations[/B] et les modifier. Pas de panique, rien de très compliqué. [/SIZE][/COLOR] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][B][SIZE=6][COLOR=rgb(0, 128, 255)][U]Maintenant une "nav"[/U][/COLOR][/SIZE][/B][/SIZE][/COLOR] [/CENTER] [LEFT][SIZE=5]La (principale) différence entre [B]une navbar[/B] et une [B]nav[/B] c'est que la [B]navbar[/B] c'est une barre [B]horizontale[/B] ( comme ça [B]---------------[/B]) et une nav c'est ... [B]vertical[/B]. Mais il en existe de toutes les formes[/SIZE] [COLOR=rgb(0, 0, 0)][SIZE=5] Une nav ressemble horizontale ressemble à ça: [IMG]http://i.gyazo.com/66caa990ccd00aabc6be8a786d95dfb4.png[/IMG] Une verticale à ça: [IMG]http://i.gyazo.com/5127f15646ae20d0931099201550671b.png[/IMG] Comment les faire ? Alors pour la [B]nav horizontale[/B] (la première), le code est ceci: [/SIZE][/COLOR][/LEFT] [SIZE=5][spoiler="code"][/spoiler][/SIZE][spoiler="code"] [COLOR=rgb(0, 0, 0)][SIZE=5][HTML] <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> [/HTML][/SIZE][/COLOR] [/spoiler] [COLOR=rgb(0, 0, 0)][SIZE=5] [B]La class "active" signifie que c'est le bouton qui va avoir un fond [COLOR=#0080ff]bleu.[/COLOR][/B][/SIZE][/COLOR] [COLOR=rgb(0, 0, 0)][SIZE=5]Maintenant, pour la faire à la [B]vertical[/B], il vous suffit de changer la class du [B]<ul>[/B] en [B][I]"[/I][/B] [I][B]nav nav-pills nav-stacked"[/B][/I]. [/SIZE][/COLOR] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][COLOR=#0080ff][SIZE=6][B][U]Les formulaires[/U][/B][/SIZE][/COLOR][/SIZE][/COLOR] [/CENTER] [LEFT][SIZE=5]Les formulaires dans bootstrap [B]sont très interessants[/B] , car vous pouvez faire de mutltitudes de choses avec.[/SIZE] [COLOR=rgb(0, 0, 0)][SIZE=5] Par exemple: [IMG]http://i.gyazo.com/58090ae961f16af9653455c8bb67cf19.png[/IMG] Pour faire le [B]@[/B] devant un champs [B]ou derrière[/B] (c'est la même classe), il suffit d'utiliser la [B]classe[/B][/SIZE][/COLOR][/LEFT] [SIZE=5][B][I]input-group-addon[/I][/B]. En contre partie, le [B]input[/B] devra avoir la classe [I][B]form-control[/B][/I]. Dur tout ça ! :D [spoiler="Code"][/spoiler][/SIZE][spoiler="Code"] [COLOR=rgb(0, 0, 0)][SIZE=5][HTML] <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> [/HTML][/SIZE][/COLOR] [/spoiler] [LEFT][COLOR=rgb(0, 0, 0)][SIZE=5]Vous pouvez aussi ajuster sa [B]taille[/B]: [IMG]http://i.gyazo.com/42315e3e705adaa1151df37bdc8e43bc.png[/IMG] En modifiant la classe du [B]div[/B]. [/SIZE][/COLOR][/LEFT] [SIZE=5][spoiler="code"][/spoiler][/SIZE][spoiler="code"] [COLOR=rgb(0, 0, 0)][SIZE=5][HTML] <div class="input-group input-group-lg"> <!-- On voit 'lg' = grand --> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <!-- Taille normale --> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group input-group-sm"> <!-- Petite taille --> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username"> </div> [/HTML][/SIZE][/COLOR] [/spoiler] [COLOR=rgb(0, 0, 0)][SIZE=5] Vous pouvez aussi mettre des listes déroulantes avant un input mais je vous avouerai que je ne comprends pas trop le code, néanmoins je vous le laisse. [IMG]http://i.gyazo.com/38c97610b1d967b8aa7aca4b374ad516.png[/IMG] [spoiler="code"] [HTML] <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control"> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> [/HTML] [/spoiler] [/LEFT][/SIZE][/COLOR] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][COLOR=#0080ff][SIZE=6][B][U]Les alertes[/U][/B][/SIZE][/COLOR][/SIZE][/COLOR] [/CENTER] [LEFT][SIZE=5]Une fonction [B]très utile[/B] sur [B]bootstrap[/B] qui sont les [B]alertes[/B]. Au fait , elles se présentent comme ceci (plusieurs couleurs)...[/SIZE] [COLOR=rgb(0, 0, 0)][SIZE=5] [IMG]http://i.gyazo.com/da5fab74d39475e9af9949f38b013061.png[/IMG] [/SIZE][/COLOR][/LEFT] [SIZE=5][spoiler="code"][/spoiler][/SIZE][spoiler="code"] [COLOR=rgb(0, 0, 0)][SIZE=5][html] <div class="alert alert-success" role="alert"> Vert</div> <div class="alert alert-info" role="alert">bleu.</div> <div class="alert alert-warning" role="alert">Orange</div> <div class="alert alert-danger" role="alert">Rouge</div> [/html][/SIZE][/COLOR] [/spoiler] [LEFT][COLOR=rgb(0, 0, 0)][SIZE=5]Mais... maintenant, vous voulez [B]que l'on puisse fermer l'alerte[/B] ? Bootstrap peut gérer ça en mettant [B]une croix à droite[/B]. [IMG]http://i.gyazo.com/c3fc87633afba9dfeaf6183dc6d1e547.png[/IMG] [/SIZE][/COLOR][/LEFT] [SIZE=5][spoiler="code"][/spoiler][/SIZE][spoiler="code"] [COLOR=rgb(0, 0, 0)][SIZE=5][HTML] <div class="alert alert-warning alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> [/HTML][/SIZE][/COLOR] [/spoiler] [COLOR=rgb(0, 0, 0)][SIZE=5] [/SIZE][/COLOR] [CENTER][COLOR=rgb(0, 0, 0)][SIZE=5][COLOR=#0080ff][SIZE=6][B][U]Fin ?[/U][/B][/SIZE][/COLOR][/SIZE][/COLOR] [/CENTER] [LEFT][SIZE=5]Comme je vous l'ai dit, je ne vais pas tout dire au sujet de bootstrap[B], car en étant développeur web on a toujours un nez à fouiller partout[/B]. Je vous propose la [B]documentation de bootstrap[/B], complète, précise (là où je fais mes screens depuis tout à l'heure :rofl: ) , franchement passez y. Elle est en anglais, mais en bon français, [B]google chrome + traduction[/B] ! :troll:[/SIZE] [/LEFT] [CENTER][SIZE=5][SIZE=7][COLOR=#0080ff][B][URL='http://getbootstrap.com/components']Bootstrap's documentation[/URL][/B][/COLOR][/SIZE][/SIZE] [COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=7][COLOR=#0080ff]Voilà c'est la fin <3[/COLOR][/SIZE][/SIZE][/COLOR] [COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=7][COLOR=#0080ff]En espérant que le énormous tuto vous a plus ![/COLOR][/SIZE][/SIZE][/COLOR] [COLOR=rgb(0, 0, 0)][SIZE=5][SIZE=7][COLOR=#0080ff]A++[/COLOR][/SIZE][/SIZE][/COLOR] [/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Découvrir Bootstrap : un framework très utile et connu
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut