in English

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.

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,
  // 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;

Bedenkt datt well de Schrëftstapel Emoji Schrëften enthält, vill gemeinsam Symbol / dingbat Unicode Charaktere ginn als multifaarweg 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

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.

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>

<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

<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 + ,

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.

<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

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.

Beispill Legend

Beispill Input

Beispill E-Mail

Beispill Telefon

Beispill URL

Beispill Zuel

Beispill Sich

Beispill Rei

Beispill Fichier Input

Beispill wielt

Check dës Checkbox

Déi éischt Optioun ass dat an dat Optioun zwee ass soss eppes wat och super laang ass fir d'Verpakung vun dësen ausgefalene Formkontrollen ze demonstréieren. Optioun dräi ass behënnert

Beispill Textberäich

Beispill Datum

Beispill Zäit

Beispill Passwuert

Beispill datetime-lokal

Beispill Woch

Beispill Mount

Beispill Faarf

Beispill Ausgang 100

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

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

Nulla attr vitae elit libero, a pharetra augue.

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.