Skip to main content Skip ad navigationem soUicitudo
Check
in English

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

Hic sunt nostrae normae et rationes eligendae quae in Reboot delendi sunt:

  • Renova in quibusdam valoribus defaltis navigatri ut rems loco ems pro scalabili componentium spatio utatur.
  • Fuge margin-top. Orae verticales collabi possunt, eventus inopinatos cedentes. Potius tamen una directio marginsimplicioris mentis exemplar est.
  • Ad faciliora per magnitudinum fabricam scandendo, elementa scandala rems pro margins uti debent.
  • Serva declarationes fontproprietatum relatarum ad minimum, utendo inheritquoties fieri potest.

CSS variables

Additur in v5.2.0

Cum v5.1.1 signavimus @importper omnes fasciculos nostros CSS fasciculos ( inclusos bootstrap.css, bootstrap-reboot.csset bootstrap-grid.css) includendo _root.scss. Hoc addit :rootgradu CSS variabiles ad omnes fasciculos, quotcumque in illo fasciculo adhibentur. Ultimo Bootstrap 5 plus CSS variabiles super tempus additas videre perget , quo plus realitatis temporis customizationis sine necessitate ut Sass semper recompensare perget. Accessus noster est ad nostrum principium Sass variabiles sumendum et in CSS variabiles transformandos. Hoc modo, etsi variabilibus CSS non uteris, tamen omnem potestatem Sass habes. Hoc est adhuc in- fectum et tempus erit ad plene peragendum.

Exempli gratia: has :rootCSS variabiles pro <body>stylis communibus considera;

  @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};
  

In praxi illae variabiles tunc applicantur in Reboot sicut sic:

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
}

Quod permittit ut custumas reales temporis facias quamvis libet:

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

Page defaltis

Elementa <html>et <body>elementa renovantur ad defaltam longinquam paginam melioribus praebendam. Specialius:

  • In box-sizingomni elemento - quod comprehendit *::beforeet *::after, ita in universum collocatur border-box. Hoc efficit ut indicata latitudine elementi numquam excederet propter Nullam vel terminum.
    • Nulla basis font-sizedeclaratur in <html>, sed 16pxponitur (default navigatri). font-size: 1remapplicatur <body>ad faciliorem responsivam typus-scalificationem per media quaesita, servatis optionibus usoris ac faciliorem aditum praestandi. Hic defaltus navigatro opprimi potest modificatione $font-size-rootvariabili.
  • <body>Item ponit globalem , font-family, font-weight, line-heightet color. Hoc posterius quibusdam elementis formantibus consequitur ne font repugnantia.
  • Pro salute, <body>declaravit background-colordefaltam #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,
  // 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;

Nota quod, quia fons acervus includit fontes emoji, multae notae communes/dingbat Unicode reddentur sicut pictographae multicolores. Eorum species variabit, secundum stylum in navigatro/platformi indigeni fontis emoji, et nullis colorstylis CSS afficiuntur.

Id font-familyapplicatum est ad <body>globally hereditario facto per Bootstrap. Ad globalem font-family, renovationem $font-family-baseet ad Bootstrap mutandas.

Capitula et paragraphi

Omnia elementa petere, eg, <h1>et <p>reset ut margin-topremotum est. Adiecerunt margin-bottom: .5remcapita et paragraphos margin-bottom: 1rempro 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

Horizontalis praecepta

Vestibulum <hr>elementum dictum efficitur. Similia defaltis navigandi, <hr>s via nominantur , border-topdefaltam habent opacity: .25et automatice eorum viam possidebunt , incluso cum per parentem positum est. Mutari possunt cum utilitate textu, confinio et opacitate.border-colorcolorcolor





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

Lists

Omnes tabulae — <ul>, <ol>et — removent et a . Lists nested non habent . Etiam in et elementum reset.<dl>margin-topmargin-bottom: 1remmargin-bottompadding-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
  1. Hic est index ordinatus
  2. Cum paucis items album
  3. Non est idem vultus altiore
  4. Ut prior album inordinatum

Simplicior enim dictio, perspicua hierarchia, et melius spatiorum, descriptiones tabulae renovatae sunt margins. <dd>s reset margin-leftatque 0add 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 huius alterius vocabuli.

Inline codice

Wrap inline excerpta of code with <code>. Vide ut uncis angulus HTML evadat.

Exempli gratia <section>debet inlinere ut inlinere.
html
For example, <code>&lt;section&gt;</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-topet usui suo .remmargin-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>

Variabilium

Ad indicandas variabiles pro elemento utuntur <var>.

y = m x + b
html
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

User input

Utere <kbd>ad indicandum initus quod typice intravit per tincidunt.

Ad directoria flectendum, genus cdnomen indicem secuta est.
Recensere occasus, torcular 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>

Sample output

Ad demonstrandum specimen output ex programmatis programma utendum <samp>.

Hic textus a programmate computatorio output exempli causa tractandus est.
html
<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 .tableclasse .

Hoc est exemplum tabulae, et haec est captivus ad contenta describenda.
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
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>

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 positi display: inline-blockut sinant marginapplicari.
  • <input>s, <select>s, <textarea>s, <button>s plerumque a Normalize appellati sunt, sed Reboot removet marginet occidit line-height: inheritetiam.
  • <textarea>s modo modificantur ad perpendiculum resizable sicut horizontalis resizingas saepe paginam extensionis "rumpit".
  • <button>s et <input>conjunctionem elementa habent cursor: pointercum :not(:disabled).

Hae mutationes et plura infra demonstrantur.

Exemplum legend

100

Date & color input support

Meminerint date initus non plene ab omnibus navigatoribus sustentari, nempe Safari.

Indicium in bullarum

Reboot includit amplificationem pro role="button"mutandi cursorem default ad pointer. Adde hoc attributum elementis ad auxilium indicandum elementa interactiva. Munus hoc elementis necessarium non est , quae mutationem <button>propriam obtinent.cursor

Non elementum felis
html
<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-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
[email protected]

Blockquote

Defalta marginstipendiorum est 1em 40px, sic reponimus id ad 0 0 1remaliquid 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.

Abbreviatio elementum HTML .

Summarium

Defalta cursorsummatim est text, sic reset ut pointerdeferat 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: noneper 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]non compatitur jQuery $(...).hide()et $(...).show()modos. Non ergo nunc maxime commendamus [hidden]in aliis technicis technicis tradendis displayelementorum.

Ad visibilitatem modo toggle elementum, quod significatio eius displaynon modificatur et elementum potest adhuc fluxum documenti afficere, genere .invisibleloco uti .