Source

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 saphi font-size(tipicamente 16px) hapiyku 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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor nisqa suministrador nisqa. Duis mollis, est mana imayuq.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 .

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Huk pukyuta sutichay

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

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit. Entero posuere erat a ante.

Pipas riqsisqa Fuente Titulo nisqapi

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

Lorem ipsum dolor tiyay amet
Consectetur adipiscing nisqa elit
Entero molestie lorem en massa
Facilisis en aliquet nisl de pretio nisqa
Nulla volutpat aliquam velit
- Fasello iaculis nisqa neque nisqa
- Purus sodales ultricas nisqa
- Vestibulo laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean tiyay amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Inline

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

Lorem ipsum
Fasello iaculis nisqa
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod nisqa

Vestibulo id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit mana mi porta gravida nisqapi eget metus nisqapi.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod nisqamanta.

Truncado término nisqa kuchusqa

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum masa justo tiyay amet risus.

Nido

Lista de definición anidado: Eneano posuere, tortor sed maldición feugiat, monja augue blandit monja.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Tipografía respuesta

Kutichiq tipografía nisqaqa qillqata chaymanta componentes escalacionmanta riman, sapsi elemento's font-sizehuk serie willay tapuykuna ukhupi allichaspalla. Bootstrap mana kayta ruwanchu qampaq, ichaqa allin facil yapay sichus necesitanki.

Kaypi huk ejemplo chaymanta ruwaypi. font-sizeIma s chaymanta medios tapuykuna munasqaykita akllay .

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}