I-reboot nga i-reboot

Reboot, ti koleksion dagiti elemento-espesipiko a panagbalbaliw ti CSS iti maymaysa a papeles, kickstart ti Bootstrap tapno mangipaay ti elegante, agtultuloy, ken simple a batayan a linia a maibangon.

Iti daytoy a panid

Sungaden

Ti Reboot ket mangbangon iti Normalize, a mangipaay kadagiti adu nga elemento ti HTML nga addaan kadagiti medyo opinionado nga estilo nga agus-usar laeng kadagiti agpili ti elemento. Ti kanayonan nga estilo ket maaramid laeng kadagiti klase. Kas pagarigan, i-rebootmi ti sumagmamano <table>nga estilo para iti nasimsimple a batayan a linia ken kalpasanna mangipaay .tableti , .table-bordered, ken dadduma pay.

Adtoy dagiti pagannurotan ken rasonmi iti panangpili no ania ti i-override iti Reboot:

Ipabaro ti sumagmamano a default a pateg ti browser tapno agusar remti s imbes a ti ems para iti maipadakkel a panagsisina ti paset.
Liklikan margin-topti . Mabalin a marpuog dagiti bertikal a margin, a mangpataud kadagiti di ninamnama a resulta. Ngem napatpateg pay, ti maymaysa a direksion ti marginket nasimsimple a mental a modelo.
Para iti nalaklaka a panagsukog iti ballasiw dagiti kadakkel ti alikamen, dagiti elemento ti bloke ket rumbeng nga agusar remti s para iti margins.
Pagtalinaeden dagiti deklarasion dagiti font-mainaig a tagikua iti kabassitan, nga agusar inheritno mabalin.

Dagiti variable ti CSS

Nainayon iti v5.2.0

Babaen ti v5.1.1, instandardmi dagiti kasapulanmi nga @imports iti ballasiw dagiti amin a bundle ti CSSmi (a mairaman ti bootstrap.css, bootstrap-reboot.css, ken bootstrap-grid.css) tapno mairaman ti _root.scss. Daytoy ket manginayon kadagiti :rootlebel a variable ti CSS kadagiti amin a bundle, urayno mano kadagitoy ti maus-usar iti dayta a bundle. Iti kamaudiananna ti Bootstrap 5 ket agtultuloyto a makakita kadagiti ad-adu a CSS a variable a nainayon iti panaglabas ti panawen, tapno mangipaay ti ad-adu nga aktual nga oras a panagpasayaat nga awan ti kasapulan a kanayon a mangtipon manen ti Sass. Ti wagasmi ket alaen dagiti taudanmi a Sass a variable ken pagbalinen dagitoy kadagiti CSS a variable. Iti kasta, uray no dika agusar kadagiti CSS variable, adda latta amin a bileg ti Sass. Madama pay laeng daytoy ken kasapulan ti panawen tapno naan-anay a maipatungpal.

Kas pagarigan, ibilang dagitoy :roota variable ti CSS para kadagiti gagangay <body>nga estilo:

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

Iti praktis, dagidiay a variable ket kalpasanna maipakat iti Reboot a kas iti kasta:

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
}

A mangipalubos kenka nga agaramid kadagiti aktual nga oras a panagpasayaat nupay kasta ti kayatmo:

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

Dagiti default ti panid

Ti <html>ken <body>dagiti elemento ket na-update tapno mangipaay kadagiti nasaysayaat a panid-a-saknap a default. Ad-adda nga espesipiko:

Ti box-sizingket sangalubongan a naikeddeng iti tunggal maysa nga elemento—a mairaman ti *::beforeken *::after, iti border-box. Daytoy ket mangsigurado a ti naideklara a kalawa ti elemento ket saan a pulos a malabsan gapu ti padding wenno beddeng.
- Awan ti batayan font-sizea naideklara iti <html>, ngem 16pxnaipagarup (ti default ti browser). font-size: 1remket naipakat iti <body>para iti nalaka a makasungbat a type-scaling babaen dagiti panagsaludsod ti media bayat a mangraem kadagiti kaykayat ti agar-aramat ken mangipasigurado ti ad-adu a makastrek a pamay-an. Daytoy a default ti browser ket mabalin a mabaliwan babaen ti panangbalbaliw ti $font-size-rootvariable.
Ti <body>mangikeddeng pay ti sangalubongan a font-family, font-weight, line-height, ken color. Daytoy ket tawiden inton agangay babaen dagiti sumagmamano nga elemento ti porma tapno malapdan dagiti saan a panagtutunos ti letra.
Para iti kinatalged, ti <body>addaan iti naideklara background-color, a default iti #fff.

Katutubo nga stack ti letra

Ti Bootstrap ket agus-usar ti “native font stack” wenno “system font stack” para iti kasayaatan a panagiparang ti teksto iti tunggal alikamen ken OS. Dagitoy a sistema a letra ket nadisenio nga espesipiko a sipapanunot kadagiti alikamen ita, nga addaan iti napasayaat a panagiparang kadagiti iskrin, suporta ti variable a letra, ken dadduma pay. Basaen ti ad-adu pay maipapan kadagiti katutubo a font stack iti daytoy nga artikulo ti 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;

Imutektekanyo a gapu ta ti font stack ket mangiraman kadagiti emoji a letra, adu a gagangay a simbolo/dingbat a karakter ti Unicode ket maiparangto a kas dagiti adu ti kolorna a piktograpo. Agduduma ti langada, depende iti estilo a nausar iti katutubo nga emoji font ti browser/platform, ken saanda a maapektaran iti aniaman nga colorestilo ti CSS.

Daytoy font-familyket maipakat iti <body>ken automatiko a natawid iti sangalubongan iti intero a Bootstrap. Tapno agbaliw ti global font-family, i-update $font-family-baseken kompile manen ti Bootstrap.

Dagiti paulo ken parapo

Amin nga elemento ti paulo—kas pagarigan, <h1>—ken <p>mai-reset tapno margin-topmaikkat dagitoy. Nainayon dagiti paulo margin-bottom: .5remken parapo margin-bottom: 1rempara iti nalaka a panagsisina.

Paulo	Pagwadan
`<h1></h1>`	h1. Bootstrap nga paulo
`<h2></h2>`	h2. Bootstrap nga paulo
`<h3></h3>`	h3. Bootstrap nga paulo
`<h4></h4>`	h4. Bootstrap nga paulo
`<h5></h5>`	h5. Bootstrap nga paulo
`<h6></h6>`	h6. Bootstrap nga paulo

Paisaad dagiti pagannurotan

Napasimple ti <hr>elemento. Kasla dagiti default ti browser, <hr>dagiti s ket naistilo babaen ti border-top, addaan iti default opacity: .25, ken automatiko a tawidenda ti border-colorvia -da color, a mairaman no kaano colora naikeddeng babaen ti nagannak. Mabalin a baliwan dagitoy babaen dagiti teksto, beddeng, ken dagiti utilidad ti opacity.

html nga

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

Dagiti Listaan

Amin a listaan— <ul>, <ol>, ken <dl>—ket addaan iti margin-topnaikkat ken a margin-bottom: 1rem. Dagiti naisanglad a listaan ket awan ti margin-bottom. Na-reset mi met ti padding-lefton <ul>ken <ol>elements.

Amin a listaan ket naikkat ti kangatuan a margin-da
Ket nagnormal ti bottom margin-da
Dagiti naisanglad a listaan ket awan ti baba a margin
- Iti kasta ad-adda a naurnos ti langada
- Nangnangruna no sarunuen ti ad-adu pay a banag iti listaan
Na-reset metten ti kannigid a padding

Ania ti naurnos a listaan
Buyogen ti sumagmamano a banag iti listaan
Kasta met laeng ti pakabuklan a langana
Kas iti napalabas a di naurnos a listaan

Para iti nasimsimple nga estilo, nalawag a hirarkia, ken nasaysayaat nga espasyo, dagiti listaan ti panangiladawan ket addaan kadagiti napabaro nga margins. s i - <dd>reset ken inayon ti . s ti nalukmeg .margin-left0margin-bottom: .5rem<dt>

Dagiti listaan ti panangiladawan: Ti listaan ti panangiladawan ket perpekto para iti panangdepinar kadagiti termino.
Termino: Depinasion para iti termino.; Maikadua a depinasion para iti isu met laeng a termino.
Sabali pay a termino: Depinasion para iti daytoy sabali a termino.

Inline nga kodigo

Balkoten dagiti inline a snippet ti kodigo babaen ti <code>. Siguraduen a makalisi kadagiti HTML angle bracket.

Kas pagarigan, <section>rumbeng a mabalkot kas inline.

html nga

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

Dagiti bloke ti kodigo

Usaren <pre>ti s para kadagiti adu a linia ti kodigo. Maminsan manen, siguraduenyo a liklikan ti aniaman a bracket ti anggulo iti kodigo para iti umno a panagiparang. Ti <pre>elemento ket mai-reset tapno maikkat ti daytoy margin-topken agusar kadagiti remyunit para iti margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html nga

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

Dagiti Variable

Para iti panangipamatmat kadagiti variable usaren ti <var>tag.

y = m x + b nga

html nga

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

Input ti agar-aramat

Usaren ti <kbd>tapno mangipakita ti input a gagangay a maiserrek babaen ti teklado.

Tapno agbaliw dagiti direktorio, i-type a cdsarunuen ti nagan ti direktorio.
Tapno ma-edit dagiti setting, i-press ctrl + ,

html nga

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 nga output

Para iti panangipamatmat ti sample output manipud iti maysa a programa usaren ti <samp>tag.

Daytoy a teksto ket nairanta a matrato a kas pagarigan a rimmuar manipud iti programa ti kompiuter.

html nga

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

Dagiti Lamisaan

Dagiti lamisaan ket nabaliwan bassit kadagiti estilo <caption>s, dagiti beddeng a mangrakrak, ken mangsigurado a maitunos text-aligniti intero. Dagiti kanayonan a panagbalbaliw para kadagiti beddeng, padding, ken dadduma pay ket umay a kadua ti .tableklase .

Daytoy ket maysa a pagarigan a lamisaan, ken daytoy ti kapsionna a mangiladawan kadagiti linaonna.
Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan	Paulo ti lamisaan
Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan
Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan	Selula ti lamisaan

html nga

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

Dagiti Pormas

Dagiti nadumaduma nga elemento ti porma ket nairugi manen para kadagiti nasimsimple nga estilo ti batayan. Adtoy ti sumagmamano kadagiti nakadkadlaw unay a panagbalbaliw:

<fieldset>s ket awan dagiti beddeng, padding, wenno margin isu a nalaka nga usaren dagitoy a kas dagiti balkot para kadagiti indibidual nga input wenno dagiti grupo dagiti input.
<legend>s, a kas dagiti fieldset, ket naestilo manen tapno maiparang a kas ti paulo dagiti kita.
<label>s ket naikabil iti display: inline-blocktapno mangipalubos margina mayaplikar.
<input>s, <select>s, <textarea>s, ken <button>s ket kaaduan a naaddress babaen ti Normalize, ngem ti Reboot ket ikkatenna ti marginken mangikeddengda line-height: inherit, met.
<textarea>s ket mabaliwan tapno laeng mabaliwan ti kadakkel a bertikal a kas ti horisontal a panagbalbaliw ti kadakkel ket masansan a "mangburak" ti layout ti panid.
<button>s ken dagiti <input>elemento ti buton ket addaan cursor: pointerno :not(:disabled).

Dagitoy a panagbalbaliw, ken dadduma pay, ket naipakita iti baba.

Pagarigan ti sarsarita

Pagarigan ti input

Pagarigan ti email

Pagarigan ti telepono

Pagarigan ti url

Pagarigan a numero

Pagarigan ti panagsapul

Pagarigan ti sakop

Pagarigan ti panagserrek ti file

Pagarigan ti pilien

I-check daytoy a kahon ti tsek

Ti umuna a pagpilian ket daytoy ken dayta Ti pagpilian dua ket sabali pay a banag a super long met tapno maipakita ti pannakabalkot dagitoy a magarbo a porma a kontrol. Nabaldado ti pagpilian a maikatlo

Pagarigan ti textarea

Pagarigan ti petsa

Pagarigan ti panawen

Pagarigan ti password

Pagarigan ti petsaoras-lokal

Pagarigan ti lawas

Pagarigan ti bulan

Pagarigan ti kolor

Pagarigan ti rimmuar 100 nga

Suporta ti input ti petsa & kolor

Laglagipem a dagiti input ti petsa ket saan a naan-anay a suportado babaen dagiti amin a browser, nga isu ti Safari.

Dagiti puntos kadagiti buton

Ti Reboot ket mangiraman ti panagpasayaat para iti role="button"tapno baliwan ti default a kursor iti pointer. Inayon daytoy a kababalin kadagiti elemento tapno makatulong a mangipakita a dagiti elemento ket interaktibo. Daytoy nga akem ket saan a kasapulan para kadagiti <button>elemento, a makagun-od ti bukodda a cursorpanagbalbaliw.

Buton ti elemento a saan a buton

html nga

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

Misc nga elemento

Pagtataengan

Ti <address>elemento ket na-update tapno mai-reset ti default ti browser font-stylemanipud italiciti normal. line-heightket natawid met itan, ken margin-bottom: 1remnainayon. <address>s ket para iti panangidatag ti impormasion ti pannakiuman para iti kaasitgan nga inapo (wenno ti intero a bagi ti trabaho). Ipreserba ti panagpormat babaen ti panagpatingga kadagiti linia babaen ti <br>.

Twitter, Inc.
1355 Merkado St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Ti panagadal ti panagbiag ti tao

Buo a Nagan
[email protected]

I-block ti sitas

Ti default marginkadagiti blockquotes ket 1em 40px, isu nga i-resetmi dayta iti 0 0 1rempara iti maysa a banag nga ad-adda a maitunos kadagiti dadduma nga elemento.

Maysa a nalatak a sitas, a linaon ti elemento ti blockquote.

Maysa a nalatak iti Source Title

Inline nga elemento

Ti <abbr>elemento ket umawat ti batayan nga estilo tapno agbalin a naisangsangayan kadagiti teksto ti parapo.

Ti elemento ti pannakapaababa ti HTML .

Dagup

Ti default cursoriti pakagupgopan ket text, isu nga i-resetmi dayta iti pointertapno maipakaammo a ti elemento ket mabalin a makilangen babaen ti panangi-klik iti daytoy.

Sumagmamano a detalye

Ad-adu pay nga info maipapan kadagiti detalye.

Ad-adu pay a detalye

Adtoy ti ad-adu pay a detalye maipapan kadagiti detalye.

HTML5 `[hidden]`nga attribute

Ti HTML5 ket manginayon ti baro a sangalubongan a kababalin a napanaganan iti[hidden] , a naistilo a kas display: nonebabaen ti kasisigud. Ti panagbulod ti maysa nga ideya manipud iti PureCSS , pasayaatenmi daytoy a default babaen ti panagaramid [hidden] { display: none !important; }tapno makatulong a manglapped ti daytoy displaymanipud iti aksidente a pannakabalbaliw.

<input type="text" hidden>

jQuery nga di panagtunos

[hidden]saan a maibagay kadagiti jQuery's $(...).hide()ken dagiti $(...).show()pamay-an. Gapuna, saanmi nga agdama a nangruna nga i-endorso [hidden]ngem dagiti dadduma a teknik para iti panangtarawidwid ti displaydagiti elemento.

Tapno laeng mai-toggle ti pannakakita ti maysa nga elemento, a ti kayatna a sawen displayket saan a nabaliwan ti elementona ken ti elemento ket mabalin pay laeng nga apektaranna ti panagayus ti dokumento, usarem ketdi ti .invisibleklase .

I-reboot nga i-reboot

Sungaden

Dagiti variable ti CSS

Dagiti default ti panid

Katutubo nga stack ti letra

Dagiti paulo ken parapo

Paisaad dagiti pagannurotan

Dagiti Listaan

Inline nga kodigo

Dagiti bloke ti kodigo

Dagiti Variable

Input ti agar-aramat

Sample nga output

Dagiti Lamisaan

Dagiti Pormas

Suporta ti input ti petsa & kolor

Dagiti puntos kadagiti buton

Misc nga elemento

Pagtataengan

I-block ti sitas

Inline nga elemento

Dagup

HTML5 [hidden]nga attribute

jQuery nga di panagtunos

HTML5 `[hidden]`nga attribute