Trɔ yi nya veviwo gbɔ Trɔ yi docs navigation gbɔ
Check
in English

Gbugbɔ dze egɔme

Reboot, si nye element-specific CSS tɔtrɔwo ƒe ƒuƒoƒo le faɛl ɖeka me, kickstart Bootstrap be wòana gɔmedzedze dzeani, si mewɔa tɔtrɔ o, kple bɔbɔe si dzi woatu ɖo.

Le axa sia dzi

Te ɖe

Reboot tu ɖe Normalize dzi, na HTML nu geɖewo kple atsyã siwo me susu le vie to element tiatiawɔlawo ko zazã me. Wowɔa atsyã bubuwo kple klasswo ko. Le kpɔɖeŋu me, míegbugbɔa <table>atsyã aɖewo dzea egɔme hena gɔmedzedze bɔbɔe aɖe eye emegbe míenaa .table, .table-bordered, kple bubuwo.

Míaƒe mɔfiamewo kple susu siwo tae nètia nusi nàɖe asi le le Reboot me lae nye esi:

  • Trɔ asi le browser ƒe asixɔxɔ aɖewo siwo woɖo ɖi ŋu be nàzã rems ɖe s teƒe emna akpa ƒe dometsotso si woate ŋu adzi ɖe edzi.
  • Ƒo asa na margin-top. Axa siwo le tsitrenu ate ŋu adze anyi, si ana nusiwo womele mɔ kpɔm na o nado tso eme. Gake vevietɔ wu la, mɔfiame ɖeka si marginnye susu me kpɔɖeŋu si le bɔbɔe wu.
  • Be woateŋu adzidze nu bɔbɔe le mɔ̃ ƒe lolomewo me la, ele be block elements nazã rems na margins.
  • Na -nunɔamesi siwo do ƒome kplii ƒe gbeƒãɖeɖewo fontnanɔ suetɔ kekeake, zã inheritɣesiaɣi si wòanya wɔ.

CSS ƒe tɔtrɔwo

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Le v5.1.1 me la, míeɖo míaƒe @imports siwo wobia la ɖe ɖoɖo nu le míaƒe CSS bablawo katã me (siwo dometɔ aɖewoe nye bootstrap.css, bootstrap-reboot.css, kple bootstrap-grid.css) be woatsɔ _root.scss. Esia tsɔa :rootlevel CSS ƒe tɔtrɔwo kpena ɖe bundlewo katã ŋu, eɖanye wo dometɔ nenie wozã le bundle ma me o. Mlɔeba la, Bootstrap 5 ayi edzi akpɔ CSS ƒe tɔtrɔ geɖe siwo wotsɔ kpe ɖe eŋu le ɣeyiɣi aɖe megbe, be wòana ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔ geɖe wu mahiã be woagbugbɔ aƒo Sass nu ƒu ɣesiaɣi o. Míaƒe mɔnu enye be míaxɔ míaƒe dzɔtsoƒe Sass tɔtrɔwo eye míatrɔ wo woazu CSS tɔtrɔwo. To mɔ sia dzi la, ne mèzã CSS ƒe tɔtrɔwo o hã la, Sass ƒe ŋusẽ katã gakpɔtɔ le asiwò. Esia gakpɔtɔ le edzi yim eye axɔ ɣeyiɣi hafi woate ŋu awɔe bliboe.

Le kpɔɖeŋu me, bu :rootCSS ƒe tɔtrɔ siawo ŋu na <body>atsyã siwo bɔ:

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

Le nuwɔna me la, emegbe wowɔa tɔtrɔ mawo ŋudɔ le Reboot me abe ale ene:

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

Nusi na nète ŋu wɔa tɔtrɔwo le ɣeyiɣi ŋutɔŋutɔ me alesi nèdi:

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

Axa ƒe ɖoɖowɔɖiwo

Wotrɔa asi le <html>kple <body>ƒe akpaawo ŋu be woana axa bliboa ƒe gɔmedzedze nyuie wu. Ne míagblɔe tututu la:

  • Woɖo The box-sizingla ɖe nu ɖesiaɖe dzi le xexeame katã—siwo dometɔ aɖewoe nye *::beforekple *::after, be border-box. Esia kpɔa egbɔ be womegbɔa element ƒe kekeme si woɖe gbeƒãe ŋu gbeɖe o le padding alo border ta.
    • font-sizeWomeɖe gbeƒã gɔmeɖoanyi aɖeke le <html>, gake 16pxwotsɔe be (browser ƒe gɔmedzedze). font-size: 1remwozãnɛ le la dzi <body>hena ŋuɖoɖo bɔbɔe ƒe ƒomevi-dzidzenu to nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo dzi esime wole bubu dem zãla ƒe didiwo ŋu eye wole ekpɔm be mɔnu si ŋu woate ŋu aɖo bɔbɔe wu le. Woateŋu axɔ browser ƒe gɔmedzedze sia to asitɔtrɔ le $font-size-roottɔtrɔa ŋu me.
  • The <body>hã ɖo xexeame katã ƒe font-family, font-weight, line-height, kple color. Esia nyia dome emegbe to nɔnɔmetata ƒe akpa aɖewo dzi be woatsɔ axe mɔ ɖe ŋɔŋlɔdzesiwo ƒe masɔmasɔ nu.
  • Le dedienɔnɔ ta la, the <body>has a declared background-color, defaulting to #fff.

Native ŋɔŋlɔdzesiwo ƒe ƒuƒoƒo

Bootstrap zãa “native font stack” alo “system font stack” hena nuŋɔŋlɔwo gɔmeɖeɖe nyuitɔ kekeake le mɔ̃ kple OS ɖesiaɖe dzi. Wotrɔ asi le ɖoɖowɔɖi ƒe nuŋɔŋlɔ siawo ŋu koŋ kple egbegbe mɔ̃wo le susu me, eye wotrɔ asi le wo gɔmeɖeɖe ŋu nyuie wu le screenwo dzi, wo doa alɔ nuŋɔŋlɔ siwo trɔna, kple bubuwo. Xlẽ nu geɖe tso native font stacks ŋu le Smashing Magazine ƒe nyati sia me .

$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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

De dzesii be esi wònye be emoji ŋɔŋlɔdzesiwo le ŋɔŋlɔdzesiwo ƒe ƒuƒoƒoa me ta la, woaɖe dzesi/dingbat Unicode ŋɔŋlɔdzesi geɖe siwo bɔ la gɔme abe nɔnɔmetata siwo le amadede vovovowo me ene. Woƒe dzedzeme ato vovo, le atsyã si wozã le browser/platform la ƒe emoji ŋɔŋlɔdzesi gbãtɔ me nu, eye CSS colorƒe atsyã aɖeke makpɔ ŋusẽ ɖe wo dzi o.

Wozãa font-familyesia ɖe <body>kple domenyinyi le eɖokui si le xexeame katã le Bootstrap bliboa me. Be nàtrɔ xexeame katã font-familyla, trɔ asi $font-family-basele Bootstrap ŋu eye nàgbugbɔ aƒo ƒu.

Tanyawo kple memamãwo

Wogbugbɔa tanya ƒe akpawo katã—le kpɔɖeŋu me, <h1>—eye <p>wogbugbɔa wo ɖona be woaɖe wo margin-topɖa. Wotsɔ tanyawo margin-bottom: .5remkpe ɖe eŋu kple memamawo margin-bottom: 1rembe dometsotsowo nanɔ bɔbɔe.

Tanya ƒe tanya Kpɔɖeŋu
<h1></h1> h1. Bootstrap ƒe tanya
<h2></h2> h2. Bootstrap ƒe tanya
<h3></h3> h3. Bootstrap ƒe tanya
<h4></h4> h4. Bootstrap ƒe tanya
<h5></h5> h5. Bootstrap ƒe tanya
<h6></h6> h6. Bootstrap ƒe tanya

Se siwo le tsia dzi

Wona <hr>element la le bɔbɔe. Abe alesi wòle le web-browser ƒe gɔmedzedze ene la, <hr>wowɔa s ƒe atsyã to border-top, woƒe nɔnɔme le wo si opacity: .25, eye wonyia woƒe border-colorvia ƒe dome le wo ɖokui si color, si me ne colorwoɖo to dzila dzi hã le. Woateŋu atrɔ asi le wo ŋu kple nuŋɔŋlɔ, liƒo, kple opacity dɔwɔnuwo.

html 
<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Ŋlɔ ŋkɔwo

Woɖe xexlẽdzesiawo katã— <ul>, <ol>, kple <dl>—wo margin-topɖa eye a margin-bottom: 1rem. Nested lists mekpɔ naneke o margin-bottom. Míegbugbɔ ɖo padding-lefton <ul>kple <ol>elements hã.

  • Woɖe xexlẽdzesiawo katã ƒe akpa si le etame la ɖa
  • Eye woƒe akpa si le ete la va zu nusi sɔ
  • Nested lists mekpɔa eteƒe o
    • To mɔ sia dzi la, woƒe dzedzeme nɔa sɔsɔm wu
    • Vevietɔ ne nya siwo woŋlɔ ɖe xexlẽdzesiwo me geɖe wu kplɔe ɖo
  • Wogbugbɔ ɖo miame padding la hã
  1. Ŋkɔ siwo woɖo ɖe ɖoɖo nu lae nye esi
  2. Kple nu ʋɛ aɖewo siwo woŋlɔ ɖi
  3. Eƒe dzedzeme bliboa sɔ kple etɔ
  4. Abe alesi woŋlɔ ŋkɔ siwo womeɖo ɖe ɖoɖo nu o va yi ene

marginBe atsyã nanɔ bɔbɔe wu, ɖoɖo si me kɔ nyuie, kple dometsotso nyuie wu la, wowɔ s yeyee le nuŋlɔɖiwo me . <dd>s gbugbɔ ɖoe margin-leftɖe 0eye nàtsɔe akpe ɖe eŋu margin-bottom: .5rem. <dt>s nye nuŋɔŋlɔ si le fli me .

Numeɖeɖewo ƒe xexlẽdzesiwo
Numeɖeɖe ƒe xexlẽdzesi sɔ nyuie na nyawo gɔmeɖeɖe.
Nya
Gɔmeɖeɖe na nya la.
Gɔmesese evelia na nya ma ke.
Nya bubu aɖe hã
Gɔmeɖeɖe na nya bubu sia.

Kɔda si le fli me

Kpe kɔpi ƒe akpa siwo le fli me kple <code>. Kpɔ egbɔ be yesi le HTML ƒe dzogoe ƒe akɔtagbalẽviwo nu.

Le kpɔɖeŋu me, <section>ele be woaxatsae abe inline ene.
html 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kɔdawo ƒe mɔxenuwo

Zã <pre>s na kɔda ƒe fli geɖe. Le afisia hã la, kpɔ egbɔ be yesi le dzogoe ƒe akɔtadzesi ɖesiaɖe si le kɔdasia me nu hena gɔmeɖeɖe nyuitɔ. Wogbugbɔa <pre>element la margin-topɖoa remeƒe margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
html 
<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>

Nusiwo trɔna

Ne èdi tɔtrɔwo fia la, zã <var>tag la.

y = m x + b ƒe ƒuƒoƒo
html 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Zãla ƒe nyawo tsɔtsɔ de eme

Zã la <kbd>nàtsɔ afia nya siwo woŋlɔna zi geɖe to keyboard dzi.

Ne èdi be yeatrɔ agbalẽdzraɖoƒewo la, ŋlɔ agbalẽdzraɖoƒea cdƒe ŋkɔ eye nàkplɔe ɖo.
Ne èdi be yeatrɔ asi le ɖoɖowo ŋu la, zi edzi ctrl + ,
html 
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>

Kpɔɖeŋu ƒe emetsonuwo

Ne èdi kpɔɖeŋu si do tso ɖoɖowɔɖi aɖe me la, zã <samp>tag la.

Woɖoe be woabu nuŋɔŋlɔ sia be enye kpɔɖeŋu si woɖe tso kɔmpiutadziɖoɖo aɖe me.
html 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Kplɔ̃wo

Wotrɔa asi le kplɔ̃wo ŋu vie ɖe atsyã <caption>s nu, wogbãa liƒowo, eye wokpɔa egbɔ be wowɔ ɖeka le wo text-alignkatã me. Tɔtrɔ bubuwo le liƒowo, padding, kple bubuwo ŋu va kpe ɖe .tableklass la ŋu .

Esia nye kpɔɖeŋu kplɔ̃, eye esia nye eƒe nuŋɔŋlɔ si wotsɔ ɖɔ emenyawo.
Tabla ƒe tanya Tabla ƒe tanya Tabla ƒe tanya Tabla ƒe tanya
Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi
Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi
Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi Tabla ƒe lãmenugbagbevi
html 
<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Kpekpeɖeŋugbalẽviwo

Wogbugbɔ dze nɔnɔme ƒe akpa vovovowo gɔme hena gɔmeɖoanyi ƒe atsyã siwo le bɔbɔe wu. Tɔtrɔ siwo ɖe dzesi wu dometɔ aɖewoe nye esi:

  • <fieldset>s me liƒowo, padding, alo margin aɖeke mele o eyata woateŋu azã wo bɔbɔe abe wrappers na ɖekaɖekawo alo nyawo ƒe ƒuƒoƒowo ene.
  • <legend>s, abe agbledeƒewo ene, hã trɔ asi le eŋu be woaɖee afia abe tanya ƒomeviwo ene.
  • <label>s woɖo ɖe display: inline-blockbe woaɖe mɔ marginwoazãe.
  • <input>s, <select>s, <textarea>s, kple <button>s ƒe akpa gãtɔ nye esiwo Normalize kpɔa wo gbɔ, gake Reboot ɖea woƒe marginkple ɖoa line-height: inherit, hã ɖa.
  • <textarea>s la trɔna be woate ŋu atrɔ asi le eƒe lolome ŋu le tsitrenu ko abe alesi tɔtrɔ le tsia dzi zi geɖe “gbãa” axa ƒe ɖoɖo ene.
  • <button>s kple <input>button elements le cursor: pointerɣeyiɣi si me :not(:disabled).

Woɖe tɔtrɔ siawo, kple bubuwo fia le ete.

Kpɔɖeŋu xotutu

100 ƒe xexlẽme

Ɣletiŋkeke & amadede ƒe nyawo tsɔtsɔ de eme ƒe kpekpeɖeŋu

Nenɔ susu me na wò be ŋkeke ƒe nuŋɔŋlɔwo medoa alɔ web-browserwo katã bliboe o, si nye Safari.

Nufiamɔ̃ siwo le abɔtawo dzi

Reboot la tsɔ ŋgɔyiyi aɖe kpe ɖe eŋu na role="button"be nàtrɔ asi le fli si woɖo ɖi la ŋu wòazu pointer. Tsɔ nɔnɔme sia kpe ɖe nusiwo le eme ŋu be wòakpe ɖe eŋu wòaɖee afia be nu veviwo le dɔ wɔm. Akpa sia mehiã na <button>nu veviwo, siwo xɔa woawo ŋutɔ ƒe cursortɔtrɔ o.

Nusiwo menye abɔta o ƒe element ƒe abɔta
html 
<span role="button" tabindex="0">Non-button element button</span>

Misc nu veviwo

Adrɛs

Wotrɔa <address>asi le element la ŋu be wòagbugbɔ aɖo browser la ƒe gɔmedzedze font-styletso italic. hã nye domenyinu fifia, eye wotsɔe kpe ɖe eŋu. s nye tɔgbui si te ɖe ŋuwò wu (alo dɔ blibo aɖe) ƒe kadodo ŋuti nyatakakawo ɖeɖefia. Dzra ɖoɖowɔwɔ ɖo to fliwo nuwuwu kple .normalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Asimɔ, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Ŋkɔ Blibo
[email protected]

Blockquote ƒe nyawo

Default marginle blockquotes nye 1em 40px, eyata míegbugbɔ ɖo ema ɖe 0 0 1remna nane si sɔ kple nu bubuwo wu.

Nyayɔyɔ nyanyɛ aɖe, si le blockquote ƒe akpa aɖe me.

Ame aɖe si xɔ ŋkɔ le Source Title me

Nusiwo le fli me

Elemenu <abbr>la xɔa atsyã veviwo be wòato vovo le memama me nuŋɔŋlɔwo dome.

HTML ƒe kpukpui ƒe akpaa.

Totoɖeme

Default cursorle summary dzi enye text, eyata míegbugbɔ ɖo ema ɖe pointerbe wòaɖee afia be woateŋu awɔ nu kple element la to edzi teti me.

Nyatakaka aɖewo tsitotsito

Nyatakaka bubuwo tso nyatakakaawo ŋu tsitotsito.

Nyatakaka bubuwo gɔ̃ hã

Nyatakaka bubuwo gɔ̃ hã ku ɖe nyatakakaawo ŋu tsitotsitoe nye esi.

HTML5 ƒe [hidden]nɔnɔme

HTML5 tsɔ xexeame katã ƒe nɔnɔme yeye aɖe kpe ɖe eŋu si ŋkɔe nye[hidden] , si wowɔ abe alesi wowɔe display: nonele gɔmedzedzea me ene. Borrowing an idea from PureCSS , míewɔa ŋgɔyiyi le default sia ŋu to ewɔwɔ [hidden] { display: none !important; }be wòakpe ɖe eŋu be displaywòagaxɔ asi le vo me o.

<input type="text" hidden>
jQuery ƒe masɔmasɔ

[hidden]mewɔ ɖeka kple jQuery ƒe $(...).hide()kple $(...).show()mɔnuwo o. Eyata, míeda asi [hidden]ɖe edzi etɔxɛe fifia ɖe aɖaŋu bubuwo dzi hena nusiwo le eme la dzi kpɔkpɔ displayo.

Be nàtrɔ asi le nu aɖe ƒe dzedzeme ŋu ko, si fia displaybe wometrɔ asi le eŋu o eye nu la ateŋu akpɔ ŋusẽ ɖe nuŋlɔɖia ƒe sisi dzi kokoko la, zã klass la boŋ.invisible .