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.

Letlakaleng le

Batamela

Reboot e aga godimo ga Normalize, e fana ka 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 tloš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.

Diphetogo tša CSS

E okeditšwe go v5.1.1

Ka v5.1.1, re ile ra beakanya @imports ya rena ye e nyakegago go ralala le dihlopha tša rena ka moka tša CSS (go akaretšwa bootstrap.css, bootstrap-reboot.css, le bootstrap-grid.cssgo akaretša _root.scss. Se se tlaleletša :rootdiphetogo tša maemo tša CSS go dihlopha ka moka, go sa šetšwe gore ke tše kae tša tšona tšeo di šomišwago ka gare ga sehlopha seo. Mafelelong Bootstrap 5 e tla tšwela pele go dira bjalo bona diphetogo tše dingwe tša CSS tšeo di okeditšwego ge nako e dutše e e-ya.

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 gabonolo mohuta-sekala ka dipotšišo tša boraditaba mola e hlompha dikgetho tša modiriši le go netefatša mokgwa wo o fihlelelwago kudu. Sephephediši se sa go se fetoge se ka tlošwa ka go fetoša $font-size-rootphetogo.
The <body>gape e bea lefase ka bophara font-family, font-weight, line-height, le color. 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

Bootstrap e diriša “mokgobo wa fonte ya setlogo” goba “mokgobo wa fonte ya tshepedišo” bakeng sa go fetolela mongwalo mo go loketšego go sedirišwa se sengwe le se sengwe le OS. Difonte tše tša tshepedišo di hlamilwe ka go lebanya go nagannwe ka didirišwa tša lehono, ka go fetolela mo go kaonefaditšwego diskrineng, thekgo ya difonte tše di fetogago le tše dingwe. Bala ka botlalo ka ga mekgobo ya difonte tša setlogo sehlogong se sa Smashing Magazine .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Hlokomela gore ka lebaka la gore mokgobo wa difonte o akaretša difonte tša emoji, ditlhaka tše ntši tše di tlwaelegilego tša unicode tša leswao/dingbat di tla tšweletšwa bjalo ka diswantšho tša mebala ye mentši. Ponagalo ya tšona e tla fapana, go ya ka setaele seo se šomišitšwego ka go fonte ya setlogo ya emoji ya sephephediši/sefala, gomme di ka se amege ke colormekgwa efe goba efe ya CSS.

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.

Diphetogo tša CSS

Ge Bootstrap 5 e tšwela pele go gola, mekgwa ye mentši le ye mentši e tla agwa ka diphetogo tša CSS bjalo ka mokgwa wa go fa tlwaetšo ye ntši ya nako ya nnete ntle le go nyakega ga go kgoboketša gape Sass ka mehla. Mokgwa wa rena ke go tšea diphetogo tša rena tša mohlodi tša Sass gomme ra di fetoša go ba diphetogo tša CSS. Ka tsela yeo, le ge o sa šomiše diphetogo tša CSS, o sa na le maatla ka moka a Sass. Se se sa tšwela pele gomme se tla tšea nako go phethagatša ka botlalo.

Go fa mohlala, ela hloko :rootdiphetogo tše tša CSS tša <body>mekgwa ye e tlwaelegilego:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

Ka go diragatša, diphetogo tšeo di gona di dirišwa ka go Reboot go swana le:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Eo e go dumelelago go dira diphetogo tša nako ya nnete le ge go le bjalo o rata:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Re bile re seta gape dielemente tša padding-leftgodimo <ul>le .<ol>

Mananeo ka moka a na le mošito wa ona wa godimo wo o tlošitšwego
Gomme margin ya bona ya ka fase e ile ya tlwaelega
Mananeo a go tsenywa ka gare ga dihlaga ga a na mošito wa ka fase
- Ka tsela ye di na le ponagalo e leka-lekanego kudu
- Kudu-kudu ge e latelwa ke dilo tše dingwe tša lenaneo
Padding ya le letshadi le yona e beakantšwe gape

Lenaneo le le laetšwego ke le
Ka dilo tše mmalwa tša lenaneo
E na le ponagalo e swanago ya kakaretšo
Bjalo ka lenaneo la peleng leo le sa laolwego

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.
Lereo: Tlhaloso ya lereo le.; Tlhaloso ya bobedi ya lereo le le swanago.
Lereo le lengwe: Tlhaloso ya lereo le le lengwe.

Khoutu ya ka gare ga mothaladi

Phuthelela dikarolwana tša ka gare ga mothaladi tša khoutu ka <code>. Kgonthiša gore o tšhaba maswaodikga a khutlo ya HTML.

Ka mohlala, <section>e swanetše go phuthelwa bjalo ka inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Diboloko tša khoutu

Šomiša <pre>s bakeng sa mela e mentši ya khoutu. Le mo nakong ye, kgonthišetša gore o tšhaba maswaodikga afe goba afe a khutlo ka khoutung bakeng sa go fetolela gabotse. Elemente <pre>e bewa gape go tloša ya yona margin-tople go šomiša remdiyuniti tša yona margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Diphetogo

Bakeng sa go bontšha diphetogo šomiša <var>thepo.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Tsenyo ya mosebedisi

Šomiša <kbd>go laetša tsenyo yeo ka tlwaelo e tsenywago ka khiiboto.

Go fetola ditšhupetšo, thaepa gomme o cdlatelwe ke leina la ditšhupetšo.
Go rulaganya dipeakanyo, tobetsa ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Dipholo tsa mohlala

Bakeng sa ho bontša mohlala dipholo tsa ho tloha lenaneo sebelisa <samp>tag.

Sengwalwa se se reretšwe go swarwa bjalo ka setšweletšwa sa mohlala go tšwa lenaneong la khomphutha.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Ditafola

Ditafola di fetotšwe go se nene go ya ka setaele <caption>s, mellwane ya go phuhlama, gomme di 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.
<button>s le <input>dielemente tša konope di na le cursor: pointerge :not(:disabled).

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

Mohlala wa tšōmo

Mohlala wa tsenyo

Mohlala wa imeile

Mohlala wa mogala

Mohlala wa url

Nomoro ya mohlala

Patlo ya mohlala

Mohlala wa fapaneng

Mohlala wa go tsenya faele

Mohlala kgetha

Lekola lepokisi le la go hlahloba

Kgetho ya pele ke ye le yeo Kgetho ya bobedi ke selo se sengwe seo gape se lego super telele go bontšha go phuthelwa ga ditaolo tše tša foromo ya go makatša. Kgetho ya boraro e golofetše

Mohlala wa lefelo la sengwalwa

Mohlala wa letšatšikgwedi

Mohlala wa nako

Mohlala phasewete

Mohlala datetime-sebakeng seo

Beke ya mohlala

Mohlala wa kgwedi

Mohlala wa mmala

Mohlala wa ditšweletšwa 100 e le

Letšatšikgwedi & mmala input thekgo

Dula o gopola ditshenyegelo tša letšatšikgwedi ga di thekgwe ka botlalo ke diphensele ka moka, e lego Safari.

Ditšhupetšo godimo ga dikonope

Reboot e akaretša kaonafatšo ya role="button"go fetoša sešupanako sa go se fetoge go pointer. Oketša seka se go dielemente go thuša go laetša gore dielemente di na le tirišano. Karolo ye ga e hlokege go <button>dielemente, tšeo di hwetšago cursorphetogo ya tšona.

Konopo ya elemente yeo e sego ya konope

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

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

Lebitso
le feletseng [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.

Setsopolwa se se tsebegago, seo se lego ka gare ga elemente ya blockquote.

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.

Elemente ya khutsofatšo ya HTML .

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.

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

Reboot gape

Batamela

Diphetogo tša CSS

Di-default tša letlakala

Mokgobo wa fonte ya setlogo

Diphetogo tša CSS

Dihlogo le dirapa

Mananeo

Khoutu ya ka gare ga mothaladi

Diboloko tša khoutu

Diphetogo

Tsenyo ya mosebedisi

Dipholo tsa mohlala

Ditafola

Diforomo

Letšatšikgwedi & mmala input thekgo

Ditšhupetšo godimo ga dikonope

Dielemente tša go fapafapana

Aterese

Setsopolwa sa go thibela

Dielemente tša ka gare ga mothaladi

Kakaretšo

[hidden]Sebopego sa HTML5

Go se sepelelane ga jQuery

`[hidden]`Sebopego sa HTML5