Tipografie

Dokumentasie en voorbeelde vir Bootstrap-tipografie, insluitend globale instellings, opskrifte, hoofteks, lyste, en meer.

Globale instellings

Bootstrap stel basiese globale vertoon-, tipografie- en skakelstyle. Wanneer meer beheer nodig is, kyk na die tekstuele nutsklasse .

Gebruik 'n inheemse lettertipestapel wat die beste font-familyvir elke bedryfstelsel en toestel kies.
Vir 'n meer inklusiewe en toeganklike tipe skaal, gebruik ons die blaaier se verstek wortel font-size(tipies 16px) sodat besoekers hul blaaier verstek kan pasmaak soos nodig.
Gebruik die $font-family-base, $font-size-base, en $line-height-basekenmerke as ons tipografiese basis toegepas op die <body>.
Stel die globale skakelkleur via $link-coloren pas skakelonderstrepe slegs toe op :hover.
Gebruik $body-bgom 'n background-colorop die <body>( #fffby verstek) te stel.

Hierdie style kan binne gevind word _reboot.scss, en die globale veranderlikes word gedefinieer in _variables.scss. Maak seker dat jy instel $font-size-base.rem

Opskrifte

Alle HTML-opskrifte, <h1>deur <h6>, is beskikbaar.

Opskrif	Voorbeeld
`<h1></h1>`	h1. Bootstrap opskrif
`<h2></h2>`	h2. Bootstrap opskrif
`<h3></h3>`	h3. Bootstrap opskrif
`<h4></h4>`	h4. Bootstrap opskrif
`<h5></h5>`	h5. Bootstrap opskrif
`<h6></h6>`	h6. Bootstrap opskrif

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

.h1deur .h6-klasse is ook beskikbaar, vir wanneer jy die fontstilering van 'n opskrif wil pas, maar nie die gepaardgaande HTML-element kan gebruik nie.

h1. Bootstrap opskrif

h2. Bootstrap opskrif

h3. Bootstrap opskrif

h4. Bootstrap opskrif

h5. Bootstrap opskrif

h6. Bootstrap opskrif

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

Pasmaak opskrifte

Gebruik die ingeslote nutsklasse om die klein sekondêre opskrifteks van Bootstrap 3 te herskep.

Fancy vertoonopskrif Met vervaagde sekondêre teks

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

Vertoon opskrifte

Tradisionele opskrifelemente is ontwerp om die beste te werk in die vleis van jou bladsy-inhoud. Wanneer jy 'n opskrif nodig het om uit te staan, oorweeg dit om 'n vertoonopskrif te gebruik —'n groter, effens meer eiesinnige opskrifstyl. Hou in gedagte dat hierdie opskrifte nie by verstek reageer nie, maar dit is moontlik om responsiewe lettergroottes te aktiveer .

Vertoon 1

Vertoon 2

Vertoon 3

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

Lood

Laat 'n paragraaf uitstaan deur by te voeg .lead.

Dit is 'n hoofparagraaf. Dit staan uit van gewone paragrawe.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Inlyn tekselemente

Stilering vir algemene inlyn HTML5-elemente.

Jy kan die merk tag gebruik omuitligteks.

~~Hierdie teksreël is bedoel om as geskrapte teks hanteer te word.~~

~~Hierdie teksreël is bedoel om as nie meer akkuraat beskou te word nie.~~

Hierdie teksreël is bedoel om as 'n toevoeging tot die dokument hanteer te word.

Hierdie teksreël sal weergegee word soos onderstreep

Hierdie teksreël is bedoel om as fynskrif hanteer te word.

Hierdie reël is as vetgedrukte teks weergegee.

Hierdie reël is as kursief gedrukte teks weergegee.

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

.marken .smallklasse is ook beskikbaar om dieselfde style toe te pas as <mark>en <small>terwyl enige ongewenste semantiese implikasies wat die etikette sou meebring vermy word.

Alhoewel dit nie hierbo getoon word nie, gebruik gerus <b>en <i>in HTML5. <b>is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>dit meestal vir stem, tegniese terme, ens.

Tekshulpmiddels

Verander teksbelyning, transformeer, styl, gewig en kleur met ons tekshulpmiddels en kleurhulpmiddels .

Afkortings

Gestileerde implementering van HTML se <abbr>element vir afkortings en akronieme om die uitgebreide weergawe te wys op hover. Afkortings het 'n verstek-onderstreep en kry 'n hulpwyser om addisionele konteks te verskaf wanneer jy beweeg en aan gebruikers van ondersteunende tegnologieë.

Voeg .initialismby 'n afkorting vir 'n effens kleiner lettergrootte.

attr

HTML

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

Blokaanhalings

Vir die aanhaling van blokke inhoud van 'n ander bron in jou dokument. Draai <blockquote class="blockquote">enige HTML om as die aanhaling.

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

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

Benoem 'n bron

Voeg 'n <footer class="blockquote-footer">by om die bron te identifiseer. Draai die naam van die bronwerk in <cite>.

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

Iemand bekend in Brontitel

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

Belyning

Gebruik tekshulpmiddels soos nodig om die belyning van jou blokaanhaling te verander.

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

Iemand bekend in Brontitel

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

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

Iemand bekend in Brontitel

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

Lyste

Ongestileer

Verwyder die verstek- list-styleen linkerkantlyn op lysitems (slegs onmiddellike kinders). Dit is slegs van toepassing op onmiddellike kinders se lysitems , wat beteken dat jy die klas vir enige geneste lyste ook moet byvoeg.

Dit is 'n lys.
Dit lyk heeltemal ongestyleerd.
Struktureel is dit steeds 'n lys.
Hierdie styl is egter net van toepassing op onmiddellike kinderelemente.
Geneste lyste:
- word nie deur hierdie styl beïnvloed nie
- sal steeds 'n koeël wys
- en het toepaslike linkerkantlyn
Dit kan in sommige situasies steeds handig te pas kom.

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

In lyn

Verwyder 'n lys se koeëls en pas bietjie lig toe marginmet 'n kombinasie van twee klasse, .list-inlineen .list-inline-item.

Dit is 'n lysitem.
En nog een.
Maar hulle word inlyn vertoon.

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

Beskrywing lys belyning

Belyn terme en beskrywings horisontaal deur ons roosterstelsel se voorafbepaalde klasse (of semantiese mengsels) te gebruik. Vir langer termyne kan jy opsioneel 'n .text-truncateklas byvoeg om die teks met 'n ellips af te kap.

Beskrywing lyste

'n Beskrywingslys is perfek om terme te definieer.

Termyn

Definisie vir die term.

En nog 'n plekhouer definisie teks.

Nog 'n term

Hierdie definisie is kort, dus geen ekstra paragrawe of iets nie.

Afgekapte term is afgekap

Dit kan nuttig wees as die spasie min is. Voeg 'n ellips aan die einde by.

Nestel

Geneste definisielys: Ek het gehoor jy hou van definisielyste. Laat ek 'n definisielys in jou definisielys plaas.

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

Responsiewe lettergroottes

Vanaf v4.3.0 word Bootstrap gestuur met die opsie om responsiewe lettergroottes moontlik te maak, sodat teks meer natuurlik kan skaal oor toestel- en viewport-groottes. RFS kan geaktiveer word deur die $enable-responsive-font-sizesSass-veranderlike te verander na trueen Bootstrap te hersaamstel.

Om RFS te ondersteun , gebruik ons 'n Sass mixin om ons normale font-sizeeienskappe te vervang. Responsiewe lettergroottes sal saamgestel word in calc()funksies met 'n mengsel van remen viewport-eenhede om die responsiewe skaalgedrag moontlik te maak. Meer oor RFS en sy konfigurasie kan gevind word op sy GitHub-bewaarplek .