Malitegharịa ekwentị

Malitegharịa, nchịkọta mgbanwe CSS akọwapụtara nke ọma na otu faịlụ, kickstart Bootstrap iji nye ntọala mara mma, na-agbanwe agbanwe na dị mfe iji wuo ya.

Na ibe a

Ụzọ

Reboot na-ewuli n'elu Normalize, na-enye ọtụtụ ihe HTML nwere ụdị echiche dịtụ iche site na iji naanị ndị na-ahọpụta ihe. A na-eme styling agbakwunyere naanị na klas. Dịka ọmụmaatụ, anyị na-amalitegharị <table>ụdị ụfọdụ maka usoro ntọala dị mfe wee nye .table, .table-bordered, na ndị ọzọ.

Nke a bụ ntuziaka anyị na ihe kpatara ịhọrọ ihe ị ga-emeri na Reboot:

Melite ụfọdụ ụkpụrụ ndabara ihe nchọgharị iji jiri rems kama ems maka oghere akụrụngwa nwere ike ịbelata.
Zere margin-top. Oke kwụ ọtọ nwere ike daa, na-arụpụta nsonaazụ a na-atụghị anya ya. Nke kachasị mkpa n'agbanyeghị, otu ntụziaka nke marginbụ ihe atụ uche dị mfe.
Maka ntule dị mfe n'ofe nha ngwaọrụ, ihe mgbochi kwesịrị iji rems maka margins.
Debe nkwupụta nke fontihe ndị metụtara ya na opekempe, na-eji oge inheritọ bụla enwere ike.

Ụdị mgbanwe CSS

Agbakwunyere na v5.2.0

Site na v5.1.1, anyị kwadoro s anyị chọrọ @importn'ofe ngwugwu CSS anyị niile (gụnyere bootstrap.css, bootstrap-reboot.cssna bootstrap-grid.css) iji tinye _root.scss. Nke a na-agbakwụnye :rootmgbanwe CSS dị larịị na ngwugwu niile, n'agbanyeghị ole n'ime ha ejiri na ngwugwu ahụ. N'ikpeazụ Bootstrap 5 ga-aga n'ihu na-ahụ mgbanwe CSS ndị ọzọ agbakwunyere n'oge, iji nyekwuo nhazi oge na-enweghị mkpa ịchịkọta Sass mgbe niile. Ụzọ anyị si were were mgbanwe Sass isi iyi wee gbanwee ha ka ọ bụrụ mgbanwe CSS. N'ụzọ ahụ, ọbụlagodi na ị naghị eji mgbanwe CSS, ị ka nwere ike niile nke Sass. Nke a ka na-aga n'ihu ma ọ ga-ewe oge iji mejuputa ya nke ọma.

Dịka ọmụmaatụ, tụlee :rootmgbanwe CSS ndị a maka <body>ụdị nkịtị:

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

Na omume, a na-etinye mgbanwe ndị ahụ na Reboot dị ka nke a:

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
}

Nke na-enye gị ohere ịme nhazi oge ọ bụla masịrị gị:

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

Ndabara ibe

A <html>na <body>-emelite ihe ndị ahụ na ihe ndị ahụ iji nye ndabara n'ofe ibe dị mma. Kpọmkwem karịa:

Edebere box-sizingihe niile n'ụwa niile - gụnyere *::beforena *::after, na border-box. Nke a na-achọpụta na obosara ekwuputara nke mmewere agaghị agafe n'ihi padding ma ọ bụ oke.
- Ọ nweghị ntọala font-sizeekwuputala na <html>, mana 16pxa na-eche ya (ndabara ihe nchọgharị ahụ). font-size: 1remA na-etinye ya na <body>ụdị nzaghachi dị mfe site na ajụjụ mgbasa ozi mgbe ị na-asọpụrụ mmasị onye ọrụ na ịhụ na ọ ga-enwetakwu ohere. Enwere ike ịkagbu ndabara ihe nchọgharị a site n'ịgbanwe $font-size-rootmgbanwe.
Nke <body>ahụ na-esetịpụkwa ihe zuru ụwa ọnụ font-family, font-weight, line-height, na color. A na-eketa nke a ma emechaa site n'ụdị ụfọdụ iji gbochie ndakọrịta font.
Maka nchekwa, onye <body>ahụ ekwupụtala background-color, na-emebi #fff.

Nchịkọta mkpụrụedemede ala nna

Bootstrap na-eji “nchịkọta font ala” ma ọ bụ “nchịkọta font sistemụ” maka nsụgharị kacha mma na ngwaọrụ na OS ọ bụla. Emebere mkpụrụedemede sistemu ndị a nke ọma site na n'uche nke ngwaọrụ nke oge a, yana ngbanwe ka mma na enyo, nkwado font agbanwe agbanwe na ndị ọzọ. Gụkwuo maka nchịkọta mkpụrụedemede nke ala n'ime akụkọ Smashing Magazine a .

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

Rịba ama na n'ihi na nchịkọta mkpụrụedemede gụnyere mkpụrụedemede emoji, ọtụtụ akara ngosi/dingbat Unicode ga-eme ka ọ bụrụ eserese nwere agba. Ọdịdị ha ga-adịgasị iche, dabere n'ụdị ejiri n'ụdị emoji nke ihe nchọgharị / ikpo okwu, na ụdị CSS ọ bụla agaghị emetụta ha color.

A font-familyna-etinye nke a na nke a <body>na-eketa na-akpaghị aka n'ụwa niile na Bootstrap. Ka ịgbanwee ihe zuru ụwa ọnụ font-family, melite $font-family-basema chịkọta Bootstrap.

Isi na paragraf

Isi ihe niile—dịka ọmụmaatụ, <h1>—ma <p>tọgharịa ka margin-topewepụrụ ha. Isi okwu margin-bottom: .5remagbakwunyela na paragraf margin-bottom: 1remmaka oghere dị mfe.

Isi	Ọmụmaatụ
`<h1></h1>`	h1. Isiokwu bootstrap
`<h2></h2>`	h2. Isiokwu bootstrap
`<h3></h3>`	h3. Isiokwu bootstrap
`<h4></h4>`	h4. Isiokwu bootstrap
`<h5></h5>`	h5. Isiokwu bootstrap
`<h6></h6>`	h6. Isiokwu bootstrap

Iwu kwụ ọtọ

Emeela <hr>ka mmewere dị mfe. Yiri ndabara ihe nchọgharị, <hr>a na-ahazi s site na border-top, nwere ndabara opacity: .25, wee keta ha border-colorsite na akpaghị aka color, gụnyere mgbe coloredobere site na nne na nna. Enwere ike iji ederede, oke na akụrụngwa gbanwee ha.

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

Ndepụta

Ndepụta niile — <ul>, <ol>, na — ewepụrụ <dl>ha yana a . Ndepụta akwụghị ụgwọ enweghị . Anyị ewepụtakwala on na ọcha.margin-topmargin-bottom: 1remmargin-bottompadding-left<ul><ol>

Ndepụta niile ewepụrụ oke oke ha
Na oke ala ha na-ahazi
Ndepụta akwụghị ụgwọ enweghị oke ala
- N'ụzọ dị otú a, ha na-enwe ọdịdị ọbụna karị
- Karịsịa mgbe ihe ndepụta ndị ọzọ sochiri ya
Edokwala ihe mgbochi aka ekpe

Nke a bụ ndepụta ahaziri
Na ihe ndepụta ole na ole
O nwere otu anya n'ozuzu ya
Dị ka ndepụta na-akwadoghị nke gara aga

Maka ịke dị mfe, ndị isi doro anya, yana ohere ka mma, ndepụta nkọwa emelitere margins. <dd>s tọgharịa margin-leftna 0tinye margin-bottom: .5rem. <dt>s nwere obi ike .

Ndepụta nkọwa: Ndepụta nkọwa zuru oke maka ịkọwa okwu.
Oge: Nkọwa maka okwu ahụ.; Nkọwa nke abụọ maka otu okwu ahụ.
Okwu ọzọ: Nkọwa maka okwu ọzọ a.

Koodu ntanetị

Jiri snippet kechie koodu inline <code>. Jide n'aka na ị ga-agbanarị brackets akụkụ HTML.

Dịka ọmụmaatụ, <section>ekwesịrị ịfụkọta ya dị ka inline.

html

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

Koodu ngọngọ

Jiri <pre>s maka ọtụtụ ahịrị koodu. Ọzọkwa, jide n'aka na ị ga-agbanarị brackets akụkụ ọ bụla dị na koodu maka nsụgharị kwesịrị ekwesị. Emegharịrị <pre>mmewere iji wepu ya margin-topwee jiri remnkeji maka ya 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>

Mgbanwe

Maka igosi mgbanwe jiri <var>mkpado.

y = m x + b

html

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

Ntinye onye ọrụ

Jiri <kbd>gosi ntinye a na-ejikarị ahụigodo abanye.

Ka ịgbanwee akwụkwọ ndekọ aha, pịnye cdaha ndekọ na-esochi ya.
Ka idezi ntọala, pịa 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>

Mmepụta sample

Maka igosi ihe nlele sitere na mmemme jiri <samp>mkpado.

Ezubere ka ewere ederede a dị ka ihe nlele sitere na mmemme kọmputa.

html

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

Tebụl

A na-edozi obere tebụl ka ọ bụrụ ụdị <caption>s, oke ala daa, wee hụ na ọ na-agbanwe agbanwe text-align. Mgbanwe ndị ọzọ maka oke, padding na ndị ọzọ na-abịa na klas .tableahụ .

Nke a bụ tebụl ihe atụ, nke a bụkwa isiokwu ya iji kọwaa ihe dị n'ime ya.
Isiokwu okpokoro	Isiokwu okpokoro	Isiokwu okpokoro	Isiokwu okpokoro
Tebụl cell	Tebụl cell	Tebụl cell	Tebụl cell
Tebụl cell	Tebụl cell	Tebụl cell	Tebụl cell
Tebụl cell	Tebụl cell	Tebụl cell	Tebụl cell

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>

Ụdị

Emegharịrị ihe ụdị dị iche iche maka ụdị ntọala dị mfe. Nke a bụ ụfọdụ mgbanwe ndị ama ama:

<fieldset>s enweghị oke, padding, ma ọ bụ oke ka enwere ike iji ha ngwa ngwa dị ka ihe mkpuchi maka ntinye onye ọ bụla ma ọ bụ otu ntinye.
<legend>s, dị ka ntọala ubi, ka edegharịrị ka egosipụtakwa dị ka isiokwu ụdị.
<label>s atọrọ ka display: inline-blockekwe marginka etinye ya.
<input>s, <select>s, <textarea>s, na <button>s bụ Normalize na-ekwukarị okwu, mana Reboot na-ewepụ ha marginna ịtọọkwa line-height: inherit.
<textarea>A na-agbanwe s ka ọ bụrụ naanị resizable kwụ ọtọ dị ka ngbanwe kwụ ọtọ na-emekarị nhazi ibe “na-agbaji”.
<button>s na <input>ihe bọtịnụ nwere cursor: pointermgbe :not(:disabled).

E gosipụtara mgbanwe ndị a na ndị ọzọ n'okpuru.

Ihe atụ akụkọ ifo

Ntinye ihe atụ

Ihe atụ email

Ihe atụ ekwentị

Ihe atụ url

Nọmba ihe atụ

Ọmụmaatụ ọchụchọ

Oke ihe atụ

Ntinye faịlụ ihe atụ

Ihe atụ họrọ

Lelee igbe nlele a

Nhọrọ nke mbụ bụ nke a na nke ahụ Nhọrọ nke abụọ bụ ihe ọzọ dịkwa oke ogologo iji gosipụta nchichi nke njikwa ụdị ndị a mara mma. Agbanyụrụ nhọrọ atọ

Ihe atụ textarea

Ụbọchị ihe atụ

Oge ihe atụ

Okwuntughe ọmụmaatụ

Ọmụmaatụ oge ụbọchị - mpaghara

Ihe atụ izu

Ọmụmaatụ ọnwa

Agba atụ

Mmepụta ihe atụ 100

Nkwado ntinye ụbọchị & agba

Buru n'uche na ihe nchọgharị niile anaghị akwado ntinye ụbọchị , ya bụ Safari.

Ntuziaka na bọtịnụ

Nbugharị gụnyere nkwalite maka role="button"ịgbanwe cursor ndabara ka ọ bụrụ pointer. Tinye njirimara a na ihe iji nyere aka gosi na ihe na-emekọrịta ihe. Ọrụ a adịghị mkpa maka <button>ihe ndị na-enweta cursormgbanwe nke ha.

Bọtịnụ mmewere enweghị bọtịnụ

html

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

Ihe dị iche iche

Adreesị

Emelitere <address>mmewere ka ịtọgharịa ndabara ihe nchọgharị site font-stylena italicgaa na normal. line-heightbụkwa ugbu a ketara, ma margin-bottom: 1remtinyekwuo ya. <address>s bụ maka igosipụta ozi kọntaktị maka nna nna kacha nso (ma ọ bụ otu ọrụ dum). Chekwaa nhazi site na iji ahịrị mechie <br>.

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

Aha zuru oke
[email protected]

Ihe mgbochi

Ihe ndabara margindị na blockquotes bụ 1em 40px, yabụ anyị na-emegharị nke ahụ ka 0 0 1remọ bụrụ ihe dabara na ihe ndị ọzọ.

Ngụ ama ama nke ọma, dị n'ime ihe mgbochi okwute.

Onye ama ama na Isi mmalite

Ihe ntanetị

Ihe <abbr>mmewere na-enweta nhazi nke nkiti iji mee ka ọ pụta ìhè n'etiti ederede paragraf.

Ihe mbelata HTML .

Nchịkọta

Ihe ndabara cursorna nchịkọta bụ text, yabụ anyị na-emegharị nke ahụ pointeriji gosi na enwere ike ịmekọrịta mmewere site na ịpị ya.

Nkọwa ụfọdụ

Ozi ndị ọzọ gbasara nkọwa.

Ọbụna nkọwa ndị ọzọ

Nke a bụ nkọwa ndị ọzọ gbasara nkọwa.

HTML5 `[hidden]`àgwà

HTML5 na-agbakwụnye àgwà ọhụrụ zuru ụwa ọnụ aha ya bụ[hidden] , nke a na-eme ka ọ bụrụ display: nonena ndabara. Na-agbaziri echiche site na PureCSS , anyị na-emeziwanye na ndabara a site n'ime ka [hidden] { display: none !important; }ọ nyere aka gbochie ya ka ọ ghara imebi ya displayna mberede.

<input type="text" hidden>

ndakọrịta jQuery

[hidden]adabaghị na jQuery $(...).hide()na $(...).show()usoro. Ya mere, anyị anaghị akwado ugbu a [hidden]maka usoro ndị ọzọ maka ijikwa ihe displayndị ahụ.

Iji gbanwee visibiliti nke ihe mmewere, nke pụtara na displayanaghị agbanwe ya na mmewere ka nwere ike imetụta ọbịbịa nke akwụkwọ ahụ, jiri klaasị .invisiblekama .

Malitegharịa ekwentị

Ụzọ

Ụdị mgbanwe CSS

Ndabara ibe

Nchịkọta mkpụrụedemede ala nna

Isi na paragraf

Iwu kwụ ọtọ

Ndepụta

Koodu ntanetị

Koodu ngọngọ

Mgbanwe

Ntinye onye ọrụ

Mmepụta sample

Tebụl

Ụdị

Nkwado ntinye ụbọchị & agba

Ntuziaka na bọtịnụ

Ihe dị iche iche

Adreesị

Ihe mgbochi

Ihe ntanetị

Nchịkọta

HTML5 [hidden]àgwà

ndakọrịta jQuery

HTML5 `[hidden]`àgwà