Typographia

Documenta et exempla pro Bootstrap typography, incluso globali occasus, capita, textus corporis, tabulae et plura.

In hac pagina

Global occasus

Bootstrap ponit basic global ostentationem, typographiam, stylos et nexus. Cum plus temperantia opus sit, rationes utilitatis textualis reprehendo .

BIBLIOTHECA fontis indigena utere, quae optimas font-familycuique OS et fabrica eligit.
Ad genus magis inclusive et accessibile scale, radicem navigatoris default (typice 16px) utimur, font-sizeut visitatores suos defaltis navigatri sicut opus est.
Utere $font-family-base, $font-size-baseet $line-height-baseattributis nostris basi typographicis applicatis <body>.
Color pone nexus globalis via $link-color.
Utere $body-bgut ponas background-colorsuper <body>( #fffper defaltam).

Hi styli intus reperiri possunt _reboot.scss, et variabiles globales definiuntur _variables.scss. Fac ut $font-size-basein rem.

Capitula

Omnia HTML capita, <h1>per <h6>, in promptu sunt.

Venantius Fortunatus	Exemplum
`<h1></h1>`	h1. Bootstrap capite
`<h2></h2>`	h2. Bootstrap capite
`<h3></h3>`	h3. Bootstrap capite
`<h4></h4>`	h4. Bootstrap capite
`<h5></h5>`	h5. Bootstrap capite
`<h6></h6>`	h6. Bootstrap capite

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

.h1per .h6classes etiam in promptu sunt, nam cum vis fonti styli capitis inserere, elementum HTML iuncta uti non potest.

h1. Bootstrap capite

h2. Bootstrap capite

h3. Bootstrap capite

h4. Bootstrap capite

h5. Bootstrap capite

h6. Bootstrap capite

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>

Customising capitulorum

Utere inclusa utilitate classes ad recreandum textum parvum secundarium e Bootstrap 3 .

Ludo ostentationem capite Cum defluxit secundarium illud

html

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

Propono capitulorum

Traditional heading elements are designed to work in the meat of your page content. Cum opus est ut emineat, specta utens ostentatione capitis —maiore, paulo magis sententiae stylo sententiae.

Ostendere 1

Ostendere 2

Ostendere 3

Ostendere 4

Exhibe 5

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

Proponere capita configurantur per $display-font-sizesmappam Sass et duas variabiles, $display-font-weightet $display-line-height.

Propono capita in customizabilia per duas variabiles, $display-font-familyet $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;

Plumbum

Fac a paragrapho stare addendo .lead.

Haec para- plumbea est. E regularibus paragraphis eminet.

html

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

Inline text elementa

Facies pro elementis communibus inline HTML5.

Signo tag to . uti poteshighlighttext.

~~Haec linea textui destinatur ut textus deletus tractandus sit.~~

~~Haec linea textus non iam accurate tractari destinatur.~~

Haec linea textui ad documentum additamentum tractari destinatur.

Haec linea textus reddet ut fucosa.

Hic linea textus intelligitur ut subtiliter imprimatur.

This line rendered as bold text.

Hic versus textum cursivis redditum est.

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>

Videte ut istae tags utantur ad semanticam rem;

significat illud quod notatum vel illustratur ad referat vel notatio proposita.
latus-commenta et parva impressio repraesentat, sicut librariae et textus iuris.
<s>significat elementum, quod non amplius pertinet vel non amplius accurate.
spatium inlinei textus repraesentat, quod ita exhibendum est ut indicat illam annotationem non textualem habere.

Si textum tuum edicere vis, his generibus loco utere debes:

.markidem erit ac .
.smallidem erit ac .
.text-decoration-underlineidem erit ac .
.text-decoration-line-throughidem erit ac <s>.

Donec non dictum est, commodo libero ac in HTML5. intelligitur exaggerare verba vel phrases sine importatione additi momenti, cum is mostly pro voce, technicis, etc.

Textus utilitates

Mutare textum alignment, transform, stilum, pondus, linea, altitudo, ornamentum et color cum textu utilitates et color utilitates .

Abbreviations

Exsecutio stylized <abbr>elementi HTML pro abbreviationibus et Acronym versionem amplificatam ostendere. Abbreviationes defaltam underline habent et cursorem adiuvant ut contextui addito in tabernus et utentibus technologiae adiuvandae praebeantur.

Adde .initialismabbreviationem pro fontium magnitudine paulo minore.

attr

HTML

html

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

Blockquotes

Adfers caudices contentorum aliunde intra documentum tuum. Circumcingere <blockquote class="blockquote">aliquem HTML ut auctoritas.

Nota auctoritas, in clausula elemento contenta.

html

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

Nomen fontem

HTML spec postulat ut stipes attributionis extra ponatur <blockquote>. Cum attributionem comparas, involve <blockquote>in a <figure>et utere <figcaption>vel truncum gradu elemento (exempli gratia ) cum .blockquote-footerclasse. Scitote nomen involvere auctoris operis <cite>tam.

Nota auctoritas, in clausula elemento contenta.

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>

Gratia diei et noctis

Utere textu utilitates prout opus est ad mutandam alignmentam stipendii tui.

Nota auctoritas, in clausula elemento contenta.

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>

Nota auctoritas, in clausula elemento contenta.

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>

Lists

Unstyled

Aufer default list-styleet left margin on list items (immediate parvuli tantum). Hoc solum ad infantes immediatos pertinet res enumerandas, id quod necesse est ut indices quoslibet tam nestosos addas.

Hoc est album.
Omnino nuda apparet.
Structure, album adhuc est.
Sed hic stylus nonnisi ad immediata infantis elementa pertinet.
Tabulae nested:
- serpunt ab hoc style
- et adhuc ostendam bullet
- et in margine oportet sinistram
Hoc adhuc in quibusdam adiunctis in promptu venit.

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>

Inline

Indicis glandes remove et lucem aliquam adhibe margincum duobus generibus compositum, .list-inlineet .list-inline-item.

Item index est.
Et alia alia.
Sed inline monstrantur.

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>

Description album alignment

Conlineare verbis ac descriptionibus horizontaliter utendo systematis nostri classi praefinitae classes (vel mixins semanticae). Ad longiora vocabula, optione classis addere potes .text-truncatetextum cum ellipsis truncatum.

Descriptio tabulae

Descriptio perfectus est ad definiendum terminos.

Term

Definitio pro termino.

Et quidam magis placeholder text definitionis.

Alius terminus

Haec definitio brevis est, ut neque extra paragraphos neque aliquid.

Truncus terminus mutilum

Hoc potest esse utile, cum spatium strictum est. Ellipsis addit in fine.

Nidificans

Nidificata definitio list: Audivi te similem definitionem tabularum. Ponam definitionem indicem intra tuam definitionem indicem.

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>

Responsivum font sizes

In Bootstrap 5, magnitudinum fontium responsivas per defaltam potuimus, textum permitteremus ut per notas et mensuras amplitudines magis naturaliter ascenderemus. Inspice RFS paginam ut cognoscas quomodo haec opera sint.

Sass

Variabilium

Capita quaedam variabilitates dedicaverunt ad inspectionem et spatium transmissionis.

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

Elementa miscellaneae typographiae hic et in Reboot obductae variabiles etiam dedicaverunt.

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

Mixins

There are no dedicated mixins for typography, but Bootstrap uses Responsive Font Sizing (RFS) .