in English

Menyalakan ulang

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

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.

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.
<body>Juga menetapkan global , font-family, line-heightdan text-align. Ini diwarisi kemudian oleh beberapa elemen formulir untuk mencegah inkonsistensi font.
Untuk keamanan, <body>memiliki deklarasi background-color, default ke #fff.

Tumpukan font asli

Font web default (Helvetica Neue, Helvetica, dan Arial) telah dijatuhkan di Bootstrap 4 dan diganti dengan "tumpukan font asli" untuk rendering teks yang optimal di setiap perangkat dan OS. Baca lebih lanjut tentang tumpukan font asli di artikel Majalah Smashing ini .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

Perhatikan bahwa karena tumpukan font menyertakan font emoji, banyak simbol umum/karakter Unicode dingbat akan ditampilkan sebagai piktograf multi-warna. 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

Daftar

Semua daftar— <ul>, <ol>, dan <dl>— telah margin-topdihapus dan a margin-bottom: 1rem. Daftar bersarang tidak memiliki margin-bottom.

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.

Teks yang telah diformat sebelumnya

Elemen <pre>diatur ulang untuk menghapusnya margin-topdan menggunakan remunit untuknya margin-bottom.

.contoh-elemen {
  margin-bawah: 1rem;
}

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

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.

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

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

Nulla attr vitae elit libero, seorang pharetra augue.

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. Meskipun [hidden]tidak didukung secara native oleh IE10, deklarasi eksplisit di CSS kami mengatasi masalah itu.

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