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.
TutorielDécouvrir Bootstrap : un framework très utile et connu
J'aimerais ajouter un avis si cela dérange personne.
Ayant utilisé bootstrap plusieurs fois, je ne peux que lui dire du bien, ils l'est connu, et propose de la superbe qualité, vous pouvez y allez les yeux fermée.
[tabs]
[tab=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
▪ Dernier édit 14/06 10h35 : correction des bugs du bbcode
[/tab]
[/tabs]
@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.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
(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:
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>
ATTENTION: ce code a été fait si vous avez téléchargé bootstrap.
Si jamais vous n'avez pas téléchargé bootstrap, au lieu de mettre cette ligne dans le head :
Et là ça sera ok. Bon, la page ressemble à rien, on est d'accord. Mais, en voyant quelques classes elle servira
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. :noel6: 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>.
HTML:
<div class="container">
Marge
</div>
Des petits symboles
Vous pouvez faire des petits symboles directement à l'aide de bootstrap.
Il y en a +
La liste des symboles se
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous 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:
HTML:
<span class="CODE"></span>
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
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:
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.
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 ! :trollneige:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Voilà c'est la fin En espérant que le énormous tuto vous a plus !
Juste un truc, comment ont fait pour modifier bootstrap après ?
Je veut dire changer le backround, mettre ces images, changer la couleur, etc...
Voir, comment mettre un thème ?
Juste un truc, comment ont fait pour modifier bootstrap après ?
Je veut dire changer le backround, mettre ces images, changer la couleur, etc...
Voir, comment mettre un thème ?
Y'a pas autre chose ? Psk le css c'est vraiment horrible
J'prefère apprendre à programmer le js et le php et laisser le css de coter. Et en plus je suis très mauvais pour tout ce qui est graphiste.