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 uzas la defaŭltan radikon de la retumilo font-size(tipe 16px) por ke vizitantoj povu agordi siajn retumilon defaŭltajn 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>

Agordado 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. Memoru, ke ĉi tiuj titoloj ne respondas defaŭlte, sed eblas ebligi respondajn tipargrandojn .

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.

Ĉi tio estas gvida alineo. Ĝi elstaras el regulaj alineoj.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Bonkonata citaĵo, enhavita en blokcita elemento.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Nomante fonton

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

Bonkonata citaĵo, enhavita en blokcita elemento.

Iu fama en Fonta Titolo

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

Vicigo

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

Bonkonata citaĵo, enhavita en blokcita elemento.

Iu fama en Fonta Titolo

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

Bonkonata citaĵo, enhavita en blokcita elemento.

Iu fama en Fonta Titolo

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

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.

Ĉi tio estas listo.
Ĝi aperas tute senstila.
Strukture, ĝi ankoraŭ estas listo.
Tamen ĉi tiu stilo nur validas por tujaj infanaj elementoj.
Nestitaj listoj:
- estas netuŝitaj de ĉi tiu stilo
- ankoraŭ montros kuglon
- kaj havas taŭgan maldekstran marĝenon
Ĉi tio ankoraŭ povas esti utila en iuj situacioj.

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

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

Ĉi tio estas listo.
Kaj alia.
Sed ili estas montrataj enlinie.

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

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.

Terminon

Difino por la termino.

Kaj iom pli da lokokupilo difinteksto.

Alia termino

Ĉi tiu difino estas mallonga, do neniuj kromaj alineoj aŭ io ajn.

Detranĉita termino estas detranĉita

Ĉi tio povas esti utila kiam spaco estas malvasta. Aldonas elipson ĉe la fino.

Nestumado

Nestita difina listo: Mi aŭdis, ke vi ŝatas difinlistojn. Permesu al mi meti difinliston en vian difinliston.

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

Respondema tipargrandoj

Ekde v4.3.0, Bootstrap ekspediĝas kun la opcio por ebligi respondemajn tipargrandojn, permesante al teksto skali pli nature tra aparato kaj vidfenestrograndoj. RFS povas esti ebligita ŝanĝante la $enable-responsive-font-sizesvariablon Sass al truekaj rekompilante Bootstrap.

Por subteni RFS , ni uzas Sass-miksaĵon por anstataŭigi niajn normalajn font-sizeecojn. Respondema tipargrandoj estos kompilitaj en calc()funkcioj kun miksaĵo de remkaj vidportunuoj por ebligi la respondema skalkonduto. Pli pri RFS kaj ĝia agordo troveblas sur ĝia GitHub-deponejo .