Perkraukite
Reboot, konkretiems elementams būdingų CSS pakeitimų rinkinys viename faile, paleiskite „Bootstrap“, kad būtų galima sukurti elegantišką, nuoseklų ir paprastą pagrindą.
metodas
Paleidimas iš naujo grindžiamas Normalizavimo funkcija, suteikiant daug HTML elementų, kurių stiliai yra šiek tiek apgalvoti, naudojant tik elementų parinkiklius. Papildomas stilius atliekamas tik su klasėmis. Pavyzdžiui, kai kuriuos <table>
stilius paleidžiame iš naujo, kad būtų paprastesnė pradinė linija, o vėliau pateikiame .table
, .table-bordered
, ir daugiau.
Štai mūsų gairės ir priežastys, kodėl pasirenkate, ką pakeisti perkrovimo metu:
- Atnaujinkite kai kurias naršyklės numatytąsias reikšmes, kad būtų naudojamas
rem
s, o neem
s keičiamam komponentų tarpui. - Venkite
margin-top
. Vertikalios paraštės gali sugriūti ir duoti netikėtų rezultatų. Tačiau dar svarbiau, kad viena kryptismargin
yra paprastesnis psichinis modelis. - Kad būtų lengviau keisti įrenginio dydžius, bloko elementuose s turėtų būti naudojamas
rem
smargin
. - Sumažinkite susijusių savybių deklaracijas
font
, naudokite,inherit
kai tik įmanoma.
CSS kintamieji
Pridėta 5.1.1 versijoje
Naudodami 5.1.1 versijos standartizavome reikalingus @import
s visuose CSS paketuose (įskaitant bootstrap.css
, bootstrap-reboot.css
, ir bootstrap-grid.css
įtraukti _root.scss
. Tai prideda :root
CSS lygio kintamuosius prie visų paketų, neatsižvelgiant į tai, kiek jų naudojama tame pakete. Galiausiai Bootstrap 5 ir toliau bus pamatyti daugiau laikui bėgant pridėtų CSS kintamųjų.
Puslapio numatytieji nustatymai
Elementai <html>
ir <body>
atnaujinami, kad būtų geresni viso puslapio numatytieji nustatymai. Konkrečiau:
- Visame
box-sizing
pasaulyje nustatytas kiekvienam elementui, įskaitant*::before
ir*::after
, įborder-box
. Tai užtikrina, kad deklaruotas elemento plotis niekada nebus viršytas dėl užpildymo ar kraštinės.- Jokia bazė
font-size
nėra deklaruojama<html>
, bet16px
yra laikoma (naršyklės numatytoji reikšmė).font-size: 1rem
Taikoma<body>
lengvai reaguojančiam tipo mastelio keitimui naudojant medijos užklausas, kartu atsižvelgiant į vartotojo nuostatas ir užtikrinant labiau prieinamą metodą. Šios naršyklės numatytosios nuostatos gali būti nepaisomos pakeitus$font-size-root
kintamąjį.
- Jokia bazė
- Taip
<body>
pat nustatomi visuotiniaifont-family
,font-weight
,line-height
, ircolor
. Tai vėliau paveldima kai kurių formos elementų, kad būtų išvengta šrifto neatitikimų. - Saugumo sumetimais
<body>
yra paskelbtasbackground-color
, pagal nutylėjimą#fff
.
Vietinis šriftų krūva
„Bootstrap“ naudoja „savąjį šriftų krūvą“ arba „sistemos šriftų krūvą“, kad tekstas būtų optimaliai atvaizduojamas kiekviename įrenginyje ir OS. Šie sistemos šriftai buvo sukurti specialiai atsižvelgiant į šiuolaikinius įrenginius, patobulintą atvaizdavimą ekranuose, kintamo šrifto palaikymą ir kt. Skaitykite daugiau apie vietinių šriftų krūvas šiame Smashing Magazine straipsnyje .
$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;
Atminkite, kad šriftų krūvoje yra jaustukų šriftų, todėl daugelis įprastų simbolių / dingbat unikodo simbolių bus pateikiami kaip daugiaspalvės piktogramos. Jų išvaizda skirsis priklausomai nuo stiliaus, naudojamo naršyklės / platformos vietiniame jaustukų šrifte, ir jiems neturės įtakos jokie CSS color
stiliai.
Tai font-family
taikoma <body>
ir automatiškai paveldima visame pasaulyje visame „Bootstrap“. Norėdami perjungti visuotinį font-family
, atnaujinkite $font-family-base
ir iš naujo kompiliuokite Bootstrap.
CSS kintamieji
„Bootstrap 5“ ir toliau tobulėja, vis daugiau stilių bus kuriama naudojant CSS kintamuosius , kad būtų galima daugiau tinkinti realiuoju laiku, nereikės nuolat kompiliuoti Sass. Mūsų metodas yra paimti šaltinio Sass kintamuosius ir paversti juos CSS kintamaisiais. Tokiu būdu, net jei nenaudojate CSS kintamųjų, vis tiek turėsite visas Sass galias. Tai vis dar vykdoma ir prireiks laiko, kol jis bus visiškai įgyvendintas.
Pavyzdžiui, apsvarstykite šiuos :root
įprastų <body>
stilių CSS kintamuosius:
@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};
Praktiškai šie kintamieji taikomi perkrovimo metu taip:
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
}
Tai leidžia atlikti tinkinimus realiuoju laiku, kaip jums patinka:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Antraštės ir pastraipos
Visi antraštės elementai, pvz., <h1>
ir <p>
yra nustatomi iš naujo, kad būtų margin-top
pašalinti. Pridėtos antraštės margin-bottom: .5rem
ir pastraipos margin-bottom: 1rem
, kad būtų lengviau išdėstyti tarpus.
Antraštė | Pavyzdys |
---|---|
<h1></h1> |
h1. Bootstrap antraštė |
<h2></h2> |
h2. Bootstrap antraštė |
<h3></h3> |
h3. Bootstrap antraštė |
<h4></h4> |
h4. Bootstrap antraštė |
<h5></h5> |
h5. Bootstrap antraštė |
<h6></h6> |
h6. Bootstrap antraštė |
Sąrašai
Visi sąrašai <ul>
– , <ol>
, ir <dl>
– yra margin-top
pašalinti ir margin-bottom: 1rem
. Įdėtuose sąrašuose nėra margin-bottom
. Taip pat iš naujo nustatėme įjungimą padding-left
ir <ul>
elementus <ol>
.
- Visų sąrašų viršutinė paraštė pašalinta
- Ir jų apatinė marža normalizavosi
- Įdėtieji sąrašai neturi apatinės paraštės
- Taip jie įgauna tolygesnę išvaizdą
- Ypač tada, kai seka daugiau sąrašo elementų
- Kairysis užpildas taip pat buvo nustatytas iš naujo
- Štai užsakytas sąrašas
- Su keliais sąrašo elementais
- Jis turi tą pačią bendrą išvaizdą
- Kaip ir ankstesnis netvarkingas sąrašas
Siekiant paprastesnio stiliaus, aiškios hierarchijos ir geresnių tarpų, aprašymų sąrašai buvo atnaujinti margin
s. <dd>
s iš naujo margin-left
nustatyti 0
ir pridėti margin-bottom: .5rem
. <dt>
s yra paryškinti .
- Aprašų sąrašai
- Aprašų sąrašas puikiai tinka terminams apibrėžti.
- Terminas
- Termino apibrėžimas.
- Antrasis to paties termino apibrėžimas.
- Kitas terminas
- Šio kito termino apibrėžimas.
Inline kodas
Įterptuosius kodo fragmentus apvyniokite <code>
. Būtinai atsisakykite HTML kampinių skliaustų.
<section>
turėtų būti suvyniota kaip įterpta.
For example, <code><section></code> should be wrapped as inline.
Kodų blokai
Naudokite <pre>
s kelioms kodo eilutėms. Dar kartą nepamirškite palikti bet kokių kampinių skliaustų kode, kad būtų galima tinkamai atvaizduoti. Elementas <pre>
nustatomas iš naujo, kad jis būtų pašalintas margin-top
ir būtų naudojami rem
jo vienetai 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>
Kintamieji
Kintamiesiems nurodyti naudokite <var>
žymą.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Vartotojo įvestis
Naudokite , <kbd>
kad nurodytumėte įvestį, kuri paprastai įvedama klaviatūra.
Norėdami redaguoti nustatymus, paspauskite 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>
Mėginio išvestis
Norėdami nurodyti programos išvesties pavyzdį, naudokite <samp>
žymą.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Lentelės
Lentelės šiek tiek pakoreguotos pagal stilių <caption>
s, sutraukiamos kraštinės ir užtikrinamas nuoseklumas text-align
. Papildomi kraštinių, užpildymo ir kt. pakeitimai pateikiami su .table
klase .
Lentelės antraštė | Lentelės antraštė | Lentelės antraštė | Lentelės antraštė |
---|---|---|---|
Lentelės langelis | Lentelės langelis | Lentelės langelis | Lentelės langelis |
Lentelės langelis | Lentelės langelis | Lentelės langelis | Lentelės langelis |
Lentelės langelis | Lentelės langelis | Lentelės langelis | Lentelės langelis |
Formos
Įvairūs formos elementai buvo perkrauti paprastesniems baziniams stiliams. Štai keletas ryškiausių pakeitimų:
<fieldset>
s neturi kraštinių, užpildymo ar paraštės, todėl juos galima lengvai naudoti kaip atskirų įvesties ar įvesties grupių įvynioklius.<legend>
s, kaip ir laukų rinkiniai, taip pat buvo pertvarkyti, kad būtų rodomi kaip antraštė.<label>
s yra nustatyti,display: inline-block
kadmargin
būtų galima taikyti.<input>
s,<select>
s,<textarea>
s ir<button>
s dažniausiai sprendžia Normalizavimas, bet Reboot pašalina juosmargin
ir taip pat nustatoline-height: inherit
.<textarea>
s yra modifikuojami taip, kad jų dydį būtų galima keisti tik vertikaliai, nes horizontalus dydžio keitimas dažnai „pertraukia“ puslapio išdėstymą.<button>
s ir<input>
mygtukų elementai turicursor: pointer
kada:not(:disabled)
.
Šie ir kiti pakeitimai parodyti toliau.
Datos ir spalvų įvesties palaikymas
Atminkite, kad datos įvestis nėra visiškai palaikoma visose naršyklėse, būtent „Safari“.
Rodyklės ant mygtukų
Paleidimas iš naujo apima patobulinimą, role="button"
leidžiantį pakeisti numatytąjį žymeklį į pointer
. Pridėkite šį atributą prie elementų, kad parodytumėte, jog elementai yra interaktyvūs. Šis vaidmuo nėra būtinas <button>
elementams, kurie cursor
keičiasi savaime.
<span role="button" tabindex="0">Non-button element button</span>
Įvairūs elementai
Adresas
Elementas <address>
atnaujintas, kad būtų iš naujo nustatytas numatytasis naršyklės nustatymas font-style
iš italic
į normal
. line-height
taip pat dabar yra paveldėtas ir margin-bottom: 1rem
buvo pridėtas. <address>
s yra skirti artimiausio protėvio (arba viso darbo) kontaktinei informacijai pateikti. Išsaugokite formatavimą užbaigdami eilutes <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Visas vardas
pirmas.paskutinė@example.com
Citatos blokas
Numatytasis margin
kabučių nustatymas yra 1em 40px
, todėl iš naujo nustatome jį į, kad būtų 0 0 1rem
geriau suderinami su kitais elementais.
Gerai žinoma citata, esanti blockquote elemente.
Kažkas žinomas šaltinio antraštėje
Inline elementai
Elementas <abbr>
įgauna pagrindinį stilių, kad jis išsiskirtų iš pastraipos teksto.
Santrauka
Numatytoji cursor
suvestinė yra text
, todėl ją nustatome iš naujo, kad pointer
parodytume, jog su elementu galima sąveikauti jį spustelėjus.
Kai kurios detalės
Daugiau informacijos apie detales.
Dar daugiau detalių
Čia yra dar daugiau informacijos apie detales.
HTML5 [hidden]
atributas
HTML5 prideda naują visuotinį atributą pavadinimu[hidden]
, kurio stilius display: none
pagal numatytuosius nustatymus. Pasiskolinę idėją iš PureCSS , patobuliname šį numatytąjį nustatydami, [hidden] { display: none !important; }
kad išvengtume netyčinio jos display
nepaisymo.
<input type="text" hidden>
„jQuery“ nesuderinamumas
[hidden]
nesuderinamas su jQuery $(...).hide()
ir $(...).show()
metodais. Todėl šiuo metu ypač nepritariame [hidden]
kitiems display
elementų valdymo metodams.
Norėdami tik perjungti elemento matomumą, ty jis display
nėra pakeistas ir elementas vis tiek gali paveikti dokumento eigą, naudokite klasę.invisible
.