Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

  • Lorem ipsum dolor sit amet
  • Conectetur adipiscing elit
  • Integer molestie lorem di massa
  • Facilisis di pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Bisul purus sodales
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Dapatkan porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Conectetur adipiscing elit
  3. Integer molestie lorem di massa
  4. Facilisis di pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Dapatkan porttitor lorem

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.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida di eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

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.

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

Contoh legenda

100

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.

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

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.