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. Iyi browser default inogona kuvharwa nekugadzirisa$font-size-root
chinja.
- Hapana hwaro
- Iyo
<body>
zvakare inoisa pasi rosefont-family
,font-weight
,line-height
, uyecolor
. Izvi zvinogarwa nhaka gare gare nemamwe maitiro ekudzivirira kusawirirana kwefonti. - Nekuda kwekuchengetedza, iyo
<body>
ine yakaziviswabackground-color
, kusagadzika ku#fff
.
Native font stack
Bootstrap inoshandisa "native font stack" kana "system font stack" kuitira kuti mameseji akwanise kupa pane ese mudziyo uye OS. Aya masisitimu mafonti akagadzirwa zvakanangana nemidziyo yemazuva ano mupfungwa, nekupa kwakagadziridzwa pamasikirini, kusiyanisa font rutsigiro, nezvimwe. Verenga zvakawanda pamusoro pezvinyorwa zvemafonti echinyorwa chino cheSmashing Magazine .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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 akajairwa chiratidzo/dingbat unicode mavara anozopihwa seane-mavara-mavara epikicha. 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
. Isu takagadzirisa zvakare iyo padding-left
on <ul>
uye <ol>
maelementi.
- 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.
Inline code
Putira zvidimbu zvemukati zvekodhi ne <code>
. Iva nechokwadi chekutiza HTML angle brackets.
<section>
inofanira kuputirwa se inline.
For example, <code><section></code> should be wrapped as inline.
Code blocks
Shandisa <pre>
s kune akawanda mitsara yekodhi. Zvekare, ita shuwa kutiza chero mabhuraketi emakona mune kodhi yekupihwa kwayo. Iyo <pre>
element inoiswa patsva kuti ibvise margin-top
uye ishandise rem
zvikamu zvayo margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Variables
Pakuratidza zvinoshanduka shandisa <var>
tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Kuiswa kwemushandisi
Shandisa iyo <kbd>
kuratidza yekuisa iyo inowanzo pinda nekhibhodi.
Kugadzirisa marongero, tinya ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Sample output
Kuti uratidze kuburitswa kwemuenzaniso kubva kuchirongwa shandisa iyo <samp>
tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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.
Date & ruvara rwekuisa rutsigiro
Ramba uchifunga nezvemazuva ekupinda haatsigirwe zvizere nemabhurawuza ese, anoti Safari.
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.
Mumwe ane mukurumbira muna Source Title
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.
<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.