Ongera usubiremo

Reboot, icyegeranyo cyibintu byihariye CSS ihinduka muri dosiye imwe, kickstart Bootstrap kugirango itange ibintu byiza, bihamye, kandi byoroshye gushingiraho.

Inzira

Reboot yubaka kuri Normalize, itanga ibintu byinshi bya HTML hamwe nuburyo bumwe bwatekerejweho ukoresheje ibintu byatoranijwe gusa. Inyandiko yinyongera ikorwa gusa namasomo. Kurugero, dusubiramo rezo zimwe <table>muburyo bworoshye bwibanze hanyuma nyuma dutange .table, .table-borderednibindi byinshi.

Dore umurongo ngenderwaho nimpamvu zo guhitamo icyo kurenga muri Reboot:

Kuvugurura amashakiro amwe asanzwe kugirango akoreshe rems aho kuba ems umwanya munini wibice.
Irinde margin-top. Impera ihanamye irashobora gusenyuka, itanga ibisubizo bitunguranye. Icyingenzi cyane nubwo, icyerekezo kimwe margincyicyitegererezo cyoroshye cyo mumutwe.
Kugirango byoroshye gupima ubunini bwibikoresho, ibice byo guhagarika bigomba gukoresha rems kuri margins.
Komeza imenyekanisha fontryimitungo ifitanye isano byibuze, ukoresheje inheritigihe cyose bishoboka.

Ipaji isanzwe

Ibintu <html>nibintu <body>byavuguruwe kugirango bitange page-nziza isanzwe. By'umwihariko:

Uwiteka box-sizingyashyizwe ku isi yose kuri buri kintu-harimo *::beforena *::after, kuri border-box. Ibi byemeza ko ubugari bwatangajwe bwibintu butigera burenga kubera padi cyangwa imipaka.
Nta shingiro font-sizeryatangajwe kuri <html>, ariko 16pxrifatwa (Mucukumbuzi isanzwe). font-size: 1remni Byakoreshejwe Kuri <body>Byoroshye Kwishura Ubwoko-Kugereranya Binyuze mu Itangazamakuru mu gihe wubaha ibyo ukoresha kandi byemeza uburyo bworoshye.
Uwiteka <body>kandi ashyiraho isi yose font-family, line-heightna text-align. Ibi bizungurwa nyuma nibintu bimwe na bimwe bigize imiterere kugirango birinde imyandikire idahuye.
Kubwumutekano , Uwiteka <body>afite background-coloribyatangajwe, asanzwe kuri #fff.

Imyandikire kavukire

Imyandikire isanzwe y'urubuga (Helvetica Neue, Helvetica, na Arial) yamanuwe muri Bootstrap 4 hanyuma isimburwa na "kavukire y'imyandikire kavukire" kugirango inyandiko nziza itangwe kuri buri gikoresho na OS. Soma byinshi kubyerekeye imyandikire kavukire muriyi ngingo ya Smashing 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;

Ibi font-familybirakoreshwa kuri <body>kandi bigahita bizungura isi yose muri Bootstrap. Guhindura isi yose font-family, kuvugurura $font-family-baseno gusubiramo Bootstrap.

Imitwe n'ingingo

Ibintu byose byimitwe - urugero, <h1>-kandi <p>bigasubirwamo kugirango margin-topbikurweho. Imitwe margin-bottom: .5remyongeyeho n'ingingo margin-bottom: 1remzo gutandukanya byoroshye.

Umutwe	Urugero
`<h1></h1>`	h1. Umutwe wa Bootstrap
`<h2></h2>`	h2. Umutwe wa Bootstrap
`<h3></h3>`	h3. Umutwe wa Bootstrap
`<h4></h4>`	h4. Umutwe wa Bootstrap
`<h5></h5>`	h5. Umutwe wa Bootstrap
`<h6></h6>`	h6. Umutwe wa Bootstrap

Urutonde

Urutonde rwose - <ul>,, <ol>na <dl>- kugira ibyo margin-topbakuyemo na a margin-bottom: 1rem. Urutonde rwatoranijwe ntirufite margin-bottom.

Lorem ipsum dolor icara amet
Consectetur adipiscing elit
Integer molestie lorem kuri massa
Facilisis muri pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kuri
Faucibus porta lacus fringilla vel
Aenean bicara amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor icara amet
Consectetur adipiscing elit
Integer molestie lorem kuri massa
Facilisis muri pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean bicara amet erat nunc
Eget porttitor lorem

Kuburyo bworoshye, busobanutse neza, hamwe nintera nziza, urutonde rwibisobanuro rwavuguruwe margins. <dd>s gusubiramo margin-leftno 0kongeramo margin-bottom: .5rem. <dt>s . _

Urutonde rwibisobanuro: Urutonde rwibisobanuro rwiza rwo gusobanura amagambo.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida kuri eget metus.
Malesuada porta: Etiam porta sem maleuada magna mollis euismod.

Inyandiko yateguwe

Ikintu <pre>gisubirwamo kugirango gikureho margin-topkandi ukoreshe remibice byacyo margin-bottom.

.urugero-element {
  margin-hepfo: 1rem;
}

Imbonerahamwe

Imbonerahamwe zahinduwe gato muburyo <caption>s, gusenyuka imipaka, kandi byemeza ko bihoraho text-alignmuri rusange. Impinduka zinyongera kumipaka, padi, nibindi byinshi biza hamwe nishuri.table .

Uru ni urugero rwimbonerahamwe, kandi iyi niyo yanditseho kugirango isobanure ibirimo.
Umutwe	Umutwe	Umutwe	Umutwe
Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza
Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza
Akazu kameza	Akazu kameza	Akazu kameza	Akazu kameza

Ifishi

Ibintu bitandukanye byasubiwemo kuburyo bworoshye bwibanze. Dore zimwe mu mpinduka zigaragara:

<fieldset>s nta mipaka, padi, cyangwa margin kuburyo bishobora gukoreshwa byoroshye nkibipfunyika byinjira cyangwa amatsinda yinyongera.
<legend>s, nkibibanza, nabyo byasubiwemo kugirango byerekanwe nkumutwe wubwoko.
<label>s byashyizweho display: inline-blockkugirango yemererwe margingukoreshwa.
<input>s, <select>s, <textarea>s, na <button>s bikunze kuvugwa na Normalize, ariko Reboot ikuraho ibyabo marginhamwe na seti line-height: inherit.
<textarea>s yahinduwe kugirango ihindurwe gusa ihagaritse nkuko itambitse itambitse akenshi “imena” imiterere y'urupapuro.
<button>s na <input>buto ibintu bifite cursor: pointerigihe :not(:disabled).

Izi mpinduka, nibindi byinshi, byerekanwe hepfo.

Ibisobanuro kuri buto

Reboot ikubiyemo ibyongeweho role="button"kugirango uhindure indanga isanzwe pointer. Ongeraho iyi Ikiranga kubintu kugirango bifashe kwerekana ibintu bikorana. Uru ruhare ntirukenewe kubintu <button>, bibona cursorimpinduka zabo.

Akabuto kitari buto

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

Ibintu bitandukanye

Aderesi

Ikintu <address>kiravugururwa kugirango usubize mushakisha isanzwe font-stylekuva italickuri normal. line-heightna none ubu twarazwe, kandi margin-bottom: 1remtwongeyeho. <address>s ni ukugaragaza amakuru yamakuru kuri ba sogokuruza hafi (cyangwa umubiri wose wakazi). Zigama imiterere kurangiza imirongo hamwe <br>.

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

Izina ryuzuye
[email protected]

Guhagarika

Mburabuzi marginkuri blokquote ni 1em 40px, nuko dusubiramo ibyo 0 0 1remkubintu bihuye nibindi bintu.

Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.

Umuntu uzwi muri Source Umutwe

Shyira ibice

Ikintu <abbr>cyakira stiling yibanze kugirango kigaragare hagati yinyandiko.

Nulla attr vitae elit libero, pharetra augue.

Incamake

Mburabuzi cursorku ncamake ni text, nuko dusubiramo ibyo pointerkugirango twerekane ko ikintu gishobora gukorana mugukanda kuriyo.

Ibisobanuro bimwe

Andi makuru yerekeye amakuru arambuye.

Ndetse birambuye

Hano haribindi bisobanuro birambuye kubyerekeye amakuru arambuye.

`[hidden]`Ikiranga HTML5

HTML5 yongeyeho ikiranga gishya ku isi cyiswe[hidden] , cyanditswe nkuko bisanzwe display: none. Gutira igitekerezo muri PureCSS , tunonosora kuri iyi default dukora [hidden] { display: none !important; }kugirango dufashe gukumira ko displaybitarenze impanuka. Mugihe [hidden]bidashyigikiwe na IE10, imenyekanisha ryeruye muri CSS yacu rikemura icyo kibazo.

<input type="text" hidden>

JQuery idahuye

[hidden]ntabwo bihuye $(...).hide()nuburyo bwa jQuery $(...).show(). Kubwibyo, ntabwo ubu dushyigikiye cyane [hidden]ubundi buhanga bwo gucunga displayibintu.

Kugirango uhindure gusa kugaragara kwikintu, bivuze ko displaykidahinduwe kandi ikintu kirashobora kugira ingaruka kumyandikire yinyandiko, koresha urwego aho.invisible .