Source

Perkraukite

Reboot, konkretiems elementams būdingų CSS pakeitimų rinkinys viename faile, paleiskite „Bootstrap“, kad būtų galima sukurti elegantišką, nuoseklų ir paprastą pagrindą.

metodas

Paleidimas iš naujo grindžiamas Normalizavimo funkcija, suteikiant daug HTML elementų, kurių stiliai yra šiek tiek apgalvoti, naudojant tik elementų parinkiklius. Papildomas stilius atliekamas tik su klasėmis. Pavyzdžiui, kai kuriuos <table>stilius paleidžiame iš naujo, kad būtų paprastesnė pradinė linija, o vėliau pateikiame .table, .table-bordered, ir daugiau.

Štai mūsų gairės ir priežastys, kodėl pasirenkate, ką pakeisti perkrovimo metu:

Atnaujinkite kai kurias naršyklės numatytąsias reikšmes, kad būtų naudojamas rems, o ne ems keičiamam komponentų tarpui.
Venkite margin-top. Vertikalios paraštės gali sugriūti ir duoti netikėtų rezultatų. Tačiau dar svarbiau, kad viena kryptis marginyra paprastesnis psichinis modelis.
Kad būtų lengviau keisti įrenginio dydžius, bloko elementuose s turėtų būti naudojamas rems margin.
Sumažinkite susijusių savybių deklaracijas font, naudokite, inheritkai tik įmanoma.

Puslapio numatytieji nustatymai

Elementai <html>ir <body>atnaujinami, kad būtų geresni viso puslapio numatytieji nustatymai. Konkrečiau:

Visame box-sizingpasaulyje nustatytas kiekvienam elementui, įskaitant *::beforeir *::after, į border-box. Tai užtikrina, kad deklaruotas elemento plotis niekada nebus viršytas dėl užpildymo ar kraštinės.
Jokia bazė font-sizenėra deklaruojama <html>, bet 16pxyra laikoma (naršyklės numatytoji reikšmė). font-size: 1remTaikoma <body>lengvai reaguojančiam tipo mastelio keitimui naudojant medijos užklausas, kartu atsižvelgiant į vartotojo nuostatas ir užtikrinant labiau prieinamą metodą.
Taip <body>pat nustatomi visuotiniai font-family, line-heightir text-align. Tai vėliau paveldima kai kurių formos elementų, kad būtų išvengta šrifto neatitikimų.
Saugumo sumetimais <body>yra paskelbtas background-color, pagal nutylėjimą #fff.

Vietinis šriftų krūva

Numatytieji žiniatinklio šriftai („Helvetica Neue“, „Helvetica“ ir „Arial“) buvo pašalinti „Bootstrap 4“ ir pakeisti „savuoju šriftų krūva“, kad tekstas būtų optimaliai atvaizduojamas kiekviename įrenginyje ir OS. Skaitykite daugiau apie vietinių šriftų krūvas šiame Smashing Magazine straipsnyje .

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

Tai font-familytaikoma <body>ir automatiškai paveldima visame pasaulyje visame „Bootstrap“. Norėdami perjungti visuotinį font-family, atnaujinkite $font-family-baseir iš naujo kompiliuokite Bootstrap.

Antraštės ir pastraipos

Visi antraštės elementai, pvz., <h1>ir <p>yra nustatomi iš naujo, kad būtų margin-toppašalinti. Pridėtos antraštės margin-bottom: .5remir pastraipos margin-bottom: 1rem, kad būtų lengviau išdėstyti tarpus.

Antraštė	Pavyzdys
`<h1></h1>`	h1. Bootstrap antraštė
`<h2></h2>`	h2. Bootstrap antraštė
`<h3></h3>`	h3. Bootstrap antraštė
`<h4></h4>`	h4. Bootstrap antraštė
`<h5></h5>`	h5. Bootstrap antraštė
`<h6></h6>`	h6. Bootstrap antraštė

Sąrašai

Visi sąrašai <ul>– , <ol>, ir <dl>– yra margin-toppašalinti ir margin-bottom: 1rem. Įdėtuose sąrašuose nėra margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem ir masa
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 ir masa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Siekiant paprastesnio stiliaus, aiškios hierarchijos ir geresnių tarpų, aprašymų sąrašai buvo atnaujinti margins. <dd>s iš naujo margin-leftnustatyti 0ir pridėti margin-bottom: .5rem. <dt>s yra paryškinti .

Aprašų sąrašai: Aprašų sąrašas puikiai tinka terminams apibrėžti.
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.

Iš anksto suformatuotas tekstas

Elementas <pre>nustatomas iš naujo, kad jis būtų pašalintas margin-topir būtų naudojami remjo vienetai margin-bottom.

.example-element {
  paraštė-apačia: 1rem;
}

Lentelės

Lentelės šiek tiek pakoreguotos pagal stilių <caption>s, sutraukiamos kraštinės ir užtikrinamas nuoseklumas text-align. Papildomi kraštinių, užpildymo ir kt. pakeitimai pateikiami su .tableklase .

Tai yra lentelės pavyzdys, o tai yra jos antraštė, apibūdinanti turinį.
Lentelės antraštė	Lentelės antraštė	Lentelės antraštė	Lentelės antraštė
Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis
Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis
Lentelės langelis	Lentelės langelis	Lentelės langelis	Lentelės langelis

Formos

Įvairūs formos elementai buvo perkrauti paprastesniems baziniams stiliams. Štai keletas ryškiausių pakeitimų:

<fieldset>s neturi kraštinių, užpildymo ar paraštės, todėl juos galima lengvai naudoti kaip atskirų įvesties ar įvesties grupių įvynioklius.
<legend>s, kaip ir laukų rinkiniai, taip pat buvo pertvarkyti, kad būtų rodomi kaip antraštė.
<label>s yra nustatyti, display: inline-blockkad marginbūtų galima taikyti.
<input>s, <select>s, <textarea>s ir <button>s dažniausiai sprendžia Normalizavimas, bet Reboot pašalina juos marginir nustato line-height: inherit.
<textarea>s yra modifikuojami, kad būtų galima keisti tik vertikaliai, nes horizontalus dydžio keitimas dažnai „pertraukia“ puslapio išdėstymą.
<button>s ir <input>mygtukų elementai turi cursor: pointerkada :not(:disabled).

Šie ir kiti pakeitimai parodyti toliau.

Įvairūs elementai

Adresas

Elementas <address>atnaujintas, kad būtų iš naujo nustatytas numatytasis naršyklės nustatymas font-styleiš italicį normal. line-heighttaip pat dabar yra paveldėtas ir margin-bottom: 1rembuvo pridėtas. <address>s yra skirti artimiausio protėvio (arba viso darbo) kontaktinei informacijai pateikti. Išsaugokite formatavimą užbaigdami eilutes <br>.

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

Visas vardas
pirmas.paskutinė@example.com

Citatos blokas

Numatytasis marginkabučių nustatymas yra 1em 40px, todėl iš naujo nustatome jį į, kad būtų 0 0 1remgeriau suderinami su kitais elementais.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje

Inline elementai

Elementas <abbr>įgauna pagrindinį stilių, kad jis išsiskirtų iš pastraipos teksto.

Nulla attr vitae elit libero, a pharetra augue.

Santrauka

Numatytoji cursorsuvestinė yra text, todėl ją nustatome iš naujo, kad pointerparodytume, jog su elementu galima sąveikauti jį spustelėjus.

Kai kurios detalės

Daugiau informacijos apie detales.

Dar daugiau detalių

Čia yra dar daugiau informacijos apie detales.

HTML5 `[hidden]`atributas

HTML5 prideda naują visuotinį atributą pavadinimu[hidden] , kurio stilius display: nonepagal numatytuosius nustatymus. Pasiskolinę idėją iš PureCSS , patobuliname šį numatytąjį nustatydami, [hidden] { display: none !important; }kad išvengtume netyčinio jos displaynepaisymo. Nors [hidden]IE10 jo nepalaiko, aiškus pareiškimas mūsų CSS išsprendžia šią problemą.

<input type="text" hidden>

„jQuery“ nesuderinamumas

[hidden]nesuderinamas su jQuery $(...).hide()ir $(...).show()metodais. Todėl šiuo metu ypač nepritariame [hidden]kitiems displayelementų valdymo metodams.

Norėdami tik perjungti elemento matomumą, ty jis displaynėra pakeistas ir elementas vis tiek gali paveikti dokumento eigą, naudokite klasę.invisible .