Reboot

Reboot, in samling elemint-spesifike CSS-feroarings yn ien bestân, kickstart Bootstrap om in elegante, konsekwinte en ienfâldige basisline te leverjen om op te bouwen.

Oanpak

Reboot bout op Normalize, en leveret in protte HTML-eleminten mei wat eigensinnige stilen mei allinich elemintselektors. Oanfoljende styling wurdt allinich dien mei klassen. Bygelyks, wy reboote guon <table>stilen foar in ienfâldiger baseline en letter jouwe .table, .table-bordered, en mear.

Hjir binne ús rjochtlinen en redenen foar it kiezen wat te oerskriuwen yn Reboot:

Update guon browser-standertwearden om rems te brûken ynstee fan ems foar skaalbere komponint-ôfstân.
Avoid margin-top. Fertikale marzjes kinne ynstoarte, wat ûnferwachte resultaten opleverje. Noch wichtiger, in inkele rjochting fan marginis in ienfâldiger mentale model.
Foar makliker skaalfergrutting oer apparaatgrutte moatte blokeleminten rems brûke foar margins.
Hâld deklaraasjes fan font-relatearre eigenskippen op in minimum, brûk inheritwannear mooglik.

Side standerts

De <html>en <body>eleminten wurde bywurke om bettere side-wide standerts te leverjen. Mear spesifyk:

De box-sizingis globaal ynsteld op elk elemint-ynklusyf *::beforeen *::after, oan border-box. Dit soarget derfoar dat de opjûne breedte fan elemint wurdt nea oerskreden fanwege padding of grins.
Gjin basis font-sizewurdt ferklearre op de <html>, mar 16pxwurdt oannommen (de browser standert). font-size: 1remwurdt tapast op 'e <body>foar maklik responsive type-skaalfergrutting fia mediafragen, wylst de brûkersfoarkarren respektearje en in mear tagonklike oanpak garandearje.
De <body>set ek in globale font-family, line-height, en text-align. Dit wurdt letter erfd troch guon foarmeleminten om lettertype-ynkonsistinsjes foar te kommen.
Foar feiligens <body>hat de in ferklearre background-color, standert op #fff.

Native lettertypestapel

De standert weblettertypen (Helvetica Neue, Helvetica en Arial) binne fallen yn Bootstrap 4 en ferfongen troch in "native font stack" foar optimale tekstwerjefte op elk apparaat en OS. Lês mear oer native font stacks yn dit Smashing Magazine artikel .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

Tink derom dat om't de lettertypestapel emoji-lettertypen omfettet, sille in protte mienskiplike symboal / dingbat Unicode-karakters wurde werjûn as mearkleurige piktogrammen. Har uterlik sil fariearje, ôfhinklik fan 'e styl brûkt yn' e native emoji-lettertype fan 'e browser/platfoarm, en se wurde net beynfloede troch CSS- colorstilen.

Dit font-familywurdt tapast op de <body>en automatysk erfde globaal hiele Bootstrap. Om de globale font-family, bywurkje $font-family-baseen opnij kompilearje Bootstrap.

Kopteksten en paragrafen

Alle koptekst-eleminten - bgl. <h1>- en <p>wurde weromset om har te margin-topferwiderjen. Koppen hawwe margin-bottom: .5remtafoege en paragrafen margin-bottom: 1remfoar maklike ôfstân.

Heading	Foarbyld
`<h1></h1>`	h1. Bootstrap heading
`<h2></h2>`	h2. Bootstrap heading
`<h3></h3>`	h3. Bootstrap heading
`<h4></h4>`	h4. Bootstrap heading
`<h5></h5>`	h5. Bootstrap heading
`<h6></h6>`	h6. Bootstrap heading

Listen

Alle listen <ul>- , <ol>, en <dl>- hawwe har margin-topfuortsmiten en in margin-bottom: 1rem. Nested listen hawwe gjin margin-bottom.

Alle listen hawwe har boppemarge fuortsmiten
En har ûnderste marzje normalisearre
Nested listen hawwe gjin ûnderkant marzje
- Op dizze manier hawwe se in mear evenredich uterlik
- Benammen as folge troch mear list items
De linker padding is ek weromset

Hjir is in bestelde list
Mei in pear list items
It hat deselde algemiene útstrieling
As de foarige unordered list

Foar ienfâldiger styling, dúdlike hiërargy en bettere spacing, beskriuwingslisten hawwe bywurke margins. <dd>s weromsette margin-leftnei 0en tafoegje margin-bottom: .5rem. <dt>s binne fet .

Beskriuwing listen: In beskriuwingslist is perfekt foar it definiearjen fan termen.
Term: Definysje foar de term.; In twadde definysje foar deselde term.
In oare term: Definysje foar dizze oare term.

Foaropmakke tekst

It <pre>elemint wurdt weromset om syn te ferwiderjen margin-topen remienheden te brûken foar har margin-bottom.

.example-elemint {
  marzje-ûnder: 1rem;
}

Tabellen

Tafels wurde in bytsje oanpast oan styl <caption>s, collapse grinzen, en soargje konsekwint text-alignhiele. Oanfoljende feroarings foar grinzen, padding, en mear komme mei de .tableklasse .

Dit is in foarbyldtabel, en dit is syn titel om de ynhâld te beskriuwen.
Tabel heading	Tabel heading	Tabel heading	Tabel heading
Tabel sel	Tabel sel	Tabel sel	Tabel sel
Tabel sel	Tabel sel	Tabel sel	Tabel sel
Tabel sel	Tabel sel	Tabel sel	Tabel sel

Formulieren

Ferskate foarmeleminten binne opnij opstarte foar ienfâldiger basisstilen. Hjir binne guon fan 'e meast opfallende feroarings:

<fieldset>s hawwe gjin grinzen, padding, of marzje sadat se kinne maklik brûkt wurde as wrappers foar yndividuele ynput of groepen fan ynput.
<legend>s, lykas fjildsets, binne ek opnij ynsteld om te sjen as in koptekst fan soarten.
<label>s binne ynsteld om display: inline-blockte tastean marginwurde tapast.
<input>s, <select>s, <textarea>s, en <button>s wurde meast oanpakt troch Normalize, mar Reboot ferwideret harren marginen sets line-height: inherit, te.
<textarea>s wurde wizige om allinich fertikaal te feroarjen, om't horizontale grutte feroaring faak de side-yndieling "brekt".
<button>s en <input>knop eleminten hawwe cursor: pointerwannear :not(:disabled).

Dizze wizigingen, en mear, wurde hjirûnder oantoand.

Oanwizers op knoppen

Reboot befettet in ferbettering foar role="button"it feroarjen fan de standert rinnerke nei pointer. Foegje dit attribút ta oan eleminten om te helpen oan te jaan dat eleminten ynteraktyf binne. Dizze rol is net nedich foar <button>eleminten dy't har eigen cursorferoaring krije.

Non-knop elemint knop

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

Misc eleminten

Adres

It <address>elemint wurdt bywurke om de browser standert werom te setten font-stylefan italicnei normal. line-heightis no ek erfd, en margin-bottom: 1remis tafoege. <address>s binne foar it presintearjen fan kontaktynformaasje foar de neiste foarâlder (of in hiele wurk). Bewarje opmaak troch rigels te einigjen mei <br>.

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

Folsleine namme
[email protected]

Blockquote

De standert marginop blockquotes is 1em 40px, dus wy sette dat werom nei 0 0 1remfoar wat mear konsistint mei oare eleminten.

In bekend sitaat, befette yn in blokquote-elemint.

Immen ferneamd yn Boarne Titel

Inline eleminten

It <abbr>elemint ûntfangt basisstyling om it opfallend te meitsjen tusken alineatekst.

Nulla attr vitae elit libero, in pharetra augue.

Gearfetting

De standert cursorop gearfetting is text, dus wy sette dat werom nei pointerom oer te bringen dat it elemint kin wurde ynteraksje troch derop te klikken.

Guon details

Mear ynformaasje oer de details.

Noch mear details

Hjir binne noch mear details oer de details.

HTML5 `[hidden]`attribút

HTML5 foeget in nij globaal attribút mei de namme ta[hidden] , dat wurdt stylearre as display: nonestandert. Troch in idee te lienjen fan PureCSS , ferbetterje wy dizze standert troch te meitsjen [hidden] { display: none !important; }om te helpen foar te kommen dat it per displayongeluk oerskreaun wurdt. Hoewol [hidden]it net natuerlik wurdt stipe troch IE10, komt de eksplisite ferklearring yn ús CSS om dat probleem.

<input type="text" hidden>

jQuery ynkompatibiliteit

[hidden]is net kompatibel mei jQuery's $(...).hide()en $(...).show()metoaden. Dêrom ûnderskriuwe wy op it stuit net foaral [hidden]oare techniken foar it behearen displayfan eleminten.

Om gewoan de sichtberens fan in elemint te wikseljen, wat betsjuttet dat it displaynet wizige is en it elemint noch kin beynfloedzje de stream fan it dokumint, brûk de .invisibleklasse ynstee.