Tipografía rehegua
Kuatiahaipyre ha techapyrã Bootstrap tipografía-pe g̃uarã, oikehápe ñemboheko global, iñakãrapuꞌa, jehaipyre retepy, lista ha hetave mbaꞌe.
Umi escenario global rehegua
Bootstrap omohenda jehechaukaha global, tipografía ha enlace estilo básico. Oñeikotevẽ jave hetave control, ehecha umi clase utilidad textual rehegua .
- Eipuru peteĩ pila fuente nativa oiporavóva iporãvéva
font-family
peteĩteĩva SO ha tembipururã. - Peteĩ escala tipo rehegua oikevéva ha ojeikekuaavévape g̃uarã, roipuru kundahára ypykue
font-size
(jepivegua 16px) ikatu hag̃uáicha umi tapicha ohóva omohenda iñemohendaha ñepyrũrã oñeikotevẽháicha. - Eipuru
$font-family-base
,$font-size-base
, ha$line-height-base
atributokuéra ñande base tipográfica ramo ojeporúva<body>
. - Emohenda enlace global color vía
$link-color
ha emoĩ enlace subrayado-pe añoite:hover
. - Eipuru
$body-bg
emohenda hag̃ua peteĩbackground-color
pe<body>
(#fff
por defecto).
Koꞌã estilo ikatu ojejuhu ryepýpe _reboot.scss
, ha umi mbaꞌekuaarã global oñemboheko _variables.scss
. Ejeasegura eñemoĩ $font-size-base
hag̃ua rem
.
Umi Ñe’ẽryru
Opaite HTML akãrapu’ã, , <h1>
rupive <h6>
ojeguereko.
Ñe’ẽryru | Tembiecharã |
---|---|
<h1></h1> |
h1 rehegua. Ñe’ẽmondo bootstrap rehegua |
<h2></h2> |
h2 rehegua. Ñe’ẽmondo bootstrap rehegua |
<h3></h3> |
h3 rehegua. Ñe’ẽmondo bootstrap rehegua |
<h4></h4> |
h4 rehegua. Ñe’ẽmondo bootstrap rehegua |
<h5></h5> |
h5 rehegua. Ñe’ẽmondo bootstrap rehegua |
<h6></h6> |
h6 rehegua. Ñe’ẽmondo bootstrap rehegua |
<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
clase rupive .h6
ojeguereko avei, oñembojojaséramo peteĩ iñakãrapuꞌa letra estilo ha katu ndaikatúi reipuru elemento HTML ojoajúva.
h1 rehegua. Ñe’ẽmondo bootstrap rehegua
h2 rehegua. Ñe’ẽmondo bootstrap rehegua
h3 rehegua. Ñe’ẽmondo bootstrap rehegua
h4 rehegua. Ñe’ẽmondo bootstrap rehegua
h5 rehegua. Ñe’ẽmondo bootstrap rehegua
h6 rehegua. Ñe’ẽmondo bootstrap rehegua
<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>
Oñemohenda porãvo umi rubro
Eipuru umi mboꞌepy utilidad rehegua oikevaꞌekue emoheñói jey hag̃ua jehaipyre iñakãrapuꞌa mokõiha michĩva Bootstrap 3-gui.
Encabezado de visualización de lujo Con texto secundario descolorido
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Ohechauka umi título
Umi elemento rubro tradicional ojejapo omba’apo porãve hag̃ua so’o nde página contenido-pe. Reikotevẽ jave peteĩ iñakãrapu’ã ojedestaca hag̃ua, ekonsidera eipuru peteĩ rubro jehechaukarã —peteĩ estilo de rubro tuichavéva, michĩmi oguerekóva opinión. Eñongatu ne akãme ko’ã iñakãrapu’ã ndaha’éi ombohováiva por defecto, ha katu ikatu emboguata umi letra tuichakue ombohováiva .
Ohechauka 1.1 |
Ohechauka 2.1 |
Ohechauka 3.1 |
Ohechauka 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>
Myakã
Ejapo peteĩ párrafo ojehecharamovéva remoĩvo .lead
.
Kóva ha’e peteĩ párrafo principal. Ojedestaca umi párrafo jepiguágui.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
Umi elemento jehaipyre en línea rehegua
Estilo umi elemento HTML5 en línea común-pe g̃uarã.
Ikatu reipuru pe etiqueta marca reheguajehechaukakuaavemaranduhai.
Ko línea jehaipyre rehegua ojeꞌe ojeguereko hag̃ua jehaipyre oñemboguevaꞌekue ramo.
Ko línea de texto oje’ese oñetrata haĝua ndaha’evéimava exacto.
Ko línea jehaipyre rehegua ojeꞌe ojeguereko hag̃ua peteĩ kuatiañeꞌepyre oñembojoapýramo.
Ko línea de texto orrepresentáta ojesubrayaháicha
Ko línea de texto ojejapo ojeguereko haguã letra fina ramo.
Ko línea oñembohasa jehaipyre negrita ramo.
Ko línea oñembohasa jehaipyre cursiva ramo.
<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
ha .small
umi mbo’esyry ojeguereko avei ojeporu hag̃ua umi estilo peteĩchagua <mark>
ha <small>
ojehekýivo mba’eveichagua implicancia semántica ojeipota’ỹva oguerútava umi etiqueta.
Ndojehechaukáiramo jepe yvate, eñeñandu porã eipuru hag̃ua <b>
ha <i>
HTML5-pe. <b>
he’ise ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju ombohasa’ỹre importancia adicional ha <i>
katu hetavehápe ñe’ẽ, término técnico, hamba’e rehegua.
Utilidades de texto rehegua
Emoambue jehaipyre ñemboheko, emoambue, estilo, ipohýi ha sa’y ore jehaipyre utilidad ha color utilidad reheve .
Ñe’ẽ mbykymi
Implementación estilizada HTML <abbr>
elemento rehegua umi abreviatura ha acrónimo-pe g̃uarã ohechauka hag̃ua versión oñembotuicháva hover-pe. Umi abreviatura oguereko peteĩ subrayado por defecto ha ohupyty peteĩ cursor pytyvõrã omeꞌe hag̃ua contexto adicional hover-pe ha umi tecnología oipytyvõva puruhárape.
Emoĩ .initialism
peteĩ ñemombykype peteĩ font-size michĩmivévape g̃uarã.
attr rehegua
HTML rehegua
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
Umi cita bloque rehegua
Oñecita haguére umi bloque contenido ambue fuente-gui nde kuatia ryepýpe. Embojere <blockquote class="blockquote">
oimeraẽ HTML rehe cita ramo.
Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ombohéra peteĩ fuente
Oñemoĩve peteĩ <footer class="blockquote-footer">
ojekuaa hag̃ua pe fuente. Embojere tembiapo ypykue réra <cite>
.
Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.
<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 rehegua
Eipuru jehaipyre purupyrã tekotevẽháicha emoambue hag̃ua nde blockquote ñemohenda.
Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.
<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>
Peteĩ cita ojekuaáva, oguerekóva peteĩ elemento blockquote-pe.
<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>
Umi lista rehegua
No estilo rehegua
Eipe’a margen por defecto list-style
ha izquierda umi elemento lista rehegua (mitãnguéra pya’e añoite). Kóva ojeporu umi mba’e lista mitãnguéra pya’e rehegua añoite , he’iséva tekotevẽtaha emoĩ mbo’esyry oimeraẽva lista anidado-pe g̃uarã avei.
- Kóva ha’e peteĩ lista.
- Ojekuaa completamente sin estilo.
- Estructuralmente, ha'e gueteri peteî lista.
- Ha katu ko estilo ojeporu umi elemento mitã pyaꞌeteguápe añoite.
- Umi lista oñembohysýiva:
- ndojeafectái ko estilo rehe
- ohechaukáta gueteri peteî bala
- ha oreko margen izquierdo apropiado
- Upéva ikatu gueteri ideprovécho algún situasiónpe.
<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>
En línea rehegua
Eipe'a peteĩ lista bala ha emoĩ michĩmi tesape margin
mokõi clase ñembojoaju reheve, .list-inline
ha .list-inline-item
.
- Kóva ha’e peteĩ mba’e lista-pegua.
- Ha ambue.
- Ha katu ojehechauka hikuái en línea.
<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 rehegua
Emohenda umi término ha descripción horizontalmente eipurúvo ñande sistema cuadrícula rehegua clase ojedefinivaꞌekue (térã mixin semántico). Ipukuvévape g̃uarã, ikatu opcionalmente emoĩ peteĩ .text-truncate
mboꞌepy emboty hag̃ua jehaipyre peteĩ elipsis reheve.
- Umi lista descripción rehegua
- Peteĩ lista descripción rehegua iporãiterei ojedefini hag̃ua umi término.
- Ñe'ẽ
-
Definición para el término rehegua.
Ha oĩve jehaipyre ñe’ẽñemi tenda’i rehegua.
- Ambue término
- Ko definición mbyky, upévare ndaipóri párrafo extra ni mba'eve.
- Término oñembotýva oñembotýma
- Péva ikatu ideprovécho oĩ jave espacio apretado. Omoĩ peteĩ elipsis ipahápe.
- Nidación rehegua
-
- Lista de definición anidado rehegua
- Ahendu peẽme pegusta umi lista definición rehegua. Eheja tamoĩ peteĩ lista definición rehegua nde lista definición ryepýpe.
<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>
Umi letra tuichakue ombohováiva
v4.3.0 guive, Bootstrap oñemondo opción reheve ombohapévo letra tuichakue ombohováiva, ohejáva jehaipyre ojeescala naturalmente tembipuru ha jehechaukaha tuichakue rupi. RFS ikatu oñemboguata oñemoambuévo $enable-responsive-font-sizes
Sass mbaꞌekuaarã true
ha oñemboheko jeývo Bootstrap-pe.
Oipytyvõ hag̃ua RFS , jaipuru peteĩ Sass mixin ñamyengovia hag̃ua ñande font-size
propiedad normal. Umi letra tuichakue ombohováiva oñembyatýta calc()
tembiaporãme oguerekóva peteĩ mezcla rem
ha unidad jehechaukaha rehegua ikatu hag̃uáicha ojejapo escalado ombohováiva jepokuaa. Ojekuaave hag̃ua RFS ha iñemboheko rehegua ikatu ojejuhu iGitHub ryru’ípe .