Reboot
Reboot, kumpulan parobahan CSS unsur-spésifik dina hiji file, kickstart Bootstrap pikeun nyadiakeun hiji garis dasar elegan, konsisten, sarta basajan pikeun ngawangun kana.
Ngadeukeutan
Reboot diwangun dina Normalize, nyadiakeun loba elemen HTML kalawan gaya rada opinionated maké ngan selectors unsur. styling tambahan dipigawé ngan kalawan kelas. Contona, urang reboot sababaraha <table>
gaya pikeun baseline basajan tur engké nyadiakeun .table
, .table-bordered
, sareng nu sanesna.
Ieu tungtunan sareng alesan pikeun milih naon anu kedah ditimpa dina Reboot:
- Apdet sababaraha nilai standar browser ngagunakeun
rem
s tinimbangem
s pikeun spasi komponén scalable. - Nyingkahan
margin-top
. Margin nangtung bisa ambruk, ngahasilkeun hasil nu teu kaduga. Langkung pentingna sanaos, arah tunggalmargin
mangrupikeun modél mental anu langkung saderhana. - Pikeun skala gampang sakuliah ukuran alat, elemen blok kedah nganggo
rem
s pikeunmargin
s. - Tetep deklarasi
font
sipat -related ka minimum, ngagunakeuninherit
sabisana.
Kaca standar
Unsur <html>
sareng <body>
unsur diropéa pikeun nyayogikeun standar halaman anu langkung saé. Leuwih husus:
- The
box-sizing
disetel sacara global dina unggal unsur-kaasup*::before
jeung*::after
, kaborder-box
. Ieu mastikeun yén lebar anu dinyatakeun tina unsur henteu pernah ngaleuwihan kusabab padding atanapi wates. - Taya basa
font-size
dinyatakeun dina<html>
, tapi16px
dianggap (standar browser).font-size: 1rem
diterapkeun dina<body>
pikeun skala tipe responsif gampang via queries média bari respecting preferensi pamaké sarta mastikeun pendekatan leuwih diaksés. - The
<body>
ogé susunan globalfont-family
,line-height
, jeungtext-align
. Ieu diwariskeun engké ku sababaraha elemen formulir pikeun nyegah inconsistencies font. - Pikeun kasalametan, nu
<body>
geus dinyatakeunbackground-color
, defaulting ka#fff
.
Tumpukan font asli
Fon wéb standar (Helvetica Neue, Helvetica, sareng Arial) parantos diturunkeun dina Bootstrap 4 sareng diganti ku "tumpuk font asli" pikeun rendering téks anu optimal dina unggal alat sareng OS. Baca leuwih seueur tentang tumpukan font asli dina artikel Smashing Magazine ieu .
Ieu font-family
diterapkeun ka <body>
sareng otomatis diwariskeun sacara global sapanjang Bootstrap. Pikeun ngalihkeun global font-family
, ngapdet $font-family-base
sareng nyusun ulang Bootstrap.
Judul jeung paragraf
Sadaya elemen judul-contona, - <h1>
sareng direset <p>
supados margin-top
dihapus. Judul geus margin-bottom: .5rem
ditambahkeun jeung paragraf margin-bottom: 1rem
pikeun spasi gampang.
Judul | Contona |
---|---|
|
h1. Judul Bootstrap |
|
h2. Judul Bootstrap |
|
h3. Judul Bootstrap |
|
h4. Judul Bootstrap |
|
h5. Judul Bootstrap |
|
h6. Judul Bootstrap |
Daptar
Sadaya daptar— , <ul>
, <ol>
jeung — geus dihapus sarta a . Daptar Nested teu boga .<dl>
margin-top
margin-bottom: 1rem
margin-bottom
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem jeung massa
- Facilisis di 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 diuk amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem jeung massa
- Facilisis di pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean diuk amet erat nunc
- Eget porttitor lorem
Pikeun styling basajan, hirarki jelas, sarta spasi hadé, béréndélan déskripsi geus diropéa margin
s. <dd>
s reset margin-left
jeung 0
nambahkeun margin-bottom: .5rem
. <dt>
s anu bolded .
- Daptar pedaran
- Daptar pedaran sampurna pikeun nangtukeun 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.
Téks anu tos diformat
Unsur <pre>
direset pikeun ngahapus margin-top
sareng nganggo rem
unit pikeun margin-bottom
.
.conto-unsur { margin-handap: 1rem; }
tabél
Tables rada disaluyukeun kana gaya <caption>
s, runtuhna wates, sarta mastikeun konsisten text-align
sakuliah. Parobihan tambahan pikeun wates, padding, sareng seueur deui kalebet .table
kelas .
Judul méja | Judul méja | Judul méja | Judul méja |
---|---|---|---|
Sél méja | Sél méja | Sél méja | Sél méja |
Sél méja | Sél méja | Sél méja | Sél méja |
Sél méja | Sél méja | Sél méja | Sél méja |
Bentuk
Rupa-rupa elemen formulir geus rebooted pikeun gaya basa basajan. Ieu sababaraha parobahan anu paling kasohor:
<fieldset>
s teu boga wates, padding, atawa margin ngarah bisa gampang dipaké salaku wrappers pikeun inputs individu atawa grup inputs.<legend>
s, kawas fieldsets, ogé geus restyled pikeun dipintonkeun salaku judul tina sorts.<label>
s diseteldisplay: inline-block
ka ngidinanmargin
pikeun dilarapkeun.<input>
s,<select>
s,<textarea>
s, jeung<button>
s lolobana kajawab ku Normalize, tapi Reboot ngaluarkeun maranéhananamargin
sarta susunanline-height: inherit
, teuing.<textarea>
s dirobah jadi ukur bisa resizable vertikal sakumaha horizontal pangaturan ukuran jadi mindeng "megatkeun" perenah kaca.<button>
s sarta<input>
elemen tombol gaduhcursor: pointer
nalika:not(:disabled)
.
Parobahan ieu, sareng seueur deui, dipidangkeun di handap.
elemen séjén
Alamat
Unsur <address>
ieu diropéa pikeun ngareset standar browser font-style
ti italic
ka normal
. line-height
ogé ayeuna diwariskeun, sarta margin-bottom: 1rem
geus ditambahkeun. <address>
s pikeun presenting informasi kontak pikeun karuhun pangcaketna (atawa sakabéh awak karya). Ngajaga pormat ku tungtung garis kalawan <br>
.
1355 Pasar St, Suite 900
San Fransisco, CA 94103
P: (123) 456-7890 Ngaran lengkep
[email protected]
Blockquote
The standar margin
on blockquotes nyaeta 1em 40px
, sangkan ngareset éta 0 0 1rem
pikeun hal anu leuwih konsisten jeung elemen séjén.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a Ante.
Unsur Inline
Unsur <abbr>
nampi gaya dasar pikeun ngajantenkeun éta menonjol diantara téks paragraf.
Ringkesan
The standar cursor
on kasimpulan nyaeta text
, sangkan ngareset yén pointer
pikeun nepikeun yén unsur bisa berinteraksi kalayan ku ngaklik dinya.
Sababaraha rinci
Inpo nu leuwih lengkep tentang detil.
Malah leuwih rinci
Di dieu malah leuwih rinci ngeunaan detil.
[hidden]
atribut HTML5
HTML5 nambahkeun atribut global anyar ngaranna[hidden]
, nu geus styled sakumaha display: none
standar. Nginjeum ide ti PureCSS , kami ningkatkeun standar ieu ku cara [hidden] { display: none !important; }
ngabantosan nyegah display
teu kahaja ditimpa. Sanaos [hidden]
henteu dirojong sacara asli ku IE10, deklarasi eksplisit dina CSS kami ngabéréskeun masalah éta.
sauyunan jQuery
[hidden]
teu cocog jeung jQuery urang $(...).hide()
jeung $(...).show()
métode. Ku alatan éta, ayeuna urang teu utamana ngesahkeun [hidden]
leuwih téhnik séjén pikeun ngatur display
elemen.
Pikeun ngan ukur togél pisibilitas unsur, hartosna display
éta henteu dirobih sareng unsur éta masih tiasa mangaruhan aliran dokumen, anggo .invisible
kelasna .