Manuel mastering bootstrap 4 PDF


Télécharger Manuel mastering bootstrap 4 PDF

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Manuel mastering bootstrap 4 PDF

Ce que Bootstrap 4 Alpha 4 a à offrir

Beaucoup de choses ont changé depuis la première publication de Bootstrap sur Twitter le 19 août 2011. Essentiellement, Bootstrap 1 était un ensemble de règles CSS offrant aux développeurs la possibilité d’organiser leurs sites Web, de créer des formulaires, des boutons et d’aider à l’apparence générale et à la navigation du site. En ce qui concerne ces fonctionnalités essentielles, Bootstrap 4 Alpha 4 est toujours très similaire à ses prédécesseurs. En d'autres termes, la structure continue de permettre aux développeurs de créer des présentations et d'aider à développer une apparence cohérente en fournissant des styles pour les boutons, les formulaires et d'autres éléments de l'interface utilisateur. La façon dont cela aide les développeurs à atteindre et à utiliser ces fonctionnalités a toutefois complètement changé. Bootstrap 4 est une réécriture complète de l’ensemble du projet et, en tant que tel, est livré avec de nombreuses différences fondamentales par rapport à ses prédécesseurs. Outre les principales fonctionnalités de Bootstrap, nous aborderons les différences les plus frappantes entre Bootstrap 3 et Bootstrap 4 dans les sous-sections qui suivent.

Mise en page

La fonctionnalité la plus importante et la plus utilisée est probablement la capacité de Bootstrap à organiser et à organiser votre page. Bootstrap offre plus précisément les avantages suivants:

  • Conteneurs réactifs
  • Points d'arrêt réactifs pour ajuster la mise en page en fonction de la taille de l'écran
  • Une disposition en grille de 12 colonnes pour organiser de manière flexible divers éléments sur votre page
  • Les objets multimédias qui agissent comme des blocs de construction et vous permettent de construire vos propres composants structurels
  • Des classes d’utilitaires vous permettant de manipuler des éléments de manière réactive. Par exemple, vous pouvez utiliser les classes de l’utilitaire de présentation pour masquer des éléments, en fonction de la taille de l’écran.
  • Nous aborderons chacune de ces caractéristiques en détail au chapitre 2, Rédaction d’une déclaration de style et au chapitre 3, Création de la mise en page.

Style de contenu

Tout comme son prédécesseur, Bootstrap 4 remplace les styles de navigateur par défaut. Cela signifie que de nombreux éléments, tels que les listes ou les en-têtes, sont remplis et espacés différemment. La majorité des styles remplacés n’affectent que l’espacement et le positionnement; Cependant, la bordure de certains éléments peut également être supprimée. La raison derrière cela est simple: fournir aux utilisateurs une table rase sur laquelle ils peuvent construire leur site.

Sur la base de cette table rase, Bootstrap 4 fournit des styles pour presque tous les aspects de votre page Web, tels que des boutons (Figure 1.2), des champs de saisie, des en-têtes, des paragraphes, des textes spéciaux en ligne tels que la saisie au clavier (Figure 1.3), des figures, des tableaux, etc. et contrôles de navigation. En dehors de cela,

Bootstrap propose des styles d'état pour tous les contrôles de saisie, par exemple des styles pour les boutons désactivés ou les boutons basculés. Regardez la capture d'écran suivante:

Figure 1.2: Les six styles de bouton fournis avec Bootstrap 4 sont btn-primary, btn-secondary, btn-success, btn-danger, btn-link, btn-info et btn-warning

Regardez la capture d'écran suivante:

Figure 1.3: Styles de contenu de Bootstrap. Dans l'exemple précédent, nous voyons un style en ligne pour indiquer l'entrée au clavier

Composants

Outre la présentation et le style du contenu, Bootstrap propose une grande variété de composants réutilisables qui vous permettent de créer rapidement les fonctionnalités les plus fondamentales de votre site Web.

Les composants de l'interface utilisateur de Bootstrap englobent tous les blocs de construction fondamentaux qu'une boîte à outils de développement Web devrait offrir: boîtes de dialogue modales, barres de progression, barres de navigation, info-bulles, popovers, un carrousel, alertes, menus déroulants, groupes de saisie, onglets, pagination , et des composants pour souligner certains contenus.

Jetons un coup d'œil à la capture d'écran suivante de la boîte de dialogue modale:

Figure 1.4: Différents composants de Bootstrap 4 en action. Dans la capture d'écran précédente, nous voyons un exemple de boîte de dialogue modale, contenant une alerte info, un exemple de texte et une barre de progression animée.

Support mobile

Semblable à son prédécesseur, Bootstrap 4 vous permet de créer des sites Web adaptés aux téléphones mobiles sans trop de travail de développement supplémentaire. Par défaut, Bootstrap est conçu pour fonctionner avec toutes les résolutions et tailles d'écran, du mobile à la tablette en passant par le bureau. En fait, la philosophie de conception de Bootfrap pour mobilefirst implique que ses composants doivent s'afficher et fonctionner correctement à la plus petite taille d'écran possible. Le raisonnement derrière cela est simple. Pensez à développer un site Web sans prendre en compte les petits écrans mobiles. Dans ce cas, il est probable que votre site Web soit rempli de boutons, d’étiquettes et de tableaux. Vous ne découvrirez probablement les problèmes d'utilisation que lorsqu'un utilisateur tente de visiter votre site Web à l'aide d'un appareil mobile uniquement pour trouver une petite page Web encombrée de boutons et de formulaires. À ce stade, vous devrez retravailler l’ensemble de l’interface utilisateur pour lui permettre de faire un rendu sur des écrans plus petits. C'est précisément pour cette raison que Bootstrap préconise une approche ascendante, obligeant les développeurs à obtenir un rendu correct de l'interface utilisateur sur la plus petite taille d'écran possible, avant de se développer vers le haut.



Classes utilitaires

Outre les composants prêts à l'emploi, Bootstrap propose un grand choix de classes d'utilitaires qui encapsulent les règles de style les plus courantes. Par exemple, des règles pour aligner du texte, masquer un élément ou fournir des couleurs contextuelles pour le texte d'avertissement.

Compatibilité multi-navigateur

Bootstrap 4 prend en charge la grande majorité des navigateurs modernes, y compris Chrome, Firefox, Opera, Safari, Internet Explorer (versions 9 et supérieures; Internet Explorer 8 et les versions antérieures ne sont pas prises en charge) et Microsoft Edge.

Sass au lieu de Less

Less et Sass (feuilles de style syntaxiquement impressionnantes) sont des langages d'extension CSS. Autrement dit, ce sont des langages qui étendent le vocabulaire CSS dans le but de faciliter le développement de feuilles de style nombreuses, volumineuses et complexes. Bien que Less et Sass soient des langages fondamentalement différents, la manière générale d'étendre le CSS est la même, les deux s'appuyant sur un pré-processeur. Au fur et à mesure que vous générez votre construction, le préprocesseur est exécuté. Il analyse le script Less / Sass et transforme vos instructions Less ou Sass en fichiers CSS simples.

Less est la version officielle de Bootstrap 3, tandis que Bootstrap 4 a été développé à partir de zéro et est entièrement écrit en Sass. Less et Sass sont tous deux compilés dans CSS pour produire un seul fichier, bootstrap.css. C’est ce fichier CSS que nous allons principalement référencer tout au long de ce livre (à l’exception du Chapitre 3, Construire la mise en page). Par conséquent, vous ne serez pas obligé de connaître Sass pour pouvoir suivre ce livre. Cependant, nous vous recommandons de suivre un cours d'introduction à Sass de 20 minutes si vous maîtrisez complètement la langue. Rassurez-vous, si vous connaissez déjà le CSS, vous n'aurez pas besoin de plus de temps. La syntaxe du langage est très proche de la CSS normale et ses concepts élémentaires sont similaires à ceux contenus dans tout autre langage de programmation.

Du pixel à la racine em

Contrairement à son prédécesseur, Bootstrap 4 n’utilise plus le pixel (px) comme unité de mesure typographique. Au lieu de cela, il utilise principalement root em (rem). Le raisonnement derrière le choix de rem est basé sur un problème bien connu avec px; Les sites Web utilisant le format px risquent de ne pas s'afficher correctement, ou de ne pas correspondre à leurs intentions, car les utilisateurs modifient la taille de la police de base du navigateur. L'utilisation d'une unité de mesure relative à l'élément racine de la page permet de résoudre ce problème, car l'élément racine sera mis à l'échelle par rapport à la police de base du navigateur. À son tour, une page sera mise à l'échelle par rapport à cet élément racine.

Unités de mesure typographiques

En termes simples, les unités de mesure typographiques déterminent la taille de votre police et de vos éléments. Les unités de mesure les plus couramment utilisées sont px et em. Le premier est une abréviation de pixel et utilise un pixel de référence pour déterminer la taille exacte d'une police. Cela signifie que, pour des affichages de 96 points par pouce (dpi), 1 px correspondra à un pixel réel sur l'écran. Pour les affichages de résolution supérieure, le pixel de référence entraînera une mise à l'échelle du px pour correspondre à la résolution de l'affichage. Par exemple, spécifier une taille de police de 100 px signifie que la police a exactement une taille de 100 pixels (sur un écran de 96 dpi), indépendamment de tout autre élément de la page.

Em est une unité de mesure relative au parent de l'élément auquel elle est appliquée. Ainsi, par exemple, si nous avions deux éléments div imbriqués, l’élément externe avec une taille de police de 100 px et l’élément interne avec une taille de police de 2 em, la taille de police de l’élément interne se traduirait par 200 px (comme dans ce cas 1 em = 100 px). Le problème lié à l'utilisation d'une unité de mesure relative aux éléments parents est qu'elle augmente la complexité de votre code, car l'imbrication d'éléments rend les calculs de taille plus difficiles.

La mesure rem récemment introduite vise à remédier aux faiblesses de em et de px en combinant leurs deux points forts; au lieu d'être relatif à un élément parent, rem est relatif à l'élément racine de la page.

Plus de support pour Internet Explorer 8

Comme cela était déjà implicite dans le résumé de la fonctionnalité précédente, la dernière version de Bootstrap ne prend plus en charge Internet Explorer 8. La décision de ne prendre en charge que les versions plus récentes d'Internet Explorer était donc raisonnable, car Microsoft même ne fournit pas de support technique ni de mises à jour. pour Internet Explorer 8 plus (à partir de janvier 2016). De plus, Internet Explorer 8 ne prend pas en charge rem, ce qui signifie que Bootstrap 4 aurait été tenu de fournir une solution de contournement. Cela, à son tour, aurait probablement impliqué beaucoup de travail de développement supplémentaire, avec des incohérences potentielles. Enfin, il est difficile de développer un site Web réactif pour Internet Explorer 8, car le navigateur ne prend pas en charge les requêtes multimédia CSS. Compte tenu de ces trois facteurs, abandonner la prise en charge de cette version d'Internet Explorer était le chemin d'action le plus judicieux.

Un nouveau niveau de grille

Le système de grille de Bootstrap consiste en une série de classes CSS et de requêtes multimédia qui vous aident à présenter votre page. Plus précisément, le système de grille aide à atténuer les difficultés associées au positionnement horizontal et vertical du contenu d'une page et à la structure de la page sur plusieurs affichages. Avec Bootstrap 4, le système de grille a été complètement repensé et un nouveau niveau de grille a été ajouté avec un point d'arrêt de 480 px et moins. Nous parlerons de façon approfondie des niveaux, des points d'arrêt et du système de grille de Bootstrap au chapitre 2, Création d'une instruction de style.

Au revoir GLYPHICONS

Bootstrap 3 est livré avec une belle collection de plus de 250 icônes de polices, sans utilisation. Afin de rendre le cadre plus léger (et parce que les icônes de police sont considérées comme une mauvaise pratique), le jeu GLYPHICON n'est plus disponible dans Bootstrap 4.

Texte plus gros: plus de panneaux, de puits et de vignettes

La taille de police par défaut dans Bootstrap 4 est 2 px plus grande que dans son prédécesseur, passant de 14 px à 16 px. De plus, Bootstrap 4 a remplacé les panneaux, les puits et les vignettes par un nouveau concept: les cartes. Pour les lecteurs peu familiarisés avec le concept de puits, un puits est un composant d'interface utilisateur qui permet aux développeurs de mettre en évidence le contenu d'un texte en appliquant un effet d'ombre incrusté à l'élément auquel il est appliqué. Un panneau sert également à mettre en évidence des informations, mais en appliquant un remplissage et des bordures arrondies. Les cartes remplissent le même objectif que leurs prédécesseurs, mais sont moins restrictives car elles sont suffisamment souples pour prendre en charge différents types de contenu, tels que des images, des listes ou du texte. Ils peuvent également être personnalisés pour utiliser des pieds de page et des en-têtes. Regardez la capture d'écran suivante:

Commandes de saisie de formulaire nouvelles et améliorées

Bootstrap 4 permet maintenant le dimensionnement des contrôles d’entrée, ainsi que des classes permettant de désigner les contrôles d’entrée de niveau bloc et inline. Cependant, l'un des nouveaux ajouts les plus attendus concerne les styles de validation d'entrée de Bootstrap, qui nécessitaient auparavant des bibliothèques tierces ou une implémentation manuelle, mais sont désormais livrés avec Bootstrap 4 (voir Figure 1.6). Regardez la capture d'écran suivante:



Last but not least, Bootstrap 4 propose également des formulaires personnalisés afin d'améliorer encore la cohérence de l'interface utilisateur entre les navigateurs sur tous les éléments d'entrée (Figure 1.7). Comme indiqué dans la documentation de Bootstrap 4 Alpha 4, les contrôles d'entrée sont «construits sur un balisage sémantique et accessible, de sorte qu'ils constituent un remplacement solide de tout contrôle de formulaire par défaut». Regardez la capture d'écran suivante:

Personnalisation

Les développeurs de Bootstrap 4 ont mis un accent particulier sur la personnalisation tout au long du développement de Bootstrap 4. De nombreuses nouvelles variables ont ainsi été introduites, permettant une personnalisation aisée de Bootstrap. Les variables $ enabled - * - Sass permettent d’activer ou de désactiver des préférences CSS globales spécifiques.

Mise en place de notre projet

Maintenant que nous savons ce que Bootstrap a à offrir, établissons notre projet:

  1. Créez un nouveau répertoire de projet nommé MyPhoto. Cela deviendra notre répertoire racine du projet.
  2. Créez un fichier index.html vide et insérez le code HTML suivant:

 <! DOCTYPE html>

 <tête>

 <méta http-equiv = "compatible x-ua" content = "ie = bord">

  MaPhoto

 

 Bonjour le monde!

Notez les trois balises méta. La première balise indique au navigateur que le document en question est codé en utf-8. Etant donné que Bootstrap optimise son contenu pour les périphériques mobiles, la balise méta suivante est requise pour faciliter la mise à l'échelle de la fenêtre d'affichage. La dernière balise méta oblige le rendu du document à l'aide du dernier mode de rendu du document disponible s'il est affiché dans Internet Explorer.

  1. Ouvrez le fichier index.html dans votre navigateur. Vous devriez voir juste une page blanche avec les mots Hello World.

Il est maintenant temps d'inclure Bootstrap. À la base, Bootstrap est une feuille de style CSS glorifiée. Au sein de cette feuille de style, Bootstrap expose des fonctionnalités très puissantes de CSS avec une syntaxe facile à utiliser. S'agissant d'une feuille de style, vous l'incluez dans votre projet comme vous le feriez avec toute autre feuille de style que vous pourriez développer vous-même. En d’autres termes, ouvrez le fichier index.html et associez-le directement à la feuille de style.

Mise à l'échelle de la fenêtre

Le terme "fenêtre" fait référence à la taille d'affichage disponible pour rendre le contenu d'une page. La méta-balise viewport vous permet de définir cette taille disponible. La mise à l'échelle de la fenêtre d'affichage à l'aide de balises méta a été introduite pour la première fois par Apple et, à l'heure actuelle, est prise en charge par tous les principaux navigateurs. En utilisant le paramètre width, nous pouvons définir la largeur exacte de la fenêtre d'affichage de l'utilisateur. Par exemple, il demandera au navigateur de définir la largeur de la fenêtre d'affichage sur 320px. La possibilité de contrôler la largeur de la fenêtre de visualisation est utile lors du développement de sites Web adaptés aux mobiles; Par défaut, les navigateurs mobiles tentent d'adapter la totalité de la page à leurs fenêtres en effectuant un zoom arrière autant que possible. Cela permet aux utilisateurs d'afficher et d'interagir avec des sites Web qui n'ont pas été conçus pour être visionnés sur des appareils mobiles. Cependant, étant donné que Bootstrap adopte une philosophie de conception axée sur le mobile, un zoom arrière aura en fait des effets secondaires indésirables. Par exemple, les points d'arrêt (dont nous discuterons au Chapitre 2, Création d'une instruction de style) ne fonctionneront plus comme prévu, car ils traitent maintenant avec l'équivalent zoomé de la page en question. C'est pourquoi il est si important de définir explicitement la largeur de la fenêtre. En écrivant content = "width = device-width, initial-scale = 1, shrink-to-fit = no", nous indiquons au navigateur les éléments suivants:

Nous voulons définir la largeur de la fenêtre d'affichage égale à la largeur de l'écran du périphérique actuel.

Nous ne voulons pas de zoom, dans un premier temps.

Nous ne souhaitons pas réduire le contenu pour l'adapter à la fenêtre d'affichage.

Pour le moment, nous utiliserons les versions Bootstrap hébergées sur le CDN (Content Delivery Network) officiel de Bootstrap. Pour ce faire, vous devez inclure la balise HTML suivante dans l'en-tête de votre document HTML (l'en-tête de votre document HTML fait référence au contenu situé entre la balise d'ouverture et la balise de fermeture):

Bootstrap repose sur jQuery, un framework JavaScript qui fournit une couche d’abstraction dans le but de simplifier les opérations JavaScript les plus courantes (telles que la sélection d’éléments et la gestion d’événements). Par conséquent, avant d'inclure le fichier JavaScript Bootstrap, nous devons d'abord inclure jQuery. Les deux inclusions doivent se produire juste avant la balise de fermeture :



187