in English

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 rems pane ems ye scalable component spacing.
Dzivisa margin-top. Vertical margins anogona kudhirika, zvichipa mhedzisiro isingatarisirwe. Zvinonyanya kukosha zvakadaro, nzira imwe chete marginyemuenzaniso wakapfava wepfungwa.
Kuti zvive nyore kuyera pamasaizi emudziyo, block element dzinofanira kushandisa rems ye margins.
Chengetedza zviziviso zve font-zvine hukama kune zvishoma, uchishandisa inheritpese pazvinogoneka.

Peji defaults

Izvo <html>uye <body>zvinhu zvinogadziridzwa kuti zvipe zvirinani peji-yakafara defaults. Zvakawanda chaizvo:

Iyo box-sizingyakaiswa pasi rose pazvinhu zvese-kusanganisira *::beforeuye *::after, ku border-box. Izvi zvinova nechokwadi chekuti hupamhi hwakaziviswa hwechinhu hahumbopfuuri nekuda kwepadding kana muganhu.
Hapana hwaro font-sizehunoziviswa pane iyo <html>, asi 16pxinofungidzirwa (iyo browser default). font-size: 1reminoiswa pairi <body>nyore kupindura mhando-kuyera kuburikidza ne midhiya mibvunzo uchiremekedza zvido zvevashandisi uye nekuona nzira inowanikwa nyore.
Iyo <body>zvakare inoisa yepasi rose font-family, line-height, uye text-align. Izvi zvinogarwa nhaka gare gare nemamwe maitiro ekudzivirira kusawirirana kwefonti.
Nekuda kwekuchengetedza, iyo <body>ine yakaziviswa background-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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Izvi font-familyzvinoiswa kune iyo <body>uye yakagara nhaka pasi rose muBootstrap yese. Kuchinja iyo yepasirese font-family, gadziridza $font-family-baseuye dzorera Bootstrap.

Misoro nendima

Zvese musoro zvinhu-eg, <h1>-uye <p>zvinoiswa patsva kuti margin-topzvibviswe. Misoro margin-bottom: .5remyakawedzera uye ndima margin-bottom: 1remkuti 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-topuye 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 margins. <dd>s reset margin-leftkune 0uye 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-topuye ishandise remzvikamu zvayo margin-bottom.

.example-element {
  kumucheto-pasi: 1rem;
}

Matafura

Matafura anogadziridzwa zvishoma kune chimiro <caption>s, kudonha miganhu, uye simbisa kuenderana text-alignmukati mese. Dzimwe shanduko dzemabhodha, padding , nezvimwe huya nekirasi ..table

Iyi tafura yemuenzaniso, uye iyi ndiyo rondedzero yayo yekutsanangura zviri mukati.
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 dzakaiswa display: inline-blockkuti dzibvumire marginkushandiswa.
<input>s, <select>s, <textarea>s, uye <button>s zvinonyanya kutariswa neNormalize, asi Reboot inobvisa yavo marginuye seti line-height: inherit, zvakare.
<textarea>s anogadziridzwa kuti agone kudzoreredzwa chete wakatwasuka sekuchinjika saizi kazhinji "inotyora" dhizaini yemapeji.
<button>s uye <input>mabhatani zvinhu zvine cursor: pointerapo :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.

Non-button element button

<span role="button" tabindex="0">Non-button element button</span>

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

Twitter, Inc.
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.

Someone famous in Source Title

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

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.

<input type="text" hidden>

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.