Bobandi lisusu

Reboot, lisanga ya mbongwana ya CSS oyo etali élément spécifique na fichier moko, kickstart Bootstrap mpo na kopesa baseline ya elegan, ya boyokani, mpe ya pete mpo na kotonga likolo na yango.

Na lokasa oyo

Kopusana

Reboot etongami likolo ya Normalize, kopesaka ba éléments HTML ebele na ba styles ya mwa opinion na kosalelaka kaka ba sélecteurs ya éléments. Styling supplémentaire esalemaka kaka na ba classes. Ndakisa, tozongisaka ba <table>styles mosusu mpo na baseline ya pete mpe sima topesaka .table, .table-bordered, mpe mingi mosusu.

Tala malako na biso mpe bantina ya kopona nini ya koboya na Reboot:

Bobongisi mwa ba valeurs par défaut ya navigateur mpo na kosalela rems na esika ya ems mpo na espacement ya composant évolutif.
Bokima margin-top. Ba marges verticales ekoki ko collapser, kopesa ba résultats oyo okanisaki te. Kasi, likambo ya ntina mingi koleka, direction moko ya marginezali modèle mental ya pete koleka.
Mpo na kosala échelle ya pete na kati ya bonene ya dispositif, ba éléments ya bloc esengeli kosalela rems mpo na margins.
Bomba ba déclarations ya fontba propriétés oyo etali -na minimum, kosalela inheritsoki likoki ezali.

Ba variables ya CSS

Ebakisami na v5.2.0

Na v5.1.1, to standardisé @imports na biso oyo esengeli na kati ya ba paquets na biso nionso ya CSS (y compris bootstrap.css, bootstrap-reboot.css, na bootstrap-grid.css) pona ko inclure _root.scss. Yango ebakisi :rootba variables ya CSS ya niveau na ba paquets nionso, sans considération ya combien na yango esalelami na bundle wana. Na suka Bootstrap 5 ekolanda komona ba variables CSS mingi oyo ebakisami na tango, na tina ya kopesa personnalisation mingi na temps réel sans besoin ya ko recompiler toujours Sass. Approche na biso ezali ya kozua ba variables na biso ya Sass source pe ko transformer yango na ba variables CSS. Na ndenge wana, ata osaleli ba variables ya CSS te, ozali kaka na puissance nionso ya Sass. Yango ezali naino kosalama mpe ekozwa ntango mpo na kosalela yango mobimba.

Ndakisa, tala ba :rootvariables oyo ya CSS pona ba <body>styles communs:

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

Na pratique, ba variables wana ezo appliqué sima na Reboot lokola boye:

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
}

Oyo epesaka yo nzela ya kosala ba personnalisations en temps réel ndenge nini olingi:

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

Ba défauts ya lokasa

Ba elements <html>mpe <body>ezongisami na mikolo mpo na kopesa ba défauts ya malamu koleka na lokasa mobimba. Na bosikisiki mingi:

The box-sizingezali na mokili mobimba oyo etyami likoló na eloko nyonso —bakisa mpe *::beforempe *::after, na border-box. Yango esalaka ete bonene ya élément oyo esakolami eleka jamais mpo na remplissage to ndelo.
- Base font-sizemoko te esakolami na <html>, kasi 16pxekanisami (ya navigateur par défaut). font-size: 1remezali kosalelama na <body>mpo na kopesa eyano ya pete ya lolenge-échelle na nzela ya mituna ya media tout en respectant ba préférences ya basaleli mpe ko assurer approche moko ya accessible mingi. Défaut oyo ya navigateur ekoki kozala overridé na ko modifier $font-size-rootvariable.
The <body>mpe etie un global font-family, font-weight, line-height, mpe color. Yango ezwamaka na sima na ba éléments ya formulaire mosusu mpo na kopekisa inconsistance ya fonte.
Mpo na bokengi, the <body>azali na esakolaki background-color, kozanga kokokisa na #fff.

Stack ya ba fonts native

Bootstrap esalelaka “stack ya bafonte native” to “stack ya bafonte ya système” mpo na kosala makomi malamu na aparɛyi nyonso mpe na OS. Bafonte wana ya système esalemi mpenzampenza na makanisi ya baaparɛyi ya lelo, na kobongisama ya kobongola na ba écrans, lisungi ya bafonte oyo ekoki kobongwana, mpe makambo mosusu. Tanga mingi na ntina ya ba stacks ya ba fonts natifs na article oyo ya 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;

Yeba ete lokola ebele ya bafonte ezali na bafonte ya emoji, bilembo mingi ya Unicode ya elembo/dingbat oyo emonanaka mingi ekosalama lokola ba pictographes ya langi mingi. Emonani na bango ekokesana, engebene lolenge oyo basaleli na fonte ya emoji natif ya navigateur/plateforme, mpe bakozala na bopusi te na lolenge moko ya CSS color.

Yango font-familyesalelami na <body>mpe ezwamaka na ndenge ya automatique na mokili mobimba na kati ya Bootstrap mobimba. Pona ko changer global font-family, mise à jour $font-family-basepe recompiler Bootstrap.

Mitó ya makambo mpe baparagrafe

Ba éléments nionso ya motó ya likambo —ndakisa, <h1>—mpe <p>ezongisami na esika na yango mpo na margin-topkolongola yango. Mitó ya makambo margin-bottom: .5remebakisami mpe baparagrafe margin-bottom: 1remmpo na kotya esika oyo ezali pɛtɛɛ.

Motó ya likambo	Ndakisa
`<h1></h1>`	h1. Motó ya likambo ya bootstrap
`<h2></h2>`	h2. Motó ya likambo ya bootstrap
`<h3></h3>`	h3. Motó ya likambo ya bootstrap
`<h4></h4>`	h4. Motó ya likambo ya bootstrap
`<h5></h5>`	h5. Motó ya likambo ya bootstrap
`<h6></h6>`	h6. Motó ya likambo ya bootstrap

Mibeko ya horizontal

Elemento <hr>yango esili ko simplifié. Ndenge moko na ba défauts ya navigateur, <hr>s ezali na style via border-top, ezali na défaut opacity: .25, mpe e hériter automatiquement border-colorvia na bango color, y compris tango coloretiamaki na nzela ya moboti. Bakoki kobongisa yango na ba utilitaires ya texte, border, mpe opacité.

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

Ba liste

Ba liste nyonso— <ul>, <ol>, mpe <dl>—ezali na yango oyo margin-topelongolami mpe a margin-bottom: 1rem. Ba liste oyo ekangami ezali na margin-bottom. To réinitialiser pe ba éléments ya padding-lefton na.<ul><ol>

Ba liste nionso ezali na marge na yango ya likolo oyo elongolami
Et marge inférieure na bango e normaliser
Ba liste oyo ekangami ezali na marge ya nse te
- Na ndenge wana bazalaka na apparence moko plus égale
- Mingimingi ntango elandi na makambo mingi ya liste
Padding ya gauche pe ezo réinitialiser

Tala liste oyo esalemi na ordre
Na mwa biloko ya liste
Ezali na lolenge moko ya kotala na mobimba na yango
Lokola liste ya kala oyo ezalaki na ordre te

Mpo na kosala styling ya pete, hiérarchie ya polele, mpe esika ya malamu koleka, baliste ya bandimbola ezali na margins ya sika. <dd>s kozongisa margin-leftna esika 0mpe kobakisa margin-bottom: .5rem. <dt>s ezali na makomi ya moindo makasi .

Ba liste ya bandimbola: Liste ya kolimbola ezali malamu mpenza mpo na kolimbola maloba.
Liloba: Ndimbola mpo na liloba yango.; Ndimbola ya mibale mpo na liloba yango moko.
Liloba mosusu: Ndimbola mpo na liloba oyo mosusu.

Code ya kati ya ligne

Envelopper ba fragments ya code inline na <code>. Sala makasi okima ba parenthèses ya angle HTML.

Na ndakisa, <section>esengeli kozingama lokola inline.

html

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

Ba blocs ya code

Salelá <pre>s mpo na milɔngɔ mingi ya code. Encore une fois, sala makasi okima ba parenthèses nionso ya angle na code pona rendu malamu. Elemento <pre>ezo réinitialiser pona kolongola na yango margin-toppe kosalela remba unité pona na yango 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>

Ba variables oyo ezali

Mpo na kolakisa ba variables salela <var>tag.

y = m x + b

html

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

Entrée ya mosaleli

Salelá <kbd>mpo na komonisa bokɔti oyo mbala mingi bakɔtaka na nzela ya klaviatware.

Mpo na kobongola ba répertoires, koma cdna nsima nkombo ya répertoire.
Mpo na kobongisa ba paramètres, finá 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>

Exemple ya sortie

Mpo na kolakisa sortie ya échantillon oyo euti na programme moko salela <samp>tag.

Mokanda oyo ezali mpo na kotalela yango lokola ndakisa oyo euti na programɛ moko ya ordinatɛrɛ.

html

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

Bamesa

Ba tableaux ezali mua ajusté na style <caption>s, collapse ba frontières, pe ko assurer consistent text-alignna mobimba. Mbongwana mosusu mpo na bandelo, padding, mpe makambo mosusu eyaka elongo na .tablekelasi .

Oyo ezali tableau ya ndakisa, mpe oyo ezali caption na yango mpo na kolimbola makambo oyo ezali na kati.
Motó ya likambo ya tableau	Motó ya likambo ya tableau	Motó ya likambo ya tableau	Motó ya likambo ya tableau
Cellule ya mesa	Cellule ya mesa	Cellule ya mesa	Cellule ya mesa
Cellule ya mesa	Cellule ya mesa	Cellule ya mesa	Cellule ya mesa
Cellule ya mesa	Cellule ya mesa	Cellule ya mesa	Cellule ya mesa

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>

Baformilɛrɛ

Ba éléments ya forme ndenge na ndenge ezo rebooté pona ba styles ya base ya pete. Talá mwa mbongwana oyo eleki ntina:

<fieldset>s ezali na bandelo te, padding te, to marge te mpo ete ekoki kosalelama na pete lokola ba enveloppes mpo na ba entrées individuelles to ba groupes ya ba entrées.
<legend>s, lokola ba fieldsets, ebongwani mpe na lolenge mpo elakisama lokola motó ya likambo ya mitindo.
<label>s etiamaki na display: inline-blockmpo na kopesa nzela marginya kosalelama.
<input>s, <select>s, <textarea>s, mpe <button>s ezali mingimingi kotalelama na Normalize, kasi Reboot elongolaka bango marginmpe ebongisi line-height: inherit, mpe.
<textarea>s ebongwani mpo na kozala kaka na bonene ya kobongola na ndenge ya vertical lokola kobongola bonene ya horizontal mbala mingi “ebukaka” layout ya lokasa.
<button>s mpe <input>ba éléments ya bouton bazali na cursor: pointertango :not(:disabled).

Mbongwana yango, mpe makambo mosusu, emonisami awa na nse.

Soutien ya entrée ya date & couleur

Bobatela na makanisi ba entrées ya date esimbami mobimba te na ba navigateurs nionso, elingi koloba Safari.

Ba pointeurs na ba boutons

Reboot ezali na bobongisi mpo role="button"na kobongola curseur ya liboso na pointer. Bakisa attribut oyo na ba éléments mpo na kosalisa kolakisa ba éléments ezali interactifs. Role oyo ezali nécessaire te pona <button>ba éléments, oyo ezuaka cursorchangement na yango moko.

Bouton ya élément oyo ezali ya bouton te

html

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

Misc ba éléments

Adresi

Elemento <address>ezongisami na mikolo mpo na kozongisa na esika ya liboso ya navigateur font-styleuta italicna normal. line-heightezali mpe sikawa libula, mpe margin-bottom: 1remebakisami. <address>s ezali mpo na kolakisa ba sango ya boyokani mpo na nkɔkɔ oyo azali penepene (to nzoto mobimba ya mosala). Bobatela formatage na kosukisa milɔngɔ na <br>.

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

Kombo mobimba
liboso.ya [email protected]

Blockquote ya kosala

Par défaut marginna blockquotes ezali 1em 40px, yango wana to réinitialiser yango na 0 0 1remmpo na eloko moko oyo ezali na boyokani mingi na ba éléments mosusu.

Citation oyo eyebani malamu, oyo ezali na kati ya élément ya blockquote.

Moto moko ya lokumu na Source Title

Ba éléments ya kati ya ligne

Elemento <abbr>ezuaka styling ya base mpo na kosala ete ezala na bokeseni na kati ya makomi ya paragrafe.

Elemento ya bokuse ya HTML .

Na mokuse

Par défaut cursorna résumé ezali text, yango wana to réinitialiser yango na mpo na pointerko transmettre que élément ekoki ko interagir na yango na ko cliquer na yango.

Mwa makambo ya mikemike

Infos ebele na ba détails.

Kutu makambo mosusu ya mikemike

Talá kutu makambo mosusu oyo etali makambo yango.

`[hidden]`Attribut ya HTML5

HTML5 ebakisi attribut ya sika ya mokili mobimba na kombo[hidden] , oyo ezali na style lokola display: nonepar défaut. Kodefa likanisi moko uta na PureCSS , tozali kobongisa likolo ya default oyo na kosala [hidden] { display: none !important; }mpo na kosalisa kopekisa ya yango displaykozwa na mbalakaka koleka.

<input type="text" hidden>

Kozanga boyokani ya jQuery

[hidden]ezali compatible te na jQuery's $(...).hide()na ba $(...).show()méthodes. Yango wana, tozali te actuellement surtout endorse [hidden]sur ba techniques mosusu pona ko gérer ba displayya ba éléments.

Pona kaka ko changer visibilité ya élément moko, elingi koloba ya yango displaye modifié te pe élément ekoki kaka ko affecter flux ya document, salela classe na.invisible esika na yango.

Bobandi lisusu

Kopusana

Ba variables ya CSS

Ba défauts ya lokasa

Stack ya ba fonts native

Mitó ya makambo mpe baparagrafe

Mibeko ya horizontal

Ba liste

Code ya kati ya ligne

Ba blocs ya code

Ba variables oyo ezali

Entrée ya mosaleli

Exemple ya sortie

Bamesa

Baformilɛrɛ

Soutien ya entrée ya date & couleur

Ba pointeurs na ba boutons

Misc ba éléments

Adresi

Blockquote ya kosala

Ba éléments ya kati ya ligne

Na mokuse

[hidden]Attribut ya HTML5

Kozanga boyokani ya jQuery

`[hidden]`Attribut ya HTML5