Source

But semula

But semula, koleksi perubahan CSS khusus elemen dalam satu fail, mulakan Bootstrap untuk menyediakan garis dasar yang elegan, konsisten dan mudah untuk dibina.

Pendekatan

But semula dibina atas Normalize, menyediakan banyak elemen HTML dengan gaya yang agak berpandangan hanya menggunakan pemilih elemen. Penggayaan tambahan dilakukan hanya dengan kelas. Sebagai contoh, kami but semula beberapa <table>gaya untuk garis dasar yang lebih ringkas dan kemudian memberikan .table, .table-bordered, dan banyak lagi.

Berikut ialah garis panduan dan sebab kami untuk memilih perkara yang perlu ditindih dalam But semula:

Kemas kini beberapa nilai lalai penyemak imbas untuk menggunakan rems dan bukannya ems untuk jarak komponen boleh skala.
elakkan margin-top. Jidar menegak boleh runtuh, menghasilkan hasil yang tidak dijangka. Lebih penting lagi, satu arah marginadalah model mental yang lebih mudah.
Untuk penskalaan yang lebih mudah merentas saiz peranti, elemen blok harus menggunakan rems untuk margins.
Pastikan pengisytiharan fontsifat berkaitan - pada tahap minimum, menggunakan inheritapabila boleh.

Halaman lalai

Elemen <html>dan <body>dikemas kini untuk menyediakan lalai seluruh halaman yang lebih baik. Lebih khusus:

Ia ditetapkan box-sizingsecara global pada setiap elemen—termasuk *::beforedan *::after, hingga border-box. Ini memastikan bahawa lebar elemen yang diisytiharkan tidak pernah melebihi kerana pelapik atau sempadan.
Tiada asas font-sizediisytiharkan pada <html>, tetapi 16pxdiandaikan (lalai penyemak imbas). font-size: 1remdigunakan pada <body>penskalaan jenis responsif yang mudah melalui pertanyaan media sambil menghormati pilihan pengguna dan memastikan pendekatan yang lebih mudah diakses.
The <body>juga menetapkan global font-family, line-height, dan text-align. Ini diwarisi kemudian oleh beberapa elemen bentuk untuk mengelakkan ketidakkonsistenan fon.
Untuk keselamatan, <body>telah diisytiharkan background-color, lalai kepada #fff.

Timbunan fon asli

Fon web lalai (Helvetica Neue, Helvetica, dan Arial) telah digugurkan dalam Bootstrap 4 dan digantikan dengan "tindanan fon asli" untuk pemaparan teks optimum pada setiap peranti dan OS. Baca lebih lanjut mengenai susunan fon asli dalam 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-familydigunakan pada <body>dan secara automatik diwarisi secara global di seluruh Bootstrap. Untuk menukar global font-family, kemas kini $font-family-basedan susun semula Bootstrap.

Tajuk dan perenggan

Semua elemen tajuk—cth, <h1>—dan <p>ditetapkan semula untuk margin-topdialih keluar. Tajuk telah margin-bottom: .5remditambah dan perenggan margin-bottom: 1remuntuk jarak yang mudah.

Tajuk	Contoh
`<h1></h1>`	h1. Tajuk Bootstrap
`<h2></h2>`	h2. Tajuk Bootstrap
`<h3></h3>`	h3. Tajuk Bootstrap
`<h4></h4>`	h4. Tajuk Bootstrap
`<h5></h5>`	h5. Tajuk Bootstrap
`<h6></h6>`	h6. Tajuk Bootstrap

Senarai

Semua senarai— <ul>, <ol>, dan <dl>— telah margin-topdialih keluar dan margin-bottom: 1rem. Senarai bersarang tidak mempunyai margin-bottom.

Lorem ipsum dolor duduk amet
Consectetur adipiscing elit
Integer molestie lorem dan massa
Facilisis dalam pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean duduk amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor duduk amet
Consectetur adipiscing elit
Integer molestie lorem dan massa
Facilisis dalam pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean duduk amet erat nunc
Eget porttitor lorem

Untuk penggayaan yang lebih ringkas, hierarki yang jelas dan jarak yang lebih baik, senarai perihalan telah mengemas kini margins. <dd>s set semula margin-leftkepada 0dan tambah margin-bottom: .5rem. <dt>s dicetak tebal .

Senarai penerangan: Senarai perihalan sesuai untuk menentukan istilah.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida and eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Teks praformat

Elemen <pre>ditetapkan semula untuk mengalih keluarnya margin-topdan menggunakan remunit untuk margin-bottom.

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

Meja

Jadual dilaraskan sedikit kepada gaya <caption>s, runtuhkan sempadan dan pastikan konsisten text-alignsepanjang keseluruhannya. Perubahan tambahan untuk sempadan, pelapik dan banyak lagi disertakan dengan kelas .table.

Ini ialah jadual contoh, dan ini adalah kapsyennya untuk menerangkan kandungannya.
Tajuk jadual	Tajuk jadual	Tajuk jadual	Tajuk jadual
Sel meja	Sel meja	Sel meja	Sel meja
Sel meja	Sel meja	Sel meja	Sel meja
Sel meja	Sel meja	Sel meja	Sel meja

Borang

Pelbagai elemen bentuk telah dibut semula untuk gaya asas yang lebih ringkas. Berikut adalah beberapa perubahan yang paling ketara:

<fieldset>s tidak mempunyai sempadan, padding atau margin supaya ia boleh digunakan dengan mudah sebagai pembalut untuk input individu atau kumpulan input.
<legend>s, seperti set medan, juga telah digayakan semula untuk dipaparkan sebagai tajuk jenis.
<label>s ditetapkan display: inline-blockuntuk membenarkan marginuntuk digunakan.
<input>s, <select>s, <textarea>s, dan <button>s kebanyakannya ditangani oleh Normalize, tetapi Reboot mengalih keluar mereka margindan set line-height: inherit, juga.
<textarea>s diubah suai kepada hanya boleh diubah saiz secara menegak kerana saiz semula mendatar sering "memecahkan" susun atur halaman.
<button>s dan <input>elemen butang mempunyai cursor: pointerapabila :not(:disabled).

Perubahan ini, dan banyak lagi, ditunjukkan di bawah.

Elemen lain

Alamat

Elemen <address>dikemas kini untuk menetapkan semula lalai penyemak imbas font-styledari italickepada normal. line-heightjuga kini diwarisi, dan margin-bottom: 1remtelah ditambah. <address>s adalah untuk menyampaikan maklumat hubungan untuk nenek moyang terdekat (atau seluruh badan kerja). Kekalkan pemformatan dengan menamatkan baris dengan <br>.

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

Nama Penuh
[email protected]

Sebut harga

Lalai marginpada petikan sekat ialah 1em 40px, jadi kami menetapkan semula itu 0 0 1remuntuk sesuatu yang lebih konsisten dengan elemen lain.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Seseorang yang terkenal dalam Tajuk Sumber

Elemen sebaris

Elemen <abbr>menerima penggayaan asas untuk menjadikannya menonjol di kalangan teks perenggan.

Nulla attr vitae elit libero, a pharetra augue.

Ringkasan

Lalai cursorpada ringkasan ialah text, jadi kami menetapkan semula itu kepada pointeruntuk menyampaikan bahawa elemen itu boleh berinteraksi dengan mengklik padanya.

Beberapa butiran

Maklumat lanjut tentang butiran.

Lebih terperinci lagi

Berikut adalah butiran lanjut tentang butiran.

`[hidden]`Atribut HTML5

HTML5 menambah atribut global baharu bernama[hidden] , yang digayakan display: nonesecara lalai. Meminjam idea daripada PureCSS , kami menambah baik lalai ini dengan membuat [hidden] { display: none !important; }untuk membantu mengelakkan idea tersebut daripada ditolak displaysecara tidak sengaja. Walaupun [hidden]tidak disokong secara asli oleh IE10, pengisytiharan eksplisit dalam CSS kami mengatasi masalah itu.

<input type="text" hidden>

ketidakserasian jQuery

[hidden]tidak serasi dengan jQuery $(...).hide()dan $(...).show()kaedah. Oleh itu, pada masa ini kami tidak menyokong [hidden]teknik lain untuk mengurus displayelemen.

Untuk hanya menogol keterlihatan elemen, bermakna ia displaytidak diubah suai dan elemen itu masih boleh menjejaskan aliran dokumen, gunakan kelas.invisible sebaliknya .