Luncat ka eusi utama Luncat ka navigasi docs
Check
in English

Reboot

Reboot, kumpulan parobahan CSS unsur-spésifik dina hiji file, kickstart Bootstrap pikeun nyadiakeun hiji garis dasar elegan, konsisten, sarta basajan pikeun ngawangun kana.

Ngadeukeutan

Reboot diwangun dina Normalize, nyadiakeun loba elemen HTML kalawan gaya rada opinionated maké ngan selectors unsur. styling tambahan dipigawé ngan kalawan kelas. Contona, urang reboot sababaraha <table>gaya pikeun baseline basajan tur engké nyadiakeun .table, .table-bordered, sareng nu sanesna.

Ieu tungtunan sareng alesan pikeun milih naon anu kedah ditimpa dina Reboot:

  • Apdet sababaraha nilai standar browser ngagunakeun rems tinimbang ems pikeun spasi komponén scalable.
  • Nyingkahan margin-top. Margin nangtung bisa ambruk, ngahasilkeun hasil nu teu kaduga. Langkung pentingna sanaos, arah tunggal marginmangrupikeun modél mental anu langkung saderhana.
  • Pikeun skala gampang sakuliah ukuran alat, elemen blok kudu make rems pikeun margins.
  • Tetep deklarasi fontsipat -related ka minimum, ngagunakeun inheritsabisana.

variabel CSS

Ditambahkeun dina v5.2.0

Kalayan v5.1.1, kami ngabakukeun @imports anu dibutuhkeun dina sadaya kebat CSS kami (kalebet bootstrap.css, bootstrap-reboot.css, sareng bootstrap-grid.css) kalebet _root.scss. Ieu nambihan :rootvariabel CSS tingkat ka sadaya bundles, paduli sabaraha di antarana dipaké dina kebat éta. Pamustunganana Bootstrap 5 bakal teras-terasan ningali langkung seueur variabel CSS anu ditambah kana waktosna, supados nyayogikeun kustomisasi sacara real-time tanpa kedah salawasna nyusun ulang Sass. Pendekatan kami nyaéta nyandak variabel Sass sumber kami sareng ngarobih kana variabel CSS. Ku cara éta, sanajan anjeun henteu nganggo variabel CSS, anjeun masih gaduh sadaya kakuatan Sass. Ieu masih di-kamajuan sarta bakal butuh waktu pikeun pinuh nerapkeun.

Contona, anggap :rootvariabel CSS ieu pikeun <body>gaya umum:

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

Dina praktékna, variabel-variabel éta teras diterapkeun dina Reboot sapertos kieu:

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
}

Anu ngamungkinkeun anjeun ngadamel kustomisasi sacara real-time kumaha anjeun resep:

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

Kaca standar

Unsur <html>sareng <body>unsur diropéa pikeun nyayogikeun standar halaman anu langkung saé. Leuwih husus:

  • The box-sizingdisetel sacara global dina unggal unsur-kaasup *::beforejeung *::after, ka border-box. Ieu mastikeun yén lebar anu dinyatakeun tina unsur henteu pernah ngaleuwihan kusabab padding atanapi wates.
    • Taya basa font-sizedinyatakeun dina <html>, tapi 16pxdianggap (standar browser). font-size: 1remditerapkeun dina <body>pikeun skala tipe responsif gampang via queries média bari respecting preferensi pamaké sarta mastikeun pendekatan leuwih diaksés. Standar browser ieu tiasa ditimpa ku ngarobih $font-size-rootvariabel.
  • The <body>ogé susunan global font-family, font-weight, line-height, jeung color. Ieu diwariskeun engké ku sababaraha elemen formulir pikeun nyegah inconsistencies font.
  • Pikeun kasalametan, nu <body>geus dinyatakeun background-color, defaulting ka #fff.

Tumpukan font asli

Bootstrap ngagunakeun "tumpuk font asli" atanapi "tumpuk font sistem" pikeun rendering téks anu optimal dina unggal alat sareng OS. Fon sistem ieu parantos dirarancang khusus pikeun alat-alat ayeuna, kalayan rendering anu langkung saé dina layar, dukungan font variabel, sareng seueur deui. Baca leuwih seueur tentang tumpukan font asli dina artikel Smashing Magazine ieu .

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

Catet yén kusabab tumpukan font kalebet fon emoji, seueur karakter Unicode simbol/dingbat anu umum bakal didamel salaku piktograf warna-warni. Penampilanna bakal rupa-rupa, gumantung kana gaya anu dianggo dina browser / font emoji asli platform, sareng aranjeunna moal kapangaruhan ku colorgaya CSS.

Ieu font-familyditerapkeun ka <body>sareng otomatis diwariskeun sacara global sapanjang Bootstrap. Pikeun ngalihkeun global font-family, ngapdet $font-family-basesareng nyusun ulang Bootstrap.

Judul jeung paragraf

Sadaya elemen judul-contona, - <h1>sareng direset <p>supados margin-topdihapus. Judul geus margin-bottom: .5remditambahkeun jeung paragraf margin-bottom: 1rempikeun spasi gampang.

Judul Contona
<h1></h1> h1. Judul Bootstrap
<h2></h2> h2. Judul Bootstrap
<h3></h3> h3. Judul Bootstrap
<h4></h4> h4. Judul Bootstrap
<h5></h5> h5. Judul Bootstrap
<h6></h6> h6. Judul Bootstrap

Aturan horisontal

Unsur <hr>geus disederhanakeun. Sarupa jeung standar browser, <hr>s anu styled via border-top, boga standar opacity: .25, tur otomatis inherit border-colorvia maranéhna color, kaasup nalika colordiatur via indungna. Éta tiasa dirobih nganggo téks, wates, sareng utilitas opacity.





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

Daptar

Sadaya daptar— , <ul>, <ol>jeung — geus dihapus sarta a . Daptar Nested teu boga . Urang ogé geus ngareset on na elemen.<dl>margin-topmargin-bottom: 1remmargin-bottompadding-left<ul><ol>

  • Sadaya daptar gaduh margin luhurna dihapus
  • Sareng margin handapna dinormalisasi
  • Daptar sarang teu gaduh margin handap
    • Ku cara ieu aranjeunna gaduh penampilan anu langkung rata
    • Utamana lamun dituturkeun ku leuwih daptar item
  • Padding kénca ogé geus reset
  1. Ieu daptar pesenan
  2. Kalawan sababaraha item daptar
  3. Éta gaduh tampilan anu sami
  4. Salaku daptar unordered saméméhna

Pikeun styling basajan, hirarki jelas, sarta spasi hadé, béréndélan déskripsi geus diropéa margins. <dd>s reset margin-leftjeung 0nambahkeun margin-bottom: .5rem. <dt>s anu bolded .

Daptar pedaran
Daptar pedaran sampurna pikeun nangtukeun istilah.
istilah
Harti pikeun istilah.
Definisi kadua pikeun istilah anu sami.
Istilah sejen
Harti pikeun istilah séjén ieu.

Kodeu Inline

Bungkus inline snippét kode sareng <code>. Pastikeun kabur kurung sudut HTML.

Contona, <section>kudu dibungkus sakumaha inline.
html
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blok kode

Paké <pre>s pikeun sababaraha baris kode. Sakali deui, pastikeun kabur wae kurung sudut dina kode pikeun rendering ditangtoskeun. Unsur <pre>direset pikeun ngahapus margin-topsareng nganggo remunit pikeun 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>

Variabel

Pikeun nunjukkeun variabel nganggo <var>tag.

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

Input pamaké

Anggo <kbd>pikeun nunjukkeun input anu biasana diasupkeun ku keyboard.

Pikeun pindah diréktori, ketik cddituturkeun ku nami diréktori.
Pikeun ngédit setélan, pencét 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>

kaluaran sampel

Pikeun nunjukkeun kaluaran sampel tina program nganggo <samp>tag.

Téks ieu dimaksudkeun pikeun dianggap salaku kaluaran sampel tina program komputer.
html
<samp>This text is meant to be treated as sample output from a computer program.</samp>

tabél

Tables rada disaluyukeun kana gaya <caption>s, runtuhna wates, sarta mastikeun konsisten text-alignsakuliah. Parobihan tambahan pikeun wates, padding, sareng seueur deui kalebet .tablekelas .

Ieu mangrupikeun conto tabel, sareng ieu mangrupikeun caption pikeun ngajelaskeun eusina.
Judul méja Judul méja Judul méja Judul méja
Sél méja Sél méja Sél méja Sél méja
Sél méja Sél méja Sél méja Sél méja
Sél méja Sél méja Sél méja Sél méja
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>

Bentuk

Rupa-rupa elemen formulir geus rebooted pikeun gaya basa basajan. Ieu sababaraha parobahan anu paling kasohor:

  • <fieldset>s teu boga wates, padding, atawa margin ngarah bisa gampang dipaké salaku wrappers pikeun inputs individu atawa grup inputs.
  • <legend>s, kawas fieldsets, ogé geus restyled pikeun dipintonkeun salaku judul tina sorts.
  • <label>s disetel display: inline-blockka ngidinan marginpikeun dilarapkeun.
  • <input>s, <select>s, <textarea>s, jeung <button>s lolobana kajawab ku Normalize, tapi Reboot ngaluarkeun maranéhanana marginsarta susunan line-height: inherit, teuing.
  • <textarea>s dirobah jadi ukur bisa resizable vertikal sakumaha horizontal pangaturan ukuran jadi mindeng "megatkeun" perenah kaca.
  • <button>s sarta <input>elemen tombol gaduh cursor: pointernalika :not(:disabled).

Parobahan ieu, sareng seueur deui, dipidangkeun di handap.

Conto legenda

100

Pangrojong input tanggal & warna

Émut yén input tanggal henteu dirojong sapinuhna ku sadaya panyungsi, nyaéta Safari.

Pointers on tombol

Reboot kalebet paningkatan pikeun role="button"ngarobih kursor standar ka pointer. Tambahkeun atribut ieu elemen pikeun mantuan nunjukkeun elemen anu interaktif. Peran ieu teu dipikabutuh pikeun <button>elemen, nu meunang parobahan sorangan cursor.

Tombol elemen non-tombol
html
<span role="button" tabindex="0">Non-button element button</span>

elemen séjén

Alamat

Unsur <address>ieu diropéa pikeun ngareset standar browser font-styleti italicka normal. line-heightogé ayeuna diwariskeun, sarta margin-bottom: 1remgeus ditambahkeun. <address>s pikeun presenting informasi kontak pikeun karuhun pangcaketna (atawa sakabéh awak karya). Ngajaga pormat ku tungtung garis kalawan <br>.

Twitter, Nyarita
1355 Pasar St, Suite 900
San Fransisco, CA 94103
P: (123) 456-7890
Ngaran lengkep
[email protected]

Blockquote

The standar marginon blockquotes nyaeta 1em 40px, sangkan ngareset éta 0 0 1rempikeun hal anu leuwih konsisten jeung elemen séjén.

A cutatan well-dipikawanoh, dikandung dina unsur blockquote.

Batur kawentar dina Judul Sumber

Unsur Inline

Unsur <abbr>nampi gaya dasar pikeun ngajantenkeun éta menonjol diantara téks paragraf.

Unsur singketan HTML .

Ringkesan

The standar cursoron kasimpulan nyaeta text, sangkan ngareset yén pointerpikeun nepikeun yén unsur bisa berinteraksi kalayan ku ngaklik dinya.

Sababaraha rinci

Inpo nu leuwih lengkep tentang detil.

Malah leuwih rinci

Di dieu malah leuwih rinci ngeunaan detil.

[hidden]atribut HTML5

HTML5 nambahkeun atribut global anyar ngaranna[hidden] , nu geus styled sakumaha display: nonestandar. Nginjeum ide ti PureCSS , kami ningkatkeun standar ieu ku cara [hidden] { display: none !important; }ngabantosan nyegah displayteu kahaja ditimpa.

<input type="text" hidden>
sauyunan jQuery

[hidden]teu cocog jeung jQuery urang $(...).hide()jeung $(...).show()métode. Ku alatan éta, ayeuna urang teu utamana ngesahkeun [hidden]leuwih téhnik séjén pikeun ngatur displayelemen.

Pikeun ngan ukur togél pisibilitas unsur, hartosna displayéta henteu dirobih sareng unsur éta masih tiasa mangaruhan aliran dokumen, anggo .invisiblekelasna .