in English

Reboot

Reboot, muunganidzwa wechinhu-chaiwo CSS shanduko mune imwe faira, kickstart Bootstrap kuti ipe inoyevedza, inowirirana, uye yakapusa baseline yekuvaka pamusoro.

Pa peji ino

Approach

Reboot inovaka pamusoro peNormalize, ichipa akawanda maHTML zvinhu zvine mamwe maitiro ekufungidzira uchishandisa chete element selectors. Kuwedzera styling kunoitwa chete nemakirasi. Semuyenzaniso, isu tinotangisa mamwe <table>masitayera kune yakapfava yekutanga uye gare gare tinopa .table, .table-bordered, nezvimwe.

Heano nhungamiro yedu uye zvikonzero zvekusarudza zvekupfuura muReboot:

Gadziridza dzimwe bhurawuza default tsika yekushandisa rems pane ems ye scalable component spacing.
Dzivisa margin-top. Vertical margins anogona kudhirika, zvichipa mhedzisiro isingatarisirwe. Zvinonyanya kukosha zvakadaro, nzira imwe chete marginyemuenzaniso wakapfava wepfungwa.
Kuti zvive nyore kuyera pamasaizi emudziyo, block element dzinofanira kushandisa rems ye margins.
Chengetedza zviziviso zve font-zvine hukama kune zvishoma, uchishandisa inheritpese pazvinogoneka.

CSS zvakasiyana

Yakawedzerwa mu v5.2.0

Ne v5.1.1, takaenzanisa mas edu anodiwa pamasumbu edu @importese eCSS (kusanganisira bootstrap.css, bootstrap-reboot.css, uye bootstrap-grid.css) kuti tibatanidze _root.scss. Izvi zvinowedzera :rootnhanho yeCSS inosiyana kune ese masumbu, zvisinei kuti mangani ayo anoshandiswa musumbu iro. Pakupedzisira Bootstrap 5 icharamba ichiona mamwe maCSS akasiyana akawedzerwa nekufamba kwenguva, kuitira kuti ipe yakawanda-chaiyo-nguva yekugadziridza pasina chikonzero chekugara uchidzorera Sass. Maitiro edu ndeekutora sosi yedu Sass madhiri uye nekuashandura kuita CSS zvinosiyana. Nenzira iyo, kunyangwe ukasashandisa CSS zvinosiyana, uchine simba rese reSass. Izvi zvichiri kuenderera mberi uye zvichatora nguva kuti zviitwe zvizere.

Semuenzaniso, funga aya :rootmaCSS akasiyana ezvitaera zvakajairika <body>:

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

Mukuita, izvo zvinosiyana zvinobva zvaiswa muReboot senge zvakadaro:

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
}

Izvo zvinokutendera iwe kuti uite chaiyo-nguva customizations zvisinei iwe unofarira:

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

Peji defaults

Izvo <html>uye <body>zvinhu zvinogadziridzwa kuti zvipe zvirinani peji-yakafara defaults. Zvakawanda chaizvo:

Iyo box-sizingyakaiswa pasi rose pazvinhu zvese-kusanganisira *::beforeuye *::after, ku border-box. Izvi zvinova nechokwadi chekuti hupamhi hwakaziviswa hwechinhu hahumbopfuuri nekuda kwepadding kana muganhu.
- Hapana hwaro font-sizehunoziviswa pane iyo <html>, asi 16pxinofungidzirwa (iyo browser default). font-size: 1reminoiswa pairi <body>nyore kupindura mhando-kuyera kuburikidza ne midhiya mibvunzo uchiremekedza zvido zvevashandisi uye nekuona nzira inowanikwa nyore. Iyi bhurawuza default inogona kuvharwa nekugadzirisa $font-size-rootshanduko.
Iyo <body>zvakare inoisa pasi rose font-family, font-weight, line-height, uye color. Izvi zvinogarwa nhaka gare gare nemamwe maitiro ekudzivirira kusawirirana kwefonti.
Nekuda kwekuchengetedza, iyo <body>ine yakaziviswa background-color, kusagadzika ku #fff.

Native font stack

Bootstrap inoshandisa "yekuzvarwa font stack" kana "system font stack" kune yakanyanya kunaka mameseji kupa pane yega mudziyo uye OS. Aya masisitimu mafonti akagadzirwa zvakanangana nemidziyo yemazuva ano mupfungwa, nekupa kwakagadziridzwa pamasikirini, tsigiro yefonti yakasiyana, nezvimwe. Verenga zvakawanda pamusoro pezvinyorwa zvemafonti echinyorwa chino cheSmashing 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;

Ziva kuti nekuti iyo font stack inosanganisira emoji mafonti, akawanda akajairika chiratidzo/dingbat Unicode mavara anozopihwa seane mavara epikicha. Chitarisiko chavo chichasiyana, zvichienderana nemaitiro anoshandiswa mubrowser/platform's native emoji font, uye ivo havazokanganiswe nechero CSS colormasitayipi.

Izvi font-familyzvinoiswa kune iyo <body>uye yakagara nhaka pasi rose muBootstrap yese. Kuchinja iyo yepasirese font-family, gadziridza $font-family-baseuye dzorera Bootstrap.

Misoro nendima

Zvese musoro zvinhu-eg, <h1>-uye <p>zvinoiswa patsva kuti margin-topzvibviswe. Misoro margin-bottom: .5remyakawedzera uye ndima margin-bottom: 1remkuti zvive nyore kuparadzanisa.

Heading	Muenzaniso
`<h1></h1>`	h1. Bootstrap musoro
`<h2></h2>`	h2. Bootstrap musoro
`<h3></h3>`	h3. Bootstrap musoro
`<h4></h4>`	h4. Bootstrap musoro
`<h5></h5>`	h5. Bootstrap musoro
`<h6></h6>`	h6. Bootstrap musoro

Horizontal mitemo

Chinhu <hr>chave nyore. Zvakafanana nebrowser defaults, <hr>s inogadzirwa kuburikidza border-top, ine default opacity: .25, uye inogadzika nhaka yavo border-colorkuburikidza ne color, kusanganisira kana coloryaiswa kuburikidza nemubereki. Ivo vanogona kugadziridzwa nemavara, muganhu, uye opacity utilities.

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

Lists

Mazita ese— <ul>, <ol>, uye <dl>— abviswa margin-topuye a margin-bottom: 1rem. Nested list hadzina margin-bottom. Isu takagadzirisa zvakare iyo padding-lefton <ul>uye <ol>maelementi.

Mazita ese ane mucheto wepamusoro abviswa
Uye yavo yepasi margin yakajairwa
Nested list haina mucheto wepasi
- Nenzira iyi vane chitarisiko chakanyanya
- Kunyanya kana ichiteverwa nezvimwe zvinyorwa zvinyorwa
Padding yekuruboshwe yakagadziridzwa zvakare

Heino rondedzero yakaodha
Nezvishoma zvinyorwa zvinyorwa
Iine chimiro chakafanana chese
Sezvakanyorwa kare zvisina kurongeka

Kuitira masitayipi akareruka, hurongwa hwakajeka, uye nzvimbo iri nani, rondedzero yerondedzero yakagadziridza margins. <dd>s reset margin-leftkune 0uye kuwedzera margin-bottom: .5rem. <dt>s vakashinga .

Tsanangudzo mazita: Rondedzero yerondedzero yakakwana pakutsanangura mazwi.
Term: Tsanangudzo yeshoko.; Tsanangudzo yechipiri yezwi rimwechetero.
Imwe temu: Tsanangudzo yerimwe izwi iri.

Inline code

Putira zvidimbu zvemukati zvekodhi ne <code>. Iva nechokwadi chekutiza HTML angle brackets.

Semuenzaniso, <section>inofanira kuputirwa se inline.

html

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

Code blocks

Shandisa <pre>s kune akawanda mitsara yekodhi. Zvekare, ita shuwa kutiza chero mabhuraketi emakona mune kodhi yekupihwa kwayo. Iyo <pre>element inoiswa patsva kuti ibvise margin-topuye ishandise remzvikamu zvayo 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>

Variables

Pakuratidza zvinoshanduka shandisa <var>tag.

y = m x + b

html

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

Kuiswa kwemushandisi

Shandisa iyo <kbd>kuratidza yekuisa iyo inowanzo pinda nekhibhodi.

Kuchinja madhairekitori, nyora cduchiteverwa nezita redhairekitori.
Kugadzirisa marongero, tinya 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>

Sample output

Kuti uratidze kuburitswa kwemuenzaniso kubva kuchirongwa shandisa iyo <samp>tag.

Ichi chinyorwa chinofanirwa kubatwa semuenzaniso wekubuda kubva kuchirongwa chekombuta.

html

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

Matafura

Matafura anogadziridzwa zvishoma kune chimiro <caption>s, kudonha miganhu, uye simbisa kuenderana text-alignmukati mese. Dzimwe shanduko dzemabhodha, padding , nezvimwe huya nekirasi ..table

Iyi tafura yemuenzaniso, uye iyi ndiyo rondedzero yayo yekutsanangura zviri mukati.
Musoro wetafura	Musoro wetafura	Musoro wetafura	Musoro wetafura
Tafura cell	Tafura cell	Tafura cell	Tafura cell
Tafura cell	Tafura cell	Tafura cell	Tafura cell
Tafura cell	Tafura cell	Tafura cell	Tafura 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>

Mafomu

Yakasiyana-siyana fomu zvinhu zvakadzoserwa kune akareruka base masitayipi. Hedzino dzimwe shanduko dzinonyanya kukosha:

<fieldset>s haina mabhodha, padding, kana margin saka inogona kushandiswa zviri nyore semapepa ega ega ega kana mapoka ezvekupinda.
<legend>s, senge fieldsets, yakagadziridzwa zvakare kuti iratidzwe semusoro wemhando.
<label>s dzakaiswa display: inline-blockkuti dzibvumire marginkushandiswa.
<input>s, <select>s, <textarea>s, uye <button>s zvinonyanya kutariswa neNormalize, asi Reboot inobvisa yavo marginuye seti line-height: inherit, zvakare.
<textarea>s anogadziridzwa kuti agone kudzoreredzwa chete wakatwasuka sekuchinjika saizi kazhinji "inotyora" dhizaini yemapeji.
<button>s uye <input>mabhatani zvinhu zvine cursor: pointerapo :not(:disabled).

Idzi shanduko, nezvimwe, zvinoratidzwa pazasi.

Muenzaniso ngano

Muenzaniso wekuisa

Muenzaniso email

Muenzaniso foni

Muenzaniso url

Muenzaniso nhamba

Muenzaniso kutsvaga

Muenzaniso range

Muenzaniso faira yekuisa

Muenzaniso sarudza

Tarisa bhokisi iri

Sarudzo yekutanga ndeichi neicho Sarudzo yechipiri chimwe chinhu zvakare chakareba kwazvo kuratidza kuputira kweaya fancy fomu kudzora. Sarudzo yechitatu yakadzimwa

Muenzaniso textarea

Muenzaniso date

Nguva yemuenzaniso

Muenzaniso password

Muenzaniso datetime-yenzvimbo

Muenzaniso vhiki

Mwedzi muenzaniso

Muenzaniso ruvara

Muenzaniso kubuda 100

Date & ruvara rwekuisa rutsigiro

Ramba uchifunga zvemazuva ano hazvitsigirwe zvizere nemabhurawuza ese, anoti Safari.

Zvinonongedzera pamabhatani

Reboot inosanganisira inonatsiridza role="button"yekushandura iyo default cursor kuita pointer. Wedzera hunhu uhu kuzvinhu kubatsira kuratidza kuti zvinhu zvinodyidzana. Basa iri harifanirwe kune <button>maelementi, ayo anowana cursorshanduko yawo.

Asisiri-bhatani element element

html

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

Misc elements

Kero

Iyo <address>element inogadziridzwa kuti igadzirise iyo browser default font-stylekubva italickune normal. line-heightyakagara nhaka, uye margin-bottom: 1remyawedzerwa. <address>s ndeyekupa ruzivo rwekusangana kumadzitateguru ari pedyo (kana boka rose rebasa). Chengetedza fomati nemitsara yekugumisa ne <br>.

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

Zita
Rakazara [email protected]

Blockquote

Iyo marginyekusarudzika pane blockquotes ndeye 1em 40px, saka isu tinogadzirisa izvo kune 0 0 1remchimwe chinhu chinopindirana nezvimwe zvinhu.

Chirevo chinozivikanwa, chiri mu blockquote element.

Mumwe ane mukurumbira muna Source Title

Inline zvinhu

Chinhu <abbr>chinogashira masitaera kuita kuti chibude pachena pakati pemavara endima.

Chinhu chechidimbu cheHTML .

Summary

Iyo yekusarudzika cursorpane pfupiso ndeye text, saka isu tinoisa patsva kuti pointerkuratidza kuti chinhu chinogona kufambiswa nacho nekudzvanya pachiri.

Mamwe mashoko

Ruzivo rwakawanda nezve ruzivo.

Zvimwe zvakawanda

Heano mamwe mamwe mashoko pamusoro pemashoko.

HTML5 `[hidden]`hunhu

HTML5 inowedzera hunhu hutsva hwepasi rose hunonzi[hidden] , iyo yakanyorwa seyakagadzika display: none. Kukwereta zano kubva kuPureCSS , tinovandudza pane iyi default nekugadzira [hidden] { display: none !important; }kubatsira kudzivirira kuti displayirege kuwanda netsaona.

<input type="text" hidden>

jQuery kusawirirana

[hidden]haienderane nejQuery's $(...).hide()uye $(...).show()nzira. Naizvozvo, isu hatisi kunyanya kutsigira [hidden]pamusoro pemamwe matekiniki ekugadzirisa displayzvinhu.

Kungochinja kuoneka kwechinhu, zvichireva kuti hachina kuchinjwa uye chinhu chinogona kuramba chichikanganisadisplay kuyerera kwegwaro, shandisa kirasi.invisible pachinzvimbo.

Reboot

Approach

CSS zvakasiyana

Peji defaults

Native font stack

Misoro nendima

Horizontal mitemo

Lists

Inline code

Code blocks

Variables

Kuiswa kwemushandisi

Sample output

Matafura

Mafomu

Date & ruvara rwekuisa rutsigiro

Zvinonongedzera pamabhatani

Misc elements

Kero

Blockquote

Inline zvinhu

Summary

HTML5 [hidden]hunhu

jQuery kusawirirana

HTML5 `[hidden]`hunhu