Saltar al contenido principal Salta a docs navegación
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.1.1 nisqapi yapasqa

v5.1.1 kaqwan, ñuqaykupaq munasqa @imports llapa CSS huñuykupi estandarizarqayku (kayhina bootstrap.css, bootstrap-reboot.css, chaymanta bootstrap-grid.cssyapanapaq _root.scss. Kayqa :rootpata CSS tikraqkunata llapa huñukunaman yapan, mana qhawaspa hayk'a paykunamanta chay huñupi llamk'achisqa. Qhipaman Bootstrap 5 hinalla kanqa aswan CSS tikraqkunata pachawan yapasqa qhaway.

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,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // 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.

CSS nisqa tikraqkuna

Bootstrap 5 puqusqa hina, aswan aswan estilokuna CSS tikraqkunawan ruwasqa kanqa huk ñan hina aswan chiqa pacha ruwanakuna quypaq 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 {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

Ruwaypi, chay tikraqkuna chaymanta Reboot kaqpi chayhinata churakunku:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-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>

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

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

<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 
<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 + , 
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. 
<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

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