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 .
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. Bootstrap musoro |
|
h2. Bootstrap musoro |
|
h3. Bootstrap musoro |
|
h4. Bootstrap musoro |
|
h5. Bootstrap musoro |
|
h6. Bootstrap musoro |
Lists
Mazita ese— <ul>
, <ol>
, uye <dl>
— abviswa margin-top
uye a margin-bottom: 1rem
. Nested list hadzina margin-bottom
.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis mu 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 sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis mu pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
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.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
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 includes an enhancement for role="button"
to change the default cursor to pointer
. Add this attribute to elements to help indicate elements are interactive. This role isn’t necessary for <button>
elements, which get their own cursor
change.
Misc elements
Address
The <address>
element is updated to reset the browser default font-style
from italic
to normal
. line-height
is also now inherited, and margin-bottom: 1rem
has been added. <address>
s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
[email protected]
Blockquote
The default margin
on blockquotes is 1em 40px
, so we reset that to 0 0 1rem
for something more consistent with other elements.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Inline elements
The <abbr>
element receives basic styling to make it stand out amongst paragraph text.
Summary
The default cursor
on summary is text
, so we reset that to pointer
to convey that the element can be interacted with by clicking on it.
Some details
More info about the details.
Even more details
Here are even more details about the details.
HTML5 [hidden]
attribute
HTML5 adds a new global attribute named [hidden]
, which is styled as display: none
by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; }
to help prevent its display
from getting accidentally overridden. While [hidden]
isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.
jQuery incompatibility
[hidden]
is not compatible with jQuery’s $(...).hide()
and $(...).show()
methods. Therefore, we don’t currently especially endorse [hidden]
over other techniques for managing the display
of elements.
To merely toggle the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document, use the .invisible
class instead.