Käynnistä uudelleen

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

Tällä sivulla

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.

CSS-muuttujat

Lisätty v5.1.1:een

V5.1.1:n avulla standardoimme vaaditut @imports-arvomme kaikissa CSS-paketeissamme (mukaan lukien bootstrap.css, bootstrap-reboot.css, ja bootstrap-grid.csssisällyttääksemme _root.scss. Tämä lisää :roottason CSS-muuttujia kaikkiin nippuihin riippumatta siitä, kuinka monta niistä kyseisessä nipussa käytetään. Lopulta Bootstrap 5 jatkaa katso lisää ajan myötä lisättyjä CSS-muuttujia.

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. Tämä selaimen oletusarvo voidaan ohittaa muuttamalla $font-size-rootmuuttujaa.
Asettaa <body>myös globaalin font-family, font-weight, line-height, ja color. 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

Bootstrap käyttää "alkuperäistä fonttipinoa" tai "järjestelmän fonttipinoa" optimaaliseen tekstin toistoon kaikissa laitteissa ja käyttöjärjestelmissä. Nämä järjestelmäfontit on suunniteltu erityisesti tämän päivän laitteita silmällä pitäen, ja niissä on parannettu renderöinti näytöillä, muuttuva kirjasintuki ja paljon muuta. Lue lisää alkuperäisistä kirjasinpinoista tästä Smashing Magazine -artikkelista .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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.

CSS-muuttujat

Bootstrap 5:n kypsyessä yhä useampia tyylejä rakennetaan CSS-muuttujien avulla, jotta voidaan tarjota enemmän reaaliaikaista räätälöintiä ilman, että Sassia tarvitsee aina kääntää uudelleen. Lähestymistapamme on ottaa Sass-lähdemuuttujamme ja muuttaa ne CSS-muuttujiksi. Tällä tavalla, vaikka et käyttäisi CSS-muuttujia, sinulla on silti kaikki Sassin voimavarat. Tämä on vielä kesken, ja sen täysi käyttöönotto vie aikaa.

Harkitse esimerkiksi näitä :rootCSS-muuttujia yleisille <body>tyyleille:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

Käytännössä näitä muuttujia käytetään sitten Rebootissa seuraavasti:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Tämän avulla voit tehdä reaaliaikaisia mukautuksia haluamallasi tavalla:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Olemme myös palauttaneet padding-leftpäälle <ul>ja <ol>elementit.

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.

Sisäinen koodi

Kääri tekstin sisäiset koodinpätkät <code>. Muista välttää HTML-kulmasulkuja.

Esimerkiksi <section>pitäisi kääriä riviin.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Koodilohkot

Käytä <pre>s useille koodiriveille. Jälleen kerran, muista jättää koodin kulmasulkeet pois oikeasta renderöinnista. Elementti <pre>nollataan sen poistamiseksi margin-topja sen remyksiköiden käyttämiseksi margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Muuttujat

Käytä muuttujien osoittamiseen <var>tagia.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Käyttäjän syöttö

Käytä -näppäintä <kbd>osoittaaksesi syötteen, joka syötetään tavallisesti näppäimistöllä.

Vaihda hakemistoa kirjoittamalla cdja sen jälkeen hakemiston nimi.
Muokkaa asetuksia painamalla ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Näytetulostus

<samp>Käytä tunnistetta ohjelman näytetulosteen osoittamiseen .

Tätä tekstiä on tarkoitus käsitellä tietokoneohjelman esimerkkitulosteena.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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.

Esimerkki legenda

Esimerkkisyöttö

Esimerkki sähköposti

Esimerkki puhelin

Esimerkki url

Esimerkkinumero

Esimerkkihaku

Esimerkkialue

Esimerkki tiedoston syötöstä

Esimerkki valinta

Valitse tämä valintaruutu

Vaihtoehto yksi on tämä ja tuo Vaihtoehto kaksi on jotain muuta, joka on myös erittäin pitkä esittelemään näiden hienojen lomakesäätimien käärimistä. Vaihtoehto kolme on poistettu käytöstä

Esimerkkitekstialue

Esimerkkipäivämäärä

Esimerkki aika

Esimerkki salasanasta

Esimerkki päivämäärä-aika-paikallinen

Esimerkkiviikko

Esimerkkikuukausi

Esimerkkiväri

Esimerkkilähtö 100

Päivämäärän ja värin syöttötuki

Muista, että kaikki selaimet, nimittäin Safari, eivät tue täysin päivämäärän syöttöä.

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.

HTML - lyhenneelementti.

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.

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

Käynnistä uudelleen

Lähestyä

CSS-muuttujat

Sivun oletusasetukset

Alkuperäinen fonttipino

CSS-muuttujat

Otsikot ja kappaleet

Luettelot

Sisäinen koodi

Koodilohkot

Muuttujat

Käyttäjän syöttö

Näytetulostus

Taulukot

Lomakkeet

Päivämäärän ja värin syöttötuki

Osoittimet painikkeissa

Muut elementit

Osoite

Lohkolainaus

Sisäiset elementit

Yhteenveto

HTML5- [hidden]attribuutti

jQuery-yhteensopivuus

HTML5- `[hidden]`attribuutti