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. Cette valeur par défaut du navigateur peut être remplacée en modifiant la$font-size-root
variable.
- Aucune base
- Le
<body>
définit également un globalfont-family
,font-weight
,line-height
etcolor
. 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,
// 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
. Nous avons également réinitialisé les éléments padding-left
on <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 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.
Code en ligne
Enveloppez des extraits de code en ligne avec <code>
. Assurez-vous d'échapper les crochets angulaires HTML.
<section>
doit être enveloppé en ligne.
For example, <code><section></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-top
et utiliser rem
des unités pour son margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
variables
Pour indiquer les variables, utilisez la <var>
balise.
<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 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 <samp>
balise.
<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-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.
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 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.
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.
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.
<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.