Ponovo pokreni

Reboot, kolekcija CSS promjena specifičnih za elemente u jednoj datoteci, pokrenite Bootstrap kako biste pružili elegantnu, dosljednu i jednostavnu osnovu za nadogradnju.

Na ovoj stranici

Pristup

Reboot se nadovezuje na Normalize, pružajući mnoge HTML elemente sa pomalo tvrdnjavim stilovima koristeći samo selektore elemenata. Dodatni stil se radi samo sa klasama. Na primjer, ponovo pokrećemo neke <table>stilove za jednostavniju osnovnu liniju i kasnije pružamo .table, .table-bordered, i više.

Evo naših smjernica i razloga za odabir onoga što ćete nadjačati u Reboot-u:

Ažurirajte neke zadane vrijednosti pretraživača da koristite rems umjesto ems za skalabilni razmak komponenti.
Izbjegavajte margin-top. Vertikalne margine se mogu srušiti, dajući neočekivane rezultate. Što je još važnije, jedan pravac marginje jednostavniji mentalni model.
Za lakše skaliranje u različitim veličinama uređaja, blok elementi bi trebali koristiti rems za margins.
Deklaracije fontsvojstava vezanih za -svežite na minimum, koristeći inheritkad god je to moguće.

CSS varijable

Dodato u v5.2.0

Sa 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.css) kako bismo uključili _root.scss. Ovo dodaje :rootCSS varijable nivoa svim paketima, bez obzira na to koliko ih se koristi u tom paketu. Na kraju, Bootstrap 5 će nastaviti da vidi više CSS varijabli koje se dodaju tokom vremena, kako bi se obezbedilo više prilagođavanja u realnom vremenu bez potrebe da se Sass uvek ponovo kompajlira. Naš pristup je da uzmemo naše izvorne Sass varijable i transformišemo 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 toku 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 {
    --#{$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};

U praksi, te varijable se zatim primjenjuju u Reboot-u na sljedeći način:

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
}

Što vam omogućava da napravite prilagođavanja u stvarnom vremenu kako god želite:

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

Zadane postavke stranice

Elementi <html>i <body>su ažurirani kako bi pružili bolje zadane postavke za cijelu stranicu. Preciznije:

Globalno box-sizingje postavljen na svaki element—uključujući *::beforei *::after, do border-box. Ovo osigurava da deklarirana širina elementa nikada ne bude prekoračena zbog paddinga ili ivice.
- Nijedna baza font-sizenije deklarirana na <html>, ali 16pxse pretpostavlja (podrazumevani pretraživač). font-size: 1remprimjenjuje se na <body>za jednostavno skaliranje tipa putem medijskih upita uz poštovanje korisničkih preferencija i osiguravajući pristupačniji pristup. Ova zadana vrijednost pretraživača može se zaobići modifikacijom $font-size-rootvarijable.
<body>Također postavlja globalne , font-family, font-weight, line-heighti color. Ovo je kasnije naslijeđeno nekim elementima forme kako bi se spriječile nedosljednosti fontova.
Radi sigurnosti, <body>ima deklariran background-color, zadano na #fff.

Nativni skup fontova

Bootstrap koristi "native font stack" ili "system font stack" za optimalno prikazivanje teksta na svakom uređaju i OS. Ovi sistemski fontovi su dizajnirani posebno za današnje uređaje na umu, sa poboljšanim prikazom na ekranima, podrškom za varijabilne fontove i još mnogo toga. Pročitajte više o izvornim skupovima fontova u ovom članku Smashing Magazina .

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

Imajte na umu da će, budući da skup fontova uključuje emoji fontove, mnogi uobičajeni simboli/dingbat Unicode znakovi biti prikazani kao višebojni piktogrami. Njihov izgled će se razlikovati u zavisnosti od stila koji se koristi u izvornom fontu emotikona pretraživača/platforme, i na njih neće uticati nijedan CSS colorstil.

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

Naslovi i paragrafi

Svi elementi naslova—npr.— <h1>i <p>se resetuju da bi se margin-topuklonili. Dodani su naslovi margin-bottom: .5remi paragrafi margin-bottom: 1remza lakši razmak.

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

Horizontalna pravila

Element <hr>je pojednostavljen. Slično zadanim postavkama pretraživača, <hr>s se stiliziraju putem border-top, imaju zadanu vrijednost opacity: .25i automatski nasljeđuju svoj border-colorvia color, uključujući i kada colorje postavljeno preko nadređenog. Mogu se mijenjati pomoću uslužnih programa za tekst, okvir i neprozirnost.

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

Liste

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

Gornja margina svih lista je uklonjena
I njihova donja margina se normalizirala
Ugniježđene liste nemaju donju marginu
- Na taj način imaju ujednačeniji izgled
- Naročito kada slijedi više stavki na listi
Lijevi padding je također resetovan

Evo uređene liste
Sa nekoliko stavki na listi
Ima isti ukupni izgled
Kao prethodna neuređena lista

Za jednostavniji stil, jasnu hijerarhiju i bolji razmak, liste opisa su ažurirale margins. <dd>s resetirajte margin-leftna 0i dodajte margin-bottom: .5rem. <dt>s su podebljane .

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

Inline kod

Zamotajte umetnute isječke koda sa <code>. Obavezno izbjegnite HTML kutne zagrade.

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

html

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

Blokovi koda

Koristite <pre>s za više redova koda. Još jednom, pobrinite se da izbjegnete sve ugaone zagrade u kodu radi pravilnog prikazivanja. Element <pre>se resetuje kako bi se uklonio margin-topi koristio remjedinice za svoj 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>

Varijable

Za označavanje varijabli koristite <var>oznaku.

y = m x + b

html

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

Unos korisnika

Koristite <kbd>za označavanje unosa koji se obično unosi preko tastature.

Da biste promijenili direktorije, otkucajte cdnakon čega slijedi naziv direktorija.
Da izmenite podešavanja, pritisnite 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>

Izlaz uzorka

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

Ovaj tekst treba da se tretira kao uzorak izlaza iz kompjuterskog programa.

html

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

Stolovi

Tabele su malo prilagođene stilu <caption>s, skupljaju granice i osiguravaju dosljednost text-alignu cijelom. Dodatne promjene za granice, padding i drugo dolaze s klasom .table.

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

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>

Forms

Različiti elementi forme su ponovo pokrenuti radi jednostavnijih osnovnih stilova. Evo nekih od najznačajnijih promjena:

<fieldset>s nemaju ivice, padding ili margine tako da se mogu lako koristiti kao omoti za pojedinačne ulaze ili grupe ulaza.
<legend>s, kao i skupovi polja, također su restilizirani da se prikazuju kao neka vrsta naslova.
<label>s je postavljeno na display: inline-blockda dozvoli marginprimjenu.
<input>s, <select>s, <textarea>s i <button>s se uglavnom adresiraju pomoću Normalize, ali Reboot uklanja i njihove margini line-height: inherittakođer postavlja .
<textarea>s se modificiraju tako da se mogu mijenjati samo okomito jer horizontalna promjena veličine često "razbija" izgled stranice.
<button>s i <input>elementi gumba imaju cursor: pointerkada :not(:disabled).

Ove promjene, i još mnogo toga, prikazane su u nastavku.

Podrška za unos datuma i boje

Imajte na umu da svi pretraživači, odnosno Safari, ne podržavaju u potpunosti unose datuma .

Pokazivači na dugmadima

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 neophodna za <button>elemente koji dobijaju vlastitu cursorpromjenu.

Dugme elementa bez dugmeta

html

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

Razni elementi

Adresa

Element <address>je ažuriran da resetuje podrazumevane vrednosti pretraživača font-stylesa italicna normal. line-heightje također sada naslijeđen i margin-bottom: 1remdodat je. <address>s služe za predstavljanje kontakt informacija za najbližeg pretka (ili cijeli skup radova). Sačuvajte formatiranje završavajući redove sa <br>.

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

Puno ime
[email protected]

Blockquote

Podrazumevano marginza blok citate je 1em 40px, tako da smo to resetovali na 0 0 1remnešto što je konzistentnije sa drugim elementima.

Dobro poznati citat, sadržan u elementu blok citata.

Neko poznat u naslovu izvora

Inline elementi

Element <abbr>dobija osnovni stil kako bi se istakao među tekstom pasusa.

Element HTML skraćenica.

Sažetak

Podrazumevano cursoru rezimeu je text, tako da to resetujemo na da pointerbismo preneli da se sa elementom može stupiti u interakciju klikom na njega.

Neki detalji

Više informacija o detaljima.

Još više detalja

Evo još više detalja o detaljima.

HTML5 `[hidden]`atribut

HTML5 dodaje novi globalni atribut pod nazivom[hidden] , koji je display: nonestandardno stilizovan. Pozajmivši ideju od PureCSS-a , poboljšavamo ovu zadanu vrijednost tako što [hidden] { display: none !important; }ćemo spriječiti displayda se slučajno zaobiđe.

<input type="text" hidden>

jQuery nekompatibilnost

[hidden]nije kompatibilan sa jQuery-jem $(...).hide()i $(...).show()metodama. Stoga trenutno ne podržavamo [hidden]druge tehnike za upravljanje displayelementima.

Da biste samo promijenili vidljivost elementa, što znači da displaynije izmijenjen i da element i dalje može utjecati na tok dokumenta, umjesto toga koristite klasu ..invisible

Ponovo pokreni

Pristup

CSS varijable

Zadane postavke stranice

Nativni skup fontova

Naslovi i paragrafi

Horizontalna pravila

Liste

Inline kod

Blokovi koda

Varijable

Unos korisnika

Izlaz uzorka

Stolovi

Forms

Podrška za unos datuma i boje

Pokazivači na dugmadima

Razni elementi

Adresa

Blockquote

Inline elementi

Sažetak

HTML5 [hidden]atribut

jQuery nekompatibilnost

HTML5 `[hidden]`atribut