in English

Rekomencu

Reboot, kolekto de elementoj-specifaj CSS-ŝanĝoj en ununura dosiero, ekfunkciigas Bootstrap por provizi elegantan, konsekvencan kaj simplan bazlinion por konstrui.

Sur ĉi tiu paĝo

Alproksimiĝo

Reboot konstruas sur Normaligi, provizante multajn HTML-elementojn per iom opiniemaj stiloj uzante nur elemento-elektilojn. Kroma stilo estas farita nur kun klasoj. Ekzemple, ni rekomencas iujn <table>stilojn por pli simpla bazlinio kaj poste provizas .table, .table-bordered, kaj pli.

Jen niaj gvidlinioj kaj kialoj por elekti kion anstataŭi en Reboot:

Ĝisdatigu iujn defaŭltajn valorojn de retumilo por uzi rems anstataŭ ems por skalebla komponentinterspaco.
Evitu margin-top. Vertikalaj randoj povas kolapsi, donante neatenditajn rezultojn. Pli grave tamen, ununura direkto de marginestas pli simpla mensa modelo.
Por pli facila skalo trans aparatoj, blokelementoj devus uzi rems por margins.
Tenu deklarojn de font-rilataj propraĵoj al minimumo, uzante inheritkiam ajn eblas.

CSS-variabloj

Aldonita en v5.2.0

Kun v5.1.1, ni normigis niajn postulatajn @imports tra ĉiuj niaj CSS-pakaĵoj (inkluzive bootstrap.cssde , bootstrap-reboot.csskaj bootstrap-grid.css) por inkludi _root.scss. Ĉi tio aldonas :rootnivelajn CSS-variablojn al ĉiuj pakaĵoj, sendepende de kiom da ili estas uzataj en tiu pakaĵo. Finfine Bootstrap 5 daŭre vidos pli da CSS-variabloj aldonitaj laŭlonge de la tempo, por provizi pli realtempan personigon sen la bezono ĉiam rekompili Sass. Nia aliro estas preni niajn fontajn Sass-variablojn kaj transformi ilin en CSS-variablojn. Tiel, eĉ se vi ne uzas CSS-variablojn, vi ankoraŭ havas la tutan potencon de Sass. Ĉi tio ankoraŭ estas en progreso kaj bezonos tempon por plene efektivigi.

Ekzemple, konsideru ĉi tiujn :rootCSS-variablojn por oftaj <body>stiloj:

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

En praktiko, tiuj variabloj tiam estas aplikataj en Reboot tiel:

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
}

Kiu ebligas al vi fari realtempajn personigojn kiel vi volas:

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

Paĝaj defaŭltoj

La <html>kaj <body>elementoj estas ĝisdatigitaj por provizi pli bonajn paĝ-defaŭltojn. Pli specife:

La box-sizingestas tutmonde agordita sur ĉiu elemento—inkluzive *::beforekaj *::after, al border-box. Ĉi tio certigas, ke la deklarita larĝo de elemento neniam estas superita pro remburaĵo aŭ limo.
- Neniu bazo font-sizeestas deklarita sur la <html>, sed 16pxestas supozita (la retumilo defaŭlta). font-size: 1remestas aplikata sur la <body>por facila respondema tipo-skalo per amaskomunikilaraj demandoj dum respekto de uzantpreferoj kaj certigante pli alireblan aliron. Ĉi tiu retumilo defaŭlta povas esti anstataŭita modifante la $font-size-rootvariablon.
La <body>ankaŭ metas tutmondan font-family, font-weight, line-height, kaj color. Ĉi tio estas poste heredita de kelkaj formalementoj por malhelpi tiparkongruojn.
Por sekureco, la <body>havas deklaritan background-color, defaŭlte al #fff.

Denaska tiparo stako

Bootstrap utiligas "denaskan tiparan stakon" aŭ "sisteman tiparan stakon" por optimuma teksta bildigo en ĉiu aparato kaj OS. Ĉi tiuj sistemaj tiparoj estis desegnitaj specife kun la hodiaŭaj aparatoj en menso, kun plibonigita bildigo sur ekranoj, varia tiparsubteno, kaj pli. Legu pli pri denaskaj tiparaj stakoj en ĉi tiu artikolo de 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;

Notu, ke ĉar la tiparstako inkluzivas emoji-tiparojn, multaj komunaj simboloj/dingbat Unikodaj signoj estos bilditaj kiel multkoloraj piktogramoj. Ilia aspekto varias, depende de la stilo uzata en la denaska emoji-tiparo de la retumilo/platformo, kaj ili ne estos tuŝitaj de iuj CSS- colorstiloj.

Ĉi tio font-familyestas aplikata al la <body>kaj aŭtomate heredita tutmonde tra Bootstrap. Por ŝanĝi la tutmondan font-family, ĝisdatigu $font-family-basekaj rekompilu Bootstrap.

Titoloj kaj alineoj

Ĉiuj titolo-elementoj—ekz, <h1>—kaj <p>estas rekomencigitaj por esti margin-topforigitaj. Aldonitaj titoloj margin-bottom: .5remkaj alineoj margin-bottom: 1rempor facila interspaco.

Titolo	Ekzemplo
`<h1></h1>`	h1. Bootstrap-titolo
`<h2></h2>`	h2. Bootstrap-titolo
`<h3></h3>`	h3. Bootstrap-titolo
`<h4></h4>`	h4. Bootstrap-titolo
`<h5></h5>`	h5. Bootstrap-titolo
`<h6></h6>`	h6. Bootstrap-titolo

Horizontalaj reguloj

La <hr>elemento estis simpligita. Simile al retumiloj defaŭltaj, <hr>s estas stilitaj per border-top, havas defaŭltan opacity: .25, kaj aŭtomate heredas sian border-colortra color, inkluzive kiam colorestas agordita per la gepatro. Ili povas esti modifitaj per teksto, bordo kaj opakec-utiloj.

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

Listoj

Ĉiuj listoj— <ul>, <ol>, kaj <dl>— havas siajn margin-topforigitajn kaj margin-bottom: 1rem. Nestitaj listoj ne havas margin-bottom. Ni ankaŭ restarigis la padding-lefton <ul>kaj <ol>elementoj.

Ĉiuj listoj havas sian supran marĝenon forigita
Kaj ilia malsupra marĝeno normaliĝis
Nestitaj listoj ne havas malsupran marĝenon
- Tiel ili havas pli egalan aspekton
- Precipe kiam sekvas pli da listeroj
La maldekstra kompletigo ankaŭ estis rekomencigita

Jen ordigita listo
Kun kelkaj listeroj
Ĝi havas la saman ĝeneralan aspekton
Kiel la antaŭa neordigita listo

Por pli simpla stilado, klara hierarkio kaj pli bona interspaco, priskriblistoj ĝisdatigis margins. <dd>s restarigi margin-leftal 0kaj aldoni margin-bottom: .5rem. <dt>s estas grasigitaj .

Priskribolistoj: Priskriba listo estas perfekta por difini terminojn.
Terminon: Difino por la termino.; Dua difino por la sama termino.
Alia termino: Difino por ĉi tiu alia termino.

Enlinia kodo

Envolvu enliniajn fragmentojn de kodo per <code>. Nepre eskapu HTML-angulajn krampojn.

Ekzemple, <section>devus esti envolvita kiel enlinia.

html

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

Kodblokoj

Uzu <pre>s por pluraj linioj de kodo. Denove, nepre eskapi iujn ajn angulajn krampojn en la kodo por taŭga bildigo. La <pre>elemento estas rekomencigita por forigi sian margin-topkaj uzi remunuojn por sia 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>

Variabloj

Por indiki variablojn uzu la <var>etikedon.

y = m x + b

html

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

Enigo de la uzanto

Uzu la <kbd>por indiki enigon kiu estas kutime enigita per klavaro.

Por ŝanĝi dosierujojn, tajpu cdsekvate de la nomo de la dosierujo.
Por redakti agordojn, premu 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>

Specimena eligo

Por indiki specimenan eligon de programo uzu la <samp>etikedon.

Ĉi tiu teksto estas traktata kiel specimena eligo de komputila programo.

html

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

Tabeloj

Tabeloj estas iomete ĝustigitaj al stiloj <caption>, kolapsas randojn kaj certigas konsekvencan text-alignĉie. Pliaj ŝanĝoj por randoj, kompletigo kaj pli venas kun la .tableklaso .

Ĉi tio estas ekzemplotabelo, kaj ĉi tiu estas ĝia bildoteksto por priskribi la enhavon.
Tabelo titolo	Tabelo titolo	Tabelo titolo	Tabelo titolo
Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo
Tabelĉelo	Tabelĉelo	Tabelĉelo	Tabelĉelo

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>

Formoj

Diversaj formalementoj estis rekomencitaj por pli simplaj bazstiloj. Jen kelkaj el la plej rimarkindaj ŝanĝoj:

<fieldset>s havas neniujn randojn, remburaĵon aŭ marĝenon, do ili povas esti facile uzataj kiel envolvaĵoj por individuaj enigaĵoj aŭ grupoj de enigaĵoj.
<legend>s, kiel kamparo, ankaŭ estis restiligitaj por esti montrataj kiel speco de titolo.
<label>s estas agordita al display: inline-blockpor permesi marginesti aplikata.
<input>s, <select>s, <textarea>s, kaj <button>s estas plejparte traktitaj de Normalize, sed Reboot forigas iliajn marginkaj arojn line-height: inherit, ankaŭ.
<textarea>s estas modifitaj nur por esti regrandigeblaj vertikale ĉar horizontala regrandigo ofte "rompas" paĝan aranĝon.
<button>s kaj <input>butonelementoj havas cursor: pointerkiam :not(:disabled).

Ĉi tiuj ŝanĝoj, kaj pli, estas pruvitaj sube.

Ekzempla legendo

Ekzempla enigo

Ekzemplo retpoŝto

Ekzemplo telefono

Ekzempla url

Ekzempla nombro

Ekzempla serĉo

Ekzempla gamo

Ekzempla enigo de dosiero

Ekzemplo elektu

Marku ĉi tiun markobutonon

Opcio unu estas ĉi tio kaj tio Opcio du estas io alia, kiu ankaŭ estas tre longa por pruvi la envolvadon de ĉi tiuj elegantaj formularaj kontroloj. Opcio tri estas malŝaltita

Ekzemplo tekstareo

Ekzempla dato

Ekzempla tempo

Ekzempla pasvorto

Ekzemplo datetime-loka

Ekzemplo semajno

Ekzemplo monato

Ekzempla koloro

Ekzempla eligo 100

Dato kaj kolora eniga subteno

Memoru, ke dataj enigaĵoj ne estas plene subtenataj de ĉiuj retumiloj, nome de Safaro.

Montriloj sur butonoj

Reboot inkluzivas plibonigon por role="button"ŝanĝi la defaŭltan kursoron al pointer. Aldonu ĉi tiun atributon al elementoj por helpi indiki ke elementoj estas interagaj. Ĉi tiu rolo ne estas necesa por <button>elementoj, kiuj ricevas sian propran cursorŝanĝon.

Ne-butono-elementa butono

html

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

Diversaj elementoj

Adreso

La <address>elemento estas ĝisdatigita por restarigi la defaŭltan retumilon font-stylede italical normal. line-heightestas ankaŭ nun heredita, kaj margin-bottom: 1remestis aldonita. <address>s estas por prezenti kontaktinformojn por la plej proksima prapatro (aŭ tuta laboro). Konservu formatadon finante liniojn per <br>.

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

Plena Nomo
[email protected]

Blokcitaĵo

La defaŭlta marginĉe blokquotetoj estas 1em 40px, do ni rekomencigas tion 0 0 1rempor io pli konsekvenca kun aliaj elementoj.

Bonkonata citaĵo, enhavita en blokcita elemento.

Iu fama en Fonta Titolo

Enliniaj elementoj

La <abbr>elemento ricevas bazan stilon por igi ĝin elstari inter alinea teksto.

La HTML -mallongiga elemento.

Resumo

La defaŭlta cursorresumo estas text, do ni rekomencigas tion pointerpor transdoni, ke la elemento povas esti interagata alklakante ĝin.

Kelkaj detaloj

Pli da informoj pri la detaloj.

Eĉ pli da detaloj

Jen eĉ pli da detaloj pri la detaloj.

HTML5- `[hidden]`atributo

HTML5 aldonas novan tutmondan atributon nomitan[hidden] , kiu estas stilita display: nonedefaŭlte. Pruntante ideon de PureCSS , ni plibonigas ĉi tiun defaŭlton per [hidden] { display: none !important; }helpi malhelpi ĝin displayakcidente anstataŭi.

<input type="text" hidden>

jQuery nekongruo

[hidden]ne kongruas kun jQuery $(...).hide()kaj $(...).show()metodoj. Tial ni nuntempe ne speciale aprobas [hidden]aliajn teknikojn por administri la displayelementojn.

Por simple ŝanĝi la videblecon de elemento, tio signifas, ke displayĝi ne estas modifita kaj la elemento ankoraŭ povas influi la fluon de la dokumento, uzu la .invisibleklason anstataŭe.

Rekomencu

Alproksimiĝo

CSS-variabloj

Paĝaj defaŭltoj

Denaska tiparo stako

Titoloj kaj alineoj

Horizontalaj reguloj

Listoj

Enlinia kodo

Kodblokoj

Variabloj

Enigo de la uzanto

Specimena eligo

Tabeloj

Formoj

Dato kaj kolora eniga subteno

Montriloj sur butonoj

Diversaj elementoj

Adreso

Blokcitaĵo

Enliniaj elementoj

Resumo

HTML5- [hidden]atributo

jQuery nekongruo

HTML5- `[hidden]`atributo