Source

Tipografio

Dokumentado kaj ekzemploj por Bootstrap-tipografio, inkluzive de tutmondaj agordoj, titoloj, korpa teksto, listoj kaj pli.

Tutmondaj agordoj

Bootstrap starigas bazajn tutmondajn ekranajn, tipografiojn kaj ligajn stilojn. Kiam pli da kontrolo necesas, kontrolu la tekstajn utilajn klasojn .

Uzu denaskan tiparon , kiu elektas la plej bonan font-familypor ĉiu OS kaj aparato.
Por pli inkluziva kaj alirebla tipskalo, ni supozas la defaŭltan radikon de la retumilo font-size(tipe 16 px) por ke vizitantoj povu agordi siajn defaŭltajn retumilon laŭbezone.
Uzu la $font-family-base, $font-size-base, kaj $line-height-baseatributojn kiel nian tipografian bazon aplikitan al la <body>.
Agordu la tutmondan ligan koloron per $link-colorkaj apliku ligilsubstrekojn nur ĉe :hover.
Uzu $body-bgpor agordi background-colorsur la <body>( #fffdefaŭlte).

Ĉi tiuj stiloj troviĝas ene de _reboot.scss, kaj la tutmondaj variabloj estas difinitaj en _variables.scss. Certiĝu $font-size-baseeniri rem.

Titoloj

Ĉiuj HTML-titoloj, <h1>tra <h6>, estas haveblaj.

Titolo	Ekzemplo
`<h1></h1>`	h1. Bootstrap-titolo
`<h2></h2>`	h2. Bootstrap-titolo
`<h3></h3>`	h3. Bootstrap-titolo
`<h4></h4>`	h4. Bootstrap-titolo
`<h5></h5>`	h5. Bootstrap-titolo
`<h6></h6>`	h6. Bootstrap-titolo

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

.h1tra .h6klasoj ankaŭ disponeblas, por kiam vi volas kongrui kun la tiparo de titolo sed ne povas uzi la rilatan HTML-elementon.

h1. Bootstrap-titolo

h2. Bootstrap-titolo

h3. Bootstrap-titolo

h4. Bootstrap-titolo

h5. Bootstrap-titolo

h6. Bootstrap-titolo

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

Agordo de titoloj

Uzu la inkluzivitajn utilajn klasojn por rekrei la malgrandan sekundaran titolon tekston de Bootstrap 3.

Fantazia montra titolo Kun paliĝinta sekundara teksto

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Montru titolojn

Tradiciaj titolelementoj estas dizajnitaj por funkcii plej bone en la viando de via paĝa enhavo. Kiam vi bezonas titolon por elstari, konsideru uzi montran titolon — pli grandan, iomete pli opinietan titolon.

Montro 1

Montro 2

Montro 3

Montro 4

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

Plumbo

Elstarigu alineon aldonante .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Enliniaj tekstaj elementoj

Stilado por komunaj enliniaj HTML5 elementoj.

Vi povas uzi la marketikedon porreliefigiteksto.

~~Ĉi tiu linio de teksto estas traktata kiel forigita teksto.~~

~~Ĉi tiu linio de teksto estas traktata kiel ne plu preciza.~~

Ĉi tiu linio de teksto estas traktata kiel aldono al la dokumento.

Ĉi tiu linio de teksto prezentiĝos kiel substrekita

Ĉi tiu linio de teksto estas intencita esti traktata kiel bela preskribo.

Ĉi tiu linio prezentita kiel grasa teksto.

Ĉi tiu linio bildigita kiel kursiva teksto.

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

.markkaj .smallklasoj ankaŭ disponeblas por apliki la samajn stilojn kiel <mark>kaj <small>evitante ajnajn nedeziratajn semantikajn implicojn, kiujn la etikedoj alportus.

Kvankam ne montrite supre, bonvolu uzi <b>kaj <i>en HTML5. <b>celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon dum <i>estas plejparte por voĉo, teknikaj terminoj ktp.

Tekstaj utilecoj

Ŝanĝu tekstan vicigon, transformu, stilon, pezon kaj koloron per niaj tekstaj utilecoj kaj koloraj utilecoj .

Mallongigoj

Stiligita efektivigo de HTML-a <abbr>elemento por mallongigoj kaj akronimoj por montri la vastigitan version sur ŝvebado. Mallongigoj havas defaŭltan substrekon kaj akiras helpkursoron por provizi plian kuntekston dum ŝvebado kaj al uzantoj de helpaj teknologioj.

Aldonu .initialismal mallongigo por iomete pli malgranda tiparo.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blokcitaĵoj

Por citado de enhavoblokoj de alia fonto ene de via dokumento. Envolvi <blockquote class="blockquote">ajnan HTML kiel la citaĵo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>

Nomante fonton

Aldonu <footer class="blockquote-footer">por identigi la fonton. Envolvu la nomon de la fontverko en <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iu fama en Fonta Titolo

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

Vicigo

Uzu tekstajn ilojn laŭbezone por ŝanĝi la vicigon de via blokcitaĵo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iu fama en Fonta Titolo

<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 sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Iu fama en Fonta Titolo

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

Listoj

Senstila

Forigu la defaŭltan list-stylekaj maldekstran marĝenon sur listaĵoj (nur tujaj infanoj). Ĉi tio validas nur por tujaj filaj listeroj , kio signifas, ke vi devos aldoni la klason ankaŭ por iuj nestitaj listoj.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit 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>

En linio

Forigu la kuglojn de listo kaj apliku iom da lumo marginkun kombinaĵo de du klasoj, .list-inlinekaj .list-inline-item.

Lorem ipsum
Phasellus iaculis
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>

Priskriblista vicigo

Vicigu terminojn kaj priskribojn horizontale uzante la antaŭdifinitajn klasojn de nia kradsistemo (aŭ semantikajn miksaĵojn). Por pli longaj terminoj, vi povas laŭvole aldoni .text-truncateklason por detranĉi la tekston per elipso.

Priskribolistoj

Priskriba listo estas perfekta por difini terminojn.

Euismod

Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Detranĉita termino estas detranĉita

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

Nestumado

Nestita difina listo: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

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

Respondema tipografio

Respondema tipografio rilatas al skalado de teksto kaj komponantoj simple alĝustigante la radikan elementon font-sizeene de serio de amaskomunikilaj demandoj. Bootstrap ne faras tion por vi, sed estas sufiĉe facile aldoni se vi bezonas ĝin.

Jen ekzemplo de ĝi en la praktiko. Elektu kiajn ajn font-sizekaj amaskomunikilajn demandojn vi deziras.

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