Source

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

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.

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

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

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.

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante.

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 .