Neistarten

Reboot, eng Sammlung vun elementspezifesche CSS Ännerungen an enger eenzeger Datei, kickstart Bootstrap fir eng elegant, konsequent an einfach Basis ze bidden fir op ze bauen.

Op dëser Säit

Approche

Reboot baut op Normalize, liwwert vill HTML Elementer mat e bëssen Meenungsäusserungen mat nëmmen Elementselektoren. Zousätzlech Styling gëtt nëmme mat Klassen gemaach. Zum Beispill restarte mir e puer <table>Stiler fir eng méi einfach Baseline a bidden spéider .table, .table-bordered, a méi.

Hei sinn eis Richtlinnen a Grënn fir ze wielen wat am Restart ze iwwerschreiden:

Update e puer Browser Standardwäerter fir s ze benotzen remamplaz ems fir skalierbar Komponentabstand.
Vermeiden margin-top. Vertikal Margen kënnen zesummeklappen, onerwaart Resultater ginn. Méi wichteg awer, eng eenzeg Richtung marginass e méi einfache mentale Modell.
Fir méi einfach Skaléieren iwwer Apparatgréissten, solle Blockelementer rems fir margins benotzen.
Halt Deklaratioune vun font-relatéierten Eegeschafte op e Minimum, benotzt inheritwann ëmmer méiglech.

CSS Verännerlechen

Dobäi an v5.2.0

Mat v5.1.1 hu mir eis erfuerderlech @imports iwwer all eis CSS Bündel standardiséiert (inklusiv bootstrap.css, bootstrap-reboot.css, an bootstrap-grid.css) fir _root.scss. Dëst füügt :rootNiveau CSS Variablen un all Bündel un, egal wéi vill vun hinnen an deem Bündel benotzt ginn. Schlussendlech wäert Bootstrap 5 weiderhin méi CSS Variabelen iwwer Zäit bäigefüügt gesinn, fir méi Echtzäit Personnalisatioun ze bidden ouni de Besoin ëmmer Sass nei ze kompiléieren. Eis Approche ass eis Quell Sass Variablen ze huelen an se an CSS Variablen ze transforméieren. Op déi Manéier, och wann Dir keng CSS Variablen benotzt, hutt Dir ëmmer nach all d'Kraaft vu Sass. Dëst ass nach ëmmer amgaang a wäert Zäit daueren fir voll ëmzesetzen.

Zum Beispill, betruecht dës :rootCSS Variablen fir allgemeng <body>Stiler:

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

An der Praxis ginn dës Variablen dann am Reboot applizéiert wéi sou:

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
}

Wat Iech erlaabt Echtzäit Personnalisatiounen ze maachen wéi Dir wëllt:

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

Säit Defaults

D' <html>an <body>Elementer ginn aktualiséiert fir besser Säitbreet Defaults ze bidden. Méi spezifesch:

Den box-sizingass weltwäit op all Element gesat - inklusiv *::beforean *::after, zu border-box. Dëst garantéiert datt d'deklaréiert Breet vum Element ni iwwerschratt gëtt wéinst Padding oder Grenz.
- Keng Basis font-sizegëtt op der deklaréiert <html>, awer 16pxgëtt ugeholl (de Browser Standard). font-size: 1remass applizéiert op der <body>fir einfach reaktiounsfäeger Type-Scaling iwwer Medien Ufroen iwwerdeems Benotzer Virléiften Respekt an eng méi zougänglech Approche assuréieren. Dëse Browser-Default kann iwwerschratt ginn andeems Dir d' $font-size-rootVariabel ännert.
De <body>setzt och eng global font-family, font-weight, line-height, an color. Dëst gëtt spéider vun e puer Formelementer ierflecher fir Schrëftinkonsistenz ze vermeiden.
Fir d'Sécherheet huet den <body>en deklaréierten background-color, defaulting op #fff.

Gebierteg Schrëft Stack

Bootstrap benotzt en "native font stack" oder "system font stack" fir eng optimal Text Rendering op all Apparat an OS. Dës System Schrëften goufen speziell mat haut d'Apparater am Kapp entworf, mat verbessert Render- op Schiirme, Variabel Schrëft Ënnerstëtzung, a méi. Liest méi iwwer gebierteg Schrëftstacks an dësem Smashing Magazine Artikel .

$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;

Bedenkt datt well de Schrëftstapel Emoji Schrëften enthält, vill gemeinsam Symbol / dingbat Unicode Charaktere ginn als multicolored Piktogramme gemaach. Hir Erscheinung wäert variéieren, jee no dem Stil, deen an der gebierteg Emoji Schrëft vum Browser/Plattform benotzt gëtt, a si ginn net vun all CSS colorStiler beaflosst.

Dëst font-familygëtt op d' <body>an automatesch ierflecher weltwäit uechter Bootstrap applizéiert. Fir de globalen ze wiesselen font-family, aktualiséieren $font-family-basean nei kompiléieren Bootstrap.

Rubriken an Abschnitter

All Rubrik Elementer - zB - a ginn <h1>zréckgesat <p>fir hir margin-topewechzehuelen. Rubriken hunn margin-bottom: .5rembäigefüügt a Paragrafen margin-bottom: 1remfir einfach Abstand.

Rubrik	Beispill
`<h1></h1>`	h1. Bootstrap Rubrik
`<h2></h2>`	h2 vun. Bootstrap Rubrik
`<h3></h3>`	h3 vun. Bootstrap Rubrik
`<h4></h4>`	h4 vun. Bootstrap Rubrik
`<h5></h5>`	h5. Bootstrap Rubrik
`<h6></h6>`	h6. Bootstrap Rubrik

Horizontal Regelen

D' <hr>Element gouf vereinfacht. Ähnlech wéi Browser-Defaults, <hr>s sinn stylesch iwwer border-top, hunn e Standard opacity: .25, an ierwen automatesch hir border-colorvia color, inklusiv wann coloriwwer den Elterendeel gesat gëtt. Si kënne mat Text, Grenz, an Opazitéit Utilities geännert ginn.

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

Lëschten

All Lëschte <ul>- , <ol>, an <dl>- hunn hir margin-topewechgeholl an eng margin-bottom: 1rem. Nestéiert Lëschte hu keng margin-bottom. Mir hunn och den padding-leftOn <ul>an <ol>Elementer zréckgesat.

All Lëschte hunn hiren Topmarge geläscht
An hir ënnescht Margin normaliséiert
Nestéiert Lëschte hu keng ënnescht Marge
- Esou hunn se e méi gläichméisseg Erscheinungsbild
- Besonnesch wann gefollegt vu méi Lëscht Artikelen
Déi lénks Polsterung ass och zréckgesat ginn

Hei ass eng bestallt Lëscht
Mat e puer Lëscht Elementer
Et huet déiselwecht Gesamtoptik
Wéi d'virdrun unordered Lëscht

Fir méi einfach Styling, kloer Hierarchie, a besser Abstand, Beschreiwung Lëschte aktualiséiert margins. <dd>s zréckgesat margin-leftan 0addéieren margin-bottom: .5rem. <dt>s sinn fett .

Beschreiwung Lëschte: Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
Begrëff: Definitioun fir de Begrëff.; Eng zweet Definitioun fir dee selwechte Begrëff.
En anere Begrëff: Definitioun fir dësen anere Begrëff.

Inline Code

Wrap inline Snippets vum Code mat <code>. Vergewëssert Iech HTML Wénkel Klammeren ze entkommen.

Zum Beispill, <section>soll als inline gewéckelt ginn.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Code Blocks

Benotzt <pre>s fir verschidde Zeilen vum Code. Nach eng Kéier, gitt sécher all Wénkel Klammern am Code ze entkommen fir richteg Rendering. D' <pre>Element gëtt zréckgesat fir seng ze läschen margin-topan remEenheeten fir seng margin-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>

Variablen

Fir Variabelen ze weisen, benotzt den <var>Tag.

y = m x + b

html

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

Benotzer Input

Benotzt den <kbd>Input fir unzeginn deen normalerweis iwwer Tastatur aginn ass.

Fir Verzeichnisser ze wiesselen, Typ cdgefollegt vum Numm vum Verzeichnis.
Fir Astellungen z'änneren, dréckt 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>

Prouf Ausgang

Fir d'Proufausgang vun engem Programm unzeginn, benotzt den <samp>Tag.

Dësen Text soll als Probeausgab vun engem Computerprogramm behandelt ginn.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Dëscher

Dëscher sinn liicht ze Stil s ugepasst <caption>, Zesummebroch Grenzen, a suergen konsequent text-alignuechter. Zousätzlech Ännerungen fir Grenzen, Polsterung a méi kommen mat der .tableKlass .

Dëst ass e Beispill Dësch, an dëst ass seng Iwwerschrëft fir den Inhalt ze beschreiwen.
Dësch Rubrik	Dësch Rubrik	Dësch Rubrik	Dësch Rubrik
Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell
Dësch Zell	Dësch Zell	Dësch Zell	Dësch Zell

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>

Formen

Verschidde Formelementer goufen nei gestart fir méi einfach Basisstiler. Hei sinn e puer vun de bedeitendsten Ännerungen:

<fieldset>s hu keng Grenzen, Polsterung oder Margin, sou datt se einfach als Wrapper fir eenzel Inputen oder Gruppen vun Inputen benotzt kënne ginn.
<legend>s, wéi fieldsets, goufen och restyled ginn als Rubrik vun Zorte ugewisen.
<label>s sinn agestallt display: inline-blockfir ze erlaben marginapplizéiert ginn.
<input>s, <select>s, <textarea>s, an <button>s gi meeschtens vun Normalize adresséiert, awer Reboot läscht hir margina setzt line-height: inheritoch.
<textarea>s ginn geännert fir nëmme vertikal ze änneren, well d'horizontal Gréisst änneren dacks d'Säitlayout "brach".
<button>s an <input>Knäppchen Elementer hunn cursor: pointerwann :not(:disabled).

Dës Ännerungen, a méi, ginn hei ënnen gewisen.

Datum & Faarf Input Ënnerstëtzung

Denkt drun datt d'Datuminput net voll vun all Browser ënnerstëtzt gëtt, nämlech Safari.

Pointer op Knäppercher

Reboot enthält eng Verbesserung fir role="button"den Default Cursor ze änneren pointer. Füügt dëst Attribut un Elementer fir ze hëllefen ze weisen datt Elementer interaktiv sinn. Dës Roll ass net néideg fir <button>Elementer, déi hir eege cursorÄnnerung kréien.

Non-Knäppchen Element Knäppchen

html

<span role="button" tabindex="0">Non-button element button</span>

Verschidden Elementer

Adress

D' <address>Element gëtt aktualiséiert fir de Browser Standard font-stylevun italicop normal. line-heightass och elo ierflecher, a margin-bottom: 1remgouf dobäi. <address>s si fir d'Presentatioun vun Kontaktinformatioune fir den nooste Vorfahren (oder e ganze Kierper vun der Aarbecht). Erhaalen d'Formatéierung andeems d'Linnen mat <br>.

Twitter Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Voll Numm
[email protected]

Blockquote

De Standard marginop Blockquotes ass 1em 40px, sou datt mir dat zrécksetzen 0 0 1remfir eppes méi konsequent mat aneren Elementer.

E bekannten Zitat, an engem Blockquote Element enthale.

Een berühmten am Source Titel

Inline Elementer

D' <abbr>Element kritt Basis Styling fir et ënner Paragraftext erauszestellen.

D' HTML Ofkierzung Element.

Resumé

De Standard cursoram Resumé ass text, sou datt mir dat zrécksetzen fir pointerze vermëttelen datt mat dem Element interagéiert ka ginn andeems Dir op klickt.

E puer Detailer

Méi Informatioun iwwer d'Detailer.

Nach méi Detailer

Hei sinn nach méi Detailer iwwer d'Detailer.

HTML5 `[hidden]`Attribut

HTML5 füügt en neit globalt Attribut mam Numm[hidden] , deen als display: noneStandard stiléiert ass. Eng Iddi vu PureCSS léinen , mir verbesseren dës Default andeems [hidden] { display: none !important; }mir hëllefen ze verhënneren displaydatt et zoufälleg iwwerschratt gëtt.

<input type="text" hidden>

jQuery Inkompatibilitéit

[hidden]ass net kompatibel mat jQuery's $(...).hide()a $(...).show()Methoden. Dofir ënnerstëtzen mir de Moment net besonnesch [hidden]aner Technike fir d' displayElementer ze managen.

Fir nëmmen d'Visibilitéit vun engem Element ze wiesselen, dat heescht datt displayet net geännert gëtt an d'Element kann nach ëmmer de Flux vum Dokument beaflossen, benotzt d' .invisibleKlass amplaz.

Neistarten

Approche

CSS Verännerlechen

Säit Defaults

Gebierteg Schrëft Stack

Rubriken an Abschnitter

Horizontal Regelen

Lëschten

Inline Code

Code Blocks

Variablen

Benotzer Input

Prouf Ausgang

Dëscher

Formen

Datum & Faarf Input Ënnerstëtzung

Pointer op Knäppercher

Verschidden Elementer

Adress

Blockquote

Inline Elementer

Resumé

HTML5 [hidden]Attribut

jQuery Inkompatibilitéit

HTML5 `[hidden]`Attribut