in English

Tipografía

Bootstrap qillqanapaq qillqakuna chaymanta ejemplokuna, tukuypaq churanakuna, umalliqkuna, kurku qillqa, listakuna chaymanta aswan.

Tukuy pachapaq churanakuna

Bootstrap sapanchasqa tukuypaq qhaway, tipografía chaymanta t'inki estilokuna churan. Aswan kamachiyta necesitaptinqa, qillqa yanapakuy clasekunata qhaway .

  • Huk nativo letra pilatafont-family llamk'achiy mayqinchus sapa OS kaqpaq chaymanta dispositivopaq aswan allin akllan .
  • Aswan tukuypaq chaymanta yaykuy atikuq laya escalapaq, maskaqpa ñawpaqmanta saphinta font-size(tipicamente 16px) llamk'achiyku chaymanta watukuqkuna maskaqpa ñawpaqmanta ruwasqa ruwayninkuta necesitasqankumanhina ruwayta atinku.
  • $font-family-base, $font-size-base, chaymanta atributokunata llamk'achiy $line-height-baseimaynachus ñuqaykupaq tipográfico baseyku chayman churasqa <body>.
  • Tukuypaq t'inki llimp'ita vía nisqawan $link-colorchuray chaymanta t'inki subrayasqakunallata churay :hover.
  • Utilizar $body-bgpara establecer a background-coloren el <body>( #fffpor defecto).

Kay estilokunataqa ukhupi tarikunman _reboot.scss, chaymanta tukuy pacha tikraqkunaqa kaypi sut'inchasqa kachkan _variables.scss. Aseguraychik $font-size-basechuranaykipaq rem.

Umakuna

Llapan HTML umalliqkuna, , <h1>nisqawanmi <h6>kan.

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
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1a través de .h6clases kaqkunapas kanku, mayk'aq huk umalliqpa letra estilonwan tupachiyta munanki ichaqa mana tinkisqa HTML elementota llamk'achiyta atikunkichu.

h1. Bootstrap nisqa umalliq

h2. Bootstrap nisqa umalliq

h3. Bootstrap nisqa umalliq

h4. Bootstrap nisqa umalliq

h5. Bootstrap nisqa umalliq

h6. Bootstrap nisqa umalliq

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Titulokunata ruway

Yanapakuy clasekuna churasqa kaqwan llamk'achiy Bootstrap 3 kaqmanta uchuy iskay kaq umalliq qillqata musuqmanta ruwanapaq.

Fantástico qhaway umalliq Con texto secundario descolorido

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Umakunata qawachiy

Ñawpamanta umalliq elementokuna ruwasqa kanku aswan allinta llamk'anankupaq p'anqaykipa contenidonpa aychanpi. Mayk’aq huk umalliqta necesitanki aswan riqsisqa kananpaq, qhawariy huk qhaway umalliq llamk’ayta —huk aswan hatun, aswan pisi yuyayniyuq umalliq estilo. Yuyaypi hap'iy kay umalliqkuna mana kutichiqchu ñawpaqmanta, ichaqa atikun kutichiq qillqa sayaykunata atichiyta .

Qhawachiy 1.1
Qhawachiy 2
Qhawachiy 3.1
Qhawachiy 4.1
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Kamachiy

Huk parrafota aswan allinta qhawarichiy, chayta yapaspa .lead.

Kayqa huk umalliq parrafom. Sapa kuti parrafokunamantaqa aswan allinmi.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Chiru ukhupi qillqa elementokuna

Común inline HTML5 elementokunapaq estilo ruway.

Puedes utilizar la etiqueta de marca parakancharichiyqillqa.

Kay chiru qillqaqa qullusqa qillqa hina qhawanapaqmi.

Kay chiru qillqasqaqa manaña chiqap kaqta hina qawanapaqmi.

Kay chiru qillqaqa qillqasqaman yapasqa hina qhawanapaqmi.

Kay chiru qillqaqa chirusqa hinam tikranqa

Kay chiru qillqasqaqa sumaq qillqasqa hina qhawanapaqmi.

Kay chiru yana qillqa hina tikrasqa.

Kay chiru kursivawan qillqasqa hina tikrasqa.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.markchaymanta .smallclasekuna kankutaq kikin estilokuna churanapaq <mark>chaymanta <small>chaymanta mana ima mana munasqa implicaciones semánticas kaqmanta mayqinkunatachus etiquetakuna apamunman.

Mana hawapi rikuchisqa kachkaspapas, mana manchakuspa llamk'achiy <b>chaymanta <i>HTML5 kaqpi. <b>es destinado a resaltar palabras o frases sin transmitir importancia adicional mientras <i>que es mayormente para voz, términos técnicos, etc.

Utilidades de texto

Qillqa chiqanchayta, tikrayta, estilota, llasayninta chaymanta llimp'ita tikray qillqa yanapakuyniykuwan chaymanta llimp'i yanapakuyniykuwan .

Pisichasqa simikuna

HTML kaqpa <abbr>elementonpa estilizasqa ruwaynin pisichasqakuna chaymanta siglas kaqpaq mast'arisqa laya hover kaqpi rikuchinapaq. Pisichasqakuna huk ñawpaqmanta subrayadoyuq kanku chaymanta huk yanapakuy kursuta tarinku huk contexto yapasqa hover kaqpi chaymanta yanapakuy tecnologiakuna ruwaqkunaman qunankupaq.

.initialismAswan huch'uy qillqap sayayninpaq pisichasqa simiman yapay .

attr

HTML nisqa

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Bloqueo nisqa

Qillqayki ukhupi huk pukyumanta bloquekuna contenidomanta citasqaykirayku. <blockquote class="blockquote">Ima HTMLtapas cita hina p'istuy .

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Huk pukyuta sutichay

Pukyuta riqsichinapaq huk yapay <footer class="blockquote-footer">. Pukyu llamk'aypa sutinta <cite>.

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

Pipas riqsisqa Fuente Titulo nisqapi
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alineación

Qillqa yanapakuykunata llamk'achiy necesitasqaykimanhina blockquote kaqniyki chiqanchayta tikranaykipaq.

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

Pipas riqsisqa Fuente Titulo nisqapi
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

Pipas riqsisqa Fuente Titulo nisqapi
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Listakuna

Mana estiloyuq

Lista elementokunapi ñawpaqmanta chaymanta lluq'i margenta hurquy list-style(chaylla wawakunalla). Kayqa chaylla wawakuna lista kaqkunamanlla ruwakun , niyta munan mayqin anidado listakunapaqpas claseta yapanayki tiyan.

  • Kayqa huk listam.
  • Chayqa mana estiloyuqmi rikurin.
  • Estructuralmente, hinallataqmi huk lista.
  • Ichaqa kay estiloqa chaylla wawa elementokunallapaqmi.
  • Anidado nisqa listakuna:
    • mana kay estilowan afectasqachu kanku
    • huk balataraqmi qawachinqa
    • hinaspapas allin margen izquierdo nisqayuqmi kananku
  • Chayqa wakin situacionkunapipas allinraqmi kanman.
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Inline

Huk listamanta balakunata hurquspa marginiskay clasekuna huñusqawan wakin k'anchayta churay, .list-inlinechaymanta .list-inline-item.

  • Kayqa huk lista nisqapi kaqmi.
  • Hinallataq huktapas.
  • Ichaqa chaykunaqa inline nisqapin rikuchikun.
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Descripción lista alineación

Términos chaymanta descripciones horizontalmente chiqanchay, red sistemaykupa ñawpaqmanta riqsisqa clasekuna (utaq mixins semánticos) kaqwan. Aswan unay pachapaq, munasqaykimanhina huk clase yapayta atinki .text-truncateqillqata elipsiswan kuchunapaq.

Listas de descripción
Huk sut'inchay listaqa allinmi términokunata sut'inchanapaq.
Kamachiy

Definición para el término.

Hinallataq wakin aswan sitiokuna sut'inchay qillqa.

Huk término
Kay definicionqa pisillam, chaymi mana extra parrafokuna nitaq imapas.
Truncado término nisqa kuchusqa
Kayqa allinmi kanman espacio pisilla kaptinqa. Tukuyninpi huk elipsis nisqa yapan.
Nido
Lista de definición anidado
Uyarirqanim definición listakuna hina. Definición listayki ukhupi huk definición lista churasaq.
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Tamaños de letras respuestas

v4.3.0 kaqmanta, Bootstrap akllanawan apachin kutichiq letra sayaykunata atichinanpaq, qillqa aswan naturalta dispositivo chaymanta qhaway punku sayaykunapi escalayta saqin. RFS atichisqa kanman $enable-responsive-font-sizesSass tikraq trueBootstrap kaqman tikraspa chaymanta musuqmanta huñuspa.

RFS yanapanapaq , huk Sass mixin llamk'achiyku normal font-sizepropiedadesniyku tikranapaq. Kutichiy qillqa sayaykuna ruwanakunaman huñusqa kanqa calc()huk chaqrusqawan remchaymanta qhaway punku unidadkunawan kutichiq escala ruwayta atichinanpaq. Aswan RFS kaqmanta chaymanta ruwayninmanta tarikunman GitHub waqaychasqanpi .