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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Kokonaisluku molestie lorem ja massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. 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.

Esimerkki legenda

100

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 .