Source

Reboot gape

Reboot, kgoboketšo ya diphetogo tša CSS tše di itšego tša elemente ka faeleng e tee, kickstart Bootstrap go fa motheo wo o kgahlišago, wo o sa fetogego le wo bonolo go aga godimo ga wona.

Batamela

Reboot e aga godimo ga Normalize, e fa dielemente tše ntši tša HTML ka mekgwa ye e itšego ya dikgopolo ka go šomiša fela bakgethi ba elemente. Tlatsetso setaele e etsoa feela le diklase. Ka mohlala, re thoma gape <table>mekgwa e mengwe bakeng sa motheo o bonolo gomme ka morago re nea .table, .table-bordered, le tše dingwe.

Ditlhahlo tša rena le mabaka a go kgetha seo o swanetšego go se fediša ka go Reboot ke a:

Mpshafatša dikelo tše dingwe tša go se fetoge tša sephephediši go šomiša rems go e na le ems bakeng sa sekgoba sa dikarolo tše di ka lekanywago.
Phema margin-top. Di- margin tše di emego thwii di ka phuhlama, tša tšweletša dipoelo tšeo di sa letelwago. Lega go le bjalo, sa bohlokwa kudu, tlhahlo e tee ya marginke mohlala o bonolo wa monagano.
Bakeng sa go lekanyetša bonolo go ralala le bogolo bja sedirišwa, dielemente tša go thibela di swanetše go šomiša rems bakeng sa margins.
Boloka dipolelo tša fontdithoto tše di amanago le -di le bonnyane, o šomiša inheritneng le neng ge go kgonega.

Di-default tša letlakala

Dielemente tša <html>le <body>di mpshafatšwa go fa di-default tše kaone tša letlakala ka bophara. Ka go lebanya kudu:

The box-sizinge beakantšwe lefaseng ka bophara godimo ga elemente e nngwe le e nngwe—go akaretša *::beforele le *::after, go border-box. Se se netefatša gore bophara bjo bo tsebagaditšwego bja elemente ga bo ke bo feta ka lebaka la go tlatša goba mollwane.
- Ga go na motheo wo font-sizeo tsebagaditšwego go <html>, eupša 16pxo tšewa (ya go se fetoge ya sephephediši). font-size: 1reme dirišwa go ya <body>bakeng sa go arabela bonolo mohuta-sekaleng ka dipotšišo tša boraditaba mola e hlompha dikgetho tša modiriši le go netefatša mokgwa wo o fihlelelwago kudu.
The <body>gape e bea lefase ka bophara font-family, line-height, le text-align. Se se abelwa ka morago ke dielemente tše dingwe tša sebopego go thibela go se dumelelane ga fonte.
Bakeng sa polokego, the <body>e na le e tsebišitše background-color, defaulting to #fff.

Mokgobo wa fonte ya setlogo

Difonte tša wepe tša go se fetoge (Helvetica Neue, Helvetica, le Arial) di lahlilwe go Bootstrap 4 gomme tša tšeelwa legato ke “mokgobo wa difonte tša setlogo” bakeng sa go fetolela mongwalo mo go loketšego go sedirišwa se sengwe le se sengwe le OS. Bala ka botlalo ka ga mekgobo ya difonte tša setlogo sehlogong se sa Smashing Magazine .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

Se font-familyse dirišwa go <body>le go abelwa ka go iketla lefaseng ka bophara go ralala le Bootstrap. Go fetola lefase ka bophara font-family, mpshafatša $font-family-basele go kgoboketša gape Bootstrap.

Dihlogo le dirapa

Dielemente ka moka tša hlogo—mohlala, <h1>—gomme <p>di bewa gape gore di margin-toptlošwe. Dihlogo di margin-bottom: .5remokeditšwe le dirapa margin-bottom: 1rembakeng sa sekgoba se bonolo.

Hlogo ya ditaba	Mohlala
`<h1></h1>`	h1. Hlogo ya bootstrap
`<h2></h2>`	h2. Hlogo ya bootstrap
`<h3></h3>`	h3. Hlogo ya bootstrap
`<h4></h4>`	h4. Hlogo ya bootstrap
`<h5></h5>`	h5. Hlogo ya bootstrap
`<h6></h6>`	h6. Hlogo ya bootstrap

Mananeo

Mananeo ka moka— <ul>, <ol>, le <dl>—a na le margin-topao a tlošitšwego le a margin-bottom: 1rem. Mananeo ao a tsentšwego ka gare ga dihlaga ga a na margin-bottom.

Lorem ipsum dolor dula amet
Consectetur adipiscing ya maemo a godimo
Palo e feletseng molestie lorem ka massa
Facilisis ka pretium nisl aliquet
Nulla volutpat aliquam ya go swana le yona
- Phasellus iaculis ya go swana le yona
- Purus sodales di-ultricies
- Vestibulum laoreet ya go rwala dithoto sem
- A k tristique libero volutpat ka
Faucibus porta lacus e le 'ngoe e le 'ngoe
Aenean dula amet erat nunc
Eget porttitor lorem ya go rwala dilo

Lorem ipsum dolor dula amet
Consectetur adipiscing ya maemo a godimo
Palo e feletseng molestie lorem ka massa
Facilisis ka pretium nisl aliquet
Nulla volutpat aliquam ya go swana le yona
Faucibus porta lacus e le 'ngoe e le 'ngoe
Aenean dula amet erat nunc
Eget porttitor lorem ya go rwala dilo

Bakeng sa setaele se bonolo, tatelano ya maemo ye e kwagalago, le sekgoba se sekaone, mananeo a tlhalošo a mpshafaditšwe margins. <dd>s seta gape margin-leftgo 0le go tlaleletša margin-bottom: .5rem. <dt>s di na le mongwalo o motenya .

Mananeo a tlhaloso: Lenaneo la tlhalošo le phethagetše bakeng sa go hlaloša mareo.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit e seng mi porta gravida ka eget metus.
Malesuada porta ya go tswalela: Etiam porta sem malesuada ea mollis euismod.

Sengwalwa se se fometetšwego pele

Elemente <pre>e bewa gape go tloša ya yona margin-tople go šomiša remdiyuniti tša yona margin-bottom.

.mohlala-elemente { .
  moedi-tlase: 1rem;
} .

Ditafola

Ditafola di fetotšwe go se nene go ya ka setaele <caption>s, mellwane ya go phuhlama, le go netefatša go se fetoge text-aligngohle. Diphetogo tše dingwe tša mellwane, go tlatša le tše dingwe di tla le .tablesehlopha .

Ye ke tafola ya mohlala, gomme ye ke tlhalošo ya yona go hlaloša diteng.
Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola	Hlogo ya tafola
Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola
Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola
Sele ya tafola	Sele ya tafola	Sele ya tafola	Sele ya tafola

Diforomo

Dikarolo tše di fapa-fapanego tša foromo di thomilwe gape bakeng sa mekgwa e bonolo ya motheo. Tše dingwe tša diphetogo tše di lemogegago kudu ke tše:

<fieldset>s ga di na mellwane, padding, goba margin ka fao di ka šomišwa gabonolo bjalo ka diphuthelwana tša ditseno ka botee goba dihlopha tša ditseno.
<legend>s, go swana le disete tša mašemo, le tšona di rulagantšwe gape gore di bontšhwe bjalo ka hlogo ya mehuta.
<label>s di bewa go display: inline-blockgo dumelela margingo dirišwa.
<input>s, <select>s, <textarea>s, le <button>s di rarollwa kudu ke Normalize, eupša Reboot e tloša tša bona marginle disete line-height: inherit, le tšona.
<textarea>s di fetolwa gore e be fela yeo e ka fetošwago bogolo ka go otlologa ka ge go fetoša bogolo bjo bo rapaletšego gantši go “roba” peakanyo ya letlakala.

Diphetogo tše, le tše dingwe, di bontšhitšwe ka mo tlase.

Dielemente tša go fapafapana

Aterese

Elemente <address>e mpshafatšwa go seta gape go se fetoge ga sephephediši go font-styletšwa italicgo go normal. line-heightle yona bjale e abetšwe, gomme margin-bottom: 1reme okeditšwe. <address>s ke tša go tšweletša tshedimošo ya kgokagano ya rakgolokhukhu wa kgauswi (goba sehlopha ka moka sa mošomo). Boloka go fometa ka go fetša methalo ka <br>.

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

Leina ka botlalo
[email protected]

Setsopolwa sa go thibela

The default marginka blockquotes ke 1em 40px, kahoo re reset seo ho 0 0 1rembakeng sa ntho e 'ngoe e lumellanang haholoanyane le elements tse ling.

Lorem ipsum dolor lula amet, consectetur adipiscing elit. Palo e feletseng posuere erat a ante.

Motho yo a tumilego ka go Source Title

Dielemente tša ka gare ga mothaladi

Elemente <abbr>e amogela setaele sa motheo go e dira gore e tšwelele gare ga sengwalwa sa temana.

Nulla attr vitae elit libero, e lego pharetra ya go swana le ya go swana le yona.

Kakaretšo

The default cursorka kakaretso ke text, kahoo re reset hore ho pointerho fetisetsa hore elements ka sebelisana le ka ho tobetsa ho eona.

Dintlha tše dingwe

More info ka dintlha.

Dintlha tše dingwe le go feta

Dintlha tše dingwe le go feta mabapi le dintlha ke tše.

`[hidden]`Sebopego sa HTML5

HTML5 e tlaleletša ka seka se sefsa sa lefase ka bophara seo se bitšwago[hidden] , seo se rulagantšwego bjalo display: noneka ka go ikemela. Borrowing an idea from PureCSS , re ntlafatsa holim'a default ena ka ho etsa [hidden] { display: none !important; }ho thusa thibela lona displayho fumana phoso overridden. Le ge [hidden]e sa thekgwe ka tlhago ke IE10, kgoeletšo ye e lego molaleng ka go CSS ya rena e dikologa bothata bjoo.

<input type="text" hidden>

Go se sepelelane ga jQuery

[hidden]ga e sepelelane le jQuery's $(...).hide()le $(...).show()mekgwa. Ka fao, ga re ga bjale ka mo go kgethegilego go thekga [hidden]godimo ga dithekniki tše dingwe tša go laola displayya dielemente.

Go no fetola go bonagala ga elemente, go ra gore ya yona displayga se ya fetošwa gomme elemente e sa dutše e ka ama go elela ga tokumente, šomiša sehlopha go e na le.invisible moo.