Saltar al contenido principal Salta a docs navegación
Check
in English

Reboot

Wakmanta qallariy, huk huñusqa elemento-específico CSS tikraykunamanta huk sapalla willañiqipi, kickstart Bootstrap huk sumaq, mana chiqninakuq, chaymanta sasan base linea ruwanapaq qunapaq.

Kay p'anqapi

Asuykuy

Wakmanta qallariy Normalizar kaqpi ruwan, achka HTML elementokunata huk chhika yuyayniyuq estilokunawan qun elemento akllanakunallata llamk'achispa. Estilo adicional nisqa ruwakun clasekunawanlla. Ejemplopaq, wakin <table>estilokunata wakmanta qallariyku aswan sasan base kaqpaq chaymanta qhipaman quyku .table, .table-bordered, chaymanta aswan.

Kaypi kamachiyniyku chaymanta razonkuna akllanapaq imakunata Reboot kaqpi llallinapaq:

  • Wakin maskaqpa ñawpaqmanta chanikunata musuqchay s llamk'achinapaq rems rantipi emescalable componente espaciamiento kaqpaq.
  • Karunchakuychu margin-top. Margenes verticales nisqakunaqa urmarunmanmi, chaymi mana suyasqa ruwaykunata qunman. Ichaqa aswan importanteqa, huk dirección de margines un modelo mental más simple.
  • Aswan facil escalapaq dispositivo sayaykunapi, bloque elementokuna rems s kaqpaq llamk'achinanku tiyan margin.
  • -wan fonttupaq kaqninkunamanta willaykunata aswan pisi kaqpi waqaychay, inheritatikuqtin llamk'achispa.

CSS nisqa tikraqkuna

v5.2.0 nisqapi yapasqa

v5.1.1 kaqwan, munasqa sniyku @importllapa CSS paquetesniykupi (kay bootstrap.css, bootstrap-reboot.css, chaymanta bootstrap-grid.css) kaqpi estandarizarqayku _root.scss. Kayqa :rootllapa huñukunaman pata CSS tikraqkunata yapan, hayk'a chay huñupi llamk'achisqa kaptinpas. Qhipaman Bootstrap 5 aswan CSS tikraqkuna yapasqa pachawan qhawayta qatinqa , aswan chiqa pacha ruwanakuna qunapaq mana sapa kuti Sass kaqmanta huñunapaq necesidadniyuq. Enfoqueykuqa Sass variablesniykumanta pukyuta hap'ispa CSS variables kaqman tikraymi. Chayhina, mana CSS tikraqkunata llamk'achinkichu chaypas, Sass kaqpa tukuy atiyninniyuqraq kanki. Kayqa kunankamapas ruwakuchkanraqmi, chaymi tiempota necesitanqa allinta ruwakunanpaq.

Ejemplopaq, kay :rootCSS tikraqkunata qhawariy común <body>estilokunapaq:

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

Ruwaypi, chay tikraqkuna chaymanta Reboot kaqpi chayhinata churakunku:

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
}

Mayqinchus chiqa pacha ruwanakuna ruwayta atikun imayna munasqaykimanhina:

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

P'anqa ñawpaqmanta churasqa

Chay <html>chaymanta <body>elementokuna musuqchasqa kanku aswan allin p'anqantin ñawpaqmanta ruwasqakuna qunapaq. Aswan sut'imanta:

  • The box-sizingnisqaqa tukuy elementopi churasqa kachkan —hinallataq chaymanta *::before, *::aftera border-box. Kayqa elementomanta willasqa ancho mana hayk'aqpas acolchado utaq borderayku pasasqa kananpaq qhawan.
    • Mana ima sapsi font-sizewillasqachu <html>, ichataq 16pxhap'isqa (navegadorpa ñawpaqmanta churasqa). font-size: 1remllamk'achisqa kachkan chaymanta <body>chaypaq facil kutichiq laya-escalamiento kaqmanta willay mast'ariy tapuykuna kaqnintakama chaymanta ruwaqpa munasqankunata respetaspa chaymanta huk aswan yaykuy atiy ruwayta qhawaspa. Kay maskaqpa ñawpaqmanta churasqanqa tikrasqata tikraspa llallichisqa kanman $font-size-root.
  • <body>Chaypas huk global , font-family, font-weight, line-heighthinaspa color. Kayqa qhipaman wakin formulario elementokuna herenciayuqmi, letrakuna mana tupaqninkunata hark'anapaq.
  • Seguridadpaq, chay <body>huk willasqa background-color, mana hunt'asqa #fff.

Pila de fuente nativa

Bootstrap huk “nativo fuente pila” utaq “sistema fuente pila” llamk’achin allin qillqa ruwanapaq sapa dispositivo kaqpi chaymanta OS kaqpi. Kay sistema letrakuna ruwasqa kanku kunan pacha dispositivokuna yuyaypi, pantallakunapi allinchasqa ruwaywan, tikraq letra yanapakuywan chaymanta aswan. Astawan ñawiriy nativo qillqa pilakunamanta kay Smashing Magazine qillqasqapi .

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

Reparay, fuente pila emoji letrakuna kasqanrayku, achka común símbolo/dingbat Unicode qillqakuna achka llimp'iyuq pictografokuna hina ruwasqa kanqa. colorRikchayninku hukniray kanqa, maskaq/plataformapa nativo emoji qillqa mayt'unpi llamk'achisqa estilomanhina, chaymanta mana mayqin CSS estilokunawanpas afectasqachu kanqa .

Kayqa chaymanta kikinmanta herencia globalmente tukuy Bootstrap kaqpi ruwasqa font-family. <body>Tukuypaq font-family, musuqchay $font-family-basechaymanta musuqmanta huñuy Bootstrap kaqmanta.

Titulos y parrafos

Llapan umalliq elementokuna —kayhina, <h1>—hinallataq <p>musuqmanta churasqa kanku paykunap margin-tophurqusqa kananpaq. Titulokuna margin-bottom: .5remyapasqa kanku chaymanta parrafokuna margin-bottom: 1remfacil espaciamientopaq.

Uma Qatina
<h1></h1> h1. Bootstrap nisqa umalliq
<h2></h2> h2. Bootstrap nisqa umalliq
<h3></h3> h3. Bootstrap nisqa umalliq
<h4></h4> h4. Bootstrap nisqa umalliq
<h5></h5> h5. Bootstrap nisqa umalliq
<h6></h6> h6. Bootstrap nisqa umalliq

Horizontal kamachiykuna

Chay <hr>elementoqa pisiyachisqañam kachkan. Navegador ñawpaqmanta ruwasqakunaman rikch'akuq, <hr>s via estiloyuq border-topkanku, ñawpaqmanta churasqayuq kanku , chaymanta kikinmanta via opacity: .25kaqninkuta herencianku , chaymanta mayk'aq tayta kaqnintakama churasqa. Chaykunataqa qillqawan, fronterawan, opacidad yanapakuykunawanmi hukchasqa kanman.border-colorcolorcolor

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

Listakuna

Llapan listakuna— <ul>, <ol>, hinaspa <dl>— paykunapa margin-tophurqusqa hinaspa huk margin-bottom: 1rem. Anidado listas nisqakunaqa manam margin-bottom. Hinallataqmi padding-lefton <ul>y <ol>elementos nisqakunatapas musuqmanta churarqanchik.

  • Llapan listakunam hawa margenninkuta hurqusqa kachkan
  • Hinaspa margen inferiorninku normalizasqa
  • Anidado nisqa listakunaqa manam uray margenniyuqchu
    • Chay hinapin aswan kaqlla rikch’ayniyoq kanku
    • Astawanraqmi aswan lista nisqapi kaqkuna qatiptin
  • Lloq’e acolchado nisqapas kutichisqañan kashan
  1. Kaypi huk kamachisqa lista kachkan
  2. Iskay kimsa lista nisqapi kaqkunawan
  3. Tukuyninpi kaqlla rikchayniyuqmi
  4. Ñawpaq mana kamachisqa lista hina

Aswan sasan estilo ruwanapaq, sut'i jerarquía kaqpaq, chaymanta aswan allin espaciamiento kaqpaq, willakuy listakuna margins musuqchasqayuq kanku. <dd>s kaqmanta churay margin-lefthinaspa 0yapay margin-bottom: .5rem. <dt>s nisqakunam yana qillqawan qillqasqa kachkan .

Listas de descripción
Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.
Kamachiy
Definición para el término.
Iskay kaq sut’inchay kikin simipaq.
Huk término
Kay huk simipaq definición.

Chirupi kaq código

Chiru ukhupi chirusqakunata <code>. Aswan allinta HTML k'uchu corchetekunamanta ayqiyta.

Ejemplopaq, <section>inline hinam wankusqa kanan.
html nisqapi 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Bloques de código

<pre>Achka chiru qillqakunapaq s nisqawan yanapachikuy . Huk kutitawan, allinta ruwanapaq ima k'uchu corchetekunamantapas codigopi ayqiy. Elementoqa <pre>musuqmanta churasqa kachkan chayta hurqunanpaq chaymanta unidadkunata paypaq margin-topllamk'achinanpaq .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
html nisqapi 
<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 nisqakuna

Variables nisqakunata rikuchinapaqqa <var>etiqueta nisqawanmi llamk'achiy.

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

Insumo de usuario

Utilizar el <kbd>para indicar entrada que típicamente se entra a través de teclado.

Directoriokunata cambianaykipaqqa, directoriopa cdsutinta qillqay.
Ajustes nisqakunata allichanaykipaqqa, ñitiy ctrl + ,
html nisqapi 
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>

Salida de muestra

Huk programamanta muestra lluqsiyta rikuchinapaq <samp>etiquetata llamk'achiy.

Kay qillqasqaqa computadora programamanta muestra lluqsisqa hina qhawanapaqmi.
html nisqapi 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tablas

Tablakuna pisilla allichasqa kanku estilo <caption>s kaqman, urmachiy fronterakuna kaqman, chaymanta text-aligntukuyninpi huklla kaqta qhawanku. Yapa tikraykuna fronterakunapaq, acolchadopaq, chaymanta aswan.table hamun clasewan .

Kayqa huk ejemplo tabla, kaytaqmi paypa captionnin imakuna kasqanmanta willanapaq.
Tablapa umalliqnin Tablapa umalliqnin Tablapa umalliqnin Tablapa umalliqnin
Tabla celda Tabla celda Tabla celda Tabla celda
Tabla celda Tabla celda Tabla celda Tabla celda
Tabla celda Tabla celda Tabla celda Tabla celda
html nisqapi 
<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>

Formas

Imaymana formulario elementokuna aswan sasan base estilokunapaq musuqmanta qallarisqa kanku. Kaypi wakin aswan riqsisqa tikrakuykuna:

  • <fieldset>s mana fronterayuqchu, acolchadoyuq, margenniyuqchu chayrayku sapalla yaykuykunapaq utaq qutu yaykuykunapaq p'istu hina facil llamk'achiy atikunku.
  • <legend>s, chakra huñukuna hina, hukmanta ruwasqataqmi kanku, huk rikch'aq umalliq hina rikuchisqa kananpaq.
  • <label>s nisqakuna churasqa kanku churanankupaq display: inline-blocksaqinankupaq margin.
  • <input>s, <select>s, <textarea>s, chaymanta <button>s aswanta Normalize kaqwan allichasqa kanku, ichaqa Reboot paykunap marginchaymanta churan line-height: inherit, chaymanta.
  • <textarea>s tikrasqa kanku sayaqlla sayayniyuq kanankupaq imaynachus horizontal sayaynin sapa kuti “p’akikun” p’anqa churayta.
  • <button>s y <input>elementos de botón tienen cursor: pointercuando :not(:disabled).

Kay tikrakuykuna, chaymanta aswan, kay urapi rikuchisqa kachkan.

Ejemplo leyenda

100 nisqa

Punchaw & llimp'i yaykuy yanapakuy

Yuyaypi hap'iy p'unchaw yaykuykuna mana tukuy maskaqkunawan hunt'asqa yanapasqachu , chaymanta Safari kaqwan.

Punteros en botones

Wakmanta qallariy huk allinchayta churan role="button"ñawpaqmanta kursuta tikranapaq pointer. Kay laya elementokunaman yapay, elementokuna interactivo kasqankuta rikuchinapaq yanapanapaq. Kay ruwayqa mana <button>elementokunapaq necesariochu, chaykuna kikinkumanta cursortikrayta jap’inku.

Botón de elemento no botón
html nisqapi 
<span role="button" tabindex="0">Non-button element button</span>

Misc elementos

Tarikuynin

Elementoqa <address>musuqchasqam kachkan, maskaqpa ñawpaqmanta churasqanmanta font-stylekaqmanta italicchuranapaq normal. line-heighthinallataqmi kunan herenciata chaskisqa, margin-bottom: 1remyapasqañataqmi. <address>s nisqakunaqa aswan qaylla tayta mamapaq (utaq llapan llamkaypa kurkunpaq) tupanachiy willakuykunata qawachinapaqmi. nisqawan chirukunata tukuchispa formato nisqa waqaychay <br>.

Twitter, Inc.
1355 qhatu ñan, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Tukuy Suti
ñ[email protected]

Bloqueo nisqa

marginBlockquotes kaqpi ñawpaqmanta churasqa 1em 40px, chayrayku chayta 0 0 1remwak elementokunawan aswan tupaq imapaqpas kutichiyku.

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

Pipas riqsisqa Fuente Titulo nisqapi

Inline elementokuna

Chay <abbr>elementoqa estilo básico nisqatam chaskikun, chaynapi parrafo qillqamanta aswan riqsisqa kananpaq.

HTML nisqa pisichasqa elemento nisqa.

Pisiyachisqa

cursorResumenpi ñawpaqmanta churasqa text, chayrayku chayta kaqmanta pointerchurayku chay elementowan tinkiyta atikun chaymanta chaypi ñit'ispa chayta willanapaq.

Wakin detalles

Astawan yachaykuna detallesmanta.

Aswan sut’inchaykunaraq

Kaypiqa aswan sut’inchaykunan kashan chay sut’inchaykunamanta.

HTML5 [hidden]nisqa atributo

HTML5 huk musuq tukuypaq laya sutichasqa[hidden]display: none yapan , chaymanta ñawpaqmanta hina estilochasqa . PureCSS kaqmanta huk yuyayta prestaspa , kay ñawpaqmanta ruwasqamanta allinchayku ruwaspa [hidden] { display: none !important; }yanapakuypaq harkananpaq chaymanta displaymana qunqayllamanta llallichisqa kananpaq.

<input type="text" hidden>
jTapukuy mana tupaq

[hidden]mana jQuery's kaqwan $(...).hide()chaymanta $(...).show()métodos kaqwan tupaqchu. Chayrayku, mana kunan pacha aswanta [hidden]huk técnicas kaqmanta aswanta endosaykuchu kay displayde elementos kamachiypaq.

Huk elementopa rikuynintalla tikranapaq, niyta munan su displaymana tikrasqachu chaymanta elemento documentopa puriyninta afectanmanraq, chaypa rantinpi .invisibleclaseta llamk'achiy.