Atunbere

Atunbere, ikojọpọ awọn ayipada CSS-pato ninu faili kan, kickstart Bootstrap lati pese ohun didara, deede, ati ipilẹ ipilẹ ti o rọrun lati kọ sori.

Lori iwe yi

Ona

Atunbere duro lori Normalize, pese ọpọlọpọ awọn eroja HTML pẹlu awọn aza ti o ni imọran nipa lilo awọn yiyan eroja nikan. Afikun iselona ni a ṣe pẹlu awọn kilasi nikan. Fun apẹẹrẹ, a tun atunbere diẹ ninu awọn <table>aza fun ipilẹ ti o rọrun ati nigbamii pese .table, .table-bordered, ati diẹ sii.

Eyi ni awọn itọnisọna ati awọn idi wa fun yiyan kini lati fagile ni Atunbere:

Ṣe imudojuiwọn diẹ ninu awọn iye aiyipada aṣawakiri lati lo rems dipo ems fun aaye paati ti iwọn.
Yẹra fun margin-top. Awọn ala inaro le ṣubu, ti nso awọn abajade airotẹlẹ. Ni pataki julọ botilẹjẹpe, itọsọna kan ti marginjẹ awoṣe ọpọlọ ti o rọrun.
Fun wiwọn ti o rọrun lori awọn iwọn ẹrọ, awọn eroja dina yẹ ki o lo rems fun margins.
Jeki awọn ikede ti awọn fontohun-ini ibatan si o kere ju, ni lilo inheritnigbakugba ti o ṣee ṣe.

CSS oniyipada

Fi kun v5.2.0

Pẹlu v5.1.1, a ṣe idiwọn awọn @imports ti a beere fun kọja gbogbo awọn idii CSS wa (pẹlu bootstrap.css, bootstrap-reboot.cssati bootstrap-grid.css) lati ni _root.scss. Eyi ṣe afikun :rootawọn oniyipada CSS ipele si gbogbo awọn edidi, laibikita bawo ni wọn ṣe lo ninu idii yẹn. Ni ipari Bootstrap 5 yoo tẹsiwaju lati rii diẹ sii awọn oniyipada CSS ti a ṣafikun ni akoko pupọ, lati le pese isọdi-akoko gidi diẹ sii laisi iwulo lati ṣe atunko Sass nigbagbogbo. Ọna wa ni lati mu awọn oniyipada Sass orisun wa ki o yi wọn pada si awọn oniyipada CSS. Ni ọna yẹn, paapaa ti o ko ba lo awọn oniyipada CSS, o tun ni gbogbo agbara Sass. Eyi tun wa ni ilọsiwaju ati pe yoo gba akoko lati ṣe ni kikun.

Fun apẹẹrẹ, ro awọn :rootoniyipada CSS wọnyi fun awọn <body>aza ti o wọpọ:

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

Ni iṣe, awọn oniyipada yẹn ni a lo ni Atunbere bii bẹ:

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
}

Eyi ti o fun ọ laaye lati ṣe awọn isọdi akoko gidi bi o ṣe fẹ:

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

Awọn aiyipada oju-iwe

Awọn eroja <html>ati <body>awọn eroja ti wa ni imudojuiwọn lati pese awọn aiyipada oju-iwe ti o dara julọ. Ni pataki diẹ sii:

Awọn box-sizingti wa ni agbaye ṣeto lori gbogbo eroja-pẹlu *::beforeati *::after, lati border-box. Eyi ni idaniloju pe iwọn ti a kede ti eroja ko kọja nitori fifẹ tabi aala.
- Ko si ipilẹ font-sizeti a kede lori <html>, ṣugbọn 16pxa ro (aiyipada aṣawakiri). font-size: 1remti lo lori <body>iru-iwọn idahun ti o rọrun nipasẹ awọn ibeere media lakoko ti o bọwọ fun awọn ayanfẹ olumulo ati aridaju ọna iraye si diẹ sii. Aiyipada aṣawakiri yii le jẹ agbekọja nipasẹ yiyipada $font-size-rootoniyipada naa.
Awọn <body>tun ṣeto kan agbaye font-family, font-weight, line-height, ati color. Eyi jẹ jogun nigbamii nipasẹ diẹ ninu awọn eroja fọọmu lati ṣe idiwọ awọn aiṣedeede fonti.
Fun ailewu, o <body>ti kede background-color, aiyipada si #fff.

Native font akopọ

Bootstrap nlo “akopọ fonti abinibi” tabi “akopọ font eto” fun ṣiṣe ọrọ ti o dara julọ lori gbogbo ẹrọ ati OS. Awọn akọwe eto wọnyi ti ṣe apẹrẹ pataki pẹlu awọn ẹrọ oni ni lokan, pẹlu imudara ilọsiwaju lori awọn iboju, atilẹyin fonti oniyipada, ati diẹ sii. Ka diẹ sii nipa awọn akopọ fonti abinibi ni nkan Iwe irohin Smashing yii .

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

Ṣe akiyesi pe nitori akopọ fonti pẹlu awọn nkọwe emoji, ọpọlọpọ aami ti o wọpọ/dingbat awọn ohun kikọ Unicode ni yoo ṣe bi awọn aworan aworan alawọpọ. Irisi wọn yoo yatọ, da lori ara ti a lo ninu ẹrọ aṣawakiri/Syeed ti abinibi emoji fonti, ati pe wọn kii yoo ni ipa nipasẹ eyikeyi awọn ara CSS color.

Eyi font-familyni a lo si <body>ati jogun laifọwọyi ni agbaye jakejado Bootstrap. Lati yi agbaye pada font-family, ṣe imudojuiwọn $font-family-baseati ṣajọ Bootstrap.

Awọn akọle ati awọn ìpínrọ

Gbogbo awọn eroja akọle — fun apẹẹrẹ, <h1>— ati <p>pe a tunto lati yọ wọn margin-topkuro. Awọn akọle ti margin-bottom: .5remṣafikun ati awọn paragira margin-bottom: 1remfun aye irọrun.

Akori	Apeere
`<h1></h1>`	h1. Bootstrap akori
`<h2></h2>`	h2. Bootstrap akori
`<h3></h3>`	h3. Bootstrap akori
`<h4></h4>`	h4. Bootstrap akori
`<h5></h5>`	h5. Bootstrap akori
`<h6></h6>`	h6. Bootstrap akori

Awọn ofin petele

Ohun <hr>elo naa ti jẹ irọrun. Iru si awọn aseku aṣawakiri, <hr>s are styled via border-top, ni a aiyipada opacity: .25, ati ki o laifọwọyi jogun wọn border-colornipasẹ color, pẹlu nigba colorti ṣeto nipasẹ awọn obi. Wọn le ṣe atunṣe pẹlu ọrọ, aala, ati awọn ohun elo opacity.

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

Awọn akojọ

Gbogbo awọn atokọ — <ul>, <ol>, ati <dl>— ti margin-topyọkuro ati margin-bottom: 1rem. Awọn atokọ itẹle ko ni margin-bottom. A ti tun padding-lefttitan <ul>ati <ol>awọn eroja tunto.

Gbogbo awọn atokọ ti yọkuro ala oke wọn
Ati ala isalẹ wọn ṣe deede
Awọn atokọ itẹ-ẹiyẹ ko ni ala isale
- Ni ọna yii wọn ni irisi paapaa diẹ sii
- Ni pataki nigbati awọn nkan atokọ diẹ sii tẹle
Padding osi tun ti tunto

Eyi ni atokọ ti o paṣẹ
Pẹlu awọn nkan atokọ diẹ
O ni irisi gbogbogbo kanna
Gẹgẹbi atokọ ti a ko paṣẹ tẹlẹ

Fun iselona ti o rọrun, awọn ilana mimọ, ati aye to dara julọ, awọn atokọ apejuwe ti ni imudojuiwọn margins. <dd>s tunto margin-leftsi 0ati fikun margin-bottom: .5rem. <dt>s wa ni igboya .

Awọn akojọ apejuwe: Akojọ apejuwe jẹ pipe fun asọye awọn ofin.
Igba: Definition fun oro.; Itumọ keji fun igba kanna.
Igba miiran: Itumọ fun igba miiran yii.

Opopo koodu

Pa awọn snippets inline ti koodu pẹlu <code>. Rii daju lati sa fun awọn biraketi igun HTML.

Fun apẹẹrẹ, <section>yẹ ki o wa ni ti a we bi inline.

html

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

Awọn bulọọki koodu

Lo <pre>s fun ọpọ ila ti koodu. Lẹẹkansi, rii daju pe o sa fun awọn biraketi igun eyikeyi ninu koodu fun ṣiṣe deede. A <pre>tunto eroja lati yọkuro margin-topati lo remawọn ẹya fun 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>

Awọn oniyipada

Fun afihan awọn oniyipada lo <var>tag.

y = m x + b

html

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

Iṣagbewọle olumulo

Lo <kbd>lati tọka titẹ sii ti o jẹ igbagbogbo titẹ nipasẹ keyboard.

Lati yipada awọn ilana, tẹ cdorukọ ti itọsọna naa tẹle.
Lati ṣatunkọ eto, tẹ 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>

Apeere igbejade

Fun afihan abajade ayẹwo lati inu eto kan lo <samp>tag.

Ọrọ yii jẹ itumọ lati ṣe itọju bi abajade ayẹwo lati inu eto kọnputa kan.

html

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

Awọn tabili

Awọn tabili ni atunṣe die-die si ara <caption>s, awọn aala wó lulẹ, ati rii daju pe o wa ni ibamu text-alignjakejado. Awọn iyipada afikun fun awọn aala, padding, ati diẹ sii wa pẹlu kilasi.table naa .

Eyi jẹ tabili apẹẹrẹ, ati pe eyi ni akọle rẹ lati ṣe apejuwe awọn akoonu.
Tabili akori	Tabili akori	Tabili akori	Tabili akori
Tabili cell	Tabili cell	Tabili cell	Tabili cell
Tabili cell	Tabili cell	Tabili cell	Tabili cell
Tabili cell	Tabili cell	Tabili cell	Tabili 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>

Awọn fọọmu

Awọn eroja fọọmu oriṣiriṣi ti tun bẹrẹ fun awọn aza ipilẹ ti o rọrun. Eyi ni diẹ ninu awọn iyipada olokiki julọ:

<fieldset>s ko ni awọn aala, padding, tabi ala ki wọn le ṣee lo ni irọrun bi awọn apamọra fun awọn igbewọle kọọkan tabi awọn ẹgbẹ ti awọn igbewọle.
<legend>s, gẹgẹbi awọn ipilẹ aaye, tun ti tun ṣe atunṣe lati ṣe afihan bi akọle iru.
<label>s ti ṣeto lati display: inline-blockgba laaye marginlati lo.
<input>s, <select>s, <textarea>s, ati <button>s ni a koju pupọ julọ nipasẹ Normalize, ṣugbọn Atunbere yọ wọn kuro marginati ṣeto line-height: inherit, paapaa.
<textarea>s ti wa ni títúnṣe lati nikan wa ni resizable ni inaro bi petele iwọn igba "fifọ" iwe ifilelẹ.
<button>s ati <input>awọn eroja bọtini ni cursor: pointernigbati :not(:disabled).

Awọn ayipada wọnyi, ati diẹ sii, ni afihan ni isalẹ.

Àlàyé apẹẹrẹ

Iṣagbewọle apẹẹrẹ

Imeeli apẹẹrẹ

Tẹlifoonu apẹẹrẹ

url apẹẹrẹ

Nọmba apẹẹrẹ

Apeere wiwa

Iwọn apẹẹrẹ

Iṣagbewọle faili apẹẹrẹ

Apeere yan

Ṣayẹwo apoti ayẹwo yii

Aṣayan ọkan ni eyi ati pe Aṣayan keji jẹ nkan miiran ti o tun gun pupọ lati ṣe afihan fifisilẹ ti awọn iṣakoso fọọmu alafẹ wọnyi. Aṣayan mẹta jẹ alaabo

Apeere textarea

Ọjọ apẹẹrẹ

Akoko apẹẹrẹ

Ọrọigbaniwọle apẹẹrẹ

Apẹẹrẹ datetime-agbegbe

Ọsẹ apẹẹrẹ

Oṣu apẹẹrẹ

Awọ apẹẹrẹ

Abajade apẹẹrẹ 100

Ọjọ & atilẹyin igbewọle awọ

Ranti awọn igbewọle ọjọ ko ni atilẹyin ni kikun nipasẹ gbogbo awọn aṣawakiri, eyun Safari.

Awọn itọka lori awọn bọtini

Atunbere pẹlu imudara role="button"lati yi kọsọ aiyipada pada si pointer. Ṣafikun ẹda yii si awọn eroja lati ṣe iranlọwọ tọka awọn eroja jẹ ibaraenisepo. Ipa yii ko ṣe pataki fun awọn eroja, eyiti o gba iyipada <button>tiwọn .cursor

Bọtini eroja ti kii ṣe bọtini

html

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

Awọn eroja oriṣiriṣi

Adirẹsi

A ṣe imudojuiwọn eroja lati <address>tun aiyipada ẹrọ aṣawakiri font-stylelati . ti wa ni tun bayi jogun, ati awọn ti a ti fi kun. s wa fun iṣafihan alaye olubasọrọ fun baba ti o sunmọ (tabi gbogbo ara iṣẹ). Ṣetọju ọna kika nipasẹ ipari awọn ila pẹlu .italicnormalline-heightmargin-bottom: 1rem<address><br>

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

Orukọ kikun
[email protected]

Blockquote

Awọn aiyipada marginlori blockquotes ni 1em 40px, ki a tun pe si 0 0 1remfun nkankan siwaju sii ni ibamu pẹlu awọn eroja miiran.

Ọrọ agbasọ ti a mọ daradara, ti o wa ninu nkan blockquote kan.

Ẹnikan olokiki ni Akọle Orisun

Awọn eroja inu

Ohun <abbr>elo naa gba iselona ipilẹ lati jẹ ki o ṣe pataki laarin ọrọ paragira.

Awọn HTML abbreviation ano.

Lakotan

Aiyipada cursorlori akopọ jẹ text, nitorinaa a tunto iyẹn pointerlati fihan pe nkan naa le ṣe ibaraenisepo pẹlu tite lori rẹ.

Diẹ ninu awọn alaye

Alaye diẹ sii nipa awọn alaye.

Paapaa awọn alaye diẹ sii

Eyi ni awọn alaye diẹ sii nipa awọn alaye.

HTML5 `[hidden]`abuda

HTML5 ṣe afikun abuda agbaye tuntun ti a npè ni[hidden] , eyiti o jẹ aṣa bi display: nonenipasẹ aiyipada. Yiyawo imọran lati PureCSS , a ni ilọsiwaju lori aiyipada yii nipa ṣiṣe [hidden] { display: none !important; }lati ṣe iranlọwọ lati yago fun displaygbigba rẹ lairotẹlẹ.

<input type="text" hidden>

jQuery aibaramu

[hidden]ko ni ibamu pẹlu jQuery's $(...).hide()ati $(...).show()awọn ọna. Nitorinaa, lọwọlọwọ a ko fọwọsi ni pataki [hidden]lori awọn ilana miiran fun ṣiṣakoso awọn displayeroja.

Lati yi iyipada hihan ohun kan nikan, afipamo pe ko yipada ati pe ano tun le ni ipa lori sisan tidisplay iwe, lo kilasi.invisible dipo.

Atunbere

Ona

CSS oniyipada

Awọn aiyipada oju-iwe

Native font akopọ

Awọn akọle ati awọn ìpínrọ

Awọn ofin petele

Awọn akojọ

Opopo koodu

Awọn bulọọki koodu

Awọn oniyipada

Iṣagbewọle olumulo

Apeere igbejade

Awọn tabili

Awọn fọọmu

Ọjọ & atilẹyin igbewọle awọ

Awọn itọka lori awọn bọtini

Awọn eroja oriṣiriṣi

Adirẹsi

Blockquote

Awọn eroja inu

Lakotan

HTML5 [hidden]abuda

jQuery aibaramu

HTML5 `[hidden]`abuda