Sake yi

Sake yi, tarin takamaiman canje-canje na CSS a cikin fayil guda ɗaya, fara Bootstrap don samar da kyakkyawan tushe, daidaito da sauƙi don ginawa.

A wannan shafi

kusanci

Sake yi yana ginawa akan Normalize, yana samar da abubuwan HTML da yawa tare da ɗan salo na ra'ayi ta amfani da masu zaɓin kashi kawai. Ana yin ƙarin salo kawai tare da azuzuwan. Misali, muna sake yin wasu <table>salo don tushe mafi sauƙi kuma daga baya samar da .table, .table-bordered, da ƙari.

Anan ga jagororinmu da dalilan zabar abin da za mu soke a Sake yi:

Sabunta wasu tsoffin ƙima na burauza don amfani da rems maimakon ems don tazarar abubuwan da za'a iya daidaitawa.
Guji margin-top. Matsakaicin gefe na iya rugujewa, suna ba da sakamako mara tsammani. Mafi mahimmanci ko da yake, shugabanci guda ɗaya marginshine samfurin tunani mafi sauƙi.
Don sauƙin sikeli a cikin girman na'urar, abubuwan toshe yakamata suyi amfani da rems don margins.
Ci gaba da bayyana fontkaddarorin da ke da alaƙa da ƙayyadaddun bayanai, ta amfani da inheritduk lokacin da zai yiwu.

CSS masu canji

An ƙara a cikin v5.2.0

Tare da v5.1.1, mun daidaita @imports ɗin da ake buƙata a cikin duk buƙatun mu na CSS (ciki har da bootstrap.css, bootstrap-reboot.cssda bootstrap-grid.css) don haɗawa _root.scss. Wannan yana ƙara :rootmatakan CSS masu canji zuwa duk daure, ba tare da la'akari da nawa aka yi amfani da su a cikin wannan tarin ba. Daga ƙarshe Bootstrap 5 zai ci gaba da ganin ƙarin masu canji na CSS da aka ƙara akan lokaci, don samar da ƙarin gyare-gyaren lokaci ba tare da buƙatar sake tara Sass koyaushe ba. Hanyarmu ita ce ɗaukar tushen mu masu canji na Sass kuma mu canza su zuwa masu canjin CSS. Ta wannan hanyar, ko da ba ku yi amfani da masu canji na CSS ba, har yanzu kuna da duk ƙarfin Sass. Wannan har yanzu yana kan ci gaba kuma zai ɗauki lokaci don aiwatarwa sosai.

Misali, la'akari da waɗannan :rootmasu canji na CSS don <body>salon gama gari:

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

A aikace, ana amfani da waɗannan masu canji a cikin Sake yi kamar haka:

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
}

Wanda ke ba ku damar yin gyare-gyare na ainihin lokaci duk yadda kuke so:

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

Matsalolin shafi

An sabunta abubuwan <html>da <body>abubuwan don samar da ingantattun ɓangarorin shafi. Ƙari na musamman:

An box-sizingsaita shi a duk duniya akan kowane nau'i-ciki har *::beforeda *::after, zuwa border-box. Wannan yana tabbatar da cewa faɗin abubuwan da aka ayyana ba a taɓa wuce gona da iri ba saboda matsi ko iyaka.
- Babu tushe font-sizeda aka ayyana akan <html>, amma 16pxana ɗauka (tsohowar burauzar). font-size: 1remana amfani da shi akan <body>nau'in nau'in sikelin mai sauƙin amsa ta hanyar tambayoyin kafofin watsa labarai yayin da ake mutunta abubuwan da mai amfani da kuma tabbatar da hanyar da ta fi dacewa. Ana iya soke wannan tsohowar burauzar ta hanyar canza $font-size-rootcanjin.
Hakanan <body>yana saita duniya font-family, font-weight, line-height, da color. Ana gadar wannan daga baya ta wasu sifofi don hana rashin daidaiton rubutu.
Don aminci, <body>yana da ayyana background-color, rashin kuskure ga #fff.

Tarin rubutu na asali

Bootstrap yana amfani da "tarin rubutu na asali" ko "tarin rubutun tsarin" don ingantaccen rubutu akan kowace na'ura da OS. An ƙirƙira waɗannan fonts ɗin tsarin musamman tare da na'urorin yau a hankali, tare da ingantacciyar ma'ana akan allo, tallafin rubutu mai canzawa, da ƙari. Kara karantawa game da tarin rubutu na asali a cikin wannan labarin 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,
  // 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;

Lura cewa saboda jigon rubutun ya ƙunshi haruffan emoji, yawancin alamomin gama gari/dinbat haruffa Unicode za a sanya su azaman hotuna masu launuka iri-iri. colorSiffar su za ta bambanta, ya danganta da salon da aka yi amfani da su a cikin mashigin emoji na asali/dandali, kuma kowane salon CSS ba zai shafe su ba .

Ana font-familyamfani da wannan ga <body>kuma gaji ta atomatik a duk duniya cikin Bootstrap. Don canza duniya font-family, ɗaukaka $font-family-basekuma sake haɗa Bootstrap.

Kanun labarai da sakin layi

Duk abubuwan kan gaba-misali, <h1>-kuma <p>an sake saita su don margin-topcire su. An ƙara kanun labarai margin-bottom: .5remda sakin layi margin-bottom: 1remdon sauƙin tazara.

Jagora	Misali
`<h1></h1>`	h1. Bootstrap jagora
`<h2></h2>`	h2. Bootstrap jagora
`<h3></h3>`	h3. Bootstrap jagora
`<h4></h4>`	h4. Bootstrap jagora
`<h5></h5>`	h5. Bootstrap jagora
`<h6></h6>`	h6. Bootstrap jagora

Dokokin kwance

An <hr>sauƙaƙa sashin. Hakazalika da kuskuren burauza, <hr>s ana yin su ta hanyar border-top, suna da tsoho opacity: .25, kuma suna gado ta atomatik border-colorta hanyar color, gami da lokacin da coloraka saita ta hanyar iyaye. Ana iya canza su ta hanyar rubutu, iyaka, da abubuwan amfani mara kyau.

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

Lissafi

Duk lissafin- <ul>, <ol>, da <dl>- an margin-topcire su da kuma margin-bottom: 1rem. Lissafin da aka kafa ba su da margin-bottom. Mun kuma sake saita kunnawa padding-leftda <ul>abubuwa <ol>.

Duk lissafin an cire babban gefen su
Kuma tazarar gindinsu ta daidaita
Lissafin da aka kafa ba su da gefen ƙasa
- Ta wannan hanyar suna da kamannin kamanni
- Musamman idan ƙarin abubuwan lissafin ke biye da su
Hakanan an sake saita kullin hagu

Ga jerin oda
Tare da ƴan abubuwan jeri
Yana da kamanni gaba ɗaya
Kamar jerin abubuwan da ba a ba da oda ba a baya

Don mafi sauƙin salo, bayyanannen matsayi, da mafi kyawun tazara, lissafin bayanin sun sabunta margins. <dd>sake saitin margin-leftzuwa 0kuma ƙara margin-bottom: .5rem. <dt>s suna da ƙarfi .

Jerin bayanin: Jerin bayanin ya dace don ma'anar kalmomi.
Lokaci: Ma'anar kalmar.; Ma'anar na biyu don wannan kalma.
Wani lokaci: Ma'anar wannan wani lokaci.

Lambar layi

Kunna snippets na layi tare da <code>. Tabbatar ku guje wa maƙallan kusurwar HTML.

Alal misali, <section>ya kamata a nannade shi azaman layi.

html

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

Tubalan lamba

Yi amfani <pre>da s don layukan lamba da yawa. Har yanzu, tabbatar da kubuta daga kowane kusurwar kusurwa a cikin lambar don yin daidai. An <pre>sake saita kashi don cire shi margin-topda amfani remda raka'a don sa 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>

Masu canji

Don nuna masu canji yi amfani da <var>alamar.

y = m x + b

html

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

Shigar da mai amfani

Yi amfani da <kbd>alamar shigarwar da aka saba shigar da ita ta madannai.

Don canza kundayen adireshi, rubuta cdsunan kundin adireshi.
Don shirya saituna, danna 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>

Samfurin fitarwa

Don nuna samfurin samfurin daga shirin yi amfani da <samp>alamar.

Ana nufin ɗaukar wannan rubutu azaman samfurin fitarwa daga shirin kwamfuta.

html

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

Tables

Tables an ɗan daidaita su zuwa salon <caption>s, iyakokin rugujewa, da tabbatar da daidaito text-aligna ko'ina. Ƙarin canje-canje don iyakoki, padding, da ƙari sun zo tare da .tableajin .

Wannan tebur misali ne, kuma wannan shine taken sa don bayyana abin da ke ciki.
Taken tebur	Taken tebur	Taken tebur	Taken tebur
Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta
Tantanin halitta	Tantanin halitta	Tantanin halitta	Tantanin halitta

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>

Siffofin

An sake kunna abubuwa daban-daban don tsarin tushe mafi sauƙi. Ga wasu fitattun sauye-sauye:

<fieldset>s ba su da iyakoki, padding, ko gefe don haka za a iya amfani da su cikin sauƙi azaman naɗa don abubuwan shigar mutum ɗaya ko ƙungiyoyin bayanai.
<legend>s, kamar fage-fage, an kuma sake tsara su don nunawa azaman jigo na iri.
<label>s an saita don display: inline-blockba da izinin marginamfani.
<input>s, <select>s, <textarea>s, da <button>s yawanci ana magance su ta Normalize, amma Sake yi yana cire su marginda saiti line-height: inherit, kuma.
<textarea>s ana canza su ne kawai don a iya sake girman su a tsaye kamar yadda a kwance a kwance sau da yawa ke “karye” shimfidar shafi.
<button>s da <input>abubuwan maɓalli suna da cursor: pointerlokacin :not(:disabled).

Waɗannan canje-canje, da ƙari, an nuna su a ƙasa.

Goyan bayan shigar kwanan wata & launi

Yi la'akari da bayanan kwanan wata ba su da cikakken goyon bayan duk masu bincike, wato Safari.

Maɓalli a kan maɓalli

Sake yi ya haɗa da haɓakawa don role="button"canza siginar tsoho zuwa pointer. Ƙara wannan sifa ga abubuwa don taimakawa nuna abubuwa suna hulɗa. Wannan rawar ba dole ba ne ga abubuwa, waɗanda ke samun canjin <button>nasu .cursor

Maɓallin kashi mara maɓalli

html

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

Daban-daban abubuwa

Adireshi

An <address>sabunta kashi don sake saita tsohowar burauzar font-styledaga italiczuwa normal. line-heightshi ma yanzu an gaji, kuma margin-bottom: 1reman kara. <address>s ne don gabatar da bayanin tuntuɓar kakanni mafi kusa (ko gaba ɗaya na aiki). Ajiye tsarawa ta hanyar ƙare layi da <br>.

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

Cikakken Suna
[email protected]

Blockquote

Tsohuwar kan blockquotes marginshine 1em 40px, don haka muna sake saita hakan zuwa 0 0 1remwani abu mafi dacewa da sauran abubuwan.

Sanannen zance, wanda ke ƙunshe a cikin ɓangaren blockquote.

Wani sananne a Tushen Tushen

Abubuwan cikin layi

Abun <abbr>yana karɓar salo na asali don sanya shi fice tsakanin rubutun sakin layi.

Abun gajarta HTML .

Takaitawa

Tsohuwar cursortaƙaice ita ce text, don haka muna sake saita hakan pointerdon isar da cewa ana iya mu'amala da sinadarin ta danna shi.

Wasu bayanai

Ƙarin bayani game da cikakkun bayanai.

Ko da ƙarin cikakkun bayanai

Anan akwai ƙarin cikakkun bayanai game da cikakkun bayanai.

HTML5 `[hidden]`sifa

HTML5 yana ƙara sabon sifa na duniya mai suna[hidden] , wanda aka tsara shi azaman display: noneta tsohuwa. Aron ra'ayi daga PureCSS , mun inganta kan wannan tsoho ta hanyar yin [hidden] { display: none !important; }don taimakawa hana ta displayyin kuskure da gangan.

<input type="text" hidden>

rashin jituwa jQuery

[hidden]bai dace da jQuery's $(...).hide()da $(...).show()hanyoyin ba. Don haka, a halin yanzu ba mu yarda [hidden]da wasu dabaru na sarrafa displayabubuwan abubuwa ba.

Don kawai kunna ganuwa na wani abu, ma'ana displayba a gyaggyara sa ba kuma har ila yau kashi na iya yin tasiri ga tafiyar daftarin aiki, yi amfani da .invisibleajin maimakon.

Sake yi

kusanci

CSS masu canji

Matsalolin shafi

Tarin rubutu na asali

Kanun labarai da sakin layi

Dokokin kwance

Lissafi

Lambar layi

Tubalan lamba

Masu canji

Shigar da mai amfani

Samfurin fitarwa

Tables

Siffofin

Goyan bayan shigar kwanan wata & launi

Maɓalli a kan maɓalli

Daban-daban abubuwa

Adireshi

Blockquote

Abubuwan cikin layi

Takaitawa

HTML5 [hidden]sifa

rashin jituwa jQuery

HTML5 `[hidden]`sifa