Urip maneh
Urip maneh, koleksi owah-owahan CSS khusus unsur ing file siji, miwiti Bootstrap kanggo nyedhiyakake garis dasar sing elegan, konsisten, lan prasaja kanggo dibangun.
pendekatan
Urip maneh dibangun ing Normalize, nyedhiyakake akeh unsur HTML kanthi gaya sing rada beda karo mung nggunakake pamilih unsur. Gaya tambahan ditindakake mung karo kelas. Contone, kita urip maneh sawetara <table>
gaya kanggo garis dasar sing luwih prasaja lan mengko nyedhiyakake .table
, .table-bordered
, lan liya-liyane.
Mangkene pedoman lan alasan kanggo milih apa sing kudu diganti ing Urip maneh:
- Nganyari sawetara nilai standar browser kanggo nggunakake
rem
s tinimbangem
s kanggo spasi komponen sing bisa diukur. - Nyingkiri
margin-top
. Margin vertikal bisa ambruk, ngasilake asil sing ora dikarepake. Nanging sing luwih penting, arah sijimargin
yaiku model mental sing luwih gampang. - Kanggo skala luwih gampang ing ukuran piranti, unsur blok kudu nggunakake
rem
s kanggomargin
s. - Tansah deklarasi
font
properti sing gegandhengan karo minimal, nggunakakeinherit
sabisa.
Kaca standar
Unsur <html>
lan <body>
dianyari kanggo nyedhiyakake standar kaca sing luwih apik. Luwih khusus:
box-sizing
Ing global disetel ing saben unsur-kalebu lan*::before
,*::after
kanggoborder-box
. Iki mesthekake yen jembaré ngumumaké saka unsur ora tau ngluwihi amarga padding utawa wates.- Ora ana basis
font-size
sing diumumake ing<html>
, nanging16px
dianggep (standar browser).font-size: 1rem
diterapake<body>
kanggo skala tipe responsif sing gampang liwat pitakon media nalika ngurmati preferensi pangguna lan njamin pendekatan sing luwih gampang diakses. - Ing uga nyetel
<body>
globalfont-family
,line-height
, lantext-align
. Iki diwarisake mengko dening sawetara unsur wangun kanggo nyegah inconsistencies font. - Kanggo safety,
<body>
wis ngumumakébackground-color
, defaulting kanggo#fff
.
Tumpukan font asli
Font web standar (Helvetica Neue, Helvetica, lan Arial) wis dibuwang ing Bootstrap 4 lan diganti karo "tumpukan font asli" kanggo rendering teks sing paling optimal ing saben piranti lan OS. Waca liyane babagan tumpukan font native ing artikel Smashing Magazine iki .
$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;
Elinga, amarga tumpukan font kalebu font emoji, akeh karakter Unicode simbol / dingbat sing umum bakal diandharake minangka piktograf multi-warna. Penampilane bakal beda-beda, gumantung saka gaya sing digunakake ing font emoji asli browser/platform, lan ora bakal kena pengaruh color
gaya CSS.
Iki font-family
ditrapake kanggo <body>
lan diwarisake kanthi otomatis ing saindhenging Bootstrap. Kanggo ngalih global font-family
, nganyari $font-family-base
lan kompilasi ulang Bootstrap.
Judhul lan paragraf
Kabeh unsur judhul - contone, <h1>
- lan <p>
direset supaya margin-top
dicopot. Judhul wis margin-bottom: .5rem
ditambahake lan paragraf margin-bottom: 1rem
kanggo gampang spasi.
judhul | Tuladha |
---|---|
<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 |
Dhaptar
Kabeh dhaptar— <ul>
, <ol>
, lan <dl>
— wis margin-top
dibusak lan margin-bottom: 1rem
. Dhaptar bersarang ora duwe margin-bottom
.
- Kabeh dhaptar wis dibusak wates ndhuwur
- Lan wates ngisor dheweke normal
- Dhaptar bersarang ora ana wates ngisor
- Kanthi cara iki, dheweke duwe tampilan sing luwih rata
- Utamane yen diikuti karo item dhaptar liyane
- Padding kiwa uga wis direset
- Punika dhaptar dhawuh
- Kanthi sawetara item dhaptar
- Wis katon sakabèhé padha
- Minangka dhaptar unordered sadurungé
Kanggo gaya sing luwih prasaja, hierarki sing jelas, lan jarak sing luwih apik, dhaptar deskripsi wis nganyari margin
s. <dd>
s ngreset lan nambah margin-left
. s wis kandel .0
margin-bottom: .5rem
<dt>
- Dhaptar katrangan
- Dhaptar deskripsi sampurna kanggo nemtokake istilah.
- istilahe
- Definisi kanggo istilah.
- Dhéfinisi liya kanggo istilah sing padha.
- Istilah liyane
- Definisi kanggo istilah liyane iki.
Teks sing wis diformat
Unsur <pre>
kasebut direset kanggo mbusak margin-top
lan nggunakake rem
unit kanggo margin-bottom
.
.conto-elemen { margin-ngisor: 1rem; }
Tabel
Tabel rada diatur kanggo gaya <caption>
s, wates ambruk, lan mesthekake konsisten text-align
saindhenging. Owah-owahan tambahan kanggo wates, padding, lan liya-liyane teka karo kelas.table
.
Tabel judhul | Tabel judhul | Tabel judhul | Tabel judhul |
---|---|---|---|
sel meja | sel meja | sel meja | sel meja |
sel meja | sel meja | sel meja | sel meja |
sel meja | sel meja | sel meja | sel meja |
Formulir
Macem-macem unsur wangun wis reboot kanggo gaya basa prasaja. Ing ngisor iki sawetara owah-owahan sing paling penting:
<fieldset>
s ora duwe wates, padding, utawa wates supaya bisa gampang digunakake minangka pambungkus kanggo input individu utawa kelompok input.<legend>
s, kaya fieldsets, uga wis restyled kanggo ditampilake minangka judhul jinis.<label>
s diseteldisplay: inline-block
kanggo ngidinimargin
kanggo Applied.<input>
s,<select>
s,<textarea>
s, lan<button>
s biasane ditangani dening Normalize, nanging Urip maneh mbusak singmargin
lan setline-height: inherit
, banget.<textarea>
s diowahi dadi mung bisa diowahi ukurane vertikal amarga ukuran horisontal asring "ngrusak" tata letak kaca.<button>
s lan<input>
unsur tombol wiscursor: pointer
nalika:not(:disabled)
.
Owah-owahan kasebut, lan liya-liyane, dituduhake ing ngisor iki.
Pointer ing tombol
Urip maneh kalebu tambahan role="button"
kanggo ngganti kursor standar dadi pointer
. Tambah atribut iki menyang unsur kanggo mbantu nuduhake unsur interaktif. Peran iki ora perlu kanggo <button>
unsur, sing entuk owah- cursor
owahan dhewe.
<span role="button" tabindex="0">Non-button element button</span>
Misc unsur
alamat
Unsur <address>
kasebut dianyari kanggo ngreset standar browser font-style
saka italic
menyang normal
. line-height
uga saiki diwarisake, lan margin-bottom: 1rem
wis ditambahake. <address>
s kanggo menehi informasi kontak kanggo leluhur paling cedhak (utawa kabeh awak karya). Simpen format kanthi mungkasi baris nganggo <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Jeneng Lengkap
[email protected]
Blockquote
Default margin
ing blockquotes punika 1em 40px
, supaya kita ngreset sing kanggo 0 0 1rem
soko luwih konsisten karo unsur liyane.
Kutipan kondhang, sing ana ing unsur blockquote.
Unsur inline
Elemen <abbr>
kasebut nampa gaya dhasar supaya katon ing antarane teks paragraf.
Ringkesan
Default cursor
ing ringkesan punika text
, supaya kita ngreset pointer
kanggo ngirim sing unsur bisa sesambungan karo ngeklik ing.
Sawetara rincian
Info liyane babagan rincian.
Malah luwih rinci
Kene malah luwih rinci babagan rincian.
[hidden]
Atribut HTML5
HTML5 nambahake atribut global anyar sing jenenge[hidden]
, sing ditata minangka display: none
standar. Nyilih ide saka PureCSS , kita nambah standar iki kanthi nggawe [hidden] { display: none !important; }
kanggo nyegah supaya display
ora sengaja ditindhes. Nalika [hidden]
ora didhukung asli dening IE10, deklarasi eksplisit ing CSS kita bakal ngatasi masalah kasebut.
<input type="text" hidden>
ora kompatibel jQuery
[hidden]
ora kompatibel karo jQuery $(...).hide()
lan $(...).show()
cara. Mula, saiki kita ora nyetujoni [hidden]
teknik liya kanggo ngatur display
unsur.
Kanggo mung ngalih visibilitas unsur, tegese display
ora diowahi lan unsur kasebut isih bisa mengaruhi aliran dokumen, gunakake kelas .invisible
kasebut .