in English

Redémarrer

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

Approcher

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 <table>styles pour une ligne de base plus simple et fournissons plus tard .table, .table-borderedet plus encore.

Voici nos directives et raisons pour choisir ce qu'il faut remplacer dans Reboot :

Mettez à jour certaines valeurs par défaut du navigateur pour utiliser rems au lieu de ems pour l'espacement des composants évolutif.
A éviter margin-top. Les marges verticales peuvent s'effondrer, donnant des résultats inattendus. Plus important encore, une seule direction de marginest 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 rems pour margins.
fontRéduisez au minimum les déclarations de propriétés liées à -, en utilisant inheritchaque fois que possible.

Variables CSS

Ajouté dans v5.2.0

Avec la v5.1.1, nous avons standardisé nos @imports requis dans tous nos bundles CSS (y compris bootstrap.css, bootstrap-reboot.csset bootstrap-grid.css) pour inclure _root.scss. Cela ajoute :rootdes variables CSS de niveau à tous les bundles, quel que soit le nombre d'entre eux utilisés dans ce bundle. En fin de compte, Bootstrap 5 continuera à voir plus de variables CSS ajoutées au fil du temps, afin de fournir plus de personnalisation en temps réel sans avoir besoin de toujours recompiler Sass. Notre approche consiste à prendre nos variables source Sass et à les transformer en variables CSS. De cette façon, même si vous n'utilisez pas de variables CSS, vous avez toujours toute la puissance de Sass. Ceci est toujours en cours et prendra du temps pour être pleinement mis en œuvre.

Par exemple, considérez ces :rootvariables CSS pour les <body>styles courants :

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

En pratique, ces variables sont ensuite appliquées dans Reboot comme suit :

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Ce qui vous permet de faire des personnalisations en temps réel comme bon vous semble :

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Valeurs par défaut des pages

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

Le box-sizingest défini globalement sur chaque élément, y compris *::beforeet *::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-sizen'est déclarée sur le <html>, mais 16pxest supposée (la valeur par défaut du navigateur). font-size: 1remest appliqué sur le <body>pour une mise à l'échelle facile et réactive via des 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 $font-size-rootvariable.
Le <body>définit également un global font-family, font-weight, line-heightet color. 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 déclaré background-color, 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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Notez que, comme 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 colorstyle CSS.

Ceci font-familyest appliqué à <body>et automatiquement hérité globalement dans Bootstrap. Pour basculer le global font-family, mettez à jour $font-family-baseet recompilez Bootstrap.

Titres et paragraphes

Tous les éléments d'en-tête, par exemple, <h1>et <p>sont réinitialisés pour être margin-topsupprimés. Des titres ont margin-bottom: .5remété ajoutés et des paragraphes margin-bottom: 1rempour un espacement facile.

Titre	Exemple
`<h1></h1>`	h1. En-tête bootstrap
`<h2></h2>`	h2. En-tête bootstrap
`<h3></h3>`	h3. En-tête bootstrap
`<h4></h4>`	h4. En-tête bootstrap
`<h5></h5>`	h5. En-tête bootstrap
`<h6></h6>`	h6. En-tête bootstrap

Règles horizontales

L' <hr>élément a été simplifié. Semblables aux valeurs par défaut du navigateur, <hr>les s sont stylisés via border-top, ont une valeur par défaut opacity: .25et héritent automatiquement de leur border-colorvia color, y compris lorsqu'il colorest défini via le parent. Ils peuvent être modifiés avec des utilitaires de texte, de bordure et d'opacité.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Listes

Toutes les listes— <ul>, <ol>, et <dl>— ont leur margin-topsuppression et un margin-bottom: 1rem. Les listes imbriquées n'ont pas de margin-bottom. Nous avons également réinitialisé les éléments padding-lefton <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
- Particulièrement 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 mis à jour margins. <dd>s réinitialiser margin-leftet 0ajouter margin-bottom: .5rem. <dt>s sont en gras .

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

Code en ligne

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

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

html

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

Blocs de code

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

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

html

<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 <var>balise.

y = m x + b

html

<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, tapez cdsuivi du nom du répertoire.
Pour modifier les paramètres, appuyez sur ctrl + ,

html

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 <samp>balise.

Ce texte est destiné à être traité comme un exemple de sortie d'un programme informatique.

html

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

les tables

Les tableaux sont légèrement ajustés au style <caption>s, réduisent les bordures et garantissent une cohérence d'un text-alignbout à l'autre. Des modifications supplémentaires pour les bordures, le rembourrage, etc. sont apportées avec la .tableclasse .

Ceci est un exemple de tableau, et voici sa légende pour décrire le contenu.
Titre du tableau	Titre du tableau	Titre du tableau	Titre du tableau
Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau
Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau
Cellule du tableau	Cellule du tableau	Cellule du tableau	Cellule du tableau

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Formes

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 emballages pour des entrées individuelles ou des groupes d'entrées.
<legend>s, comme les ensembles de champs, ont également été restylés pour être affichés comme une sorte d'en-tête.
<label>s sont définis sur display: inline-blockpour autoriser marginl'application.
<input>s, <select>s, <textarea>s et <button>s sont principalement traités par Normalize, mais Reboot supprime également leurs marginet sets line-height: inherit.
<textarea>Les s sont modifiés pour ne pouvoir être redimensionnés que verticalement, car le redimensionnement horizontal "casse" souvent la mise en page.
<button>les éléments s et <input>button ont cursor: pointerwhen :not(:disabled).

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

Exemple de légende

Exemple d'entrée

Exemple d'e-mail

Exemple de téléphone

Exemple d'URL

Exemple de numéro

Exemple de recherche

Exemple de gamme

Exemple d'entrée de fichier

Exemple de sélection

Cochez cette case

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

Exemple de zone de texte

Exemple de date

Exemple de temps

Exemple de mot de passe

Exemple datetime-local

Exemple de semaine

Exemple de mois

Exemple de couleur

Exemple de sortie 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="button"changer le curseur par défaut en pointer. 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 <button>éléments, qui obtiennent leur propre cursormodification.

Bouton d'élément non bouton

html

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

Éléments divers

Adresse

L' <address>élément est mis à jour pour réinitialiser la valeur par défaut du navigateur font-stylede italicà normal. line-heightest également maintenant hérité et margin-bottom: 1rema été ajouté. <address>s 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 Téléphone
: (123) 456-7890

Nom complet
[email protected]

Citation en bloc

La valeur par défaut marginsur les guillemets est 1em 40px, nous avons donc réinitialisé cela 0 0 1rempour quelque chose de plus cohérent avec les autres éléments.

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

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

Éléments en ligne

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

L' élément d'abréviation HTML .

Sommaire

cursorLe résumé par défaut est text, nous le réinitialisons donc pointerpour indiquer que l'élément peut être interagi avec en cliquant dessus.

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] , qui est stylé display: nonepar défaut. Empruntant une idée à PureCSS , nous améliorons cette valeur par défaut en [hidden] { display: none !important; }évitant qu'elle displayne soit accidentellement remplacée.

<input type="text" hidden>

Incompatibilité jQuery

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

Pour simplement basculer la visibilité d'un élément, ce qui signifie qu'il displayn'est pas modifié et que l'élément peut toujours affecter le flux du document, utilisez la .invisibleclasse à la place.

Redémarrer

Approcher

Variables CSS

Valeurs par défaut des pages

Pile de polices native

Titres et paragraphes

Règles horizontales

Listes

Code en ligne

Blocs de code

variables

Entrée utilisateur

Exemple de sortie

les tables

Formes

Prise en charge de la date et de la couleur

Pointeurs sur les boutons

Éléments divers

Adresse

Citation en bloc

Éléments en ligne

Sommaire

[hidden]Attribut HTML5

Incompatibilité jQuery

`[hidden]`Attribut HTML5