YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

Tutoriel Découvrir Bootstrap : un framework très utile et connu

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 664
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #1
Vous devez être inscrit pour voir les images

Découvrir Bootstrap
Un framework connu et utile

Informations concernant ce tutoriel

  • ▪ Temps de lecture : 15 minutes
    ▪ Difficulté : 2 / 5
    ▪ Tutoriel proposé par la RGPC, écrit par Maxence103 RPC
    ▪ cc @Wayz RPC , @Djamel RPC , @Rivals , n'hésitez pas à donner vos avis :D
    ▪ Dernier édit 14/06 10h35 : correction des bugs du bbcode


@Louki a déjà fait ce tutoriel sous forme de vidéo, je le reprends en écrit (avec ma façon de faire). Voir son topic.

Vous devez être inscrit pour voir les images

Un framework est une sorte de bibliothèque externe qui rajoute des classes prédéfinies pour créer un site et un design plus rapidement. Il en existe des centaines, mais inutile de toutes les citer, car une seule est très connue : bootstrap. 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 bootstrap, c'est que c'est compatible multiplateforme : le responsive design.


Vous devez être inscrit pour voir les images

Vous avez deux choix. Soit vous téléchargez bootstrap, soit (et ça c'est super), dans l'entête du site vous prenez directement les fichiers en ligne. Dans les deux cas ça reviendra au même.

(pour téléchargement) (inutile de viruscan)
Pour les personnes ne voulant pas télécharger bootstrap comme je l'ai dit vous pourrez récupérer les fichiers en ligne. C'est simple et efficace : mais en cas de défaillance du serveur de bootstrap (du site) , vous êtes dans le caca...

Si vous avez télécharger bootstrap, mettez le dans le même dossier que votre site.

Vous devez être inscrit pour voir les images

Maintenant passons à son utilisation. Pour utiliser bootstrap, il faut d'abord un code source, un code type, un fichier type. Celui ci est tout simplement:

Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !

Si jamais vous n'avez pas téléchargé bootstrap, au lieu de mettre cette ligne dans le head :

HTML:
<link href="css/bootstrap.min.css" rel="stylesheet">
Vous mettez tout ça ( fiou :trollface: ):
[/COLOR][/SIZE]
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>
Et là ça sera ok.
Bon, la page ressemble à rien, on est d'accord. Mais, en voyant quelques classes elle servira :D

Vous devez être inscrit pour voir les images
Alors sachez tout d'abord que je ne vais pas vous énoncer toutes les classes qui existent, il existe le site officiel de bootstrap très complet et très bien expliqué (avec un rendu et le code) qui explique tout.

Tout d'abord, avec un minimum de connaissances en HTML, on va toujours se positionner dans le <body></body>, et au dessus du code javascript en bas.

Comme la plus part des sites web, il y a une marge, c'est à dire, une marge. :d: Plus sérieusement, le texte va commencer à par exemple 20px d'à gauche de l'écran. Cette fameuse classe existe dans bootstrap et se forme sous forme de <div>.

Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !

Des petits symboles

Vous pouvez faire des petits symboles directement à l'aide de bootstrap.
Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !

La liste des symboles se (tout en haut). Vous voyez qu'en dessous de chaque symbole se trouve un code, et bien ce code sera très important.

Pour faire apparaître un symbole, ça se présente de cette manière:
Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !

Une "navbar"
Super pratique, on peut faire une navbar, qui sera comme ça:

Vous devez être inscrit pour voir les images

Pour la faire, ça va être ... un peu plus compliqué. D'abord, il faut la faire en dehors du container (la marge), au dessus précisément.

Puis à l'intérieur on créera une classe container-fluid pour rapprocher la marge. Bon, j'vous explique mais vous comprenez rien, alors voici le code :D

Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !

C'est maintenant à vous de pouvoir trouver les informations et les modifier. Pas de panique, rien de très compliqué.

Maintenant une "nav"

La (principale) différence entre une navbar et une nav c'est que la navbar c'est une barre horizontale ( comme ça ---------------) et une nav c'est ... vertical. Mais il en existe de toutes les formes

Une nav ressemble horizontale ressemble à ça:
Vous devez être inscrit pour voir les images


Une verticale à ça:
Vous devez être inscrit pour voir les images


Comment les faire ? Alors pour la nav horizontale (la première), le code est ceci:
Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !

La class "active" signifie que c'est le bouton qui va avoir un fond bleu.


Maintenant, pour la faire à la vertical, il vous suffit de changer la class du <ul> en "
nav nav-pills nav-stacked".

Les formulaires

Les formulaires dans bootstrap sont très interessants , car vous pouvez faire de mutltitudes de choses avec.

Par exemple:

Vous devez être inscrit pour voir les images


Pour faire le @ devant un champs ou derrière (c'est la même classe), il suffit d'utiliser la classe
input-group-addon. En contre partie, le input devra avoir la classe form-control. Dur tout ça ! :D
Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !
Vous pouvez aussi ajuster sa taille:
Vous devez être inscrit pour voir les images


En modifiant la classe du div.
Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !

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.

Vous devez être inscrit pour voir les images


Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !
[/LEFT]

Les alertes

Une fonction très utile sur bootstrap qui sont les alertes. Au fait , elles se présentent comme ceci (plusieurs couleurs)...

Vous devez être inscrit pour voir les images

Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !
Mais... maintenant, vous voulez que l'on puisse fermer l'alerte ? Bootstrap peut gérer ça en mettant une croix à droite.

Vous devez être inscrit pour voir les images

Connectez-vous ou inscrivez-vous dès maintenant. pour voir le contenu de ce spoiler !



Fin ?

Comme je vous l'ai dit, je ne vais pas tout dire au sujet de bootstrap, car en étant développeur web on a toujours un nez à fouiller partout. Je vous propose la documentation de bootstrap, 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, google chrome + traduction ! :trollface:




Voilà c'est la fin <3
En espérant que le énormous tuto vous a plus !

A++
 
Dernière édition:

EZPZ

--
Premium
Inscription
11 Décembre 2013
Messages
1 566
Réactions
530
Points
6 261
    Réponse de EZPZ Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #2
Merci pour le long tuto ;)
 
M

membre150711

Invité
    Réponse de membre150711 Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #3
Très bon tutoriel bien rédigé complet et explicite, qui reprend bien la vidéo que avait fait Louki ;)
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 664
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #4

CrasherPC

Membre
Inscription
18 Septembre 2012
Messages
439
Réactions
82
Points
7 144
    Réponse de CrasherPC Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #5
Belle mise en page, complet et utile !
Ça va en aider plus d'un ;)
 
Dernière édition:

IceModz | RMK

Membre Premium
Premium
Inscription
2 Septembre 2013
Messages
2 358
Réactions
623
Points
6 241
    Réponse de IceModz | RMK Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #7

Nikz Pronos

Spécialiste Fifa Ultimate Team
Premium
Inscription
3 Mai 2013
Messages
4 648
Réactions
1 567
Points
10 076
    Réponse de Nikz Pronos Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #8
Tuto super bien détailler, tu mérite ton "J'aime".
Félicitations.
 

Djamel SEC

Ancien staff
Ancien staff
Inscription
24 Août 2012
Messages
19 426
Réactions
9 740
Points
20 820
    Réponse de Djamel SEC Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #10

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 664
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #11
Je laisse voir @Louki vu qu'il a déjà fait un sujet dessus, pour ma part ça aurait été un oui. :)
@Louki
Dans ces cas là pourquoi pas associer les deux ? ;)

(on met la vidéo de Louki en haut) ? :)

Merci de ton avis :D
 
D

deleted34147

Invité
    Réponse de deleted34147 Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #12

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 664
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #13

K0N4R

Membre
Inscription
22 Juillet 2014
Messages
12
Réactions
2
Points
26
    Réponse de K0N4R Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #16
Rien d'exceptionnel tu retrouve exactement la même chose ici : x)
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 664
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #17
Rien d'exceptionnel tu retrouve exactement la même chose ici : x)
C'est en anglais là bas
 

K0N4R

Membre
Inscription
22 Juillet 2014
Messages
12
Réactions
2
Points
26
    Réponse de K0N4R Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #18

Grégory

Développeur
Ancien staff
Inscription
14 Novembre 2011
Messages
2 757
Réactions
2 174
Points
13 358
    Réponse de Grégory Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #19
Excusez moi : :non:
C'est un documentation, ce que nous présente Maxence103 est une sorte de tutoriel, donc pas la même chose. :)

Merci pour ce topic bien présenté :)
 

Maxence ES

Guizou
Premium
Inscription
23 Janvier 2013
Messages
4 664
Réactions
2 943
Points
10 171
    Réponse de Maxence ES Forums généraux Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #20

Mobile app for XenForo 2 by Appify
Haut