Jya ku bintu nyamukuru Jya kuri docs
in English

Ongera usubiremo

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

Kuriyi page

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 hanyuma nyuma tuyitanga .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. Imisozi ihanamye irashobora gusenyuka, itanga ibisubizo bitunguranye. Icy'ingenzi ariko, 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.

Impinduka za CSS

Wongeyeho muri v5.1.1

Hamwe na v5.1.1, twapanze s dusabwa murwego rwacu @importrwose rwa CSS (harimo bootstrap.css, bootstrap-reboot.cssndetse, no bootstrap-grid.cssgushiramo _root.scss. Ibi byongeramo :rooturwego CSS ihinduranya kuri bundle zose, tutitaye kubyo zikoreshwa muri iyo bundle. Amaherezo Bootstrap 5 izakomeza reba byinshi CSS ihinduka yongerewe igihe.

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. Mucukumbuzi isanzwe irashobora kurengerwa muguhindura $font-size-rootimpinduka.
  • Uwiteka <body>kandi ashyiraho isi yose font-family,, na . Ibi bizungurwa nyuma nibintu bimwe na bimwe bigize imiterere kugirango birinde imyandikire idahuye.font-weightline-heightcolor
  • Kubwumutekano , Uwiteka <body>afite background-coloribyatangajwe, asanzwe kuri #fff.

Imyandikire kavukire

Bootstrap ikoresha "kavukire y'imyandikire kavukire" cyangwa "sisitemu y'imyandikire ya sisitemu" kugirango ubone inyandiko nziza kuri buri gikoresho na OS. Sisitemu y'imyandikire ya sisitemu yateguwe byumwihariko hamwe nibikoresho byuyu munsi, hamwe no kunonosora neza kuri ecran, inkunga yimyandikire ihinduka, nibindi byinshi. Soma byinshi kubyerekeye imyandikire kavukire muriyi ngingo ya 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;

Menya ko kuberako imyandikire yimyandikire irimo imyandikire ya emoji, ibimenyetso byinshi bisanzwe / dingbat unicode inyuguti bizerekanwa nkibishusho byamabara menshi. Imigaragarire yabo iratandukanye, bitewe nuburyo bukoreshwa mumyandikire ya emoji ya mushakisha / urubuga, kandi ntabwo bizaterwa colornuburyo bwa CSS.

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

Impinduka za CSS

Nkuko Bootstrap 5 ikomeje gukura, nuburyo bwinshi nuburyo buzubakwa hamwe na CSS ihinduka nkuburyo bwo gutanga igihe nyacyo cyo kwihitiramo bitabaye ngombwa ko duhora dusubiramo Sass. Uburyo bwacu nugufata inkomoko ya Sass ihinduka hanyuma tukayihindura mubihinduka CSS. Iyo nzira, niyo udakoresha CSS ihinduka, uracyafite imbaraga zose za Sass. Ibi biracyakomeza kandi bizatwara igihe cyo kubishyira mubikorwa byuzuye.

Kurugero, tekereza :rootkuri CSS ihinduka kuburyo busanzwe <body>:

  @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};

Mu myitozo, izo mpinduka noneho zikoreshwa muri Reboot nkiyi:

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
}

Nibikwemerera gukora progaramu-nyayo yihariye uko ubishaka:

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

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. Twongeye kandi gusubiramo padding-leftibintu <ul>hamwe <ol>nibintu.

  • Urutonde rwose rwakuweho hejuru
  • Kandi impande zabo zo hasi zari zisanzwe
  • Urutonde rwatoranijwe ntirujya hasi
    • Ubu buryo bafite byinshi birenze
    • Cyane cyane iyo ikurikiwe nibindi bintu byurutonde
  • Ibipapuro byibumoso nabyo byasubiwemo
  1. Dore urutonde rwateganijwe
  2. Hamwe nurutonde ruto
  3. Ifite isura imwe
  4. Nkurutonde rwabanjirije urutonde

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.
Igihe
Ibisobanuro kuri iryo jambo.
Igisobanuro cya kabiri kuri manda imwe.
Irindi jambo
Ibisobanuro kuri iri jambo rindi.

Kode y'umurongo

Kuzuza ibice bya kode hamwe <code>. Wemeze guhunga HTML inguni.

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

Guhagarika kode

Koresha <pre>s kumirongo myinshi ya code. Na none kandi, menya neza guhunga inguni iyo ari yo yose muri kode kugirango itangwe neza. Ikintu <pre>gisubirwamo kugirango gikureho margin-topkandi ukoreshe remibice byacyo 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>

Ibihinduka

Kugirango werekane impinduka koresha <var>tagi.

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

Umukoresha

Koresha i <kbd>kugirango werekane ibyinjijwe mubisanzwe byinjiye muri clavier.

Guhindura ububiko, andika cdukurikizaho izina ryubuyobozi.
Guhindura igenamiterere, kanda 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>

Icyitegererezo gisohoka

Kugirango werekane icyitegererezo gisohoka muri porogaramu koresha <samp>tagi.

Iyi nyandiko igamije gufatwa nkicyitegererezo gisohoka muri porogaramu ya mudasobwa. 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Imbonerahamwe

Imbonerahamwe zahinduwe gato kuburyo bwa <caption>s, gusenyuka imipaka, kandi byemeza ko bihoraho text-alignmuri rusange. Impinduka zinyongera kumipaka, padi, nibindi 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 kumuntu winjiza 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.

Urugero rw'umugani

100

Itariki & Ibara ryinjiza Inkunga

Wibuke itariki yinjiza idashyigikiwe byuzuye nabashakishwa bose, aribo Safari.

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.

Amagambo azwi cyane, akubiye mubintu byahagaritswe.

Umuntu uzwi muri Source Umutwe

Shyira ibice

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

Ikintu kigufi cya HTML .

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.

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