Tipografía

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

Kay p'anqapi

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 churay vía $link-color.
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

html nisqapi

<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

html nisqapi

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

Qhawachiy 1.1

Qhawachiy 2

Qhawachiy 3.1

Qhawachiy 4.1

Qhawachiy 5.1

Qhawachiy 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Qhawachiy umalliqkuna $display-font-sizesSass mapawan iskay tikraqkunawan ruwasqa kanku, $display-font-weightchaymanta $display-line-height.

Qhawachiy umalliqkunaqa iskay tikraqkunawan ruwanapaqmi, $display-font-familychaymanta $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Kamachiy

Huk parrafota aswan allinta qhawarichiy, chayta yapaspa .lead.

Kayqa huk umalliq parrafom. Sapa kuti parrafokunamantaqa aswan allinmi.

html nisqapi

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

html nisqapi

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

Cuidakuy chay etiquetakuna semántica nisqapaq llamk'achisqa kananmanta:

representa texto que es marcado o resaltado para fines de referencia o notación.
representan lado-comentarios chaymanta uchuy qillqakuna, imayna copyright chaymanta legal texto.
<s>representa elemento que ya no son relevantes o ya no exacto.
representan un span de texto inline que debe ser renderizado de manera que indica que tiene una anotación no textual.

Qillqasqaykita estilochayta munanki chayqa, chaypa rantinpiqa kay clasekunatam llamk'achinayki:

.markhina kaqlla estilokunatam churanqa .
.smallhina kaqlla estilokunatam churanqa .
.text-decoration-underlinehina kaqlla estilokunatam churanqa .
.text-decoration-line-throughhina kaqlla estilokunatam churanqa <s>.

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

Utilidades de texto

Qillqa chiqanchayta, tikray, estilo, llasaynin, chiru-altura, sumaqchay chaymanta llimp'i qillqa yanapakuyniykuwan chaymanta llimp'i yanapakuyniykuwan tikray .

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

html nisqapi

<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. Ima HTMLtapas <blockquote class="blockquote">cita hina p'istuy.

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

html nisqapi

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

Huk pukyuta sutichay

HTML spec nisqa blockquote atribución nisqa hawapi churasqa kananta munan <blockquote>. Atribución quchkaspa, <blockquote>huk kaqpi p'istuy <figure>chaymanta huk <figcaption>utaq huk bloque nivel elemento (kayhina, ) .blockquote-footerclase kaqwan llamk'achiy. Aswan allinta p'istuy pukyu llamk'aypa sutinta <cite>hinallataq.

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

html nisqapi

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Alineación

Qillqa yanapakuykunata llamk'achiy necesitasqaykimanhina blockquote kaqniyki chiqanchayta tikranaykipaq.

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

html nisqapi

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Allin riqsisqa cita, huk elemento blockquote nisqapi tarikuq.

html nisqapi

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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.

html nisqapi

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

html nisqapi

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

html nisqapi

<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

Bootstrap 5 kaqpi, kutichiq letra sayaykunata ñawpaqmanta atichirqayku, qillqa aswan naturalta dispositivo kaqpi chaymanta qhaway punku sayaykunapi escalayta saqispa. RFS p'anqata qhaway imayna kay llamk'an chayta yachanaykipaq.

Sass

Variables nisqakuna

Umallikuna wakin dedicado variablesniyuq kanku tamañopaq chaymanta espaciamientopaq.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Kaypi chaymanta Reboot kaqpi qatasqa imaymana tipografía elementokuna variables dedicadas kaqwanpas kanku.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixinkuna

Tipografía nisqapaqqa manam huk sapaqchasqa mixinkuna kanchu, ichataq Bootstrap nisqaqa Responsive Font Sizing (RFS) nisqatam llamk'achin .