Reboot
Reboot, muunganidzwa wechinhu-chaiwo CSS shanduko mune imwe faira, kickstart Bootstrap kuti ipe inoyevedza, inowirirana, uye yakapusa baseline yekuvaka pamusoro.
Approach
Reboot inovaka pamusoro peNormalize, ichipa akawanda maHTML zvinhu zvine mamwe maitiro ekufungidzira uchishandisa chete element selectors. Kuwedzera styling kunoitwa chete nemakirasi. Semuyenzaniso, isu tinotangisa mamwe <table>
masitayera kune yakapfava yekutanga uye gare gare tinopa .table
, .table-bordered
, nezvimwe.
Heano nhungamiro yedu uye zvikonzero zvekusarudza zvekupfuura muReboot:
- Gadziridza dzimwe bhurawuza default tsika yekushandisa
rem
s paneem
s ye scalable component spacing. - Dzivisa
margin-top
. Vertical margins anogona kudhirika, zvichipa mhedzisiro isingatarisirwe. Zvinonyanya kukosha zvakadaro, nzira imwe chetemargin
yemuenzaniso wakapfava wepfungwa. - Kuti zvive nyore kuyera pamasaizi emudziyo, block element dzinofanira kushandisa
rem
s yemargin
s. - Chengetedza zviziviso zve
font
-zvine hukama kune zvishoma, uchishandisainherit
pese pazvinogoneka.
Peji defaults
Izvo <html>
uye <body>
zvinhu zvinogadziridzwa kuti zvipe zvirinani peji-yakafara defaults. Zvakawanda chaizvo:
- Iyo
box-sizing
yakaiswa pasi rose pazvinhu zvese-kusanganisira*::before
uye*::after
, kuborder-box
. Izvi zvinova nechokwadi chekuti hupamhi hwakaziviswa hwechinhu hahumbopfuuri nekuda kwepadding kana muganhu. - Hapana hwaro
font-size
hunoziviswa pane iyo<html>
, asi16px
inofungidzirwa (iyo browser default).font-size: 1rem
inoiswa pairi<body>
nyore kupindura mhando-kuyera kuburikidza ne midhiya mibvunzo uchiremekedza zvido zvevashandisi uye nekuona nzira inowanikwa nyore. - Iyo
<body>
zvakare inoisa yepasi rosefont-family
,line-height
, uyetext-align
. Izvi zvinogarwa nhaka gare gare nemamwe maitiro ekudzivirira kusawirirana kwefonti. - Nekuda kwekuchengetedza, iyo
<body>
ine yakaziviswabackground-color
, kusagadzika ku#fff
.
Native font stack
Iwo mafonti ewebhu akasarudzika (Helvetica Neue, Helvetica, uye Arial) akadonhedzwa muBootstrap 4 uye akatsiviwa ne "native font stack" yezvakanyanya kupa mavara pamudziyo wese uye OS. Verenga zvakawanda pamusoro pezvinyorwa zvemafonti echinyorwa chino cheSmashing Magazine .
$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;
Ziva kuti nekuti iyo font stack inosanganisira emoji mafonti, akawanda akajairika chiratidzo/dingbat Unicode mavara anozopihwa seakawanda-mavara mapikicha. Chitarisiko chavo chichasiyana, zvichienderana nemaitiro anoshandiswa mubrowser/platform's native emoji font, uye ivo havazokanganiswe nechero CSS color
masitayipi.
Izvi font-family
zvinoiswa kune iyo <body>
uye yakagara nhaka pasi rose muBootstrap yese. Kuchinja iyo yepasirese font-family
, gadziridza $font-family-base
uye dzorera Bootstrap.
Misoro nendima
Zvese musoro zvinhu-eg, <h1>
-uye <p>
zvinoiswa patsva kuti margin-top
zvibviswe. Misoro margin-bottom: .5rem
yakawedzera uye ndima margin-bottom: 1rem
kuti zvive nyore kuparadzanisa.
Heading | Muenzaniso |
---|---|
<h1></h1> |
h1. Bootstrap musoro |
<h2></h2> |
h2. Bootstrap musoro |
<h3></h3> |
h3. Bootstrap musoro |
<h4></h4> |
h4. Bootstrap musoro |
<h5></h5> |
h5. Bootstrap musoro |
<h6></h6> |
h6. Bootstrap musoro |
Lists
Mazita ese— <ul>
, <ol>
, uye <dl>
— abviswa margin-top
uye a margin-bottom: 1rem
. Nested list hadzina margin-bottom
.
- Mazita ese ane mucheto wepamusoro wabviswa
- Uye yavo yepasi margin yakajairwa
- Nested list haina mucheto wepasi
- Nenzira iyi vane chitarisiko chakanyanya
- Kunyanya kana ichiteverwa nezvimwe zvinyorwa zvinyorwa
- Kuruboshwe padding kwakagadziridzwa zvakare
- Heino rondedzero yakaodha
- Nezvishoma zvinyorwa zvinyorwa
- Iine chimiro chakafanana chese
- Sezvakanyorwa kare zvisina kurongeka
Kuitira masitayipi akareruka, hurongwa hwakajeka, uye nzvimbo iri nani, rondedzero yerondedzero yakagadziridza margin
s. <dd>
s reset margin-left
kune 0
uye kuwedzera margin-bottom: .5rem
. <dt>
s vakashinga .
- Tsanangudzo mazita
- Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
- Term
- Tsanangudzo yeshoko.
- Tsanangudzo yechipiri yezwi rimwechetero.
- Imwe temu
- Tsanangudzo yerimwe izwi iri.
Preformatted text
Iyo <pre>
element inoiswa patsva kuti ibvise margin-top
uye ishandise rem
zvikamu zvayo margin-bottom
.
.example-element { kumucheto-pasi: 1rem; }
Matafura
Matafura anogadziridzwa zvishoma kune chimiro <caption>
s, kudonha miganhu, uye simbisa kuenderana text-align
mukati mese. Dzimwe shanduko dzemabhodha, padding , nezvimwe huya nekirasi ..table
Musoro wetafura | Musoro wetafura | Musoro wetafura | Musoro wetafura |
---|---|---|---|
Tafura cell | Tafura cell | Tafura cell | Tafura cell |
Tafura cell | Tafura cell | Tafura cell | Tafura cell |
Tafura cell | Tafura cell | Tafura cell | Tafura cell |
Mafomu
Yakasiyana-siyana fomu zvinhu zvakadzoserwa kune akareruka base masitayipi. Hedzino dzimwe shanduko dzinonyanya kukosha:
<fieldset>
s haina mabhodha, padding, kana margin saka inogona kushandiswa zviri nyore semapepa ega ega ega kana mapoka ezvekupinda.<legend>
s, senge fieldsets, yakagadziridzwa zvakare kuti iratidzwe semusoro wemhando.<label>
s dzakaiswadisplay: inline-block
kuti dzibvumiremargin
kushandiswa.<input>
s,<select>
s,<textarea>
s, uye<button>
s zvinonyanya kutariswa neNormalize, asi Reboot inobvisa yavomargin
uye setiline-height: inherit
, zvakare.<textarea>
s anogadziridzwa kuti agone kudzoreredzwa chete wakatwasuka sekuchinjika saizi kazhinji "inotyora" dhizaini yemapeji.<button>
s uye<input>
mabhatani zvinhu zvinecursor: pointer
apo:not(:disabled)
.
Idzi shanduko, nezvimwe, zvinoratidzwa pazasi.
Zvinonongedzera pamabhatani
Reboot inosanganisira inonatsiridza role="button"
yekushandura iyo default cursor kuita pointer
. Wedzera hunhu uhu kuzvinhu kubatsira kuratidza kuti zvinhu zvinodyidzana. Basa iri harifanirwe kune <button>
maelementi, ayo anowana cursor
shanduko yawo.
<span role="button" tabindex="0">Non-button element button</span>
Misc elements
Kero
Iyo <address>
element inogadziridzwa kuti igadzirise iyo browser default font-style
kubva italic
kune normal
. line-height
yakagara nhaka, uye margin-bottom: 1rem
yawedzerwa. <address>
s ndeyekupa ruzivo rwekusangana kumadzitateguru ari pedyo (kana boka rose rebasa). Chengetedza fomati nemitsara yekugumisa ne <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Zita
Rakazara [email protected]
Blockquote
Iyo margin
yekusarudzika pane blockquotes ndeye 1em 40px
, saka isu tinogadzirisa izvo kune 0 0 1rem
chimwe chinhu chinopindirana nezvimwe zvinhu.
Chirevo chinozivikanwa, chiri mu blockquote element.
Inline zvinhu
Chinhu <abbr>
chinogashira masitaera kuita kuti chibude pachena pakati pemavara endima.
Summary
Iyo yekusarudzika cursor
pane pfupiso ndeye text
, saka isu tinoisa patsva kuti pointer
kuratidza kuti chinhu chinogona kufambiswa nacho nekudzvanya pachiri.
Mamwe mashoko
Ruzivo rwakawanda nezve ruzivo.
Zvimwe zvakawanda
Heano mamwe mamwe mashoko pamusoro pemashoko.
HTML5 [hidden]
hunhu
HTML5 inowedzera hunhu hutsva hwepasi rose hunonzi[hidden]
, iyo yakanyorwa seyakagadzika display: none
. Kukwereta zano kubva kuPureCSS , tinovandudza pane iyi default nekugadzira [hidden] { display: none !important; }
kubatsira kudzivirira kuti display
irege kuwanda netsaona. Kunyange [hidden]
isingatsigirwe neIE10, chirevo chakajeka muCSS yedu chinotenderedza dambudziko iro.
<input type="text" hidden>
jQuery kusawirirana
[hidden]
haienderane nejQuery's $(...).hide()
uye $(...).show()
nzira. Naizvozvo, isu hatisi kunyanya kutsigira [hidden]
pamusoro pemamwe matekiniki ekugadzirisa display
zvinhu.
Kungochinja kuoneka kwechinhu, zvichireva kuti hachina kuchinjwa uye chinhu chinogona kuramba chichikanganisadisplay
kuyerera kwegwaro, shandisa kirasi.invisible
pachinzvimbo.