Ponovno podizanje sustava

Reboot, kolekcija CSS promjena specifičnih za elemente u jednoj datoteci, pokreće Bootstrap za pružanje elegantne, dosljedne i jednostavne osnove za nadogradnju.

Na ovoj stranici

Pristup

Reboot se nadograđuje na Normalize, pružajući mnoge HTML elemente s pomalo tvrdoglavim stilovima koristeći samo birače elemenata. Dodatni stil se radi samo s klasama. Na primjer, ponovno pokrećemo neke <table>stilove za jednostavniju osnovnu liniju i kasnije pružamo .table, .table-borderedi više.

Ovo su naše smjernice i razlozi za odabir onoga što ćete nadjačati u ponovnom pokretanju:

Ažurirajte neke zadane vrijednosti preglednika za korištenje rems umjesto ems za skalabilni razmak komponenti.
Izbjegavajte margin-top. Okomite margine mogu se skupiti, što dovodi do neočekivanih rezultata. Što je još važnije, jedan smjer marginje jednostavniji mentalni model.
Radi lakšeg skaliranja između veličina uređaja, elementi bloka trebali bi koristiti rems umjesto margins.
Svedite deklaracije o fontsvojstvima vezanim uz - na minimum, koristeći inheritkad god je to moguće.

CSS varijable

Dodano u v5.1.1

S v5.1.1, standardizirali smo naše potrebne @imports u svim našim CSS paketima (uključujući bootstrap.css, bootstrap-reboot.css, i bootstrap-grid.cssuključiti _root.scss. Ovo dodaje :rootCSS varijable razine u sve pakete, bez obzira na to koliko ih se koristi u tom paketu. U konačnici Bootstrap 5 nastavit će vidjeti više CSS varijabli dodanih tijekom vremena.

Zadane postavke stranice

Elementi <html>i <body>ažuriraju se kako bi pružili bolje zadane postavke za cijelu stranicu. Točnije:

Globalno je box-sizingpostavljen na svaki element—uključujući *::beforei *::after, do border-box. To osigurava da se deklarirana širina elementa nikada ne premaši zbog ispune ili obruba.
- Nijedna baza font-sizenije deklarirana na <html>, ali 16pxse pretpostavlja (zadana postavka preglednika). font-size: 1remprimjenjuje se na <body>za jednostavno responzivno skaliranje tipa putem medijskih upita uz poštovanje korisničkih preferencija i osiguravanje pristupačnijeg pristupa. Ova zadana postavka preglednika može se nadjačati izmjenom $font-size-rootvarijable.
Također <body>postavlja globalne font-family, font-weight, line-heighti color. To kasnije nasljeđuju neki elementi obrasca kako bi se spriječile nedosljednosti fonta.
Radi sigurnosti, <body>ima deklariran background-color, zadano je #fff.

Stog izvornih fontova

Bootstrap koristi "nativni skup fontova" ili "sistemski skup fontova" za optimalno prikazivanje teksta na svakom uređaju i OS-u. Ovi sistemski fontovi dizajnirani su posebno imajući na umu današnje uređaje, s poboljšanim prikazom na zaslonima, podrškom za varijabilne fontove i više. Pročitajte više o izvornim hrpama fontova u ovom članku časopisa Smashing Magazine .

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

Budući da hrpa fontova uključuje fontove emotikona, mnogi uobičajeni simboli/dingbat unicode znakovi bit će prikazani kao raznobojni piktogrami. Njihov će izgled varirati, ovisno o stilu koji se koristi u izvornom fontu emotikona preglednika/platforme i na njih neće utjecati nikakvi CSS colorstilovi.

Ovo font-familyse primjenjuje na <body>i automatski nasljeđuje globalno kroz Bootstrap. Da biste promijenili globalni font-family, ažurirajte $font-family-basei ponovno kompajlirajte Bootstrap.

CSS varijable

Kako Bootstrap 5 nastavlja sazrijevati, sve više i više stilova bit će izgrađeno s CSS varijablama kao sredstvom za pružanje veće prilagodbe u stvarnom vremenu bez potrebe da se uvijek ponovno kompajlira Sass. Naš pristup je uzeti naše izvorne Sass varijable i transformirati ih u CSS varijable. Na taj način, čak i ako ne koristite CSS varijable, i dalje imate svu moć Sass-a. Ovo je još uvijek u tijeku i trebat će vremena da se u potpunosti implementira.

Na primjer, razmotrite ove :rootCSS varijable za uobičajene <body>stilove:

  @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};

U praksi se te varijable zatim primjenjuju u ponovnom pokretanju na sljedeći način:

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
}

Što vam omogućuje prilagodbe u stvarnom vremenu kako god želite:

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

Naslovi i paragrafi

Svi elementi naslova—npr.— <h1>i <p>poništavaju se da bi se margin-topuklonili. Dodani su naslovi margin-bottom: .5remi odlomci margin-bottom: 1remradi lakšeg razmaka.

Naslov	Primjer
`<h1></h1>`	h1. Bootstrap naslov
`<h2></h2>`	h2. Bootstrap naslov
`<h3></h3>`	h3. Bootstrap naslov
`<h4></h4>`	h4. Bootstrap naslov
`<h5></h5>`	h5. Bootstrap naslov
`<h6></h6>`	h6. Bootstrap naslov

Popisi

Svi popisi— <ul>, <ol>, i <dl>—su margin-topuklonjeni i a margin-bottom: 1rem. Ugniježđene liste nemaju margin-bottom. Također smo resetirali padding-lefton <ul>i <ol>elemente.

Svim listama uklonjena je gornja margina
I njihova donja margina se normalizirala
Ugniježđene liste nemaju donju marginu
- Na taj način imaju ujednačeniji izgled
- Osobito kada slijedi više stavki popisa
Lijevi ispun je također poništen

Evo sređenog popisa
S nekoliko stavki popisa
Ima isti ukupni izgled
Kao i prethodni nesređeni popis

Radi jednostavnijeg oblikovanja, jasne hijerarhije i boljeg razmaka, popisi opisa su ažurirani margin. <dd>s resetirati margin-leftna 0i dodati margin-bottom: .5rem. <dt>s su podebljani .

Liste opisa: Popis opisa savršen je za definiranje pojmova.
Termin: Definicija pojma.; Druga definicija za isti pojam.
Drugi termin: Definicija za ovaj drugi pojam.

Inline kod

Zamotajte ugrađene isječke koda s <code>. Obavezno izbjegnite HTML uglaste zagrade.

Na primjer, <section>treba biti omotan kao inline.

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

Blokovi koda

Koristite <pre>s za više redaka koda. Još jednom, svakako izbjegnite sve uglaste zagrade u kodu radi ispravnog prikazivanja. Element <pre>se poništava kako bi se uklonio njegov margin-topi koristile remjedinice za njegov 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>

Varijable

Za označavanje varijabli koristite <var>oznaku.

y = m x + b

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

Korisnički unos

Koristite <kbd>za označavanje unosa koji se obično unosi putem tipkovnice.

Za promjenu imenika upišite cdi zatim naziv imenika.
Za uređivanje postavki pritisnite 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>

Uzorak izlaza

Za označavanje uzorka izlaza iz programa koristite <samp>oznaku.

Ovaj tekst treba tretirati kao ogledni izlaz iz računalnog programa.

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

Stolovi

Tablice su malo prilagođene stilu <caption>s, skupljaju granice i osiguravaju dosljednost text-alignu cijelom dijelu. Dodatne promjene za obrube, ispune i drugo dolaze s .tableklasom .

Ovo je primjer tablice, a ovo je njezin naslov koji opisuje sadržaj.
Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice
Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice

Obrasci

Različiti elementi oblika ponovno su pokrenuti za jednostavnije osnovne stilove. Evo nekih od najznačajnijih promjena:

<fieldset>nemaju obrube, ispune ili margine pa se lako mogu koristiti kao omoti za pojedinačne unose ili grupe unosa.
<legend>s, kao i skupovi polja, također su preoblikovani kako bi se prikazivali kao svojevrsni naslov.
<label>s su postavljeni display: inline-blockda dopuštaju marginprimjenu.
<input>s, <select>s, <textarea>s i <button>s uglavnom rješava Normalize, ali Reboot uklanja i njihove margini postavlja line-height: inherittakođer.
<textarea>modificirani su tako da im se veličina može mijenjati samo vertikalno jer horizontalna promjena veličine često "lomi" izgled stranice.
<button>s i <input>elementi gumba imaju cursor: pointerkada :not(:disabled).

Ove promjene, i više, prikazane su u nastavku.

Podrška za unos datuma i boja

Imajte na umu da unose datuma ne podržavaju u potpunosti svi preglednici, posebice Safari.

Pokazivači na gumbima

Ponovno pokretanje uključuje poboljšanje za role="button"promjenu zadanog kursora u pointer. Dodajte ovaj atribut elementima kako biste naznačili da su elementi interaktivni. Ova uloga nije potrebna za <button>elemente koji dobivaju vlastitu cursorpromjenu.

Gumb elementa koji nije gumb

<span role="button" tabindex="0">Non-button element button</span>

Razni elementi

Adresa

Element <address>se ažurira kako bi se poništile zadane postavke preglednika font-styles italicna normal. line-heighttakođer je sada naslijeđen i margin-bottom: 1remdodan. <address>s služe za predstavljanje kontakt informacija za najbližeg pretka (ili cijelog opusa). Sačuvajte formatiranje završavajući retke s <br>.

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

Puno ime
[email protected]

Blok citat

Zadana postavka marginblok citata je 1em 40px, pa smo to vratili na 0 0 1remnešto što je dosljednije drugim elementima.

Dobro poznati citat, sadržan u elementu blockquote.

Netko poznat u naslovu izvora

Inline elementi

Element <abbr>dobiva osnovni stil kako bi se istaknuo među tekstom odlomka.

Element HTML kratice.

Sažetak

Zadana postavka cursorsažetka je text, pa smo to vratili na kako pointerbismo poručili da se s elementom može komunicirati klikom na njega.

Neki detalji

Više informacija o detaljima.

Još više detalja

Evo još detalja o detaljima.

HTML5 `[hidden]`atribut

HTML5 dodaje novi globalni atribut pod nazivom[hidden] , koji je stiliziran display: noneprema zadanim postavkama. Posuđujući ideju od PureCSS-a , poboljšavamo ovu zadanu postavku tako [hidden] { display: none !important; }da spriječimo njezino displayslučajno nadjačavanje.

<input type="text" hidden>

jQuery nekompatibilnost

[hidden]nije kompatibilan s jQueryjem $(...).hide()i $(...).show()metodama. Stoga trenutno posebno ne podržavamo [hidden]druge tehnike za upravljanje displayelementima.

Da biste samo prebacili vidljivost elementa, što znači da displaynije modificiran i da element i dalje može utjecati na tijek dokumenta, umjesto toga upotrijebite .invisibleklasu .

Ponovno podizanje sustava

Pristup

CSS varijable

Zadane postavke stranice

Stog izvornih fontova

CSS varijable

Naslovi i paragrafi

Popisi

Inline kod

Blokovi koda

Varijable

Korisnički unos

Uzorak izlaza

Stolovi

Obrasci

Podrška za unos datuma i boja

Pokazivači na gumbima

Razni elementi

Adresa

Blok citat

Inline elementi

Sažetak

HTML5 [hidden]atribut

jQuery nekompatibilnost

HTML5 `[hidden]`atribut