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
. - 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.
<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>
Umi iñakãrapuꞌa jehechaukaha oñemboheko $display-font-sizes
Sass mapa ha mokõi mbaꞌekuaarã rupive, $display-font-weight
ha $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
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>
Elementos de texto 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>
Eñangareko umi etiqueta ojepuruva’erãha semántico-rã:
<mark>
ohechauka jehaipyre oñemarkáva térã oñembohekopyréva ojehecha hag̃ua térã oñenota hag̃ua.<small>
orrepresenta umi comentario lateral ha letra michĩva, derecho de autor ha texto legal-icha.<s>
ohechauka elemento ndaha’evéimava relevante térã ndaha’evéimava exacto.<u>
ohechauka peteĩ span de texto en línea oñembohasavaꞌerãva peteĩ tape ohechaukáva oguerekoha peteĩ anotación ndahaꞌeiva textual.
Emoĩséramo estilo nde jehaipyre, reipuruva’erã ko’ã mbo’esyry rangue:
.mark
oipurúta umi estilo ojoguáva<mark>
..small
oipurúta umi estilo ojoguáva<small>
..text-decoration-underline
oipurúta umi estilo ojoguáva<u>
..text-decoration-line-through
oipurúta umi estilo ojoguáva<s>
.
Ndojehechaukáiramo jepe yvate, eñeñandu porã eipuru hag̃ua <b>
ha <i>
HTML5-pe. <b>
oje’ese ojehechauka haguã ñe’ẽ térã ñe’ẽjoaju oñembohasa’ỹre importancia adicional, ha katu <i>
ha’e hetave ñe’ẽme g̃uarã, término técnico, hamba’e.
Utilidades de texto rehegua
Emoambue jehaipyre alineación, emoambue, estilo, ipohýi, línea-altura, decoración ha color ore utilidad jehaipyre ha utilidad color rehegua ndive .
Ñ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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Ombohéra peteĩ fuente
Pe HTML especificación ojerure oñemoĩ hag̃ua atribución blockquote <blockquote>
. Oñemeꞌe jave atribución, embojere nde <blockquote>
en a <figure>
ha eipuru peteĩ <figcaption>
térã peteĩ elemento nivel bloque rehegua (techapyrã, <p>
) .blockquote-footer
mboꞌepy ndive. Ejesareko katuete embojere hag̃ua tembiapo fuente réra ipype <cite>
avei.
<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 rehegua
Eipuru jehaipyre purupyrã tekotevẽháicha emoambue hag̃ua nde blockquote ñemohenda.
<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>
<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>
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
Bootstrap 5-pe, romboguata umi letra tuichakue ombohováiva por defecto, ohejáva jehaipyre ojeescala naturalmente tembipuru ha jehechaukaha tuichakue rupi. Ejesarekomína RFS página rehe reikuaa hag̃ua mba’éichapa omba’apo kóva.
Sass rehegua
Variables rehegua
Umi rubro oguereko algunas variables dedicadas ojejapo hagua tamaño ha espaciado.
$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;
Opaichagua elemento tipografía rehegua oñembohapéva koꞌape ha Reboot -pe oguereko avei umi variable oñembohekopyréva.
$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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Mixin-kuéra rehegua
Ndaipóri mixin oñembohekopyréva tipografía-pe g̃uarã, ha katu Bootstrap oipuru Responsive Font Sizing (RFS) .