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
rem
s dan bukannyaem
s untuk jarak komponen boleh skala. - elakkan
margin-top
. Jidar menegak boleh runtuh, menghasilkan hasil yang tidak dijangka. Lebih penting lagi, satu arahmargin
adalah model mental yang lebih mudah. - Untuk penskalaan yang lebih mudah merentas saiz peranti, elemen blok harus menggunakan
rem
s untukmargin
s. - Pastikan pengisytiharan
font
sifat berkaitan - pada tahap minimum, menggunakaninherit
apabila boleh.
Halaman lalai
Elemen <html>
dan <body>
dikemas kini untuk menyediakan lalai seluruh halaman yang lebih baik. Lebih khusus:
- Ia ditetapkan
box-sizing
secara global pada setiap elemen—termasuk*::before
dan*::after
, hinggaborder-box
. Ini memastikan bahawa lebar elemen yang diisytiharkan tidak pernah melebihi kerana pelapik atau sempadan. - Tiada asas
font-size
diisytiharkan pada<html>
, tetapi16px
diandaikan (lalai penyemak imbas).font-size: 1rem
digunakan 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 globalfont-family
,line-height
, dantext-align
. Ini diwarisi kemudian oleh beberapa elemen bentuk untuk mengelakkan ketidakkonsistenan fon. - Untuk keselamatan,
<body>
telah diisytiharkanbackground-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,
// 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;
Ambil perhatian bahawa kerana timbunan fon termasuk fon emoji, banyak aksara biasa simbol/dingbat Unicode akan dipaparkan sebagai piktograf berbilang warna. Penampilan mereka akan berbeza-beza, bergantung pada gaya yang digunakan dalam fon emoji asli penyemak imbas/platform, dan mereka tidak akan terjejas oleh sebarang color
gaya CSS.
Ini font-family
digunakan pada <body>
dan secara automatik diwarisi secara global di seluruh Bootstrap. Untuk menukar global font-family
, kemas kini $font-family-base
dan susun semula Bootstrap.
Tajuk dan perenggan
Semua elemen tajuk—cth, <h1>
—dan <p>
ditetapkan semula untuk margin-top
dialih keluar. Tajuk telah margin-bottom: .5rem
ditambah dan perenggan margin-bottom: 1rem
untuk 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-top
dialih keluar dan margin-bottom: 1rem
. Senarai bersarang tidak mempunyai margin-bottom
.
- Semua senarai telah dialih keluar margin atasnya
- Dan margin bawah mereka menjadi normal
- Senarai bersarang tidak mempunyai margin bawah
- Dengan cara ini mereka mempunyai penampilan yang lebih sekata
- Terutama apabila diikuti dengan lebih banyak item senarai
- Pelapik kiri juga telah ditetapkan semula
- Berikut ialah senarai tersusun
- Dengan beberapa item senarai
- Ia mempunyai rupa keseluruhan yang sama
- Seperti senarai tidak tersusun sebelumnya
Untuk penggayaan yang lebih ringkas, hierarki yang jelas dan jarak yang lebih baik, senarai perihalan telah mengemas kini margin
s. <dd>
s set semula margin-left
kepada 0
dan tambah margin-bottom: .5rem
. <dt>
s dicetak tebal .
- Senarai penerangan
- Senarai huraian sesuai untuk menentukan istilah.
- Penggal
- Definisi untuk istilah.
- Definisi kedua untuk istilah yang sama.
- Istilah lain
- Definisi untuk istilah lain ini.
Teks praformat
Elemen <pre>
ditetapkan semula untuk mengalih keluarnya margin-top
dan menggunakan rem
unit untuk margin-bottom
.
.elemen contoh { margin-bawah: 1rem; }
Meja
Jadual dilaraskan sedikit kepada gaya <caption>
s, runtuhkan sempadan dan pastikan konsisten text-align
sepanjang keseluruhannya. Perubahan tambahan untuk sempadan, pelapik dan banyak lagi disertakan dengan kelas .table
.
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 ditetapkandisplay: inline-block
untuk membenarkanmargin
untuk digunakan.<input>
s,<select>
s,<textarea>
s, dan<button>
s kebanyakannya ditangani oleh Normalize, tetapi Reboot mengalih keluar merekamargin
dan setline-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 mempunyaicursor: pointer
apabila:not(:disabled)
.
Perubahan ini, dan banyak lagi, ditunjukkan di bawah.
Penunjuk pada butang
But semula termasuk peningkatan untuk role="button"
menukar kursor lalai kepada pointer
. Tambahkan atribut ini pada elemen untuk membantu menunjukkan elemen interaktif. Peranan ini tidak diperlukan untuk <button>
elemen, yang mendapat cursor
perubahan mereka sendiri.
<span role="button" tabindex="0">Non-button element button</span>
Elemen lain
Alamat
Elemen <address>
dikemas kini untuk menetapkan semula lalai penyemak imbas font-style
dari italic
kepada normal
. line-height
juga kini diwarisi, dan margin-bottom: 1rem
telah ditambah. <address>
s adalah untuk menyampaikan maklumat hubungan untuk nenek moyang terdekat (atau seluruh badan kerja). Kekalkan pemformatan dengan menamatkan baris dengan <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nama Penuh
[email protected]
Sebut harga
Lalai margin
pada petikan sekat ialah 1em 40px
, jadi kami menetapkan semula itu 0 0 1rem
untuk sesuatu yang lebih konsisten dengan elemen lain.
Petikan yang terkenal, terkandung dalam elemen petikan blok.
Elemen sebaris
The <abbr>
element receives basic styling to make it stand out amongst paragraph text.
Summary
The default cursor
on summary is text
, so we reset that to pointer
to convey that the element can be interacted with by clicking on it.
Some details
More info about the details.
Even more details
Here are even more details about the details.
HTML5 [hidden]
attribute
HTML5 adds a new global attribute named [hidden]
, which is styled as display: none
by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; }
to help prevent its display
from getting accidentally overridden. While [hidden]
isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.
<input type="text" hidden>
jQuery incompatibility
[hidden]
is not compatible with jQuery’s $(...).hide()
and $(...).show()
methods. Therefore, we don’t currently especially endorse [hidden]
over other techniques for managing the display
of elements.
To merely toggle the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document, use the .invisible
class instead.