Source

Whakahou ano

Reboot, he kohinga o nga huringa CSS-motuhake i roto i te konae kotahi, kickstart Bootstrap ki te whakarato i tetahi rarangi huatau, riterite, ngawari hoki hei hanga.

Te huarahi

Ka hanga ano te whakaara i runga i te Normalize, e whakarato ana i te maha o nga huānga HTML me nga momo ahua whakaaro ma te whakamahi i nga kaiwhiri huānga anake. Ko etahi atu taapiri ka mahia me nga karaehe anake. Hei tauira, ka whakaara ano tatou i etahi <table>momo mo te rarangi turanga ngawari ake, a muri ake ka whakarato .table, .table-bordered, me etahi atu.

Anei a maatau aratohu me nga take mo te kowhiri i nga mea hei whakakore i te Reboot:

Whakahoutia etahi uara taunoa pūtirotiro hei whakamahi i remte s hei utu mo emte s mo te mokowhiti waahanga tauineine.
Aukati margin-top. Ka tiango nga tawhē poutū, ka puta he hua ohorere. Ko te mea nui ake, ko te ahunga kotahi marginhe tauira hinengaro ngawari ake.
Kia ngawari ake te whakatauine puta noa i te rahi o te taputapu, me whakamahi nga huānga poraka rems mo marginte s.
Puritia nga whakapuakanga o fontnga taonga e pa ana ki te iti rawa, ma te whakamahi i inheritnga wa katoa ka taea.

Whārangi taunoa

Ko nga <html>me <body>nga huānga kua whakahoutia kia pai ake ai nga taunoa wharangi whanui. Ake ake:

Kei box-sizingte ao te whakatakotoranga ki runga i ia huānga—tae atu *::beforeki te *::after, ki te border-box. Ma tenei ka whakarite kia kaua rawa e hipa ake te whanui o te huānga e kiia ana na te papaa, te taitapa ranei.
Karekau he turanga font-sizee kii ana i runga i te <html>, engari 16pxka kiia (te taunoa te pūtirotiro). font-size: 1remka whakamahia i runga i te <body>mo te ngawari te whakautu momo-tauine ma nga patai pāpāho me te whakaute i nga manakohanga a nga kaiwhakamahi me te whakarite huarahi ngawari ake.
Kei <body>te whakatakoto ano hoki i te ao font-family, line-heightme te text-align. Ka tuku iho tenei i muri mai e etahi huānga ahua hei aukati i nga momotuhi momotuhi.
Mo te haumaru, <body>kua whakahuahia te background-color, te taunoa ki #fff.

Tāpae momotuhi taketake

Ko nga momotuhi tukutuku taunoa (Helvetica Neue, Helvetica, me Arial) kua tukuna ki Bootstrap 4 ka whakakapihia ki te "putanga momotuhi taketake" mo te whakaputa tuhinga tino pai ki runga i ia taputapu me te OS. Pānuihia atu mo nga momo momotuhi taketake i roto i tenei tuhinga mo te Moheni Smashing .

$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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Ka font-familywhakamahia tenei ki te <body>ka tuku aunoa i te ao puta noa i te Bootstrap. Hei huri i te ao font-family, whakahou $font-family-baseme te whakahiato ano i a Bootstrap.

Nga upoko me nga rarangi

Ko nga huānga pane katoa—hei tauira, <h1>—ka <p>tautuhi ano kia margin-toptangohia. Kua margin-bottom: .5remtapirihia nga upoko me nga kowae margin-bottom: 1remmo te waatea ngawari.

Upoko	Tauira
`<h1></h1>`	h1. Upoko Bootstrap
`<h2></h2>`	h2. Upoko Bootstrap
`<h3></h3>`	h3. Upoko Bootstrap
`<h4></h4>`	h4. Upoko Bootstrap
`<h5></h5>`	h5. Upoko Bootstrap
`<h6></h6>`	h6. Upoko Bootstrap

Nga rarangi

Ko nga rarangi katoa— <ul>, <ol>, me <dl>— kua margin-toptangohia me te margin-bottom: 1rem. Ko nga rarangi kohanga kaore he margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Tauoti molestie lorem me massa
Facilisis in 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 noho amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Tauoti molestie lorem me massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean noho amet erat nunc
Eget porttitor lorem

Mo te ahua ngawari ake, te naataki marama, me te mokowhiti pai ake, kua whakahouhia nga rarangi whakaahuatanga margins. <dd>s tautuhi anō margin-leftki 0te tāpiri margin-bottom: .5rem. <dt>s kua maia .

Nga rarangi whakaahuatanga: Ko te rarangi whakaahuatanga he tino pai mo te tautuhi kupu.
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.

Kuputuhi kua whakahōputuhia

Kua <pre>tautuhia ano te huānga ki te tango i ona margin-topme te whakamahi i remnga wae mo tana margin-bottom.

.tauira-huānga {
  tawhē-raro: 1rem;
}

Ripanga

He paku whakatikatika nga ripanga ki te ahua <caption>s, tiango nga taitapa, me te whakarite kia rite text-alignputa noa. Ko nga huringa taapiri mo nga taitapa, papaa me etahi atu ka haere mai me te .tableakomanga .

He tauira ripanga tenei, koinei tana tapanga hei whakaahua i nga korero o roto.
Ripanga pane	Ripanga pane	Ripanga pane	Ripanga pane
Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga
Pūtau ripanga	Pūtau ripanga	Pūtau ripanga	Pūtau ripanga

Puka

He maha nga momo huānga kua whakaarahia ano mo nga momo turanga ngawari ake. Anei etahi o nga huringa tino rongonui:

<fieldset>s karekau he taitapa, he papa, he tawhē ranei kia ngawari te whakamahi hei takai mo nga whakaurunga takitahi, roopu roopu ranei.
<legend>s, pera i nga huinga mara, kua whakahouhia ano kia whakaatuhia hei momo upoko.
<label>s kua whakaritea ki display: inline-blockte tuku marginki te tono.
<input>Ko nga s, <select>s, <textarea>s, me <button>nga s te nuinga o te korero e Normalize, engari ka tangohia ano e Reboot o raatau marginme nga huinga line-height: inherit, rawa.
<textarea>s kua whakarerekētia kia taea te huri poutū anake i te mea he maha nga wa "ka pakaru" te whakatakotoranga whaarangi whakapae.
<button>s me <input>nga huānga paatene kei te cursor: pointerwa :not(:disabled).

Ko enei huringa, me etahi atu, ka whakaatuhia i raro nei.

He momo huānga

Wāhitau

Ka <address>whakahouhia te huānga ki te tautuhi i te taunoa o te pūtirotiro font-stylemai i italicki normal. line-heightkua tuku iho ano inaianei, margin-bottom: 1remkua apititia atu. <address>s mo te whakaatu korero whakapā mo te tipuna tata (he mahi katoa ranei). Tiakina te whakahōputu mā te whakamutu i ngā rārangi ki te <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Ingoa Katoa
[email protected]

Poraka

Ko te taunoa margini runga i nga korero poraka ko 1em 40px, no reira ka tautuhia e matou tera 0 0 1remmo tetahi mea e rite ana ki etahi atu huānga.

Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.

He tangata rongonui i te Taitara Puna

Huānga rōraina

Ka <abbr>whiwhi te huānga i te whakaahuatanga taketake kia kitea ai i waenga i nga kuputuhi whiti.

Nulla attr vitae elit libero, a pharetra augue.

Whakarāpopototanga

Ko te taunoa cursori runga i te whakarāpopototanga ko te text, no reira ka tautuhia e matou tera ki pointerte whakaatu ka taea te taunekeneke te huānga ma te panui ki runga.

Ko etahi korero

Ētahi atu korero mo nga korero.

Ko etahi atu korero

Anei etahi atu korero mo nga korero.

HTML5 `[hidden]`huanga

Ka taapirihia e HTML5 tetahi huanga o te ao hou kua whakaingoatia[hidden] , kua whakaingoatia hei display: nonetaunoa. Ma te tarewa i tetahi whakaaro mai i te PureCSS , ka whakapai ake i tenei taunoa ma te [hidden] { display: none !important; }awhina i a ia kia kore displaye pokanoa. Ahakoa [hidden]kaore i te tautokohia e te IE10, ko te whakapuakitanga i roto i a maatau CSS ka whakatika i tera raru.

<input type="text" hidden>

jQuery hotokoretanga

[hidden]kaore i te hototahi ki nga jQuery $(...).hide()me $(...).show()nga tikanga. No reira, i tenei wa kaore matou e tino tautoko [hidden]i etahi atu tikanga mo te whakahaere i nga displayhuānga.

Ki te takahuri noa i te tirohanga o tetahi huānga, ko te tikanga displaykaore i whakarereketia ka taea tonu e te huānga te pa ki te rere o te tuhinga, whakamahia te .invisibleakomanga .