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 pilata
font-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-base
imaynachus ñuqaykupaq tipográfico baseyku chayman churasqa<body>
.- Tukuypaq t'inki llimp'ita vía nisqawan
$link-color
churay chaymanta t'inki subrayasqakunallata churay:hover
. - Utilizar
$body-bg
para establecer abackground-color
en el<body>
(#fff
por defecto).
Kay estilokunataqa ukhupi tarikunman _reboot.scss
, chaymanta tukuy pacha tikraqkunaqa kaypi sut'inchasqa kachkan _variables.scss
. Aseguraychik $font-size-base
churanaykipaq 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>
.h1
a través de .h6
clases 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>
.mark
chaymanta .small
clasekuna 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.
.initialism
Aswan 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.
<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.
<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.
<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 margin
iskay clasekuna huñusqawan wakin k'anchayta churay, .list-inline
chaymanta .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-truncate
qillqata 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-sizes
Sass tikraq true
Bootstrap kaqman tikraspa chaymanta musuqmanta huñuspa.
RFS yanapanapaq , huk Sass mixin llamk'achiyku normal font-size
propiedadesniyku tikranapaq. Kutichiy qillqa sayaykuna ruwanakunaman huñusqa kanqa calc()
huk chaqrusqawan rem
chaymanta qhaway punku unidadkunawan kutichiq escala ruwayta atichinanpaq. Aswan RFS kaqmanta chaymanta ruwayninmanta tarikunman GitHub waqaychasqanpi .