in English

Washa upya

Anzisha upya, mkusanyiko wa mabadiliko ya kipengele mahususi cha CSS katika faili moja, anzisha Bootstrap ili kutoa msingi maridadi, thabiti na rahisi kujenga juu yake.

Katika ukurasa huu

Mbinu

Anzisha upya hujengwa juu ya Kurekebisha, kutoa vipengele vingi vya HTML vilivyo na mitindo ya maoni kwa kutumia viteuzi vya vipengele pekee. Styling ya ziada inafanywa tu na madarasa. Kwa mfano, tunawasha upya baadhi <table>ya mitindo kwa msingi rahisi na kutoa baadaye .table, .table-bordered, na zaidi.

Hapa kuna miongozo yetu na sababu za kuchagua kile cha kubatilisha katika Reboot:

Sasisha baadhi ya thamani chaguo-msingi za kivinjari ili kutumia rems badala ya ems kwa nafasi za sehemu zinazoweza kuongezeka.
Epuka margin-top. Pambizo za wima zinaweza kuporomoka, na kutoa matokeo yasiyotarajiwa. Muhimu zaidi ingawa, mwelekeo mmoja wa marginni mfano rahisi wa kiakili.
Kwa kuongeza ukubwa wa kifaa kwa urahisi, vipengee vya kuzuia vinapaswa kutumia rems kwa margins.
Weka matamko ya fontmali zinazohusiana kwa kiwango cha chini, ukitumia inheritkila inapowezekana.

Vigezo vya CSS

Imeongezwa katika v5.2.0

Kwa v5.1.1, tulisawazisha @imports zetu zinazohitajika kwenye vifurushi vyetu vyote vya CSS (pamoja na bootstrap.css, bootstrap-reboot.css, na bootstrap-grid.css) ili kujumuisha _root.scss. Hii huongeza :rootviwango vya vigeu vya CSS kwa vifurushi vyote, bila kujali ni ngapi kati ya hizo hutumika kwenye kifurushi hicho. Hatimaye Bootstrap 5 itaendelea kuona vigezo zaidi vya CSS vinavyoongezwa kwa wakati, ili kutoa ubinafsishaji zaidi wa wakati halisi bila hitaji la kurejesha Sass kila wakati. Mtazamo wetu ni kuchukua viambajengo vya chanzo chetu cha Sass na kuvibadilisha kuwa vigeu vya CSS. Kwa njia hiyo, hata kama hutumii vigeu vya CSS, bado unayo nguvu zote za Sass. Hili bado linaendelea na itachukua muda kutekelezwa kikamilifu.

Kwa mfano, fikiria anuwai hizi za :rootCSS kwa <body>mitindo ya kawaida:

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

Kwa mazoezi, vijiumbe hivyo basi hutumika katika Reboot kama hivyo:

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
}

Ambayo hukuruhusu kufanya ubinafsishaji wa wakati halisi jinsi unavyopenda:

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

Mipangilio ya ukurasa

Vipengele <html>na <body>vipengele vinasasishwa ili kutoa chaguo-msingi bora zaidi katika ukurasa mzima. Zaidi hasa:

Ulimwenguni box-sizingkote umewekwa kwa kila kipengele-ikiwa ni pamoja *::beforena na *::after, hadi border-box. Hii inahakikisha kwamba upana uliotangazwa wa kipengele haupitiwi kamwe kwa sababu ya pedi au mpaka.
- Hakuna msingi font-sizeuliotangazwa kwenye <html>, lakini 16pxinachukuliwa (chaguo-msingi ya kivinjari). font-size: 1reminatumika <body>kwa uwekaji ukubwa wa aina unaojibu kwa urahisi kupitia hoja za midia huku ukiheshimu matakwa ya mtumiaji na kuhakikisha mbinu inayofikika zaidi. Chaguomsingi hii ya kivinjari inaweza kubatilishwa kwa kurekebisha utofauti $font-size-root.
Pia <body>huweka kimataifa font-family, font-weight, line-height, na color. Hii inarithiwa baadaye na baadhi ya vipengele vya fomu ili kuzuia kutofautiana kwa fonti.
Kwa usalama, <body>faili imetangazwa background-color, ambayo ni chaguo msingi kwa #fff.

Rafu ya fonti asili

Bootstrap hutumia "bunda la fonti asili" au "lundika la fonti la mfumo" kwa uwasilishaji bora wa maandishi kwenye kila kifaa na OS. Fonti hizi za mfumo zimeundwa mahususi kwa kuzingatia vifaa vya leo, kwa kuboreshwa kwa uwasilishaji kwenye skrini, usaidizi wa fonti tofauti na zaidi. Soma zaidi kuhusu mrundikano wa fonti asili katika makala haya ya Jarida la Smashing .

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

Kumbuka kwamba kwa sababu mrundikano wa fonti unajumuisha fonti za emoji, herufi nyingi za kawaida za Unicode za ishara/dingbat zitatolewa kama picha za rangi nyingi. Muonekano wao utatofautiana, kulingana na mtindo unaotumika katika fonti asili ya kivinjari/jukwaa, na hazitaathiriwa na colormitindo yoyote ya CSS.

Hii font-familyinatumika kwa <body>na kurithiwa kiotomatiki kimataifa kote katika Bootstrap. Ili kubadilisha kimataifa font-family, sasisha $font-family-basena uandae tena Bootstrap.

Vichwa na aya

Vipengele vyote vya mada-kwa mfano, <h1>-na <p>huwekwa upya ili margin-topkuondolewa. Vichwa margin-bottom: .5remvimeongezwa na aya margin-bottom: 1remkwa nafasi rahisi.

Kichwa	Mfano
`<h1></h1>`	h1. Kichwa cha bootstrap
`<h2></h2>`	h2. Kichwa cha bootstrap
`<h3></h3>`	h3. Kichwa cha bootstrap
`<h4></h4>`	h4. Kichwa cha bootstrap
`<h5></h5>`	h5. Kichwa cha bootstrap
`<h6></h6>`	h6. Kichwa cha bootstrap

Sheria za mlalo

Kipengele <hr>kimerahisishwa. Sawa na chaguo-msingi za kivinjari, <hr>s huwekwa mtindo kupitia border-top, kuwa na chaguo-msingi opacity: .25, na hurithi zao kiotomatiki border-colorkupitia color, ikiwa ni pamoja na wakati colorumewekwa kupitia mzazi. Zinaweza kurekebishwa kwa kutumia maandishi, mpaka, na huduma za kutoweka wazi.

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

Orodha

Orodha zote— <ul>, <ol>, na <dl>— margin-topzimeondolewa na a margin-bottom: 1rem. Orodha zilizoorodheshwa hazina margin-bottom. Pia tumeweka upya washa na padding-leftvipengele .<ul><ol>

Orodha zote zimeondolewa ukingo wao wa juu
Na kiasi chao cha chini kimerekebishwa
Orodha zilizoorodheshwa hazina ukingo wa chini
- Kwa njia hii wana mwonekano mzuri zaidi
- Hasa ikifuatiwa na vipengee zaidi vya orodha
Ukingo wa kushoto pia umewekwa upya

Hapa kuna orodha iliyoagizwa
Na vitu vichache vya orodha
Ina sura sawa ya jumla
Kama orodha ya hapo awali isiyopangwa

Kwa mtindo rahisi, daraja wazi, na nafasi bora zaidi, orodha za maelezo zimesasisha margins. <dd>s kuweka upya margin-leftkwa 0na kuongeza margin-bottom: .5rem. <dt>wana ujasiri .

Orodha za maelezo: Orodha ya maelezo ni kamili kwa kufafanua maneno.
Muda: Ufafanuzi wa neno.; Ufafanuzi wa pili wa neno moja.
Neno lingine: Ufafanuzi wa neno hili lingine.

Msimbo wa ndani

Funga vijisehemu vya ndani vya msimbo kwa <code>. Hakikisha umeepuka mabano ya pembe ya HTML.

Kwa mfano, <section>inapaswa kufungwa kama inline.

html

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

Vizuizi vya kanuni

Tumia <pre>s kwa mistari mingi ya msimbo. Kwa mara nyingine tena, hakikisha kuwa umeepuka mabano yoyote ya pembe katika msimbo kwa uwasilishaji unaofaa. Kipengele <pre>kimewekwa upya ili kuondoa margin-topna kutumia remvitengo vyake 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>

Vigezo

Kwa kuashiria vigezo tumia <var>lebo.

y = m x + b

html

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

Ingizo la mtumiaji

Tumia <kbd>ili kuashiria ingizo ambalo kwa kawaida huingizwa kupitia kibodi.

Ili kubadilisha saraka, chapa cdikifuatiwa na jina la saraka.
Ili kuhariri mipangilio, bonyeza 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>

Sampuli ya pato

Ili kuonyesha matokeo ya sampuli kutoka kwa programu tumia <samp>lebo.

Maandishi haya yanakusudiwa kuzingatiwa kama sampuli ya pato kutoka kwa programu ya kompyuta.

html

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

Majedwali

Majedwali yanarekebishwa kidogo kwa mtindo <caption>s, kukunja mipaka, na kuhakikisha uthabiti text-alignkote. Mabadiliko ya ziada ya mipaka, pedi, na zaidi huja na .tabledarasa .

Hili ni jedwali la mfano, na hili ni maelezo yake kuelezea yaliyomo.
Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali	Kichwa cha jedwali
Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli
Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli
Jedwali la seli	Jedwali la seli	Jedwali la seli	Jedwali la seli

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>

Fomu

Vipengele mbalimbali vya fomu vimewashwa upya kwa mitindo rahisi ya msingi. Hapa kuna baadhi ya mabadiliko muhimu zaidi:

<fieldset>s hazina mipaka, pedi, au ukingo ili ziweze kutumika kwa urahisi kama vifungashio vya pembejeo za kibinafsi au vikundi vya pembejeo.
<legend>s, kama seti za uwanja, pia zimebadilishwa ili kuonyeshwa kama kichwa cha aina.
<label>s zimewekwa display: inline-blockili kuruhusu marginkutumika.
<input>s, <select>s, <textarea>s, na <button>s hushughulikiwa zaidi na Normalize, lakini Reboot huondoa yao marginna seti line-height: inherit, pia.
<textarea>s zinarekebishwa ili ziweze kubadilishwa tena kwa wima kwani kubadilisha ukubwa kwa mlalo mara nyingi "huvunja" mpangilio wa ukurasa.
<button>s na <input>vitu vya kitufe vina cursor: pointerwakati :not(:disabled).

Mabadiliko haya, na zaidi, yanaonyeshwa hapa chini.

Mfano wa hadithi

Ingizo la mfano

Mfano barua pepe

Mfano simu

Mfano url

Nambari ya mfano

Utafutaji wa mfano

Mfano mbalimbali

Mfano wa kuingiza faili

Mfano chagua

Teua kisanduku hiki

Chaguo la kwanza ni hili na lile Chaguo la pili ni jambo lingine ambalo pia ni refu sana kuonyesha ufungaji wa vidhibiti hivi vya fomu dhahania. Chaguo la tatu limezimwa

Mfano eneo la maandishi

Tarehe ya mfano

Muda wa mfano

Nenosiri la mfano

Mfano tarehe-ndani

Mfano wiki

Mfano mwezi

Mfano rangi

Pato la mfano 100

Usaidizi wa kuweka tarehe na rangi

Kumbuka kwamba pembejeo za tarehe hazitumiki kikamilifu na vivinjari vyote, yaani Safari.

Viashiria kwenye vifungo

Kuwasha upya ni pamoja na uboreshaji role="button"wa kubadilisha kiteuzi chaguo-msingi kuwa pointer. Ongeza sifa hii kwa vipengele ili kusaidia kuashiria vipengele vinaingiliana. Jukumu hili si la lazima kwa <button>vipengele, ambavyo hupata cursormabadiliko yao wenyewe.

Kitufe cha kipengele kisicho na kifungo

html

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

Vipengele vingine

Anwani

Kipengele <address>kinasasishwa ili kuweka upya chaguomsingi ya kivinjari font-stylekutoka italichadi normal. line-heightpia sasa imerithiwa, na margin-bottom: 1remimeongezwa. <address>s ni za kuwasilisha taarifa za mawasiliano kwa babu wa karibu (au kikundi kizima cha kazi). Hifadhi umbizo kwa kumalizia mistari kwa <br>.

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

Jina Kamili
[email protected]

Nukuu ya kuzuia

Chaguo msingi marginkwenye blockquotes ni 1em 40px, kwa hivyo tunaiweka upya 0 0 1remkwa kitu kinacholingana zaidi na vipengele vingine.

Nukuu inayojulikana sana, iliyo katika kipengele cha kuzuia.

Mtu maarufu katika Mada ya Chanzo

Vipengele vya ndani

The<abbr> hupokea mtindo wa kimsingi ili kuifanya ionekane bora kati ya maandishi ya aya.

Kipengele cha ufupisho cha HTML .

Muhtasari

Chaguo-msingi cursorkwenye muhtasari ni text, kwa hivyo tunaiweka upya ili pointerkuonyesha kwamba kipengele kinaweza kuingiliana nacho kwa kubofya.

Baadhi ya maelezo

Maelezo zaidi kuhusu maelezo.

Hata maelezo zaidi

Hapa kuna maelezo zaidi kuhusu maelezo.

HTML5 `[hidden]`sifa

HTML5 inaongeza sifa mpya ya kimataifa inayoitwa[hidden] , ambayo imeundwa kama display: nonechaguo-msingi. Kukopa wazo kutoka kwa PureCSS , tunaboresha kwa chaguomsingi hili [hidden] { display: none !important; }kwa kusaidia kulizuia lisipate kubatilishwa displaykimakosa.

<input type="text" hidden>

kutopatana kwa jQuery

[hidden]haiendani na jQuery $(...).hide()na $(...).show()njia. Kwa hivyo, kwa sasa hatuidhinishi [hidden]juu ya mbinu zingine za kudhibiti displayvipengele.

Ili kugeuza tu mwonekano wa kipengele, kumaanisha displaykuwa hakijarekebishwa na kipengele bado kinaweza kuathiri mtiririko wa hati, tumia darasa .invisiblebadala yake.

Washa upya

Mbinu

Vigezo vya CSS

Mipangilio ya ukurasa

Rafu ya fonti asili

Vichwa na aya

Sheria za mlalo

Orodha

Msimbo wa ndani

Vizuizi vya kanuni

Vigezo

Ingizo la mtumiaji

Sampuli ya pato

Majedwali

Fomu

Usaidizi wa kuweka tarehe na rangi

Viashiria kwenye vifungo

Vipengele vingine

Anwani

Nukuu ya kuzuia

Vipengele vya ndani

Muhtasari

HTML5 [hidden]sifa

kutopatana kwa jQuery

HTML5 `[hidden]`sifa