Comment utiliser le CSS de base dans Bootstrap

L'une des choses les plus complexes lorsqu'il s'agit de travailler avec la conception de sites Web est de surmonter les différences subtiles entre les navigateurs, bien qu'en théorie chaque navigateur doive se conformer aux normes, et dans la plupart des cas c'est le cas, il existe de petites différences très subtiles qui peuvent faire notre conception difficile à mettre en œuvre.

Avant l'existence de Amorcer un fichier appelé réinitialiser.cssEn cela, ce qui a été fait, c'est que toutes les valeurs des éléments de base et clés tels que les remplissages, les marges, la police par défaut, etc. ont été explicitement définies. Avec cela, nous avons empêché le navigateur de faire ce qu'il voulait lors de la définition d'éléments que nous n'avions pas modifiés dans nos styles personnalisés.

Actuellement Amorcer s'occupe de ces détails pour nous, ceci est réalisé avec un fichier appelé bootstrap.css qui est populairement connu comme le fichier de base.

ExigencesPour pouvoir exécuter les exemples et exercices de ce tutoriel, nous devons avoir un projet avec le Amorcer déjà téléchargés, ou à défaut, une connexion Internet pour pouvoir utiliser les bibliothèques directement depuis votre CDN. Nous avons besoin d'un navigateur moderne comme Chrome ou alors Firefox dans ses dernières versions, et enfin nous avons besoin d'un éditeur de texte comme Texte sublime ou NotePad ++ pour créer le contenu HTML de manière plus conviviale, bien que si nous souhaitons que gedit ou le bloc-notes servent à nos fins.

En-têtes
L'une des choses qui attirent le plus l'attention sur un site Web sont les titres et sous-titres du contenu, bien sûr c'est la fonction de ces éléments, le CSS base de Amorcer a une façon intéressante de gérer cela, tout d'abord il a quelques tailles et une police définie pour l'élément h dans n'importe laquelle de ses numérotations allant de 1 à 6, mais il a également des classes qui correspondent à chaque élément, de sorte que nous pouvons appliquer ces mêmes styles à un div ou encore envergure.

Une autre chose intéressante est que nous pouvons utiliser l'élément petit de diminuer la taille d'une section du titre mais en conservant la proportion par rapport à l'élément ou à l'élément qui utilise la classe correspondante.

Avec ceci simplement que lorsque nous avons plusieurs navigateurs, une homogénéité de notre conception est maintenue, de sorte que les titres n'ont pas à être différents, par exemple, dans Safari à Firefox, quand on sait que les deux navigateurs fonctionnent par défaut avec des polices différentes.

Mettre en pratique ce que vous avez appris
On va créer une petite page où on va faire une liste de titres, on va placer les deux pentes l'une au dessus de l'autre pour que l'on puisse voir comment les différences n'existent plus grâce au fichier de base de Amorcer. Regardons d'abord le code, puis nous verrons à quoi il ressemble dans notre navigateur.

 Utilisation du fichier d'amorçage de baseCeci est un div avec la classe H1 la petite source
Ceci est un titre H4 la petite police
C'est un div avec la classe H4 la petite source

Ici, nous voyons comment nous avons fait dans le corps les différents éléments que nous allons utiliser comme titres, en plus nous montrons comment l'élément fonctionne afin que nous puissions le combiner avec les titres pour obtenir des effets très intéressants. Nous incluons également un style supplémentaire pour ajouter quelques rembourrages supplémentaire afin que nous puissions avoir un résultat comme celui que nous verrons dans l'image suivante :

AGRANDIR

Paragraphes
Une fois que nous avons capté l'attention d'un lecteur ou d'un utilisateur avec les titres de notre application, nous avons généralement besoin d'un contenu qui peut être consommé, normalement c'est un texte que nous plaçons dans un paragraphe bien qu'il puisse aussi s'agir d'une image, audio ou vidéo.

Pour en revenir au paragraphe, déjà l'élément

apporte un style prédéfini par la base CSS, cependant cette base nous offre aussi un type particulier de paragraphe qui s'appelle mener, lors de l'ajout de cette classe à un paragraphe, nous la distinguerons immédiatement des autres classes similaires, car sa taille est augmentée et certaines propriétés des polices sont modifiées.

Voyons dans le code suivant comment cela fonctionne que nous venons d'expliquer, dans cet exemple nous allons créer deux paragraphes où le premier aura la classe mener, de cette façon, nous verrons comment il mettra en évidence, bien sûr tout cela fonctionne si nous avons Amorcer dans notre projet, voyons notre code :

 Utilisation du fichier d'amorçage de base
Pain au bacon ipsum amet in laboris magna ullamco, au pilon pain boudin eiusmod andouille leberkas exercice de poitrine de porc ex. Côtes de bœuf magna corned-beef incididunt id. Kevin croupe en queue biltong. Filet mignon de dinde quis, jarret de venaison ullamco jerky non volupté de longe de porc.

Pain au bacon ipsum amet in laboris magna ullamco, au pain au pilon boudin eiusmod andouille leberkas exercice de poitrine de porc ex. Côtes de bœuf magna corned-beef incididunt id. Kevin croupe en queue biltong. Filet mignon de dinde quis, jarret de venaison ullamco jerky non volupté de longe de porc.

Exécutons notre exemple et voyons à quoi cela ressemble dans notre navigateur :

AGRANDIR

Aligner le texte
Une des choses qui est également très importante est l'alignement du texte, car parfois nous avons besoin que notre texte soit justifié, aligné à droite, au centre, ou de force à gauche, bien qu'il existe des équivalents en CSS ayant une classe pour cela nous permet d'économiser beaucoup de travail, et nous aide également à donner de la cohérence au code.

Dans l'exemple suivant, nous verrons comment nous appliquons chacune de ces classes à différents éléments et pour que notre code ait une meilleure lisibilité, nous allons faire tous les paragraphes des éléments. Voyons le code :

 Utilisation du fichier d'amorçage de base
Bacon ipsum dolor amet in laboris magna ullamco, en pilon dolor boudin eiusmod andouille
exercice de poitrine de porc leberkas ex. Côtes de bœuf magna corned-beef incididunt id.
exercice de poitrine de porc leberkas ex. Côtes de bœuf magna corned-beef incididunt id. exercice de poitrine de porc leberkas ex. Côtes de bœuf magna corned-beef incididunt id. Kévin croupe

en queue biltong. Filet mignon de dinde quis, jarret de venaison ullamco jerky non volupté de longe de porc.

Voyons maintenant comment se comporte chaque classe dans notre navigateur, il y a un cas particulier avec le justifier, ce qui est très subtil, donc son effet peut ne pas être vu beaucoup.

AGRANDIR

Listes
Les listes sont souvent nécessaires et pas exclusivement pour énumérer des choses, elles sont souvent des éléments essentiels de la conception. Amorcer les gère de manière transparente comme les éléments précédents que nous avons vus, les listes sont livrées avec un style prédéfini par le CSS base, cependant nous avons quelques variantes, par exemple une liste sans styles pour éviter les puces, et une liste avec en ligne, ce dernier rend la liste horizontale.

Voyons alors dans le code suivant un exemple de chacune de ces listes afin que nous puissions les utiliser dans notre code :

 Utilisation du fichier d'amorçage de base
Liste en ligne

Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément

Liste sans styles

Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément

Liste standard

Premier élément
Deuxième élément
Troisième élément
Quatrième élément
Cinquième élément

Voyons maintenant à quoi cela ressemble dans notre navigateur, où nous pouvons voir que les différences sont immédiatement perceptibles :

Avec cela nous terminons ce tutoriel, nous avons vu que le CSS de base de Amorcer Il nous donne une base standard pour garantir que les éléments que nous n'avons pas définis ou personnalisés apparaissent d'une manière particulière directement dans le navigateur, nous donnant ainsi un contrôle total sur notre application quel que soit le navigateur.