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-bordered
ja paljon muuta.
Tässä ovat sääntömme ja syymme valita, mitä Rebootissa ohitetaan:
- Päivitä jotkin selaimen oletusarvot käyttämään
rem
s-kirjainta s:n sijaanem
skaalautuvassa komponenttivälissä. - Vältä
margin-top
. Pystymarginaalit voivat romahtaa ja tuottaa odottamattomia tuloksia. Vielä tärkeämpää on kuitenkin se, että yksi suuntamargin
on yksinkertaisempi mentaalinen malli. - Jotta skaalaus olisi helpompaa eri laitekokojen välillä, lohkoelementtien tulee käyttää
rem
s: tämargin
s:lle. - Pidä
font
asiaan liittyvien ominaisuuksien ilmoitukset mahdollisimman vähäisinä, käytäinherit
aina kun mahdollista.
CSS-muuttujat
Lisätty v5.1.1:een
V5.1.1:n avulla standardoimme vaaditut @import
s-arvomme kaikissa CSS-paketeissamme (mukaan lukien bootstrap.css
, bootstrap-reboot.css
, ja bootstrap-grid.css
sisällyttääksemme _root.scss
. Tämä lisää :root
tason 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-sizing
on globaalisti asetettu jokaiselle elementille - mukaan lukien*::before
ja*::after
,border-box
. Tämä varmistaa, että elementin ilmoitettua leveyttä ei koskaan ylitetä pehmusteen tai reunuksen vuoksi.- Mitään perustaa
font-size
ei ole ilmoitettu<html>
, mutta16px
se oletetaan (selaimen oletus).font-size: 1rem
Sovelletaan<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-root
muuttujaa.
- Mitään perustaa
- Asettaa
<body>
myös globaalinfont-family
,font-weight
,line-height
, jacolor
. Jotkin lomakeelementit perivät tämän myöhemmin fonttien epäjohdonmukaisuuksien estämiseksi. - Turvallisuussyistä siinä
<body>
on ilmoitettubackground-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- color
tyylit vaikuta niihin.
Tätä font-family
sovelletaan <body>
Bootstrapiin ja se periytyy automaattisesti maailmanlaajuisesti. Vaihda globaalia versiota font-family
päivittämällä $font-family-base
ja 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ä :root
CSS-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-top
poistetaan. Otsikot margin-bottom: .5rem
ja kappaleet on lisätty margin-bottom: 1rem
vä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-top
poistettu ja margin-bottom: 1rem
. Sisäkkäisissä luetteloissa ei ole margin-bottom
. Olemme myös palauttaneet padding-left
pää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 margin
s. <dd>
s nollaa margin-left
ja 0
lisää 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.
<section>
pitäisi kääriä riviin.
For example, <code><section></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-top
ja sen rem
yksiköiden käyttämiseksi margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Muuttujat
Käytä muuttujien osoittamiseen <var>
tagia.
<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ä.
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 .
<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-align
kaikkialla. Luokkaan tulee lisämuutoksia reunuksiin, pehmusteisiin ja muuhun.table
.
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 asetettudisplay: inline-block
sallimaanmargin
kä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>
margin
line-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ä oncursor: pointer
milloin:not(:disabled)
.
Nämä ja muut muutokset esitellään alla.
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 cursor
muutoksensa.
<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 .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Koko nimi
[email protected]
Lohkolainaus
Lainausmerkkien oletusarvo margin
on 1em 40px
, joten nollaamme sen arvoon, jotta voimme 0 0 1rem
yhdenmukaistaa 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.
Yhteenveto
Yhteenvedon oletusarvo cursor
on text
, joten nollaamme pointer
sen 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: none
on oletuksena. Lainaamme idean PureCSS :stä ja parannamme tätä oletusarvoa tekemällä [hidden] { display: none !important; }
auttamaan estämään sen display
vahingossa 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 display
elementtien hallintatekniikoita.
Jos haluat vain vaihtaa elementin näkyvyyttä, eli sitä display
ei muuteta ja elementti voi silti vaikuttaa dokumentin kulkuun, käytä sen sijaan .invisible
luokkaa .