Source

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.

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.

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 globalement défini 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.
Le <body>définit également un global font-family, line-heightet text-align. 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

Les polices Web par défaut (Helvetica Neue, Helvetica et Arial) ont été abandonnées dans Bootstrap 4 et remplacées par une "pile de polices native" pour un rendu de texte optimal sur chaque appareil et système d'exploitation. En savoir plus sur les piles de polices natives dans cet article de Smashing Magazine .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing élite
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida et eget metus.
Porte Malesuada: Etiam porta sem malesuada magna mollis euismod.

Texte préformaté

L' <pre>élément est réinitialisé pour supprimer son margin-topet utiliser remdes unités pour son margin-bottom.

.exemple-élément {
  marge inférieure : 1rem ;
}

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

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.

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

É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 l'avons donc réinitialisé 0 0 1rempour quelque chose de plus cohérent avec les autres éléments.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quelqu'un de célèbre dans le titre de la source

Éléments en ligne

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

Nulla attr vitae elit libero, a pharetra augue.

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 stylisé 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. Bien qu'elle [hidden]ne soit pas prise en charge nativement par IE10, la déclaration explicite dans notre CSS contourne ce problème.

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