Source

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

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 a margin-bottom: 1rem. Dhaptar bersarang ora duwe margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem lan massa
  • Facilisis ing pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat ing
  • Faucibus porta lacus fringilla vel
  • Aenean lungguh amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem lan massa
  4. Facilisis ing pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean lungguh amet erat nunc
  8. Eget porttitor lorem

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

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 ngowahi ukuran horisontal asring "ngrusak" tata letak kaca.

Owah-owahan kasebut, lan liya-liyane, dituduhake ing ngisor iki.

Tuladha legenda

100

Elemen liyane

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.

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

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. Sanajan [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 .