Tipografie

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

Op hierdie bladsy

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

html

<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

html

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

Vertoon 1

Vertoon 2

Vertoon 3

Vertoon 4

Vertoon 5

Vertoon 6

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

Vertoonopskrifte word gekonfigureer via die $display-font-sizesSass-kaart en twee veranderlikes, $display-font-weighten $display-line-height.

Vertoonopskrifte is aanpasbaar via twee veranderlikes, $display-font-familyen $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lood

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

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

html

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

html

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

Pasop dat daardie etikette vir semantiese doeleindes gebruik moet word:

verteenwoordig teks wat gemerk of uitgelig is vir verwysings- of notasiedoeleindes.
verteenwoordig kant-opmerkings en kleinskrif, soos kopiereg en wetlike teks.
<s>verteenwoordig element wat nie meer relevant of nie meer akkuraat is nie.
verteenwoordig 'n span van inlyn teks wat weergegee moet word op 'n manier wat aandui dat dit 'n nie-tekstuele annotasie het.

As jy jou teks wil stileer, moet jy eerder die volgende klasse gebruik:

.marksal dieselfde style toepas as .
.smallsal dieselfde style toepas as .
.text-decoration-underlinesal dieselfde style toepas as .
.text-decoration-line-throughsal dieselfde style toepas as <s>.

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

Tekshulpmiddels

Verander teksbelyning, transformeer, styl, gewig, lynhoogte, versiering 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

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.

html

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

Benoem 'n bron

Die HTML-spesifikasie vereis dat blokaanhalingstoeskrywing buite die <blockquote>. Wanneer u erkenning verskaf, draai u <blockquote>in 'n toe <figure>en gebruik 'n <figcaption>of 'n blokvlakelement (bv. ) saam met die .blockquote-footerklas. Maak seker dat jy die naam van die bronwerk <cite>ook invou.

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

html

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

Belyning

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

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

html

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

'n Bekende aanhaling, vervat in 'n blokaanhalingselement.

html

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

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.

html

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

html

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

html

<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

In Bootstrap 5 het ons by verstek responsiewe lettertipegroottes geaktiveer, sodat teks meer natuurlik kan skaal oor toestel- en kykpoortgroottes. Kyk na die RFS-bladsy om uit te vind hoe dit werk.

Sass

Veranderlikes

Opskrifte het 'n paar toegewyde veranderlikes vir grootte en spasiëring.

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

Diverse tipografie-elemente wat hier en in Reboot behandel word , het ook toegewyde veranderlikes.

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mengsels

Daar is geen toegewyde mengsels vir tipografie nie, maar Bootstrap gebruik wel Responsive Font Sizing (RFS) .