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
rem
s alih-alihem
s untuk spasi komponen yang dapat diskalakan. - Hindari
margin-top
. Margin vertikal dapat runtuh, menghasilkan hasil yang tidak terduga. Lebih penting lagi, satu arahmargin
adalah model mental yang lebih sederhana. - Untuk penskalaan yang lebih mudah di seluruh ukuran perangkat, elemen blok harus menggunakan
rem
s untukmargin
s. - Jaga agar deklarasi
font
properti -terkait seminimal mungkin, gunakaninherit
jika memungkinkan.
variabel CSS
Ditambahkan di v5.1.1
Dengan v5.1.1, kami menstandardisasi @import
s yang diperlukan di semua bundel CSS kami (termasuk bootstrap.css
, bootstrap-reboot.css
, dan bootstrap-grid.css
untuk menyertakan _root.scss
. Ini menambahkan :root
variabel level CSS ke semua bundel, terlepas dari berapa banyak yang digunakan dalam bundel itu. Pada akhirnya Bootstrap 5 akan terus lihat lebih banyak variabel CSS ditambahkan dari waktu ke waktu.
Default halaman
Elemen <html>
dan <body>
diperbarui untuk memberikan default seluruh halaman yang lebih baik. Lebih spesifik:
- The
box-sizing
disetel secara global pada setiap elemen—termasuk*::before
dan*::after
, hinggaborder-box
. Ini memastikan bahwa lebar elemen yang dideklarasikan tidak pernah terlampaui karena padding atau border.- Tidak ada basis
font-size
yang dideklarasikan pada<html>
, tetapi16px
diasumsikan (default browser).font-size: 1rem
diterapkan 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-root
variabel.
- Tidak ada basis
- Itu
<body>
juga menetapkan globalfont-family
,font-weight
,line-height
, dancolor
. Ini diwarisi kemudian oleh beberapa elemen formulir untuk mencegah inkonsistensi font. - Untuk keamanan,
<body>
memiliki deklarasibackground-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,
// 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 karakter unicode simbol/dingbat yang umum 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 color
gaya CSS apa pun.
Ini font-family
diterapkan ke <body>
dan secara otomatis diwarisi secara global di seluruh Bootstrap. Untuk mengganti global font-family
, perbarui $font-family-base
dan kompilasi ulang Bootstrap.
variabel CSS
Seiring dengan semakin matangnya Bootstrap 5, semakin banyak gaya akan dibangun dengan variabel CSS sebagai sarana untuk menyediakan 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 :root
variabel CSS ini untuk <body>
gaya umum:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
Dalam praktiknya, variabel-variabel tersebut kemudian diterapkan di Reboot seperti:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-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>
Judul dan paragraf
Semua elemen heading—misalnya, <h1>
—dan <p>
direset agar margin-top
dihilangkan. Judul telah margin-bottom: .5rem
ditambahkan dan paragraf margin-bottom: 1rem
untuk 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-top
dihapus dan a margin-bottom: 1rem
. Daftar bersarang tidak memiliki margin-bottom
. Kami juga telah mengatur ulang elemen padding-left
aktif <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 margin
s. <dd>
s ulang margin-left
ke 0
dan 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.
<section>
harus dibungkus sebagai inline.
For example, <code><section></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-top
dan menggunakan rem
unit untuknya margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Variabel
Untuk menunjukkan variabel gunakan <var>
tag.
<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 mengedit pengaturan, tekan ctrl + ,
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.
<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-align
di seluruh. Perubahan tambahan untuk border, padding, dan lainnya hadir dengan .table
class .
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 kedisplay: inline-block
untuk memungkinkanmargin
diterapkan.<input>
s,<select>
s,<textarea>
s, dan<button>
s sebagian besar ditangani oleh Normalize, tetapi Reboot menghapusmargin
dan juga set merekaline-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 memilikicursor: pointer
ketika: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
<span role="button" tabindex="0">Non-button element button</span>
elemen lain-lain
Alamat
Elemen <address>
diperbarui untuk mengatur ulang default browser font-style
dari italic
ke normal
. line-height
juga sekarang diwarisi, dan margin-bottom: 1rem
telah ditambahkan. <address>
s adalah untuk menyajikan informasi kontak untuk leluhur terdekat (atau seluruh karya). Pertahankan pemformatan dengan mengakhiri baris dengan <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nama Lengkap
[email protected]
Blockquote
Default margin
pada blockquotes adalah 1em 40px
, jadi kami menyetel ulang ke 0 0 1rem
untuk 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.
Ringkasan
Default cursor
pada ringkasan adalah text
, jadi kami mengatur ulang pointer
untuk 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: none
secara default. Meminjam ide dari PureCSS , kami memperbaiki default ini dengan membuat [hidden] { display: none !important; }
untuk membantu mencegahnya display
ditimpa 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 display
elemen.
Untuk hanya mengubah visibilitas suatu elemen, artinya elemen display
tersebut tidak dimodifikasi dan elemen tersebut masih dapat memengaruhi aliran dokumen, gunakan kelas .invisible
sebagai gantinya.