Bootstrap - Reboot : Un guide amical pour les débutants

Salut là, futurs développeurs web ! Je suis ravi de vous guider dans cette exciting aventure à travers le monde de Bootstrap Reboot. En tant que quelqu'un qui enseigne l'informatique depuis des années, j'attends avec impatience de partager mes connaissances et mon expérience avec vous. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et plongons dedans !

Bootstrap - Reboot

Qu'est-ce que Bootstrap Reboot ?

Avant de commencer, laissez-moi vous raconter une petite histoire. Imaginez que vous emménagez dans une nouvelle maison. Avant de commencer à décorer, vous voudriez une feuille blanche, non ? C'est exactement ce que Bootstrap Reboot fait pour le développement web. C'est comme donner à votre page web une nouvelle couche de peinture, en créant une base cohérente sur laquelle vous pouvez construire.

Bootstrap Reboot est une collection de styles CSS qui normalise les éléments HTML par défaut à travers différents navigateurs. C'est comme un langage universel pour les navigateurs web, garantissant que votre site web a l'air cohérent où que ce soit qu'il est consulté.

Approche

L'approche de Bootstrap Reboot est simple mais puissante. Il vise à :

Fournir une feuille blanche pour le développement web
Assurer la cohérence entre les navigateurs
Améliorer l'accessibilité et la convivialité

Maintenant, plongeons dans les détails !

Défauts de page

Bootstrap Reboot définit certains styles par défaut pour toute la page. Voici un simple exemple :

<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mon incroyable site web</title>
</head>
<body>
<h1>Bienvenue sur mon site web !</h1>
</body>
</html>

Dans cet exemple, Bootstrap Reboot assure que :

Le box-sizing est réglé sur border-box pour tous les éléments
La font-family est réglée sur une pile de polices natives (plus à ce sujet plus tard !)
La line-height est réglée sur 1.5 pour une meilleure lisibilité
La background-color du body est réglée sur blanc

Pile de polices natives

Souvenez-vous du temps où nous spécifions des polices exactes pour nos sites web ? Eh bien, Bootstrap Reboot introduit une pile de polices natives. C'est comme avoir un garde-robe qui a toujours l'air bien, peu importe les vêtements que vous portez !

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Cette pile de polices assure que votre texte a l'air fantastique sur n'importe quel appareil, en utilisant la police par défaut du système.

Titres

Les titres sont comme les titres de chapitre dans un livre. Ils aident à organiser votre contenu et à le rendre plus facile à lire. Bootstrap Reboot fournit un style cohérent pour tous les niveaux de titre (h1 à h6).

<h1>Ce sont les titres principaux</h1>
<h2>Ce sont les sous-titres</h2>
<h3>Ce sont les sous-sous-titres</h3>

Paragraphes

Les paragraphes sont la substantifique moelle de votre contenu. Bootstrap Reboot assure qu'ils sont faciles à lire et bien espacés.

<p>Ce paragraphe est facile à lire grâce aux styles par défaut de Bootstrap Reboot.</p>
<p>Voici un autre paragraphe. Notez l'espacement sympa entre les paragraphes ?</p>

Liens

Les liens sont les autoroutes de l'internet, reliant différentes parties de votre site web et menant à d'autres sites. Bootstrap Reboot s'assure qu'ils sont facilement reconnaissables.

<a href="https://example.com">Ceci est un lien</a>

Par défaut, les liens sont en bleu et soulignés. Lorsque vous les survolez, le soulignement disparaît.

Rules horizontales

Les rules horizontales sont comme les séparateurs dans un cahier. Elles aident à séparer différentes sections de votre contenu.

<hr>

Bootstrap Reboot assure que les rules horizontales sont visibles mais pas envahissantes.

Listes

Les listes aident à organiser l'information de manière structurée. Bootstrap Reboot fournit des styles pour les listes ordonnées et non ordonnées.

<ul>
<li>Cet élément de liste non ordonnée</li>
<li>Et voici un autre</li>
</ul>

<ol>
<li>Cet élément de liste ordonnée</li>
<li>Et voici le second élément</li>
</ol>

Code inline

Parfois, vous devez mettre en évidence un morceau de code dans votre texte. Bootstrap Reboot le rend facile et visuellement attrayant.

<p>Utilisez la fonction <code>console.log()</code> pour afficher dans la console.</p>

Blocks de code

Pour des morceaux plus longs de code, vous pouvez utiliser des blocks de code. Bootstrap Reboot assure qu'ils sont faciles à lire et visuellement distincts du reste de votre contenu.

<pre><code>
function saluer(nom) {
console.log(`Bonjour, ${nom} !`);
}
</code></pre>

Variables

En programmation, les variables sont comme des contenants qui gardent des données. Bootstrap Reboot fournit des styles pour afficher les variables dans votre texte.

<p-La variable <var>x</var> représente les coordonnées x.</p>

Entrée utilisateur

Lorsque vous devez montrer ce que l'utilisateur devrait saisir, Bootstrap Reboot est là pour vous aider.

<p>Pour enregistrer votre travail, appuyez sur <kbd>Ctrl + S</kbd>.</p>

Sortie exemple

Parfois, vous devez montrer à quoi pourrait ressembler la sortie d'un programme. Bootstrap Reboot fournit également un style pour cela.

<samp>Cette sortie pourrait ressembler à ceci.</samp>

Tables

Les tables sont géniales pour afficher des données structurées. Bootstrap Reboot assure qu'elles sont propres et faciles à lire.

<table>
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>

Forms

Les formulaires sont la manière dont les utilisateurs interagissent avec votre site web. Bootstrap Reboot fournit un style cohérent pour les éléments de formulaire.

<form>
<label for="name">Nom :</label>
<input type="text" id="name" name="name">

<label for="email">Email :</label>
<input type="email" id="email" name="email">

<button type="submit">Soumettre</button>
</form>

Pointeurs sur les boutons

Les boutons sont des éléments interactifs, et Bootstrap Reboot s'assure qu'ils ont l'air du rôle.

<button>Cliquez-moi !</button>

Lorsque vous survolez un bouton, le curseur change en pointeur, indiquant qu'il est cliquable.

Éléments divers

Bootstrap Reboot fournit également des styles pour divers autres éléments HTML. Voici un exemple rapide :

<abbr title="HyperText Markup Language">HTML</abbr> est le langage de balisage standard pour les pages web.

Blockquote

Les blockquotes sont géniaux pour mettre en évidence des citations ou des morceaux de texte importants.

<blockquote>
<p>Être ou ne pas être, telle est la question.</p>
<footer>— William Shakespeare</footer>
</blockquote>

Éléments inline

Bootstrap Reboot assure que les éléments inline sont stylés de manière cohérente.

<p>Ce texte est <strong>gras</strong>, ceci est <em>italique</em>, et ceci est <u>souligné</u>.</p>

Résumé

L'élément <summary> est utilisé en conjonction avec <details> pour créer une section expansible/repliable.

<details>
<summary>Cliquez pour étendre</summary>
<p>Ce est le contenu étendu.</p>
</details>

Attribut HTML5 [hidden]

Bootstrap Reboot respecte l'attribut HTML5 hidden, qui peut être utilisé pour masquer des éléments.

<div hidden>Ce contenu est masqué.</div>

Et voilà, les amis ! Nous avons couvert les principaux aspects de Bootstrap Reboot. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces éléments dans vos propres projets. Bon codage !

Credits: Image by storyset

Tutoriel précédent:

Bootstrap - Grille CSS

Tutoriel suivant:

Bootstrap - Typographie