Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem by massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem by massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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 .

Beskriuwingslisten: In beskriuwingslist is perfekt foar it definiearjen fan termen.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante.

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 de stream fan it dokumint kin beynfloedzje, brûk dan de .invisibleklasse ynstee.