Rindizni

Reboot, një koleksion ndryshimesh CSS specifike për elementë në një skedar të vetëm, nis Bootstrap për të ofruar një bazë elegante, të qëndrueshme dhe të thjeshtë për t'u ndërtuar mbi të.

Në këtë faqe

Qasje

Rindezja bazohet në Normalize, duke siguruar shumë elementë HTML me stile disi të mendimit duke përdorur vetëm përzgjedhës elementësh. Stilimi shtesë bëhet vetëm me klasa. Për shembull, ne rinisim disa <table>stile për një bazë më të thjeshtë dhe më vonë ofrojmë .table, .table-bordered, dhe më shumë.

Këtu janë udhëzimet dhe arsyet tona për të zgjedhur atë që të anashkaloni në Reboot:

Përditësoni disa vlera të paracaktuara të shfletuesit për të përdorur rems në vend të ems për ndarje të shkallëzueshme të komponentëve.
Shmangni margin-top. Kufijtë vertikale mund të shemben, duke dhënë rezultate të papritura. Megjithatë, më e rëndësishmja, një drejtim i vetëm i marginështë një model mendor më i thjeshtë.
Për shkallëzim më të lehtë në përmasat e pajisjes, elementët e bllokut duhet të përdorin rems për margins.
Mbani fontnë minimum deklaratat e pronave të lidhura, duke i përdorur inheritsa herë që është e mundur.

Variablat CSS

Shtuar në v5.2.0

Me v5.1.1, ne standardizuam @imports-të tanë të kërkuar në të gjitha paketat tona CSS (duke përfshirë bootstrap.css, bootstrap-reboot.css, dhe bootstrap-grid.css) për të përfshirë _root.scss. Kjo shton :rootvariabla të nivelit CSS në të gjitha paketat, pavarësisht se sa prej tyre janë përdorur në atë grup. Në fund të fundit, Bootstrap 5 do të vazhdojë të shohë më shumë variabla CSS të shtuara me kalimin e kohës, në mënyrë që të ofrojë më shumë personalizim në kohë reale pa nevojën për të ripërpiluar gjithmonë Sass. Qasja jonë është të marrim variablat tona burimore Sass dhe t'i transformojmë ato në variabla CSS. Në këtë mënyrë, edhe nëse nuk përdorni variabla CSS, ju përsëri keni të gjithë fuqinë e Sass. Kjo është ende në progres dhe do të duhet kohë për t'u zbatuar plotësisht.

Për shembull, merrni parasysh këto :rootvariabla CSS për <body>stilet e zakonshme:

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

Në praktikë, ato variabla më pas aplikohen në Reboot si kjo:

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
}

E cila ju lejon të bëni personalizime në kohë reale si të doni:

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

Parazgjedhjet e faqes

Elementet <html>dhe <body>janë përditësuar për të ofruar parazgjedhje më të mira në të gjithë faqen. Më specifikisht:

Është box-sizingvendosur globalisht në çdo element—duke përfshirë *::beforedhe *::after, në border-box. Kjo siguron që gjerësia e deklaruar e elementit të mos tejkalohet kurrë për shkak të mbushjes ose kufirit.
- Asnjë bazë nuk font-sizeështë deklaruar në <html>, por 16pxsupozohet (parazgjedhja e shfletuesit). font-size: 1remzbatohet në <body>për shkallëzim të lehtë të përgjegjshëm të tipit nëpërmjet pyetjeve të medias duke respektuar preferencat e përdoruesve dhe duke siguruar një qasje më të aksesueshme. Ky parazgjedhje e shfletuesit mund të anashkalohet duke modifikuar $font-size-rootvariablin.
Gjithashtu <body>vendos një globale font-family, font-weight, line-heightdhe color. Kjo trashëgohet më vonë nga disa elementë të formës për të parandaluar mospërputhjet e shkronjave.
Për siguri, <body>ka një të deklaruar background-color, duke mos u vendosur në #fff.

Stafi i shkronjave origjinale

Bootstrap përdor një "stivë të shkronjave amtare" ose "stivë të shkronjave të sistemit" për interpretimin optimal të tekstit në çdo pajisje dhe OS. Këto fonte të sistemit janë krijuar posaçërisht duke pasur parasysh pajisjet e sotme, me interpretim të përmirësuar në ekrane, mbështetje të ndryshueshme të shkronjave dhe më shumë. Lexoni më shumë rreth grupeve të shkronjave vendase në këtë artikull të Revistës Smashing .

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

Vini re se për shkak se grumbulli i shkronjave përfshin shkronja emoji, shumë karaktere të zakonshme të simbolit/dingbat Unicode do të paraqiten si piktografë me shumë ngjyra. Pamja e tyre do të ndryshojë, në varësi të stilit të përdorur në fontin e emoji të shfletuesit/platformës dhe ato nuk do të ndikohen nga asnjë stil CSS color.

Kjo font-familyaplikohet <body>dhe trashëgohet automatikisht globalisht në të gjithë Bootstrap. Për të ndërruar versionin global font-family, përditësoni $font-family-basedhe rikompiloni Bootstrap.

Titujt dhe paragrafët

Të gjithë elementët e titullit - p.sh. - <h1>dhe <p>janë rivendosur për t'u margin-tophequr. Titujt janë margin-bottom: .5remshtuar dhe paragrafët margin-bottom: 1rempër ndarje të lehtë.

Drejtimi	Shembull
`<h1></h1>`	h1. Titulli i bootstrap
`<h2></h2>`	h2. Titulli i bootstrap
`<h3></h3>`	h3. Titulli i bootstrap
`<h4></h4>`	h4. Titulli i bootstrap
`<h5></h5>`	h5. Titulli i bootstrap
`<h6></h6>`	h6. Titulli i bootstrap

Rregullat horizontale

Elementi <hr>është thjeshtuar. Ngjashëm me parazgjedhjet e shfletuesit, <hr>s-të stilohen nëpërmjet border-top, kanë një parazgjedhje opacity: .25dhe trashëgojnë automatikisht ato border-colornëpërmjet color, duke përfshirë kur colorvendoset nëpërmjet prindit. Ato mund të modifikohen me programet e tekstit, kufirit dhe opacitetit.

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

Listat

Të gjitha listat— <ul>, <ol>, dhe <dl>— janë margin-tophequr dhe një margin-bottom: 1rem. Listat e mbivendosura nuk kanë margin-bottom. Ne kemi rivendosur gjithashtu elementët ndezës padding-leftdhe <ul>.<ol>

Të gjitha listat u hiqet diferenca kryesore
Dhe diferenca e tyre e poshtme u normalizua
Listat e mbivendosura nuk kanë diferencë të poshtme
- Në këtë mënyrë ato kanë një pamje më të barabartë
- Veçanërisht kur pasohet nga më shumë artikuj të listës
Mbushja e majtë gjithashtu është rivendosur

Këtu është një listë e renditur
Me disa artikuj të listës
Ka të njëjtën pamje të përgjithshme
Si lista e mëparshme e parenditur

Për stilim më të thjeshtë, hierarki të qartë dhe ndarje më të mirë, listat e përshkrimeve kanë përditësuar margins. <dd>s rivendoset margin-leftnë 0dhe shtoni margin-bottom: .5rem. <dt>s janë të guximshme .

Listat e përshkrimeve: Një listë përshkrimi është e përkryer për përcaktimin e termave.
Afati: Përkufizimi për termin.; Një përkufizim i dytë për të njëjtin term.
Një term tjetër: Përkufizimi për këtë term tjetër.

Kodi i linjës

Mbështillni pjesët e kodit në linjë me <code>. Sigurohuni që t'i shpëtoni kllapave këndore HTML.

Për shembull, <section>duhet të mbështillet si inline.

html

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

Blloqe kodi

Përdorni <pre>s për linja të shumta kodi. Edhe një herë, sigurohuni që t'i shpëtoni çdo kllapa këndi në kod për paraqitjen e duhur. Elementi <pre>rivendoset për të hequr margin-topdhe për të përdorur remnjësitë për të 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>

Variablat

Për të treguar variablat përdorni <var>etiketën.

y = m x + b

html

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

Hyrja e përdoruesit

Përdorni <kbd>për të treguar hyrjen që zakonisht futet përmes tastierës.

Për të ndërruar drejtoritë, shkruani cdtë ndjekur nga emri i drejtorisë.
Për të modifikuar cilësimet, shtypni 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>

Prodhimi i mostrës

Për të treguar prodhimin e mostrës nga një program përdorni <samp>etiketën.

Ky tekst është menduar të trajtohet si rezultat i mostrës nga një program kompjuterik.

html

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

Tabelat

Tabelat janë përshtatur paksa për të stiluar <caption>s, kolapsin kufijtë dhe sigurojnë konsistencë në të text-aligngjithë. Ndryshime shtesë për kufijtë, mbushjet dhe më shumë vijnë me klasën.table .

Kjo është një tabelë shembull, dhe ky është titulli i saj për të përshkruar përmbajtjen.
Titulli i tabelës	Titulli i tabelës	Titulli i tabelës	Titulli i tabelës
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline
Qelizë tavoline	Qelizë tavoline	Qelizë tavoline	Qelizë tavoline

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>

Format

Elementë të ndryshëm të formës janë rindezur për stile bazë më të thjeshta. Këtu janë disa nga ndryshimet më të dukshme:

<fieldset>Nuk kanë kufij, mbushje ose diferencë, kështu që ato mund të përdoren lehtësisht si mbështjellës për hyrje individuale ose grupe hyrjesh.
<legend>s, si grupet e fushave, gjithashtu janë ristrukturuar për t'u shfaqur si një lloj lloji.
<label>s janë caktuar për display: inline-blocktë lejuar marginqë të aplikohen.
<input>s, <select>s, <textarea>s dhe <button>s trajtohen kryesisht nga Normalize, por Reboot i heq ato margindhe vendos line-height: inheritgjithashtu.
<textarea>s janë modifikuar që të mund të ndryshohen vetëm vertikalisht pasi ndryshimi i madhësisë horizontale shpesh "prish" paraqitjen e faqes.
<button>s dhe <input>elementet e butonit kanë cursor: pointerkur :not(:disabled).

Këto ndryshime, dhe më shumë, janë demonstruar më poshtë.

Shembull legjendë

Shembull hyrje

Shembull email

Shembull telefoni

Shembull url

Numri i shembullit

Shembull kërkimi

Gama e shembullit

Shembull i hyrjes së skedarit

Shembull zgjidhni

Kontrolloni këtë kuti

Opsioni i parë është kjo dhe ajo Opsioni dy është diçka tjetër që është gjithashtu shumë e gjatë për të demonstruar mbështjelljen e këtyre kontrolleve të bukura të formës. Opsioni tre është i çaktivizuar

Shembull i zonës së tekstit

Shembull data

Shembull kohë

Shembull fjalëkalimi

Shembull datatime-local

Shembull javë

Shembull muaj

Shembull ngjyra

Shembull i prodhimit 100

Mbështetje për hyrjen e datës dhe ngjyrës

Mbani në mend se të dhënat e datës nuk mbështeten plotësisht nga të gjithë shfletuesit, përkatësisht Safari.

Treguesit në butona

Rindezja përfshin një përmirësim për role="button"të ndryshuar kursorin e paracaktuar në pointer. Shtoni këtë atribut tek elementët për të ndihmuar që elementët të jenë ndërveprues. Ky rol nuk është i nevojshëm për <button>elementët, të cilët marrin cursorndryshimin e tyre.

Butoni i elementit pa butona

html

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

Elemente të ndryshme

Adresë

Elementi <address>përditësohet për të rivendosur parazgjedhjen e shfletuesit font-stylenga italicnë normal. line-heighttani është trashëguar dhe margin-bottom: 1remështë shtuar. <address>s janë për paraqitjen e informacionit të kontaktit për paraardhësin më të afërt (ose një pjesë të tërë të punës). Ruani formatimin duke i përfunduar rreshtat me <br>.

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

Emri i plotë
[email protected]

Bllokquote

Parazgjedhja marginnë kuotat e bllokut është 1em 40px, kështu që ne e rivendosim atë në 0 0 1rempër diçka më të qëndrueshme me elementët e tjerë.

Një citat i njohur, i përfshirë në një element blloku.

Dikush i famshëm në Titullin e Burimit

Elementet inline

Elementi <abbr>merr një stil bazë për ta bërë atë të dallohet mes tekstit të paragrafit.

Elementi i shkurtesës HTML .

Përmbledhje

Përmbledhja e parazgjedhur cursorështë text, kështu që ne e rivendosim atë në pointerpër të përcjellë se elementi mund të ndërveprohet duke klikuar mbi të.

Disa detaje

Më shumë informacion rreth detajeve.

Edhe më shumë detaje

Këtu janë edhe më shumë detaje rreth detajeve.

`[hidden]`atribut HTML5

HTML5 shton një atribut të ri global të quajtur[hidden] , i cili është stiluar si display: noneparazgjedhje. Duke huazuar një ide nga PureCSS , ne përmirësojmë këtë parazgjedhje duke bërë [hidden] { display: none !important; }për të ndihmuar në parandalimin e displayanashkalimit të tij aksidental.

<input type="text" hidden>

papajtueshmëri jQuery

[hidden]nuk është në përputhje me jQuery $(...).hide()dhe $(...).show()metodat. Prandaj, ne aktualisht nuk i miratojmë veçanërisht [hidden]teknikat e tjera për menaxhimin displaye elementeve.

Thjesht për të ndryshuar dukshmërinë e një elementi, që do të thotë se displayai nuk është modifikuar dhe elementi mund të ndikojë ende në rrjedhën e dokumentit, përdorni klasën në vend të.invisible kësaj.

Rindizni

Qasje

Variablat CSS

Parazgjedhjet e faqes

Stafi i shkronjave origjinale

Titujt dhe paragrafët

Rregullat horizontale

Listat

Kodi i linjës

Blloqe kodi

Variablat

Hyrja e përdoruesit

Prodhimi i mostrës

Tabelat

Format

Mbështetje për hyrjen e datës dhe ngjyrës

Treguesit në butona

Elemente të ndryshme

Adresë

Bllokquote

Elementet inline

Përmbledhje

[hidden]atribut HTML5

papajtueshmëri jQuery

`[hidden]`atribut HTML5