Reboot
Reboot, collectio elementorum specialium CSS mutationum in uno fasciculo, calcitrare Bootstrap ut elegantem, constantem et simplicem basin ad aedificandum praebeat.
Accessus
Reboot super Normalize aedificat, multa HTML elementa praebens stylis aliquantum opinionatis selectoribus tantum elementis. Additional stylus non fit nisi cum generibus. Exempli causa, nonnulla <table>
genera simpliciori baseline reboo et postea providemus .table
, .table-bordered
et plura.
Hic sunt nostrae normae et rationes eligendae quae in Reboot delendi sunt:
- Renova in quibusdam valoribus defaltis navigatri ut
rem
s locoem
s pro scalabili componentium spatio utatur. - Fuge
margin-top
. Orae verticales collabi possunt, eventus inopinatos cedentes. Potius tamen una directiomargin
simplicioris mentis exemplar est. - Ad faciliora per magnitudinum fabricam scandendo, elementa scandala
rem
s promargin
s uti debent. - Serva declarationes
font
proprietatum relatarum ad minimum, utendoinherit
quoties fieri potest.
CSS variables
Additur in v5.1.1
Cum v5.1.1, @import
per omnes fasciculos CSS nostros requisiti (inclusa bootstrap.css
, bootstrap-reboot.css
et bootstrap-grid.css
includere _root.scss
. :root
CSS variabiles omnes fasciculos adiungit, quotcumque in illo fasciculo adhibentur. Ultimo Bootstrap 5 perget. vide plura variabiles CSS super tempus additae.
Page defaltis
Elementa <html>
et <body>
elementa renovantur ad defaltam longinquam paginam melioribus praebendam. Specialius:
- In
box-sizing
omni elemento - quod comprehendit*::before
et*::after
, ita in universum collocaturborder-box
. Hoc efficit ut indicata latitudine elementi numquam excederet propter Nullam vel terminum.- Nulla basis
font-size
declaratur in<html>
, sed16px
ponitur (default navigatri).font-size: 1rem
applicatur<body>
ad faciliorem responsivam typus-scalificationem per media quaesita, servatis optionibus usoris ac faciliorem aditum praestandi. Hic defaltus navigatro opprimi potest modificatione$font-size-root
variabili.
- Nulla basis
<body>
Item ponit globalem ,font-family
,font-weight
,line-height
etcolor
. Hoc posterius quibusdam elementis formantibus consequitur ne font repugnantia.- Pro salute,
<body>
declaravitbackground-color
defaltam#fff
.
Patria font acervus
Bootstrap utilitat "nativus fontis acervus" vel "ratio fontis acervus" pro optimo textu reddendo in omnem machinam et OS. Fontes systematis isti specie in cogitationibus hodiernis designati sunt, meliore reddendo in tegumenta, fonticuli variabili subsidio, et magis. Read more about native font acervos in this Smashing Magazine article .
$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;
Nota quod, quia fons acervus includit fontes emoji, multae notae communes/dingbat unicodes sicut pictographae multicolores reddentur. Eorum species variabit, secundum stylum in navigatro/platformi indigeni fontis emoji, et nullis color
stylis CSS afficiuntur.
Id font-family
applicatur ad <body>
globally hereditario facto per Bootstrap. Ad globalem font-family
, renovationem $font-family-base
et ad Bootstrap mutandas.
CSS variables
Sicut Bootstrap 5 maturescere pergit, magis ac magis stili cum CSS variabilibus aedificabuntur ut instrumentum quo plus realitatis temporis custodiatur, sine necessitate semper recompensandi Sass. Accessus noster est ad nostrum principium Sass variabiles sumendum et in CSS variabiles transformandos. Hoc modo, etiamsi variabilibus CSS non uteris, tamen omnem potestatem Sass habes. Hoc adhuc in- grediar et tempus plenius peragendi capiet.
Exempli gratia: has :root
CSS variabiles pro <body>
stylis communibus considera;
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
In praxi illae variabiles tunc applicantur in Reboot sicut sic:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Quod permittit ut custumas reales temporis facias quamvis libet:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Capitula et paragraphi
Omnia elementa petere, eg, <h1>
et <p>
reset ut margin-top
remotum est. Adiecerunt margin-bottom: .5rem
capita et paragraphos margin-bottom: 1rem
pro facili spatio.
Venantius Fortunatus | Exemplum |
---|---|
<h1></h1> |
h1. Bootstrap capite |
<h2></h2> |
h2. Bootstrap capite |
<h3></h3> |
h3. Bootstrap capite |
<h4></h4> |
h4. Bootstrap capite |
<h5></h5> |
h5. Bootstrap capite |
<h6></h6> |
h6. Bootstrap capite |
Lists
Omnes tabulae — <ul>
, <ol>
et — removent et a . Lists nested non habent . Etiam in et elementum reset.<dl>
margin-top
margin-bottom: 1rem
margin-bottom
padding-left
<ul>
<ol>
- Omnes tabulae in summo margine removentur
- Et in fundo margine normalized
- Solum margine lists non nested
- Hoc modo habent speciem magis
- Praesertim cum sequitur plus album items
- Nullam etiam sinistram reset
- Hic est index ordinatus
- Cum paucis items album
- Non est idem vultus altiore
- Ut prior album inordinatum
Simplicior enim dictio, perspicua hierarchia, et melius spatiorum, descriptiones tabulae renovatae sunt margin
s. <dd>
s reset margin-left
atque 0
add margin-bottom: .5rem
. <dt>
s notabuntur .
- Descriptio tabulae
- Descriptio perfectus est ad definiendum terminos.
- Term
- Definitio pro termino.
- Secunda definitio pro eodem termino.
- Alius terminus
- Definitio huic alio vocabulo.
Inline codice
Wrap inline excerpta of code with <code>
. Vide ut uncis angulus HTML evadat.
<section>
inlinere debet.
For example, <code><section></code> should be wrapped as inline.
Code caudices
Utere <pre>
s pluribus lineis codicis. Iterum, cave ne quis angulus uncis in codice debitae reddendae. Elementum est <pre>
reset ut unitates suas removeat margin-top
et usui suo .rem
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>
Variabilium
Ad indicandas variabiles pro elemento utuntur <var>
.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
User input
Utere <kbd>
ad indicandum initus quod typice intravit per tincidunt.
Recensere occasus, torcular 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>
Sample output
Ad demonstrandum specimen output ex programmatis programma utendum <samp>
.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Tabulae
Tabulae styli <caption>
s modice adaequatae sunt, confinia collapsura, et per omnia consistent text-align
. Additae mutationes pro limitibus, padding, et plures veniunt cum .table
classe .
Mensa capite | Mensa capite | Mensa capite | Mensa capite |
---|---|---|---|
Mensa cellula | Mensa cellula | Mensa cellula | Mensa cellula |
Mensa cellula | Mensa cellula | Mensa cellula | Mensa cellula |
Mensa cellula | Mensa cellula | Mensa cellula | Mensa cellula |
Formae
Elementa variae formae simplicioribus stylis basi recalcitratae sunt. Hic notabiles sunt nonnullae mutationes;
<fieldset>
s fines, Nullam vel marginem non habent, ut involucris facile adhiberi possint pro singulis inputibus vel inputibus coetibus.<legend>
s, sicuti fieldets, etiam lepide demonstrati proponendum.<label>
s positidisplay: inline-block
ut sinantmargin
applicari.<input>
s,<select>
s,<textarea>
s,<button>
s plerumque a Normalize appellati sunt, sed Reboot removetmargin
et occiditline-height: inherit
etiam.<textarea>
s modo modificantur ad perpendiculum resizable sicut horizontalis resizingas saepe paginam extensionis "rumpit".<button>
s et<input>
conjunctionem elementa habentcursor: pointer
cum:not(:disabled)
.
Hae mutationes et plura infra demonstrantur.
Date & color input support
Meminerint date initus non plene ab omnibus navigatoribus sustentari, nempe Safari.
Indicium in bullarum
Reboot includit amplificationem pro role="button"
mutando cursorem default ad pointer
. Adde hoc attributum elementorum ope elementa interactiva indicantem. Munus hoc elementis necessarium non est , quae mutationem <button>
propriam obtinent.cursor
<span role="button" tabindex="0">Non-button element button</span>
Misc elementa
Oratio
Elementum renovatum est <address>
ad reset ut pasco defaltam . nunc quoque hereditarium est, et adiectum est. s sunt ad informationes contactus exhibendas pro antecessore proximo (vel totum corpus operis). Conserva formatting ending lineas cum .font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
[email protected]
Blockquote
Defalta margin
in impedimentis stipatorum est 1em 40px
, ut reset id ad 0 0 1rem
aliquid magis consentaneum cum aliis elementis.
Nota auctoritas, in clausula elemento contenta.
In Source Title aliquis celebre
Inline elementis
Elementum stylam <abbr>
fundamentalem recipit ut illud emineat inter paragraphum.
Summary
Defalta cursor
summatim est text
, sic reset ut pointer
deferat elementum strepitando in eo posse intercedere.
Quaedam singula
More info de singulis.
Etiam plura
Hic etiam plura de singulis.
HTML5 [hidden]
attributum
HTML5 addit novum attributum globali nomine[hidden]
, quod display: none
per defaltam appellatur. Ideam de PureCSS commodato , meliorem in hoc defectu emendamus, [hidden] { display: none !important; }
adiuvando impediendo quominus casualiter opprimatur display
.
<input type="text" hidden>
jQuery incompatibilitas
[hidden]
$(...).hide()
jQuery et $(...).show()
modos non compatitur . Non ergo nunc maxime commendamus [hidden]
in aliis technicis technicis tradendis display
elementorum.
Ad visibilitatem modo toggle elementum, quod significatio eius display
non modificatur et elementum potest adhuc fluxum documenti afficere, genere .invisible
loco uti .