Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

Segin ka baara kɛ

Reboot, n’o ye CSS fɛn kɛrɛnkɛrɛnnenw caman yeli dalajɛlen ye dosiye kelen kɔnɔ, kickstart Bootstrap walasa ka basigi cɛɲi, basigilen, ani nɔgɔman di walasa ka jɔ a kan.

Nin ɲɛ in kan

Surunya

Reboot bɛ jɔ Normalize kan, ka HTML fɛn caman Di ni hakilinata-fɔcogo dɔw ye ni fɛnw sugandili dɔrɔn ye. Styling wɛrɛw bɛ kɛ ni kalanw dɔrɔn de ye. Misali la, an bɛ <table>cogoya dɔw daminɛ kokura walasa ka basigi nɔgɔman sɔrɔ ani kɔfɛ ka .table, .table-bordered, ani dɔ wɛrɛw di.

An ka laadilikanw ni kun minnu b’a to an bɛ se ka min sugandi Reboot kɔnɔ, olu filɛ nin ye:

  • Navigatɛri nafama dɔw labɛncogo kura walasa ka baara kɛ ni rems ye s nɔ na emwalasa ka scalable component spacing kɛ.
  • Aw ye aw yɛrɛ tanga margin-top. Marge jɔlenw bɛ se ka bin, ka na ni nɔw ye minnu ma labɛn. Nka, min nafa ka bon kosɛbɛ, o ye ko sira kelen marginde ye hakili misali nɔgɔman ye.
  • Walasa ka sɛgɛsɛgɛli nɔgɔya minɛnw hakɛw bɛɛ la, bloki kɔnɔfɛnw ka kan ka baara kɛ ni rems ye s kama margin.
  • Aw bɛ font-related properties (nafolo minnu bɛ tali kɛ ɲɔgɔn na) jirali kɛ ka caya, ka baara kɛ ni u ye inheritni a bɛ se ka kɛ tuma o tuma.

CSS bεε bεε bε bεn

A farala a kan v5.2.0 kɔnɔ

Ni v5.1.1 ye, an ye an ka @imports wajibiyalenw sigi senkan an ka CSS bundlew bɛɛ kɔnɔ (o bootstrap.cssla , bootstrap-reboot.css, ani bootstrap-grid.css) walasa ka _root.scss. O bɛ :rootCSS nivo fɛnɲɛnamafagalanw Fàra bundlew bɛɛ kan, a mana Kɛ u hakɛ ye min bɛ Kɛ o bundle kɔnɔ. A laban na Bootstrap 5 bɛna t’a fɛ ka CSS fɛn caman ye minnu bɛ fara ɲɔgɔn kan waati kɔnɔ, walasa ka waati yɛrɛyɛrɛ ladamuni caman di k’a sɔrɔ a ma kɛ wajibi ye ka Sass lajɛ kokura tuma bɛɛ. An ka fɛɛrɛ ye k’an ka source Sass variables ta k’u sɛmɛntiya ka kɛ CSS variables ye. O cogo la, hali n'i ma baara Kɛ ni CSS 'kɔnɔfɛnw ye, i bɛ Sass fanga bɛɛ Sɔrɔ hali bì. O bɛ sen na hali bi, wa a bɛna waati ta walasa k’a waleya ka dafa.

Misali la, aw ye nin :rootCSS fɛn caman sɛgɛsɛgɛli kɛ <body>cogoya caman na:

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

Tiɲɛ na, o fɛn caman bɛ Kɛ o kɔ fɛ Reboot kɔnɔ i n’a fɔ:

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
}

O min b’a to i bɛ se ka waati yɛrɛyɛrɛ ladamuni kɛ i n’a fɔ i b’a fɛ cogo o cogo:

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

Page defaults (ɲɛ fɔlɔw).

The <html>and <body>elements bɛ ladamu walasa ka ɲɛ bɛɛ lajɛlen defaults ɲumanw di. Kɛrɛnkɛrɛnnenya la:

  • The box-sizingis globally set on every element—o la *::beforeani *::after, ka border-box. O b’a To fɛnɲɛnɛma bonya fɔlen tɛ Tɛmɛ abada k’a sababu Kɛ padding walima dancɛ ye.
    • Base si ma font-sizefɔ <html>, nka a 16pxbɛ jate (navigatɛri ka default). font-size: 1rembɛ waleya kan kan <body>walasa ka jaabi nɔgɔya suguya-sɛgɛsɛgɛli kɛ kunnafonidilan ɲininkaliw fɛ k’a sɔrɔ a bɛ baarakɛlaw ka fɛɛrɛw bonya ani ka fɛɛrɛ sɔrɔ min bɛ se ka sɔrɔ kosɛbɛ. Nin navigatɔrɔn ka default bɛ se ka wuli ka bɔ a nɔ na ni $font-size-rootfɛn caman sɛgɛsɛgɛli ye.
  • A <body>fana bɛ diɲɛ font-family, font-weight, line-height, ani color. O bɛ ciyɛn sɔrɔ kɔfɛ foroko yɔrɔ dɔw fɛ walasa ka sɛbɛnnibolow ka bɛnbaliya bali.
  • Walasa ka lakana sɔrɔ, the <body>has a declared background-color, defaulting to #fff.

Native sɛbɛnnibolow kulu

Bootstrap bɛ baara kɛ ni “native font stack” walima “system font stack” ye walasa ka sɛbɛnni kɛcogo ɲuman sɔrɔ minɛn bɛɛ kan ani OS bɛɛ kan. O sitɛmu sɛbɛnnibolow dabɔra kɛrɛnkɛrɛnnenya la ni bi minɛnw ye u hakili la, ni sɛbɛnni kɛcogo ɲɛnabɔlen ye ɛkranw kan, sɛbɛnnibolo caman dɛmɛni, ani fɛn wɛrɛw. aw ye kunnafoni wɛrɛw kalan sɛbɛnnikɛlanw kuluw kan nin Smashing Magazine barokun in kɔnɔ .

$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;

A kɔlɔsi ko bawo sɛbɛnnibolow kulu kɔnɔ, emoji sɛbɛnnibolow bɛ yen, taamasiyɛn/dingbat Unicode taamasiyɛn caman minnu bɛ sɔrɔ tuma caman na, olu bɛna jira i n’a fɔ ja kulɛri caman. U cogoya bɛna ɲɔgɔn ta, ka kɛɲɛ ni cogoya ye min bɛ kɛ navigatɔrɔ/plateforme ka emoji sɛbɛncogo yɛrɛ la, wa CSS cogoya si tɛna nɔ bila coloru la.

O font-familybɛ Kɛ <body>ni ani otomatiki ciyɛn ye diɲɛ kɔnɔ Bootstrap bɛɛ kɔnɔ. Walasa ka global font-family, sɛgɛsɛgɛli kura $font-family-basekɛ ani ka Bootstrap labɛn kokura.

Kumakunw ni dakunw

Kumakunw bɛɛ—misali la, <h1>—ani <p>u bɛ segin u cogo kɔrɔ la walasa u ka margin-topbɔ yen. Kumakunw margin-bottom: .5remfarala ɲɔgɔn kan ani dakunw margin-bottom: 1remwalisa ka u ni ɲɔgɔn cɛ ka nɔgɔ.

Kumakun Misaliya
<h1></h1> h1. Bootstrap ka kumasen
<h2></h2> h2. Bootstrap ka kumasen
<h3></h3> h3. Bootstrap ka kumasen
<h4></h4> h4. Bootstrap ka kumasen
<h5></h5> h5. Bootstrap ka kumasen
<h6></h6> h6. Bootstrap ka kumasen

Sariyaw tilennenw

Eleman <hr>in nɔgɔyara. I n’a fɔ navigatɔrɔn ka defaults (navigatɛriw) defaults (navigatɛriw ka defaults) cogo kelen na, <hr>s bɛ styled via border-top, defaults (dafalen) bɛ u la , ani u bɛ u ka via opacity: .25ciyɛnta u yɛrɛma , hali ni a sigilen bɛ parent fɛ. U bɛ Se ka Lakodɔn ni sɛbɛnni, dancɛ ani opacity utilities ye.border-colorcolorcolor

html ye 
<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">

Lisitiw

Lisitiw bɛɛ— <ul>, <ol>, ani <dl>—u margin-topbɔra u la ani a margin-bottom: 1rem. Lisiti minnu bɛ nested la , olu tɛ margin-bottom. An ye padding-lefton <ul>ni <ol>elements fana Lasegin.

  • Lisitiw bɛɛ bɛ u sanfɛla dankan bɔ
  • Ani u ka duguma-marge normalisé
  • Lisiti minnu bɛ sigi sen kan, olu tɛ ni duguma-dakun ye
    • O cogo la u bɛ yecogo kelen sɔrɔ ka tɛmɛ
    • Kɛrɛnkɛrɛnnenya la ni lisi kɔnɔfɛn wɛrɛw bɛ tugu o kɔ
  • Padding kinin fɛ fana ye reset kɛ
  1. Nin ye lisi ye min labɛnna
  2. Ni lisi fɛn damadɔw ye
  3. A cogoya bɛɛ lajɛlen ye kelen ye
  4. I n’a fɔ lisi tɛmɛnen min ma labɛn

Walasa ka cogoya nɔgɔman sɔrɔ, ka ɲɔgɔndan jɛlen kɛ, ani ka yɔrɔ janya, ɲɛfɔli lisiw ye margins kuraya. <dd>s segin margin-leftka kɛ 0ani ka fara a kan margin-bottom: .5rem. <dt>s bɛ sɛbɛn ɲɛ jɛmanw na .

Ɲɛfɔli lisiw
Ɲɛfɔli lisi dafalen don daɲɛw ɲɛfɔli kama.
Dan
Daɲɛ in ɲɛfɔli.
O daɲɛ kelen in ɲɛfɔli filanan.
Daɲɛ wɛrɛ
Nin daɲɛ wɛrɛ in ɲɛfɔli.

Kode min bɛ kɛ inline kɔnɔ

Kode inline snippets siri ni <code>. Aw ye aw jija ka bɔ HTML angle brackets la.

Misali la, a <section>ka kan ka siri i n’a fɔ inline.
html ye 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Kode blokiw

Baara kɛ ni <pre>s ye kodɔn zana caman kama. Nin sen in fana na, aw ye aw jija ka bɔ angle brackets (kɛrɛnkɛrɛnnenya la) fɛn o fɛn na kode kɔnɔ walasa ka ɲɛfɔli kɛ ka ɲɛ. Eleman <pre>bɛ segin ka a bɔ a margin-topla ani ka baara kɛ ni remunitw ye a kama margin-bottom.

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

Yɛlɛma-yɛlɛmaw

Walasa ka fɛn caman jira, baara kɛ ni <var>taamasiyɛn ye.

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

Baarakɛla ka dontaw

Baara kɛ ni o ye <kbd>walasa ka donta jira min bɛ don a ka c’a la klaviyeti fɛ.

Walasa ka ɲɛbilasɛbɛnw caman ɲɔgɔn falen-falen, i ka sɛbɛnni kɛ cdka tugu o ɲɛbila tɔgɔ sɛbɛn.
Walasa ka sigida labɛncogo ladilan, i ka digi ctrl + ,
html ye 
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>

Sample bɔli

Walasa ka misali bɔli jira ka bɔ porogaramu dɔ la, baara kɛ ni <samp>taamasiyɛn ye.

Nin sɛbɛn in kun ye ka jate iko misali bɔlen min bɔra ɔridinatɛri porogaramu dɔ la.
html ye 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tabali minnu bɛ yen

Tabali bɛ ladilan dɔɔnin ka kɛɲɛ ni cogoya <caption>s ye, ka dancɛw da, ani ka a jira ko u bɛ bɛn ɲɔgɔn ma u text-alignbɛɛ kɔnɔ. Yɛlɛma wɛrɛw bɛ kɛ dankanw, padding ani fɛn wɛrɛw la ni kalan .tableye .

Nin ye misali tabali ye, wa nin ye a ɲɛfɔli ye walasa ka kɔnɔkow ɲɛfɔ.
Tabali kuncɛcogo Tabali kuncɛcogo Tabali kuncɛcogo Tabali kuncɛcogo
Tabali selilɛri Tabali selilɛri Tabali selilɛri Tabali selilɛri
Tabali selilɛri Tabali selilɛri Tabali selilɛri Tabali selilɛri
Tabali selilɛri Tabali selilɛri Tabali selilɛri Tabali selilɛri
html ye 
<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>

Sɛbɛnw

Foroko fɛn suguya caman daminɛna kokura walasa ka basigi cogoya nɔgɔmanw sɔrɔ. Yɛlɛma minnu kɛra, olu dɔw filɛ nin ye:

  • <fieldset>s dan tɛ minnu na, padding, walima margin tɛ u la walasa u ka se ka baara kɛ nɔgɔya la i n’a fɔ wrappers donna kelen-kelen walima donna kuluw la.
  • <legend>s, i n’a fɔ forow, olu fana labɛnna kokura walasa u ka jira i n’a fɔ suguya dɔw tɔgɔ.
  • <label>s bɛ sigi ka display: inline-blockto ka sira margindi ka waleya.
  • <input>s, <select>s, <textarea>s, ani <button>s bɛ ɲɛnabɔ kosɛbɛ Normalize fɛ, nka Reboot bɛ u marginni setw Bɔ line-height: inherit, olu fana.
  • <textarea>s bɛ ladilan walasa u ka se ka bonya wulilen dɔrɔn de kɛ i n’a fɔ bonya jiginni tilennen bɛ “kari” tuma caman na ɲɛ labɛncogo la.
  • <button>s ni <input>butɔni fɛnw bɛ cursor: pointerwaati min na :not(:disabled).

O yɛlɛmaw, ani fɛn wɛrɛw, olu jiralen bɛ jukɔrɔ.

Misali la, nsiirin

100 ye

Date & color doncogo dɛmɛni

Aw k’a To aw hakili la don sɛbɛnniw tɛ Dɛmɛ bɛrɛbɛrɛ navigatɔrɔw bɛɛ fɛ, n’o ye Safari ye.

Points minnu bɛ butɔni kan

Reboot bɛ ni fɛn dɔ ye min bɛ se ka kɛ sababu ye role="button"ka fɛn dɔ Changer de défaut cursor à pointer. Aw bɛ nin fɛn in fara fɛnw kan walasa ka dɛmɛ don k’a jira ko fɛnw bɛ ɲɔgɔn sɔrɔ. O jɔyɔrɔ in tɛ wajibi ye <button>fɛnw na, minnu b’u yɛrɛ ka cursorfɛn caman Changer.

Butɔn min tɛ butɔni ye
html ye 
<span role="button" tabindex="0">Non-button element button</span>

Misc fɛnw

Dagayɔrɔ

Eleman <address>in bɛ ladamu walasa ka navigatɔrɔn ka default lasegin ka font-stylebɔ italicka taa normal. line-heightfana bɛ ciyɛn ta sisan, wa margin-bottom: 1rema farala a kan. <address>s ye ka ɲɛsin mɔgɔw ka kunnafoniw jirali ma bɛnbakɛ min ka surun a la (walima baara bɛɛ lajɛlen). Aw bɛ sɛbɛnniw mara ni zana labanw ye ni <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Fransisko, CA 94103
P: (123) 456-7890. Kalanjɛ ni sɛbɛnni : kalanjɛ ni sɛbɛnni gafew
Tɔgɔ dafalen
fɔlɔ[email protected]

Bloki-kɔlɔsili

Default marginkan blockquotes ye 1em 40px, o la an b'o Lasegin ka 0 0 1remKɛ fɛn dɔ ye min bɛ Bɛn ni fɛn wɛrɛw ye.

Kumasen dɔnnen dɔ, min bɛ sɔrɔ blockquote element dɔ kɔnɔ.

Mɔgɔ min tɔgɔ bɔra Source Title kɔnɔ

Inline fɛnw

Eleman <abbr>bɛ cogoya jɔnjɔn sɔrɔ walasa a ka bɔ kɛnɛ kan dakun sɛbɛnniw cɛma.

HTML daɲɛ surunyali yɔrɔ.

Farankan

Default cursoron summary ye text, o la an bɛ o reset to to pointerwalasa k’a Jira ko element bɛ Se ka Jὲ ni a digilen ye.

Kunnafoni dɔw

Kunnafoni wɛrɛw sɔrɔ o kunnafoni kunbabaw kan.

Hali kunnafoni wɛrɛw

Nin ye kunnafoni wɛrɛw yɛrɛ ye o kunnafoni kunbabaw kan.

HTML5 [hidden]ka fɛnsɛbɛnni

HTML5 bɛ diɲɛ fɛnɲɛnɛma kura dɔ Fàra a kan min tɔgɔ ye ko[hidden] , o min bɛ Kɛ i n’a fɔ display: nonea bɛ Kɛ cogo min na. Borrowing an idea from PureCSS , an bɛ ɲɛtaa kɛ nin default in na ni kɛli [hidden] { display: none !important; }ye walasa ka dɛmɛ don a bali displayka kɛ balawu la.

<input type="text" hidden>
jQuery ka bɛnbaliya

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.