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 rems tinimbang ems kanggo spasi komponen sing bisa diukur.
Nyingkiri margin-top. Margin vertikal bisa ambruk, ngasilake asil sing ora dikarepake. Nanging sing luwih penting, arah siji marginyaiku model mental sing luwih gampang.
Kanggo skala luwih gampang ing ukuran piranti, unsur blok kudu nggunakake rems kanggo margins.
Tansah deklarasi fontproperti sing gegandhengan karo minimal, nggunakake inheritsabisa.

Kaca standar

Unsur <html>lan <body>dianyari kanggo nyedhiyakake standar kaca sing luwih apik. Luwih khusus:

box-sizingIng global disetel ing saben unsur-kalebu lan *::before, *::afterkanggo border-box. Iki mesthekake yen jembaré ngumumaké saka unsur ora tau ngluwihi amarga padding utawa wates.
Ora ana basis font-sizesing diumumake ing <html>, nanging 16pxdianggep (standar browser). font-size: 1remditerapake <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>global font-family, line-height, lan text-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 colorgaya CSS.

Iki font-familyditrapake kanggo <body>lan diwarisake kanthi otomatis ing saindhenging Bootstrap. Kanggo ngalih global font-family, nganyari $font-family-baselan kompilasi ulang Bootstrap.

Judhul lan paragraf

Kabeh unsur judhul - contone, <h1>- lan <p>direset supaya margin-topdicopot. Judhul wis margin-bottom: .5remditambahake lan paragraf margin-bottom: 1remkanggo 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-topdibusak 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 margins. <dd>s ngreset lan nambah margin-left. s wis kandel .0margin-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-toplan nggunakake remunit kanggo margin-bottom.

.conto-elemen {
  margin-ngisor: 1rem;
}

Tabel

Tabel rada diatur kanggo gaya <caption>s, wates ambruk, lan mesthekake konsisten text-alignsaindhenging. Owah-owahan tambahan kanggo wates, padding, lan liya-liyane teka karo kelas.table .

Iki minangka conto tabel, lan iki minangka caption kanggo nggambarake isine.
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 disetel display: inline-blockkanggo ngidini marginkanggo Applied.
<input>s, <select>s, <textarea>s, lan <button>s biasane ditangani dening Normalize, nanging Urip maneh mbusak sing marginlan set line-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 wis cursor: pointernalika :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- cursorowahan dhewe.

Tombol unsur non-tombol

<span role="button" tabindex="0">Non-button element button</span>

Misc unsur

alamat

Unsur <address>kasebut dianyari kanggo ngreset standar browser font-stylesaka italicmenyang normal. line-heightuga saiki diwarisake, lan margin-bottom: 1remwis ditambahake. <address>s kanggo menehi informasi kontak kanggo leluhur paling cedhak (utawa kabeh awak karya). Simpen format kanthi mungkasi baris nganggo <br>.

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

Jeneng Lengkap
[email protected]

Blockquote

Default margining blockquotes punika 1em 40px, supaya kita ngreset sing kanggo 0 0 1remsoko luwih konsisten karo unsur liyane.

Kutipan kondhang, sing ana ing unsur blockquote.

Wong sing misuwur ing Judhul Sumber

Unsur inline

Elemen <abbr>kasebut nampa gaya dhasar supaya katon ing antarane teks paragraf.

Nulla attr vitae elit libero, a pharetra augue.

Ringkesan

Default cursoring ringkesan punika text, supaya kita ngreset pointerkanggo 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: nonestandar. Nyilih ide saka PureCSS , kita nambah standar iki kanthi nggawe [hidden] { display: none !important; }kanggo nyegah supaya displayora 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 displayunsur.

Kanggo mung ngalih visibilitas unsur, tegese displayora diowahi lan unsur kasebut isih bisa mengaruhi aliran dokumen, gunakake kelas .invisiblekasebut .