Source

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, aanvaar ons die blaaier 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.

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.

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

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 binne jou dokument. Draai <blockquote class="blockquote">enige HTML om as die aanhaling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel

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

Belyning

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel

<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. Heelgetal posuere erat 'n ante.

Iemand bekend in Brontitel

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

Lyste

Ongestileer

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

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

In lyn

Verwyder 'n lys se koeëls en pas bietjie lig toe marginmet 'n kombinasie van twee klasse, .list-inlineen .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>

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.

Euismod

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

Donec id elit non mi porta gravida by eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Afgekapte term is afgekap

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

Nestel

Geneste definisielys: 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>

Responsiewe tipografie

Responsiewe tipografie verwys na die skaal van teks en komponente deur bloot die wortelelement s'n font-sizebinne 'n reeks medianavrae aan te pas. Bootstrap doen dit nie vir jou nie, maar dit is redelik maklik om by te voeg as jy dit nodig het.

Hier is 'n voorbeeld daarvan in die praktyk. Kies enige font-sizes en media navrae wat jy wil.

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