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

Maxence ES

Guizou
Contributeur
Inscription
23 Janvier 2013
Messages
4 649
Réactions
2 943
Points
12 581
    Réponse de Maxence ES Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #1

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.


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 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.

Site officiel de bootstrap (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.


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

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 trouve ici (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:


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:


Une verticale à ça:


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:



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:


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.



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)...


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.


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:

Bootstrap's documentation


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

A++
 
Dernière édition:

EZPZ

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

membre150711

    Réponse de membre150711 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
Contributeur
Inscription
23 Janvier 2013
Messages
4 649
Réactions
2 943
Points
12 581
    Réponse de Maxence ES 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
83
Points
9 144
    Réponse de CrasherPC 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

Contributeur
Inscription
2 Septembre 2013
Messages
2 358
Réactions
623
Points
8 051
    Réponse de IceModz | RMK Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #7

Nikz Pronos

Spécialiste Fifa Ultimate Team
Contributeur
Inscription
3 Mai 2013
Messages
4 648
Réactions
1 567
Points
10 076
    Réponse de Nikz Pronos 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.
 

Maxence ES

Guizou
Contributeur
Inscription
23 Janvier 2013
Messages
4 649
Réactions
2 943
Points
12 581
    Réponse de Maxence ES 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

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

Maxence ES

Guizou
Contributeur
Inscription
23 Janvier 2013
Messages
4 649
Réactions
2 943
Points
12 581
    Réponse de Maxence ES 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 Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #16

Grégory

Développeur
Ancien staff RG
Inscription
14 Novembre 2011
Messages
2 760
Réactions
2 180
Points
15 608
    Réponse de Grégory Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #19

Maxence ES

Guizou
Contributeur
Inscription
23 Janvier 2013
Messages
4 649
Réactions
2 943
Points
12 581
    Réponse de Maxence ES Informatique ⌨️ Programmation Programmation web : Découvrir Bootstrap : un framework très utile et connu
  • #20

Discussions similaires


Haut Bas