Reboot

Reboot, une collection de modifications CSS spécifiques aux éléments dans un seul fichier, démarre Bootstrap pour fournir une base de référence élégante, cohérente et simple sur laquelle s'appuyer.

Sur cette page

Approche

Reboot s'appuie sur Normalize, fournissant de nombreux éléments HTML avec des styles quelque peu opiniâtres en utilisant uniquement des sélecteurs d'éléments. Le style supplémentaire est effectué uniquement avec les classes. Par exemple, nous redémarrons certains styles <table> pour une ligne de base plus simple et fournissons ultérieurement .table, .table-bordered, et plus encore.

Voici nos directives et raisons pour choisir ce qu'il faut remplacer dans le redémarrage :

Mettez à jour certaines valeurs par défaut du navigateur pour utiliser des rem au lieu de em pour un espacement évolutif des composants.
Évitez margin-top. Les marges verticales peuvent s'effondrer, donnant des résultats inattendus. Plus important encore, une seule direction de marge est un modèle mental plus simple.
Pour une mise à l'échelle plus facile entre les tailles d'appareils, les éléments de bloc doivent utiliser des rems pour les margins.
Réduire au minimum les déclarations de propriétés liées à font, en utilisant inherit dans la mesure du possible.

Valeurs par défaut des pages

Les éléments <html> et <body> ont été mis à jour pour fournir de meilleures valeurs par défaut à l'échelle de la page. Plus précisément :

Le box-sizing est défini globalement sur chaque élément, y compris *::before et *::after, à border-box. Cela garantit que la largeur déclarée de l'élément n'est jamais dépassée en raison du remplissage ou de la bordure.
- Aucune base font-size n'est déclarée sur le <html>, mais 16px est supposé (la valeur par défaut du navigateur). font-size : 1rem est appliqué sur le <body> pour faciliter la mise à l'échelle réactive via les requêtes multimédias tout en respectant les préférences de l'utilisateur et en garantissant une approche plus accessible. Cette valeur par défaut du navigateur peut être remplacée en modifiant la variable $font-size-root.
Le <body> définit également une font-family globale, font-weight, line-height, et couleur. Ceci est hérité plus tard par certains éléments de formulaire pour éviter les incohérences de police.
Pour des raisons de sécurité, le <body> a une background-color déclarée, par défaut #fff.

Pile de polices native

Bootstrap utilise une "pile de polices native" ou une "pile de polices système" pour un rendu de texte optimal sur chaque appareil et système d'exploitation. Ces polices système ont été conçues spécifiquement pour les appareils d'aujourd'hui, avec un rendu amélioré sur les écrans, une prise en charge des polices variables, etc. En savoir plus sur les piles de polices natives dans cet article de Smashing Magazine.

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Notez que parce que la pile de polices comprend des polices emoji, de nombreux caractères Unicode symboles/dingbat courants seront rendus sous forme de pictogrammes multicolores. Leur apparence variera en fonction du style utilisé dans la police emoji native du navigateur/de la plate-forme, et ils ne seront affectés par aucun style CSS couleur.

Cette font-family est appliquée au <body> et automatiquement héritée globalement dans Bootstrap. Pour changer la font-family globale, mettez à jour $font-family-base et recompilez Bootstrap.

Titres et paragraphes

Tous les éléments d'en-tête (par exemple, <h1>) et <p> sont réinitialisés pour que leur margin-top soit supprimé. Les titres ont margin-bottom : .5rem ajoutés et les paragraphes margin-bottom : 1rem pour un espacement facile.

Heading	Exemple
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

Listes

Toutes les listes—<ul>, <ol> et <dl>—ont leur marge - top supprimé et une margin-bottom : 1rem. Les listes imbriquées n'ont pas de margin-bottom. Nous avons également réinitialisé le padding-left sur les éléments <ul> et <ol>.

Toutes les listes ont leur marge supérieure supprimée
Et leur marge inférieure normalisée
Les listes imbriquées n'ont pas de marge inférieure
- De cette façon, ils ont une apparence plus uniforme
- En particulier lorsqu'il est suivi d'autres éléments de liste
Le rembourrage gauche a également été réinitialisé

Voici une liste ordonnée
Avec quelques éléments de liste
Il a le même aspect général
Comme la liste non ordonnée précédente

Pour un style plus simple, une hiérarchie claire et un meilleur espacement, les listes de description ont des marges mises à jour. <dd> réinitialise margin-left à 0 et ajoute margin-bottom : .5rem. <dt>sont gras.

Listes de description: Une liste de description est parfaite pour définir des termes.
Terme: Définition du terme.; Une seconde définition pour le même terme.
Un autre terme: Définition de cet autre terme.

Code en ligne

Enveloppez les extraits de code en ligne avec <code>. Assurez-vous d'échapper les crochets angulaires HTML.

Par exemple, <section> doit être enveloppé en ligne.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blocs de code

Utilisez des <pre> pour plusieurs lignes de code. Encore une fois, assurez-vous d'échapper à tous les crochets angulaires dans le code pour un rendu correct. L'élément <pre> est réinitialisé pour supprimer son margin-top et utiliser les unités rem pour son margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variables

Pour indiquer les variables, utilisez la balise <var>.

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Entrée utilisateur

Utilisez le <kbd> pour indiquer l'entrée qui est généralement saisie au clavier.

Pour changer de répertoire, saisissez cd suivi du nom du répertoire.
Pour modifier les paramètres, appuyez sur ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Exemple de sortie

Pour indiquer un exemple de sortie d'un programme, utilisez la balise <samp>.

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tables

Les tableaux sont légèrement ajustés pour styliser les <caption>, réduire les bordures et assurer un text-align cohérent tout au long. la classe .table.

Ceci est un exemple de tableau, et voici sa légende pour décrire le contenu.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

Formulaires

Divers éléments de formulaire ont été redémarrés pour des styles de base plus simples. Voici quelques-uns des changements les plus notables :

<fieldset>s n'ont pas de bordures, de remplissage ou de marge, ils peuvent donc être facilement utilisés comme enveloppes pour des entrées individuelles ou des groupes d'entrées.
<légendes>, comme les ensembles de champs, ont également été restylées pour être affichées sous forme d'en-tête.
<label> sont définis sur display : inline-block pour permettre l'application de la margin.
<input>s, <select>s, <textarea>s et <button> Les sont principalement traités par Normalize, mais Reboot supprime leur margin et définit également line-height: inherit.
<textarea>s sont modifiés pour ne pouvoir être redimensionnés que verticalement, le redimensionnement horizontal faisant souvent des “casses” mise en page.
<bouton> et bouton <input> ont curseur : pointeur lorsque :not(:disabled) .

Ces changements, et bien d'autres, sont illustrés ci-dessous.

Example de légende

Exemple d'entrée

Exemple email

Exemple telephone

Exemple url

Exemple number

Exemple recherche

Exemple de gamme

Exemple d'entrée de fichier

Example selection

Cochez cette case

La première option est ceci et cela La deuxième option est autre chose qui est également très longue pour démontrer l'emballage de ces contrôles de formulaire fantaisistes. L'option trois est désactivée

Exemple zone de texte

Exemple date

Exemple time

Exemple mot de passe

Exemple datetime-local

Exemple semaine

Exemple mois

Exemple couleur

Exemple sortie sans 100

Prise en charge de la date et de la couleur

Gardez à l'esprit que les entrées de date ne sont pas entièrement prises en charge par tous les navigateurs, à savoir Safari.

Pointeurs sur les boutons

Le redémarrage inclut une amélioration pour role="bouton" pour changer le curseur par défaut en pointeur. Ajoutez cet attribut aux éléments pour aider à indiquer que les éléments sont interactifs. Ce rôle n'est pas nécessaire pour les éléments <button>, qui obtiennent leur propre modification cursor.

Bouton d'élément non bouton

<span role="button" tabindex="0">Non-button element button</span>

Éléments divers

Adresses

L'élément <address> est mis à jour pour réinitialiser le font-style par défaut du navigateur de italic à normal. line-height est également désormais hérité, et margin-bottom : 1rem a été ajouté. Les <adresse> servent à présenter les coordonnées de l'ancêtre le plus proche (ou d'un ensemble d'œuvres). Préservez la mise en forme en terminant les lignes par <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Citation en bloc

La marge par défaut sur les blocs de citations est 1em 40px, nous la réinitialisons donc à 0 0 1rem pour quelque chose de plus cohérent avec les autres éléments.< /p>

Une citation bien connue, contenue dans un élément blockquote.

Quelqu'un de célèbre dans Source Title

Éléments en ligne

L'élément <abbr> reçoit un style de base pour le faire ressortir parmi le texte du paragraphe.

Nulla attr vitae elit libero, a pharetra augue.

Résumé

Le curseur par défaut sur le résumé est texte, nous le réinitialisons donc sur pointeur pour indiquer que l'élément peut être interagi avec en cliquant sur ça.

Quelques détails

Plus d'informations sur les détails.

Encore plus de détails

Voici encore plus de détails sur les détails.

`[hidden]` Attribut HTML5

HTML5 ajoute un nouvel attribut global nommé [hidden] , dont le style est display : none par défaut. Empruntant une idée à PureCSS, nous améliorons ce défaut en rendant [hidden] { display: none !important; } pour éviter que son affichage ne soit écrasé accidentellement.

<input type="text" hidden>

Incompatibilité jQuery

[hidden] n'est pas compatible avec $(...).hide() et $(...).show( ) méthodes. Par conséquent, nous n'approuvons actuellement pas particulièrement [hidden] par rapport à d'autres techniques de gestion de l'affichage des éléments.

Pour simplement basculer la visibilité d'un élément, ce qui signifie que son affichage n'est pas modifié et que l'élément peut toujours affecter le flux du document, utilisez la classe .invisible à la place.

Bootstrap 5.2 | Contenu

Reboot

Reboot

Approche

Valeurs par défaut des pages

Pile de polices native

Titres et paragraphes

Listes

Code en ligne

Blocs de code

Variables

Entrée utilisateur

Exemple de sortie

Tables

Formulaires

Prise en charge de la date et de la couleur

Pointeurs sur les boutons

Éléments divers

Adresses

Citation en bloc

Éléments en ligne

Résumé

[hidden] Attribut HTML5

Incompatibilité jQuery

`[hidden]` Attribut HTML5