Menyalakan ulang

Reboot, kumpulan perubahan CSS khusus elemen dalam satu file, memulai Bootstrap untuk memberikan dasar yang elegan, konsisten, dan sederhana untuk dibangun.

Di halaman ini

Mendekati

Reboot dibangun di atas Normalize, menyediakan banyak elemen HTML dengan gaya yang agak berpendirian hanya menggunakan pemilih elemen. Penataan gaya tambahan hanya dilakukan dengan kelas. Misalnya, kami me-reboot beberapa <table>gaya untuk garis dasar yang lebih sederhana dan kemudian menyediakan .table, .table-bordered, dan banyak lagi.

Berikut adalah panduan dan alasan kami untuk memilih apa yang akan ditimpa di Reboot:

Perbarui beberapa nilai default browser untuk menggunakan rems alih-alih ems untuk spasi komponen yang dapat diskalakan.
Hindari margin-top. Margin vertikal dapat runtuh, menghasilkan hasil yang tidak terduga. Lebih penting lagi, satu arah marginadalah model mental yang lebih sederhana.
Untuk penskalaan yang lebih mudah di seluruh ukuran perangkat, elemen blok harus menggunakan rems untuk margins.
Jaga agar deklarasi fontproperti -terkait seminimal mungkin, gunakan inheritjika memungkinkan.

variabel CSS

Ditambahkan di v5.2.0

Dengan v5.1.1, kami menstandarisasi @imports yang diperlukan di semua bundel CSS kami (termasuk bootstrap.css, bootstrap-reboot.css, dan bootstrap-grid.css) untuk menyertakan _root.scss. Ini menambahkan :rootvariabel CSS level ke semua bundel, terlepas dari berapa banyak dari mereka yang digunakan dalam bundel itu. Pada akhirnya Bootstrap 5 akan terus melihat lebih banyak variabel CSS ditambahkan dari waktu ke waktu, untuk memberikan lebih banyak penyesuaian waktu nyata tanpa harus selalu mengkompilasi ulang Sass. Pendekatan kami adalah mengambil variabel Sass sumber kami dan mengubahnya menjadi variabel CSS. Dengan begitu, bahkan jika Anda tidak menggunakan variabel CSS, Anda masih memiliki semua kekuatan Sass. Ini masih dalam proses dan akan membutuhkan waktu untuk diterapkan sepenuhnya.

Misalnya, pertimbangkan :rootvariabel CSS ini untuk <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};

Dalam praktiknya, variabel-variabel tersebut kemudian diterapkan di Reboot seperti:

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
}

Yang memungkinkan Anda membuat penyesuaian waktu nyata sesuka Anda:

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

Default halaman

Elemen <html>dan <body>diperbarui untuk memberikan default seluruh halaman yang lebih baik. Lebih spesifik:

The box-sizingdisetel secara global pada setiap elemen—termasuk *::beforedan *::after, hingga border-box. Ini memastikan bahwa lebar elemen yang dideklarasikan tidak pernah terlampaui karena padding atau border.
- Tidak ada basis font-sizeyang dideklarasikan pada <html>, tetapi 16pxdiasumsikan (default browser). font-size: 1remditerapkan pada <body>penskalaan tipe responsif yang mudah melalui kueri media sambil menghormati preferensi pengguna dan memastikan pendekatan yang lebih mudah diakses. Default browser ini dapat diganti dengan memodifikasi $font-size-rootvariabel.
Itu <body>juga menetapkan global font-family, font-weight, line-height, dan color. Ini diwarisi kemudian oleh beberapa elemen formulir untuk mencegah inkonsistensi font.
Untuk keamanan, <body>memiliki deklarasi background-color, default ke #fff.

Tumpukan font asli

Bootstrap menggunakan "tumpukan font asli" atau "tumpukan font sistem" untuk rendering teks yang optimal pada setiap perangkat dan OS. Font sistem ini telah dirancang khusus dengan mempertimbangkan perangkat saat ini, dengan rendering yang lebih baik di layar, dukungan font variabel, dan banyak lagi. Baca lebih lanjut tentang tumpukan font asli di artikel Majalah Smashing ini .

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

Perhatikan bahwa karena tumpukan font menyertakan font emoji, banyak simbol umum/karakter Unicode dingbat akan ditampilkan sebagai piktograf warna-warni. Penampilan mereka akan bervariasi, tergantung pada gaya yang digunakan di font emoji asli browser/platform, dan mereka tidak akan terpengaruh oleh colorgaya CSS apa pun.

Ini font-familyditerapkan ke <body>dan secara otomatis diwarisi secara global di seluruh Bootstrap. Untuk mengganti global font-family, perbarui $font-family-basedan kompilasi ulang Bootstrap.

Judul dan paragraf

Semua elemen heading—misalnya, <h1>—dan <p>direset agar margin-topdihilangkan. Judul telah margin-bottom: .5remditambahkan dan paragraf margin-bottom: 1remuntuk memudahkan spasi.

Menuju	Contoh
`<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

Elemen <hr>telah disederhanakan. Mirip dengan default browser, <hr>s ditata melalui border-top, memiliki default opacity: .25, dan secara otomatis mewarisi border-colorvia color, termasuk ketika colordisetel melalui induknya. Mereka dapat dimodifikasi dengan teks, perbatasan, dan 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">

Daftar

Semua daftar— <ul>, <ol>, dan <dl>— telah margin-topdihapus dan a margin-bottom: 1rem. Daftar bersarang tidak memiliki margin-bottom. Kami juga telah mengatur ulang elemen padding-leftaktif <ul>dan <ol>.

Semua daftar memiliki margin teratas yang dihapus
Dan margin bawah mereka dinormalisasi
Daftar bersarang tidak memiliki margin bawah
- Dengan cara ini mereka memiliki penampilan yang lebih rata
- Terutama ketika diikuti oleh lebih banyak item daftar
Padding kiri juga telah diatur ulang

Berikut daftar pesanannya
Dengan beberapa item daftar
Ini memiliki tampilan keseluruhan yang sama
Seperti daftar tidak berurutan sebelumnya

Untuk penataan gaya yang lebih sederhana, hierarki yang jelas, dan spasi yang lebih baik, daftar deskripsi telah memperbarui margins. <dd>s ulang margin-leftke 0dan tambahkan margin-bottom: .5rem. <dt>s dicetak tebal .

Daftar deskripsi: Daftar deskripsi sangat cocok untuk mendefinisikan istilah.
Ketentuan: Definisi untuk istilah.; Definisi kedua untuk istilah yang sama.
Istilah lain: Definisi untuk istilah lain ini.

Kode sebaris

Bungkus potongan kode sebaris dengan <code>. Pastikan untuk keluar dari kurung sudut HTML.

Misalnya, <section>harus dibungkus sebagai inline.

html

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

Blok kode

Gunakan <pre>s untuk beberapa baris kode. Sekali lagi, pastikan untuk menghindari tanda kurung sudut dalam kode untuk rendering yang tepat. Elemen <pre>diatur ulang untuk menghapusnya margin-topdan menggunakan remunit untuknya 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

Untuk menunjukkan variabel gunakan <var>tag.

y = mx + b _

html

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

Masukan pengguna

Gunakan <kbd>untuk menunjukkan input yang biasanya dimasukkan melalui keyboard.

Untuk berpindah direktori, ketik cddiikuti dengan nama direktori.
Untuk mengedit pengaturan, tekan 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>

Contoh keluaran

Untuk menunjukkan contoh keluaran dari suatu program, gunakan <samp>tag.

Teks ini dimaksudkan untuk diperlakukan sebagai contoh keluaran dari program komputer.

html

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

Tabel

Tabel sedikit disesuaikan dengan gaya <caption>s, menciutkan batas, dan memastikan konsisten text-aligndi seluruh. Perubahan tambahan untuk border, padding, dan lainnya hadir dengan .tableclass .

Ini adalah contoh tabel, dan ini adalah keterangannya untuk menjelaskan isinya.
Judul tabel	Judul tabel	Judul tabel	Judul tabel
Sel tabel	Sel tabel	Sel tabel	Sel tabel
Sel tabel	Sel tabel	Sel tabel	Sel tabel
Sel tabel	Sel tabel	Sel tabel	Sel tabel

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>

Formulir

Berbagai elemen bentuk telah di-boot ulang untuk gaya dasar yang lebih sederhana. Berikut adalah beberapa perubahan yang paling menonjol:

<fieldset>s tidak memiliki batas, padding, atau margin sehingga dapat dengan mudah digunakan sebagai pembungkus untuk input individu atau kelompok input.
<legend>s, seperti fieldset, juga telah ditata ulang untuk ditampilkan sebagai semacam heading.
<label>s diatur ke display: inline-blockuntuk memungkinkan marginditerapkan.
<input>s, <select>s, <textarea>s, dan <button>s sebagian besar ditangani oleh Normalize, tetapi Reboot menghapus margindan juga set mereka line-height: inherit.
<textarea>s dimodifikasi agar hanya dapat diubah ukurannya secara vertikal karena pengubahan ukuran horizontal sering kali "merusak" tata letak halaman.
<button>s dan <input>elemen tombol memiliki cursor: pointerketika :not(:disabled).

Perubahan ini, dan banyak lagi, ditunjukkan di bawah ini.

Dukungan masukan tanggal & warna

Perlu diingat input tanggal tidak sepenuhnya didukung oleh semua browser, yaitu Safari.

Pointer pada tombol

Reboot mencakup peningkatan untuk role="button"mengubah kursor default ke pointer. Tambahkan atribut ini ke elemen untuk membantu menunjukkan elemen interaktif. Peran ini tidak diperlukan untuk elemen, yang mendapatkan perubahannya <button>sendiri .cursor

Tombol elemen non-tombol

html

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

elemen lain-lain

Alamat

Elemen <address>diperbarui untuk mengatur ulang default browser font-styledari italicke normal. line-heightjuga sekarang diwarisi, dan margin-bottom: 1remtelah ditambahkan. <address>s adalah untuk menyajikan informasi kontak untuk leluhur terdekat (atau seluruh karya). Pertahankan pemformatan dengan mengakhiri baris dengan <br>.

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

Nama Lengkap
[email protected]

Blockquote

Default marginpada blockquotes adalah 1em 40px, jadi kami menyetel ulang ke 0 0 1remuntuk sesuatu yang lebih konsisten dengan elemen lain.

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber

Elemen sebaris

Elemen <abbr>menerima gaya dasar untuk membuatnya menonjol di antara teks paragraf.

Elemen singkatan HTML .

Ringkasan

Default cursorpada ringkasan adalah text, jadi kami mengatur ulang pointeruntuk menyampaikan bahwa elemen dapat berinteraksi dengan mengkliknya.

Beberapa detail

Info lebih lanjut tentang detailnya.

Lebih detail lagi

Berikut adalah detail lebih lanjut tentang detailnya.

`[hidden]`Atribut HTML5

HTML5 menambahkan atribut global baru bernama[hidden] , yang ditata display: nonesecara default. Meminjam ide dari PureCSS , kami memperbaiki default ini dengan membuat [hidden] { display: none !important; }untuk membantu mencegahnya displayditimpa secara tidak sengaja.

<input type="text" hidden>

ketidakcocokan jQuery

[hidden]tidak kompatibel dengan jQuery $(...).hide()dan $(...).show()metode. Oleh karena itu, saat ini kami tidak secara khusus mendukung [hidden]teknik lain untuk mengelola displayelemen.

Untuk hanya mengubah visibilitas suatu elemen, artinya elemen displaytersebut tidak dimodifikasi dan elemen tersebut masih dapat memengaruhi aliran dokumen, gunakan kelas .invisiblesebagai gantinya.

Menyalakan ulang

Mendekati

variabel CSS

Default halaman

Tumpukan font asli

Judul dan paragraf

Aturan horisontal

Daftar

Kode sebaris

Blok kode

Variabel

Masukan pengguna

Contoh keluaran

Tabel

Formulir

Dukungan masukan tanggal & warna

Pointer pada tombol

elemen lain-lain

Alamat

Blockquote

Elemen sebaris

Ringkasan

[hidden]Atribut HTML5

ketidakcocokan jQuery

`[hidden]`Atribut HTML5