Käynnistä uudelleen

Reboot, kokoelma elementtikohtaisia CSS-muutoksia yhdessä tiedostossa, käynnistää Bootstrapin ja tarjoaa tyylikkään, johdonmukaisen ja yksinkertaisen perustan rakentamiseen.

Lähestyä

Uudelleenkäynnistys perustuu Normalisointiin ja tarjoaa monet HTML-elementit hieman mielivaltaisilla tyyleillä käyttämällä vain elementin valitsimia. Lisätyylit tehdään vain luokissa. Esimerkiksi käynnistämme uudelleen joitain <table>tyylejä yksinkertaisemman perustason saavuttamiseksi ja tarjoamme myöhemmin .table, .table-borderedja paljon muuta.

Tässä ovat sääntömme ja syymme valita, mitä Rebootissa ohitetaan:

Päivitä jotkin selaimen oletusarvot käyttämään rems-kirjainta s:n sijaan emskaalautuvassa komponenttivälissä.
Vältä margin-top. Pystymarginaalit voivat romahtaa ja tuottaa odottamattomia tuloksia. Vielä tärkeämpää on kuitenkin se, että yksi suunta marginon yksinkertaisempi mentaalinen malli.
Jotta skaalaus olisi helpompaa eri laitekokojen välillä, lohkoelementtien tulee käyttää rems: tä margins:lle.
Pidä fontasiaan liittyvien ominaisuuksien ilmoitukset mahdollisimman vähäisinä, käytä inheritaina kun mahdollista.

Sivun oletusasetukset

Elementit <html>ja <body>päivitetään tarjoamaan parempia koko sivun oletusasetuksia. Tarkemmin:

A box-sizingon globaalisti asetettu jokaiselle elementille - mukaan lukien *::beforeja *::after, border-box. Tämä varmistaa, että elementin ilmoitettua leveyttä ei koskaan ylitetä pehmusteen tai reunuksen vuoksi.
Mitään perustaa font-sizeei ole ilmoitettu <html>, mutta 16pxse oletetaan (selaimen oletus). font-size: 1remSovelletaan <body>helposti reagoivaan tyyppiskaalaukseen mediakyselyjen kautta, samalla kun kunnioitetaan käyttäjien mieltymyksiä ja varmistetaan helpommin saavutettavissa oleva lähestymistapa.
Asettaa <body>myös globaalin font-family, line-height, ja text-align. Jotkin lomakeelementit perivät tämän myöhemmin fonttien epäjohdonmukaisuuksien estämiseksi.
Turvallisuussyistä siinä <body>on ilmoitettu background-color, oletusarvoisesti #fff.

Alkuperäinen fonttipino

Web-oletuskirjasimet (Helvetica Neue, Helvetica ja Arial) on jätetty pois Bootstrap 4:stä ja korvattu "alkuperäisellä fonttipinolla" optimaalisen tekstin renderöinnin varmistamiseksi kaikissa laitteissa ja käyttöjärjestelmissä. Lue lisää alkuperäisistä kirjasinpinoista tästä Smashing Magazine -artikkelista .

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

Huomaa, että koska fonttipino sisältää emoji-fontteja, monet yleiset symboli/dingbat Unicode-merkit hahmonnetaan monivärisinä kuvakkeina. Niiden ulkonäkö vaihtelee selaimen/alustan alkuperäisessä emoji-fontissa käytetyn tyylin mukaan, eivätkä CSS- colortyylit vaikuta niihin.

Tätä font-familysovelletaan <body>Bootstrapiin ja se periytyy automaattisesti maailmanlaajuisesti. Vaihda globaalia versiota font-familypäivittämällä $font-family-baseja kääntämällä uudelleen Bootstrap.

Otsikot ja kappaleet

Kaikki otsikkoelementit - esim. <h1>- ja <p>nollataan, jotta ne margin-toppoistetaan. Otsikot margin-bottom: .5remja kappaleet on lisätty margin-bottom: 1remvälitysten helpottamiseksi.

Otsikko	Esimerkki
`<h1></h1>`	h1. Bootstrap otsikko
`<h2></h2>`	h2. Bootstrap otsikko
`<h3></h3>`	h3. Bootstrap otsikko
`<h4></h4>`	h4. Bootstrap otsikko
`<h5></h5>`	h5. Bootstrap otsikko
`<h6></h6>`	h6. Bootstrap otsikko

Luettelot

Kaikista listoista - <ul>, <ol>, ja <dl>- on margin-toppoistettu ja margin-bottom: 1rem. Sisäkkäisissä luetteloissa ei ole margin-bottom.

Kaikista listoista on poistettu ylämarginaali
Ja niiden alamarginaali normalisoitui
Sisäkkäisillä luetteloilla ei ole alamarginaalia
- Näin niistä tulee tasaisempi ulkonäkö
- Varsinkin kun sitä seuraa useampia luettelokohteita
Myös vasen pehmuste on nollattu

Tässä on järjestetty lista
Muutamalla listalla
Sillä on sama yleisilme
Kuten edellinen järjestämätön lista

Yksinkertaisemman tyylin, selkeän hierarkian ja paremman välin vuoksi kuvausluettelot on päivitetty margins. <dd>s nollaa margin-leftja 0lisää margin-bottom: .5rem. <dt>s on lihavoitu .

Kuvausluettelot: Kuvausluettelo on täydellinen termien määrittelyyn.
Termi: Määritelmä termille.; Toinen määritelmä samalle termille.
Toinen termi: Määritelmä tälle toiselle termille.

Esimuotoiltu teksti

Elementti <pre>nollataan sen poistamiseksi margin-topja sen remyksiköiden käyttämiseksi margin-bottom.

.example-element {
  marginaali-ala: 1rem;
}

Taulukot

Taulukot on hieman mukautettu tyyliin <caption>s, kutistavat reunat ja varmistavat yhdenmukaisuuden text-alignkaikkialla. Luokkaan tulee lisämuutoksia reunuksiin, pehmusteisiin ja muuhun.table .

Tämä on esimerkkitaulukko, ja tämä on sen otsikko kuvaamaan sisältöä.
Taulukon otsikko	Taulukon otsikko	Taulukon otsikko	Taulukon otsikko
Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu
Taulukon solu	Taulukon solu	Taulukon solu	Taulukon solu

Lomakkeet

Useita lomakeelementtejä on käynnistetty uudelleen yksinkertaisempia perustyylejä varten. Tässä on joitain merkittävimmistä muutoksista:

<fieldset>Sillä ei ole reunuksia, pehmusteita tai marginaaleja, joten niitä voidaan helposti käyttää yksittäisten syötteiden tai syöttöryhmien kääreinä.
<legend>s, kuten kenttäjoukot, on myös muotoiltu uudelleen näytettäväksi eräänlaisena otsikona.
<label>s on asetettu display: inline-blocksallimaan marginkäytön.
<input>Normalize käsittelee enimmäkseen s-, <select>s-, <textarea>s- ja s-koodeja, mutta Reboot poistaa ne ja asettaa myös .<button>marginline-height: inherit
<textarea>s on muokattu niin, että kokoa voi muuttaa vain pystysuunnassa, koska vaakasuuntainen koon muuttaminen usein "katkaisee" sivun asettelun.
<button>s- ja <input>painikeelementeillä on cursor: pointermilloin :not(:disabled).

Nämä ja muut muutokset esitellään alla.

Osoittimet painikkeissa

Uudelleenkäynnistys sisältää parannuksen, role="button"joka muuttaa oletuskohdistimen arvoksi pointer. Lisää tämä attribuutti elementteihin osoittaaksesi, että elementit ovat interaktiivisia. Tämä rooli ei ole välttämätön <button>elementeille, jotka saavat oman cursormuutoksensa.

Ei-painiketta elementtipainike

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

Muut elementit

Osoite

Elementti päivitetään <address>palauttamaan selaimen oletusasetukset arvoon font-style. on myös nyt peritty, ja se on lisätty. s on tarkoitettu lähimmän esi-isän (tai koko työn) yhteystietojen esittämiseen. Säilytä muotoilu lopettamalla rivit .italicnormalline-heightmargin-bottom: 1rem<address><br>

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

Koko nimi
[email protected]

Lohkolainaus

Lainausmerkkien oletusarvo marginon 1em 40px, joten nollaamme sen arvoon, jotta voimme 0 0 1remyhdenmukaistaa muita elementtejä.

Tunnettu lainaus, joka sisältyy blockquote-elementtiin.

Joku kuuluisa lähdeotsikossa

Sisäiset elementit

Elementti <abbr>saa perustyylin, jotta se erottuu kappaletekstin joukosta.

Nulla attr vitae elit libero, a pharetra augue.

Yhteenveto

Yhteenvedon oletusarvo cursoron text, joten nollaamme pointersen ilmaisemaan, että elementtiä voidaan käyttää napsauttamalla sitä.

Jotkut yksityiskohdat

Lisätietoa yksityiskohdista.

Vielä enemmän yksityiskohtia

Tässä on vielä enemmän yksityiskohtia yksityiskohdista.

HTML5- `[hidden]`attribuutti

HTML5 lisää uuden globaalin attribuutin nimeltä[hidden] , jonka tyyli display: noneon oletuksena. Lainaamme idean PureCSS :stä ja parannamme tätä oletusarvoa tekemällä [hidden] { display: none !important; }auttamaan estämään sen displayvahingossa ohittamista. Vaikka [hidden]IE10 ei tue sitä natiivisti, CSS:n selkeä ilmoitus kiertää tämän ongelman.

<input type="text" hidden>

jQuery-yhteensopivuus

[hidden]ei ole yhteensopiva jQueryn $(...).hide()ja $(...).show()menetelmien kanssa. Siksi emme tällä hetkellä erityisesti tue [hidden]muita displayelementtien hallintatekniikoita.

Jos haluat vain vaihtaa elementin näkyvyyttä, eli sitä displayei muuteta ja elementti voi silti vaikuttaa dokumentin kulkuun, käytä sen sijaan .invisibleluokkaa .