Perkraukite

Reboot, konkretiems elementams būdingų CSS pakeitimų rinkinys viename faile, paleiskite „Bootstrap“, kad būtų galima sukurti elegantišką, nuoseklų ir paprastą pagrindą.

Šiame puslapyje

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 rems, o ne ems 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 kryptis marginyra paprastesnis psichinis modelis.
Kad būtų lengviau keisti įrenginio dydžius, bloko elementuose s turėtų būti naudojamas rems margin.
Sumažinkite susijusių savybių deklaracijas font, naudokite, inheritkai tik įmanoma.

CSS kintamieji

Pridėta 5.2.0 versijoje

Naudodami 5.1.1 versijos standartizavome reikalingus @imports visuose CSS paketuose (įskaitant bootstrap.css, bootstrap-reboot.css, ir bootstrap-grid.css), įtraukdami _root.scss. Taip prie visų rinkinių pridedami :rootlygio CSS kintamieji, neatsižvelgiant į tai, kiek jų naudojama tame pakete. Galiausiai „Bootstrap 5“ laikui bėgant ir toliau matys daugiau CSS kintamųjų , kad būtų galima daugiau tinkinti realiuoju laiku ir 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 {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Praktiškai šie kintamieji taikomi perkrovimo metu taip:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

Puslapio numatytieji nustatymai

Elementai <html>ir <body>atnaujinami, kad būtų geresni viso puslapio numatytieji nustatymai. Konkrečiau:

Visame box-sizingpasaulyje nustatytas kiekvienam elementui, įskaitant *::beforeir *::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-sizenėra deklaruojama <html>, bet 16pxyra laikoma (naršyklės numatytoji reikšmė). font-size: 1remTaikoma <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-rootkintamąjį.
Taip <body>pat nustatomi visuotiniai font-family, font-weight, line-height, ir color. Tai vėliau paveldima kai kurių formos elementų, kad būtų išvengta šrifto neatitikimų.
Saugumo sumetimais <body>yra paskelbtas background-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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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 Unicode simbolių bus pateikiami kaip įvairiaspalvės piktogramos. Jų išvaizda skirsis priklausomai nuo stiliaus, naudojamo naršyklės / platformos vietiniame jaustukų šrifte, ir jiems neturės įtakos jokie CSS colorstiliai.

Tai font-familytaikoma <body>ir automatiškai paveldima visame pasaulyje visame „Bootstrap“. Norėdami perjungti visuotinį font-family, atnaujinkite $font-family-baseir iš naujo kompiliuokite Bootstrap.

Antraštės ir pastraipos

Visi antraštės elementai, pvz., <h1>ir <p>yra nustatomi iš naujo, kad būtų margin-toppašalinti. Pridėtos antraštės margin-bottom: .5remir 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ė

Horizontalios taisyklės

Elementas <hr>buvo supaprastintas. Panašiai kaip naršyklės numatytieji nustatymai, <hr>s stilius yra per border-top, turi numatytąjį opacity: .25ir automatiškai paveldi jų border-colorvia color, įskaitant kai colornustatoma per pirminį. Juos galima modifikuoti naudojant teksto, kraštinių ir nepermatomumo priemones.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Sąrašai

Visi sąrašai <ul>– , <ol>, ir <dl>– yra margin-toppašalinti ir margin-bottom: 1rem. Įdėtuose sąrašuose nėra margin-bottom. Taip pat iš naujo nustatėme įjungimą padding-leftir <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 margins. <dd>s iš naujo margin-leftnustatyti 0ir 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ų.

Pavyzdžiui, <section>turėtų būti suvyniota kaip įterpta.

html

For example, <code>&lt;section&gt;</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-topir būtų naudojami remjo vienetai margin-bottom.

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

html

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

Kintamieji

Kintamiesiems nurodyti naudokite <var>žymą.

y = m x + b

html

<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 perjungti katalogus, įveskite cdir katalogo pavadinimą.
Norėdami redaguoti nustatymus, paspauskite ctrl + ,

html

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

Šis tekstas turi būti traktuojamas kaip kompiuterio programos išvesties pavyzdys.

html

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

Tai yra lentelės pavyzdys, o tai yra jos antraštė, apibūdinanti turinį.
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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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-blockkad marginbūtų galima taikyti.
<input>s, <select>s, <textarea>s ir <button>s dažniausiai sprendžia Normalizavimas, bet Reboot pašalina juos marginir taip pat nustato line-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 turi cursor: pointerkada :not(:disabled).

Šie ir kiti pakeitimai parodyti toliau.

Pavyzdys legenda

Įvesties pavyzdys

El. pašto pavyzdys

Telefono pavyzdys

URL pavyzdys

Pavyzdinis numeris

Pavyzdinė paieška

Pavyzdinis diapazonas

Failo įvesties pavyzdys

Pavyzdinis pasirinkimas

Pažymėkite šį žymimąjį laukelį

Pirmasis variantas yra tas ir anas Antrasis variantas yra kažkas kita, kuri taip pat labai ilga, kad būtų galima parodyti šių įmantrių formų valdiklių apvyniojimą. Trečias variantas išjungtas

Teksto srities pavyzdys

Datos pavyzdys

Pavyzdys laikas

Slaptažodžio pavyzdys

Pavyzdys datetime-local

Savaitės pavyzdys

Mėnesio pavyzdys

Spalvos pavyzdys

Išvesties pavyzdys 100

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 cursorkeičiasi savaime.

Ne mygtuko elemento mygtukas

html

<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-styleiš italicį normal. line-heighttaip pat dabar yra paveldėtas ir margin-bottom: 1rembuvo pridėtas. <address>s yra skirti artimiausio protėvio (arba viso darbo) kontaktinei informacijai pateikti. Išsaugokite formatavimą užbaigdami eilutes <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Visas vardas
pirmas.paskutinė@example.com

Citatos blokas

Numatytasis marginkabučių nustatymas yra 1em 40px, todėl iš naujo nustatome jį į, kad būtų 0 0 1remgeriau 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.

HTML santrumpos elementas .

Santrauka

Numatytoji cursorsuvestinė yra text, todėl ją nustatome iš naujo, kad pointerparodytume, 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: nonepagal numatytuosius nustatymus. Pasiskolinę idėją iš PureCSS , patobuliname šį numatytąjį nustatydami, [hidden] { display: none !important; }kad išvengtume netyčinio jos displaynepaisymo.

<input type="text" hidden>

„jQuery“ nesuderinamumas

[hidden]nesuderinamas su jQuery $(...).hide()ir $(...).show()metodais. Todėl šiuo metu ypač nepritariame [hidden]kitiems displayelementų valdymo metodams.

Norėdami tik perjungti elemento matomumą, ty jis displaynėra pakeistas ir elementas vis tiek gali paveikti dokumento eigą, naudokite klasę.invisible .

Perkraukite

metodas

CSS kintamieji

Puslapio numatytieji nustatymai

Vietinis šriftų krūva

Antraštės ir pastraipos

Horizontalios taisyklės

Sąrašai

Inline kodas

Kodų blokai

Kintamieji

Vartotojo įvestis

Mėginio išvestis

Lentelės

Formos

Datos ir spalvų įvesties palaikymas

Rodyklės ant mygtukų

Įvairūs elementai

Adresas

Citatos blokas

Inline elementai

Santrauka

HTML5 [hidden]atributas

„jQuery“ nesuderinamumas

HTML5 `[hidden]`atributas