Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Prenez en main Bootstrap Partie 1 : Généralités ...............................

Prenez en main Bootstrap Partie 1 : Généralités .............................................................................................................................. 3 Un framework .................................................................................................................................... 3 Avantages ........................................................................................................................................... 4 Inconvénients ..................................................................................................................................... 4 Découverte de bootstrap ..................................................................................................................... 4 Installation de bootstrap ..................................................................................................................... 5 Les CDN ............................................................................................................................................ 7 Partie 2 : ................................................................................................................................................. 7 Partie 3 : ................................................................................................................................................. 7 Les icones ......................................................................................................................................... 14 Vous créez des pages web et vous passez beaucoup (trop) de temps avec le CSS ??? Alors Bootstrap est fait pour vous, et ce cours va vous guider dans la découverte de cette puissante boîte à outils. Bootstrap est un framework qui peut rendre votre vie plus facile pour créer l'architecture d'une page web. Mais Bootstrap va bien plus loin qu'offrir du code CSS déjà bien organisé et structuré. Il offre aussi des plugins jQuery de qualité pour enrichir vos pages. Allez , on y va Partie 1 : Généralités Pour utiliser efficacement Bootstrap, vous devez déjà être convaincu de son utilité, vous devez aussi avoir l'installer. Ce chapitre est destiné à vous faire découvrir en quoi Bootstrap peut vous aider et comment vous devez le mettre en œuvre pour l'utiliser efficacement. Nous aborderons également les Medias Queries que Bootstrap utilise pour que nos pages s'adaptent automatiquement au support que nous utilisons pour les visualiser. Un framework Avant toute chose, il faut définir ce qu'est un Framework. Il s'agit d'un ensemble de composants structurés qui sert à créer les fondations et à organiser le code informatique pour faciliter le travail des programmeurs, que ce soit en termes de productivité ou de simplification de la maintenance. Il en existe beaucoup pour les applications web qui ciblent de nombreux langages : Java, Python, Ruby, PHP… Les Framework CSS sont spécialisés, comme leur nom l'indique, dans les CSS ! C'est-à-dire qu'ils nous aident à mettre en forme les pages web : organisation, aspect, animation…Ils sont devenus à la mode et il en existe un certain nombre :  Elastics  Knacss  Blueprint  960 Grid System  YUI  52Framework Bootstrap est un Framework CSS, mais pas seulement, puisqu'il embarque également des composants HTML et JavaScript. Il comporte un système de grille simple et efficace pour mettre en ordre l'aspect visuel d'une page web. Il apporte du style pour les boutons, les formulaires, la navigation…Il permet ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutées Avantages Les navigateurs sont pleins de fantaisies et ont des comportements très différents malgré leur lente convergence vers les standards. Les frameworks sont cross- browser, c'est à dire que la présentation est similaire quel que soit le navigateur utilisé et d'une parfaite compatibilité ; Les frameworks CSS font gagner du temps de développement parce qu'ils nous proposent les fondations de la présentation; Les frameworks CSS normalisent la présentation en proposant un ensemble homogène de styles ; Les frameworks CSS proposent en général une grille pour faciliter le positionnement des éléments ; Les frameworks CSS offrent souvent des éléments complémentaires : boutons esthétiques, barres de navigation, etc. ; La grande diffusion de nouveaux moyens de visualisation du web (smartphones, tablettes…) impose désormais la prise en compte de tailles d'écran très variées ; les frameworks CSS prennent généralement en compte cette contrainte. Inconvénients Comparés aux avantages, les inconvénients de Bootstrap sont minimes et sont contournables Bootstrap est une bibliothèque lourde à charger, c’est dû aux composants non utilisés dans la bibliothèque qui sont chargés au même moment que Bootstrap. (Vous pouvez remédier à ça en faisant appel à Bootstrap depuis leur serveur au lieu de la charger vous-même sur votre page web.) La majorité des sites web utilise Bootstrap lors de leur conception sans faire des réajustements, du coup certains sites se ressemblent. (Par rapport à cela, Bootstrap est d'une prise en main rapide même pour un dé- butant et est totalement configurable avec du CSS SASS (que nous verrons un peu plus loin dans le cours). Découverte de bootstrap Le projet Bootstrap a été créé au départ par Mark Otto et Jacob Thornton pour répondre à des besoins internes de développement de cette entreprise au niveau de l'uniformisation de l'aspect des pages web. Ils'agissait juste de stylisation CSS, mais le framework s'est ensuite enrichi de composants Javascript. Il a ensuite été publié en 2011 en devenant rapidement populaire parce qu'il est venu se positionner dans un espace vacant du développement. Son système de grille de 12 colonnes est devenu une référence. D'autre part sa mise en œuvre est aisée et se limite à référencer quelques librairies, comme nous allons bientôt le voir. Il a été mis à disposition du public sous licence Apache. Le framework en est actuellement à la version 5. Avec l'utilisation croissante d'appareils mobiles, le framework s'est adapté pour offrir une solution censée couvrir tous les besoins. Installation de bootstrap L'installation de Bootstrap est simple : Allez sur le site officiel de bootstrap. Vous avez à disposition trois boutons :  "Download Bootstrap" : permet de récupérer juste les fichiers nécessaires au fonctionnement de Bootstrap  "Download source" : permet de récupérer en plus tous les fichiers source,  "Download Sass" : c'est un portage de Bootstrap en Sass pour les utilisateurs de projets qui utilisent Sass (Rails, Compass...). Quand vous téléchargez la librairie avec le bouton "Download source", vous obtenez un fichier zippé contenant un répertoire bootstrap-5.0.2, qui contient lui- même un certain nombre de fichiers et de dossiers, comme le montre la figure suivante. Les fichiers utiles pour simplement utiliser Bootstrap se situent dans le dossier ‘ dist ‘ (« distribution »), ce sont les seuls fichiers que vous obtenez si vous utilisez le bouton "Download Bootstrap" : Pour que Bootstrap fonctionne il faut le déclarer dans les pages HTML, qui doivent d'ailleurs être impérativement au format HTML 5, il faut donc prévoir le bon DOCTYPE : Code html <!DOCTYPE html> … Il faut ensuite déclarer au minimum le fichier bootstrap.min.css (ou bootstrap.css) dans l'en-tête de la page web : <head> … <link href= “bootstrap/css/bootstrap.min.css” rel="stylesheet"> </head> À partir de là toutes les classes sont accessibles…Évidemment vous devez adapter le lien selon la localisation de vos fichiers. Si vous utilisez des composants JavaScript, vous devez également référencer la librairie de Bootstrap ainsi que jQuery (la librairie jQuery ne fait pas partie des fichiers téléchargés avec Bootstrap et doit être récupéré indépendamment sur http://jquery.com/) : <script src="bootstrap/js/jquery.js"> </script> <script src="bootstrap/js/bootstrap.min.js"> </script> Les CDN CDN est l'acronyme de « Content delivery network » ; c'est un réseau de serveurs qui met à disposition des librairies. Il devient ainsi inutile de prévoir ces librairies sur son propre serveur, il suffit de « pointer » vers eux. Il y a des avantages à utiliser un CDN : Libération de ressources et de la bande passante sur son propre serveur ; Parallélisation des téléchargements (un CDN est sur plusieurs serveurs) ; Accélération du chargement ; Diminution de la latence ; Actualisation automatique des librairies ; Amélioration du référencement… Évidemment si vous utilisez des CDN, l'installation en est d'autant simplifiée. Vous n'avez qu'à adapter les appels des librairies : <link href="//netdna.bootstrapcdn.com/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet"> … <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js</script> Partie 2 : Partie 3 : Bootstrap 5 mets à notre disposition des classes .h1 -.h6 qui peuvent etre utilisées pour définir des différents niveaux de titres. BOOTSTRAP 5 ET LES COULEURS Couleurs des textes Bootstrap 5 mets à notre disposition des classes contextuelles qui peuvent etre utilisées pour définir des couleurs. Les classes pour les couleurs de texte sont : .text-muted .text-primary .text-success .text-info .text-warning .text-danger .text-secondary .text-white .text-dark Exemple: Couleurs du background Les classes pour les couleurs du background sont : .bg-primary .bg-success .bg-info .bg-warning .bg-danger .bg-dark .bg-secondary BOOTSRAP 5 ET TABLEAUX Plusieurs classes permettent de gérer les tableaux en bootstrap : La classe .table ajoute un style basique aux tableaux en bootstrap La classe .table-striped ajoutes des zébrures aux tableaux Il en existe plusieurs qui sont tous bien détaillés dans la documentation BOOTSRAP 5 ET IMAGES Les classes .rounded , .rounded-circle et .img-thumbnail permettent d’obtenir respectivement les effets ci-dessus. Les icones Pour les besoins de notre projet, nous allons également ajouter le jeu d'icônes de Font Awesome en ajoutant cette ligne de code à la fin de votre <head> :  <script src="https://kit.fontawesome.com/14273d579a.js" crossorigin="anonymous"></script> Pour utiliser les icônes de Bootstrap, il suffit d’ajouter une balise <link> dans le <head> de notre page. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap- icons@1.5.0/font/bootstrap-icons.css"> Pour afficher une icône de Bootstrap par exemple, vous pouvez ajouter cette ligne de code dans la div qui contiendra vos icônes : <i class="fab fa-bootstrap"></i> Concernant les autres élements notamment les navbars , les barres de progression , les composants cards , les offcanvas , les formulaires , nous allons les expliquer tout en pratiquant . Toutefois , je vous invite à visiter le site officiel de bootstrap pour en savoir plus . uploads/s3/ prenez-en-main-bootstrap.pdf