Source

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-familypeteĩteĩva SO ha tembipururã.
Peteĩ escala tipo rehegua oikevéva ha ojeikekuaavévape g̃uarã, ñaimo’ã kundahára ra’ỹi ñepyrũrã 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-baseatributokuéra ñande base tipográfica ramo ojeporúva <body>.
Emohenda enlace global color vía $link-colorha emoĩ enlace subrayado-pe añoite :hover.
Eipuru $body-bgemohenda hag̃ua peteĩ background-colorpe <body>( #fffpor defecto).

Koꞌã estilo ikatu ojejuhu ryepýpe _reboot.scss, ha umi mbaꞌekuaarã global oñemboheko _variables.scss. Ejeasegura eñemoĩ $font-size-basehag̃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>

.h1clase rupive .h6ojeguereko 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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor rehegua. Duis mollis, est ndaha'éiva commodo luctus rehegua.

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

.markha .smallumi mbo’esyry ojeguereko avei ojeporu hag̃ua umi estilo peteĩchagua <mark>ha <small>ojehekýi aja 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>oje’ese 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ĩ .initialismpeteĩ ñ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.

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

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

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

Alguien famoso en Título de Fuente

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

Eipuru jehaipyre purupyrã tekotevẽháicha emoambue hag̃ua nde blockquote ñemohenda.

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

Alguien famoso en Título de Fuente

<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 oguapy amet, consectetur adipiscing elit. Entero posuere erat peteĩ ante.

Alguien famoso en Título de Fuente

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

Umi lista rehegua

No estilo rehegua

Eipe’a margen por defecto list-styleha 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.

Lorem ipsum dolor oguapy amet
Consectetur adipiscing rehegua elit
Entero molestie lorem en masa rehegua
Facilisis en aliquet nisl de pretio rehegua
Nulla volutpat aliquam rehegua
- Fasello iaculis neque rehegua
- Purus sodales ultricies rehegua
- Vestibulo laoreet porttitor sem rehegua
- Ac tristique libero volutpat rehegua
Faucibus porta lacus fringilla vel rehegua
Aenegua oguapy amet erat nunc
Eget porttitor lorem rehegua

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

En línea rehegua

Eipe'a peteĩ lista bala ha emoĩ michĩmi tesape marginmokõi clase ñembojoaju reheve, .list-inlineha .list-inline-item.

Lorem ipsum rehegua
Fasello iaculis rehegua
Nulla volutpat rehegua

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

Euismod rehegua

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

Donec id elit ndaha'éiva mi porta gravida eget metus-pe.

Malesuada porta rehegua

Etiam porta sem malesuada magna mollis euismod rehegua.

Término oñembotýva oñembotýma

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

Nidación rehegua

Lista de definición anidado rehegua: Posuere eneo, 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 ombohováiva

Tipografía ombohováiva oñeꞌehína escala jehaipyre ha componente-kuéra rehe oñemboheko rei rupi umi elemento ypykue rehegua font-sizepeteĩ serie de consultas medios ryepýpe. Bootstrap ndojapói kóva ndéve g̃uarã, ha katu ndahasyiete remoĩ hag̃ua reikotevẽramo.

Ko'ápe oî peteî techapyrã práctica-pe. Eiporavo oimeraẽva font-sizes ha medios de comunicación consulta reipotáva.

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