Typographia
Documenta et exempla pro Bootstrap typography, incluso globali occasus, capita, textus corporis, tabulae et plura.
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-family
cuique OS et fabrica eligit. - Ad genus magis inclusive et accessibile scale, radicem navigatoris default (typice 16px) utimur,
font-size
ut visitatores suos defaltis navigatri sicut opus est. - Utere
$font-family-base
,$font-size-base
et$line-height-base
attributis nostris basi typographicis applicatis<body>
. - Color ligamentum globalem pone via
$link-color
et nexum modo in luce collocare:hover
. - Utere
$body-bg
ut ponasbackground-color
super<body>
(#fff
per defaltam).
Hi styli intus reperiri possunt _reboot.scss
, et variabiles globales definiuntur _variables.scss
. Fac ut $font-size-base
in 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>
.h1
per .h6
classes quoque 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
<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
Classes inclusae utilitates utere ad recreandum textum parvum secundarium e Bootstrap.
Ludo ostentationem capite Cum defluxit secundarium illud
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
Propono capitulorum
Traditional heading elements are designed to work best in the meat of your page content. Cum titulo eminendi opus est, considera utens ostentatione capitis —maiore, paullo magis sententiae stylo sententiae. Meminerint haec capita non responsabilia per defaltam, sed possibile est ut respondeant magnitudinum fontium .
Ostendere 1 |
Ostendere 2 |
Ostendere 3 |
Ostendere 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>
Plumbum
Fac a paragrapho stare addendo .lead
.
Haec para- plumbea est. E regularibus paragraphis eminet.
<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 iam accurate tractari destinatur.
Haec linea textui ad documentum additamentum tractari destinatur.
Haec linea textus reddet sicut fucosa
Hic linea textus intelligitur ut subtiliter imprimatur.
This line rendered as bold text.
Hic versus textum cursivis redditum est.
<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>
.mark
et .small
classes quoque praesto sunt eosdem stylos adhibere <mark>
ac <small>
evitando quaslibet semanticos implicationes inutiles quas in tags ferret.
Dum non supra, libenter uti <b>
et <i>
in HTML5. <b>
intelligitur exaggerare verba vel phrases sine importatione additi momenti dum <i>
is mostly for vox, technica, etc.
Textus utilitates
Mutare textum alignment, transform, stilum, pondus et colorem 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 .initialism
abbreviationem pro fontium magnitudine paulo minore.
attr
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.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
Nomen fons
Adde <footer class="blockquote-footer">
ad cognoscendum fontem. Nomen principii operis in involve <cite>
.
Nota auctoritas, in clausula elemento contenta.
<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>
Gratia diei et noctis
Utere textu utilitatum quae opus est ad mutandae noctis tuae stipes.
Nota auctoritas, in clausula elemento contenta.
<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>
Nota auctoritas, in clausula elemento contenta.
<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>
Lists
Unstyled
Aufer default list-style
et left margin in lista (immediate tantum parvuli). 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, index 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 nonnullis adiunctis expeditum venire potest.
<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 margin
cum duobus generibus compositum, .list-inline
et .list-inline-item
.
- Item index est.
- Et alia alia.
- Sed inline monstrantur.
<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
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate
class to truncate the text with an ellipsis.
- Description lists
- A description list is perfect for defining terms.
- Term
-
Definition for the term.
And some more placeholder definition text.
- Another term
- This definition is short, so no extra paragraphs or anything.
- Truncated term is truncated
- This can be useful when space is tight. Adds an ellipsis at the end.
- Nesting
-
- Nested definition list
- I heard you like definition lists. Let me put a definition list inside your definition list.
<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>
Responsive font sizes
As of v4.3.0, Bootstrap naves cum optione ut magnitudinum fontium responsivarum valeant, textum permittens ut trans machinas et magnitudinum prospectum naturaliter ascendat. RFS Possibile est mutare $enable-responsive-font-sizes
variabiles Sass true
et Bootstrap componi.
Ad RFS sustinendum , Sass mixin utimur ad font-size
proprietates normales reponendas. Magnitudinum fontium Responsivorum in calc()
functionibus compiscenda erunt cum mixto rem
et prospectu iunctorum ut mores congruentes efficere possint. Plura de RFS eiusque configuratione in promptuario GitHub inveniri possunt .