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-bordered
et 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
rem
s au lieu deem
s 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 demargin
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
rem
s pourmargin
s. font
Réduisez au minimum les déclarations de propriétés liées à -, en utilisantinherit
chaque 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-sizing
est globalement défini 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>
, mais16px
est supposée (la valeur par défaut du navigateur).font-size: 1rem
est 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 globalfont-family
,line-height
ettext-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 macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// 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, 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 color
style CSS.
Ceci font-family
est appliqué à <body>
et automatiquement hérité globalement dans Bootstrap. Pour basculer le global font-family
, 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 être margin-top
supprimés. Des titres ont margin-bottom: .5rem
été ajoutés et des paragraphes margin-bottom: 1rem
pour 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-top
suppression et un margin-bottom: 1rem
. Les listes imbriquées n'ont pas de margin-bottom
.
- 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 margin
s. <dd>
s réinitialiser margin-left
et 0
ajouter 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.
Texte préformaté
L' <pre>
élément est réinitialisé pour supprimer son margin-top
et utiliser rem
des 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-align
bout à l'autre. Des modifications supplémentaires pour les bordures, le rembourrage, etc. sont apportées avec la .table
classe .
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 surdisplay: inline-block
pour autorisermargin
l'application.<input>
s,<select>
s,<textarea>
s et<button>
s sont principalement traités par Normalize, mais Reboot supprime également leursmargin
et setsline-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 ontcursor: pointer
when:not(:disabled)
.
Ces changements, et bien d'autres, sont illustrés ci-dessous.
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 cursor
modification.
<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-style
de italic
à normal
. line-height
est également maintenant hérité et margin-bottom: 1rem
a é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>
.
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 margin
sur les guillemets est 1em 40px
, nous l'avons donc réinitialisé 0 0 1rem
pour quelque chose de plus cohérent avec les autres éléments.
Une citation bien connue, contenue dans un élément blockquote.
Éléments en ligne
L' <abbr>
élément reçoit un style de base pour le faire ressortir parmi le texte du paragraphe.
Sommaire
cursor
Le résumé par défaut est text
, nous le réinitialisons donc pointer
pour 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: none
par défaut. Empruntant une idée à PureCSS , nous améliorons cette valeur par défaut en [hidden] { display: none !important; }
évitant qu'elle display
ne 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 display
des éléments.
Pour simplement basculer la visibilité d'un élément, ce qui signifie qu'il display
n'est pas modifié et que l'élément peut toujours affecter le flux du document, utilisez la .invisible
classe à la place.