Bienvenue dans ce nouveau tutoriel Bootstrap

Bootstrap filestype pdf 4 

Commencez à apprendre à travailler avec Bootstrap – Qu’est-ce que Bootstrap ?

Bootstrap est un cadre de conception côté utilisateur gratuit ou frontal (front end) qui a été créé pour concevoir des applications et des sites Web plus rapidement et plus facilement.

Bootstrap comprend des modèles prêts à l’emploi basés sur HTML et CSS pour travailler avec des formulaires, des boutons, des tableaux, une barre de navigation, des images, des boîtes de dialogue (Modèles), des diapositives, travailler avec du texte (Typographie) et de nombreux autres outils. Le framework Bootstrap contient de nombreux plug-ins prêts à l’emploi basés sur JavaScript pour rendre les sites Web plus dynamiques.
Le framework Bootstrap a simplement fourni la possibilité d’une conception Web réactive et flexible pour afficher des sites Web dans différents types et tailles d’écrans.

Conseils : Qu’est-ce que le Responsive Web Design ?

La conception Web réactive est une méthode de conception de sites Web dans laquelle les pages Web ajustent automatiquement et intelligemment la taille et la disposition de leurs composants en fonction des dimensions du dispositif d’affichage à l’écran, des petits téléphones mobiles aux grands moniteurs, ajustés pour avoir le meilleur mode d’affichage.

Un exemple simple de conception de site Web avec Bootstrap 4 :
Dans l’exemple de code pratique ci-dessous, nous avons conçu une page Web typique en utilisant le framework Bootstrap 4.
Cette page comporte un en-tête et trois colonnes de texte qui s’ajustent automatiquement en fonction de la taille de l’écran d’affichage du site, de la disposition et de la largeur de ses composants.

La sortie de la page sera la suivante. Pour mieux comprendre la conception Web réactive, effectuez un zoom avant et arrière ou affichez la page sur des appareils de différentes tailles :

Comparaison de Bootstrap 4 avec Bootstrap 3 / Bootstrap 4 VS Bootstrap 3

Bootstrap 4 (Bootstrap) est la nouvelle version de Bootstrap avec de nouveaux composants, une feuille de style plus rapide et une réactivité accrue et améliorée.
Bootstrap 4 prend en charge toutes les plates-formes et les dernières versions des principaux navigateurs, mais il ne prend pas en charge les navigateurs 9IE et inférieurs.

Astuce 1 :
Si vous souhaitez utiliser Bootstrap dans les navigateurs IE8 et IE9, vous devez utiliser Bootstrap version 3. La version 3 est la version la plus stable de Bootstrap et est toujours prise en charge par le système Bootstrap pour corriger les bogues dangereux et fournir une documentation de formation.

Astuce 2 – Manque de support pour certaines icônes :
Bootstrap 4 ne prend pas en charge les icônes BS3 Glyphicons. Utilisez Font Awesome et d’autres bibliothèques d’icônes prêtes dans Bootstrap 4.

Pourquoi devrions-nous utiliser ce framework ?

Les avantages d’utiliser Bootstrap sont :

Facilité d’utilisation : Tout utilisateur, même avec quelques connaissances en HTML et CSS, peut facilement commencer à utiliser Bootstrap 4.
Plus de réactivité : dans la version Bootstrap 4, le Responsive Design a été amélioré par CSS et ajusté pour tous les types de téléphones mobiles, tablettes et ordinateurs de bureau.
Solution Mobile First Design : dans la nouvelle version de Bootstrap 4, les styles de conception mobiles (appareils avec de petits écrans) sont définis comme le cœur du framework Bootstrap 4.
Compatibilité avec tous les types de navigateurs : Bootstrap 4 est entièrement compatible avec tous les principaux navigateurs, y compris Chrome, Firefox, IE10, Edge, Safari et Opera.

Où se procurer framework ?

Il existe deux manières principales d’utiliser Bootstrap 4 sur les sites Web :

Lisez les fichiers Bootstrap 4 en ligne via un distributeur Web en ligne ou un CDN.
Téléchargez les fichiers Bootstrap 4 à partir du site getbootstrap.com et ajoutez-les à l’hôte du site souhaité.

Apprendre à travailler avec les distributeurs en ligne Bootstrap ou CDN :
Si vous ne souhaitez pas télécharger les fichiers Bootstrap 4 et les placer physiquement sur l’hébergeur de votre site, vous pouvez les ajouter à la page à partir d’un fournisseur de contenu en ligne ou d’un CDN.
L’un des distributeurs en ligne de fichiers Bootstrap est MaxCDN, qui prend en charge les fichiers CSS et JavaScript nécessaires.
Pour ajouter des fichiers Bootstrap en ligne au site Web cible, via MaxCDN, vous devez placer le code suivant sur la page. Notez que Bootstrap a besoin de jQuery pour s’exécuter et leur lien doit être ajouté :

Conseils : Quel est l’avantage d’utiliser CDN Bootstrap ?

De nombreux utilisateurs, avant d’accéder à votre site, tout en consultant d’autres sites, téléchargent Bootstrap 4 à partir de MaxCDN et il se trouve en quelque sorte dans la mémoire temporaire de leur navigateur. De ce fait, lors de la consultation de votre site, les fichiers Bootstrap sont chargés depuis la mémoire cache du navigateur et la vitesse de chargement de votre page est beaucoup plus élevée.
D’autre part, la plupart des CDN, lorsqu’un utilisateur leur demande des fichiers, essaient d’envoyer les fichiers à l’utilisateur via le serveur le plus proche, ce qui contribuera à la vitesse de chargement de la page.

Astuce 2 : Pourquoi devrions-nous ajouter jQuery ou Propper avec Bootstrap ?
Bootstrap 4 utilise des bibliothèques jQuery ou Propper prêtes à l’emploi pour exécuter des plugins ou des composants JavaScript tels que des boîtes de dialogue (modèles), des messages d’info-bulle, des menus contextuels, etc., ces fichiers doivent donc également être ajoutés.
Mais si vous utilisez simplement la section CSS de Bootstrap, il n’est pas nécessaire d’ajouter des liens jQuery ou Propper.

Comment télécharger les fichiers Bootstrap 4 :

Si vous souhaitez télécharger les fichiers Bootstrap 4 et les placer sur l’hôte de votre site, vous pouvez vous rendre sur getbootstrap.com et effectuer les étapes nécessaires.

Tutoriel sur la conception de la première page Web avec Bootstrap 4 :
Étape 1 – Ajoutez la balise HTML 5 Doctype principale :
Bootstrap 4 utilise des balises HTML et des propriétés CSS, qui nécessitent l’ajout de la balise HTML5 ou doctype d’origine aux pages Web.
Ajoutez toujours la balise HTML 5 doctype au début des pages et définissez les propriétés lang (langue) et système d’encodage (jeu de caractères) appropriées comme dans le code suivant :

Étape 2 – Affichage par défaut sur mobile (Mobile First Design) :

Bootstrap 4 est conçu pour avoir le meilleur affichage principalement sur les pages mobiles, et les fichiers de feuille de style pour les petits écrans sont au cœur du framework Bootstrap. Pour garantir un affichage correct et un zoom correct et tactile, placez la balise suivante dans la section de la page :

Dans le code ci-dessus, la propriété width=device-width rend toujours la largeur de la page égale à la largeur de l’écran d’affichage, qui sera bien sûr différente selon les appareils.
De plus, la propriété initial-scale=1 détermine que le zoom initial pour l’affichage de la page est de 1 ou 100 %, ce qui signifie qu’il n’y a pas de zoom initial.

Etape 3 – Détermination de l’élément contenant le contenu principal de la page (Containers) :
Bootstrap 4 nécessite un élément parent ou un conteneur pour contenir toute l’exécution de la page. Dans le cadre de Bootstrap 4, deux types de conteneurs sont définis, que vous pouvez utiliser :

classe conteneur. : Crée un élément englobant adapté à la conception réactive dont la largeur est généralement légèrement inférieure à la largeur de l’écran entier.
classe contenant-fluide. : Crée un conteneur pleine largeur qui couvre toute la largeur de l’écran.
Dans la forme de code de l’exemple pratique ci-dessous, nous avons montré les deux types de conteneurs Bootstrap :

Enseigner deux exemples pratiques de conception de page dans Bootstrap 4 :
Exemple 1 : Dans l’exemple de code pratique ci-dessous, nous avons créé une page simple avec Bootstrap 4, qui contient l’élément avec la classe conteneur. Les usages. Comme vous pouvez le voir dans la sortie, la largeur de la page est légèrement inférieure à la largeur de l’écran et a toujours une marge fixe.

Exemple

Exemple 2 : Dans l’exemple de code ci-dessous, nous avons réécrit le code précédent et cette fois nous avons utilisé un élément conteneur avec la classe container-fluid. Comme vous pouvez le voir dans la sortie, le contenu prend toute la largeur de la page dans n’importe quelle taille et est en mode plein écran :