Typographie
Dokumentatioun an Beispiller fir Bootstrap Typographie, dorënner global Astellungen, Rubriken, Kierpertext, Lëschten, a méi.
Global Astellungen
Bootstrap setzt Basis global Display, Typographie a Linkstiler. Wann méi Kontroll gebraucht gëtt, kuckt d' textuell Utility Klassen .
- Benotzt e gebiertege Schrëftstack deen dat Bescht
font-family
fir all OS an Apparat auswielt. - Fir eng méi inklusiv an zougänglech Typ Skala, mir huelen un d'Browser Standardroot
font-size
(typesch 16px) sou datt d'Besucher hir Browser-Defaults wéi néideg personaliséiere kënnen. - Benotzt d'
$font-family-base
,$font-size-base
, an$line-height-base
Attributer wéi eis typographesch Basis op d'<body>
. - Setzt d'global Linkfaarf iwwer
$link-color
a gëllen de Link ënnersträicht nëmmen op:hover
. - Benotzt
$body-bg
fir enbackground-color
op der<body>
(#fff
Standard) ze setzen.
Dës Stiler kënnen bannent fonnt ginn _reboot.scss
, an déi global Verännerlechen sinn definéiert an _variables.scss
. Vergewëssert Iech ze $font-size-base
setzen rem
.
Rubriken
All HTML Rubriken, <h1>
duerch <h6>
, sinn verfügbar.
Rubrik | Beispill |
---|---|
|
h1. Bootstrap Rubrik |
|
h2 vun. Bootstrap Rubrik |
|
h3 vun. Bootstrap Rubrik |
|
h4 vun. Bootstrap Rubrik |
|
h5. Bootstrap Rubrik |
|
h6. Bootstrap Rubrik |
.h1
duerch .h6
Klassen sinn och sinn, fir wann Dir der Schrëft Styling vun enger Rubrik ze Match wëllt, mee kann net déi verbonne HTML Element benotzen.
h1. Bootstrap Rubrik
h2 vun. Bootstrap Rubrik
h3 vun. Bootstrap Rubrik
h4 vun. Bootstrap Rubrik
h5. Bootstrap Rubrik
h6. Bootstrap Rubrik
Personnalisatioun vun Rubriken
Benotzt déi abegraff Utility Klassen fir de klenge sekundären Iwwerschrëfttext vum Bootstrap 3 nei ze kreéieren.
Fantastesch Affichage-Rubrik Mat verschwonnenen sekundären Text
Affichéieren Rubriken
Traditionell Rubrikelementer sinn entwéckelt fir am Beschten am Fleesch vun Ärem Säitinhalt ze schaffen. Wann Dir e Rubrik braucht fir erauszekommen, betruecht d'Benotzung vun engem Display-Rubrik - e gréisseren, e bësse méi Meenungsäusserungsstil. Bedenkt datt dës Rubriken net als Standard reaktiounsfäeger sinn, awer et ass méiglech reaktiounsfäeger Schrëftgréissten z'aktivéieren .
Display 1 |
Display 2 |
Display 3 |
Display 4 |
Féierung
Maacht e Paragraf erausstinn andeems Dir bäidréit .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Inline Text Elementer
Styling fir gemeinsam Inline HTML5 Elementer.
Dir kënnt d'Mark Tag benotzen firHighlightText.
Dës Zeil vum Text soll als geläscht Text behandelt ginn.
Dës Linn vum Text soll als net méi korrekt behandelt ginn.
Dës Zeil vum Text soll als Zousaz zum Dokument behandelt ginn.
Dës Zeil vum Text gëtt wéi ënnersträicht
Dës Zeil vum Text soll als Feindréck behandelt ginn.
Dës Linn gëtt als fett Text gemaach.
Dës Linn gëtt als Kursiv Text gemaach.
.mark
a .small
Klassen sinn och verfügbar fir déiselwecht Stiler z'applizéieren wéi <mark>
a <small>
wärend all ongewollt semantesch Implikatioune vermeit déi d'Tags bréngen.
Wärend net hei uewen gewisen, fille sech gratis ze benotzen <b>
an <i>
an HTML5. <b>
ass geduecht fir Wierder oder Ausdréck ze markéieren ouni zousätzlech Wichtegkeet ze vermëttelen wärend <i>
et meeschtens fir Stëmm, technesch Begrëffer, asw.
Text Utilities
Ännert Textausrichtung, transforméiert, Stil, Gewiicht a Faarf mat eisen Text Utilities a Faarf Utilities .
Ofkierzungen
Stiliséierter Implementatioun vum HTML <abbr>
Element fir Ofkierzungen an Akronyme fir déi erweidert Versioun um Hover ze weisen. Ofkierzungen hunn eng Default-Ënnerstëtzung a kréien en Hëllefscursor fir zousätzlech Kontext beim Hover a fir Benotzer vun Hëllefstechnologien ze bidden.
Füügt .initialism
eng Ofkierzung fir eng liicht méi kleng Schrëftgréisst.
attr
HTML
Blockquotes
Fir Blocken Inhalt vun enger anerer Quell an Ärem Dokument ze zitéieren. Wickelt <blockquote class="blockquote">
all HTML als Zitat ëm.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Eng Quell benennen
Füügt e <footer class="blockquote-footer">
fir d'Quell z'identifizéieren. Wickelt den Numm vun der Quellaarbecht an <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Ausriichtung
Benotzt Text Utilities wéi néideg fir d'Ausrichtung vun Ärem Blockquote z'änneren.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lëschten
Unstyled
Ewechzehuelen de Standard list-style
a lénks Marge op Lëscht Artikelen (nëmmen direkt Kanner). Dëst gëllt nëmme fir direkt Kannerlëscht Elementer , dat heescht datt Dir d'Klass och fir all nested Lëschte derbäi musst.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem bei massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
An der Schlaang
Ewechzehuelen eng Lëscht d'Kugel an applizéiert e bësse Liicht margin
mat enger Kombinatioun vun zwou Klassen, .list-inline
an .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Beschreiwung Lëscht Ausriichtung
Alignéiere Begrëffer a Beschreiwunge horizontal andeems Dir de virdefinéierte Klassen vun eisem Gittersystem (oder semantesche Mixins) benotzt. Fir méi laang Begrëffer, kënnt Dir optional eng .text-truncate
Klass derbäi fir den Text mat enger Ellipsis ze truncéieren.
- Beschreiwung Lëschte
- Eng Beschreiwungslëscht ass perfekt fir Begrëffer ze definéieren.
- Euismod
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Ofkierzte Begrëff ass ofgeschnidden
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Nesting
-
- Nested Definitioun Lëscht
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Reaktiounsfäeger Schrëftgréissten
Vun v4.3.0, Bootstrap Schëffer mat der Optioun reaktiounsfäeger Schrëftgréissten z'erméiglechen, erlaabt Text méi natierlech iwwer Apparat an viewport Gréissten ze skala. RFS kann aktivéiert ginn andeems Dir d' $enable-responsive-font-sizes
Sass Variabel ännert true
an d'Bootstrap nei kompiléiert.
Fir RFS z'ënnerstëtzen , benotze mir e Sass Mixin fir eis normal font-size
Eegeschaften ze ersetzen. Reaktiounsfäeger Schrëftgréissten ginn a calc()
Funktiounen zesummegesat mat enger Mëschung vun rem
a Viewport Eenheeten fir de reaktiounsfäeger Skaléierungsverhalen z'erméiglechen. Méi iwwer RFS a seng Konfiguratioun kann op sengem GitHub Repository fonnt ginn .