Typografi
Dokumentasjon og eksempler for Bootstrap-typografi, inkludert globale innstillinger, overskrifter, brødtekst, lister og mer.
Globale innstillinger
Bootstrap setter grunnleggende globale visnings-, typografi- og lenkestiler. Når mer kontroll er nødvendig, sjekk ut tekstverktøyklassene .
- Bruk en innebygd fontstabel som velger det beste
font-family
for hvert operativsystem og enhet. - For en mer inkluderende og tilgjengelig typeskala antar vi nettleserens standardrot
font-size
(vanligvis 16px) slik at besøkende kan tilpasse nettleserstandardene etter behov. - Bruk
$font-family-base
,$font-size-base
, og$line-height-base
attributtene som vår typografiske base brukt på<body>
. - Angi den globale koblingsfargen via
$link-color
og bruk lenkeunderstreking kun på:hover
. - Bruk
$body-bg
for å sette abackground-color
på<body>
(#fff
som standard).
Disse stilene kan finnes i _reboot.scss
, og de globale variablene er definert i _variables.scss
. Sørg for å sette $font-size-base
inn rem
.
Overskrifter
Alle HTML-overskrifter, <h1>
gjennom <h6>
, er tilgjengelige.
Overskrift | Eksempel |
---|---|
|
h1. Bootstrap-overskrift |
|
h2. Bootstrap-overskrift |
|
h3. Bootstrap-overskrift |
|
h4. Bootstrap-overskrift |
|
h5. Bootstrap-overskrift |
|
h6. Bootstrap-overskrift |
.h1
gjennom .h6
-klasser er også tilgjengelige når du ønsker å matche skriftstilen til en overskrift, men ikke kan bruke det tilknyttede HTML-elementet.
h1. Bootstrap-overskrift
h2. Bootstrap-overskrift
h3. Bootstrap-overskrift
h4. Bootstrap-overskrift
h5. Bootstrap-overskrift
h6. Bootstrap-overskrift
Tilpasse overskrifter
Bruk de inkluderte verktøyklassene til å gjenskape den lille sekundære overskriftsteksten fra Bootstrap 3.
Fancy displayoverskrift Med falmet sekundærtekst
Vis overskrifter
Tradisjonelle overskriftselementer er designet for å fungere best i innholdet på siden din. Når du trenger en overskrift for å skille seg ut, bør du vurdere å bruke en visningsoverskrift – en større, litt mer egensinnet overskriftsstil. Husk at disse overskriftene ikke er responsive som standard, men det er mulig å aktivere responsive skriftstørrelser .
Skjerm 1 |
Skjerm 2 |
Skjerm 3 |
Skjerm 4 |
Lede
Få et avsnitt til å skille seg ut ved å legge til .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, er ikke commodo luctus.
Innebygde tekstelementer
Styling for vanlige innebygde HTML5-elementer.
Du kan bruke merkelappen tilfremhevetekst.
Denne tekstlinjen er ment å bli behandlet som slettet tekst.
Denne tekstlinjen er ment å bli behandlet som ikke lenger nøyaktig.
Denne tekstlinjen er ment å bli behandlet som et tillegg til dokumentet.
Denne tekstlinjen vil gjengis som understreket
Denne tekstlinjen er ment å bli behandlet som liten skrift.
Denne linjen gjengitt som fet tekst.
Denne linjen gjengitt som kursiv tekst.
.mark
og .small
klasser er også tilgjengelige for å bruke de samme stilene som <mark>
og <small>
samtidig som man unngår uønskede semantiske implikasjoner som taggene vil medføre.
Selv om det ikke er vist ovenfor, bruk gjerne <b>
og <i>
i HTML5. <b>
er ment å fremheve ord eller setninger uten å formidle ekstra betydning, mens <i>
det er mest for stemme, tekniske termer, etc.
Tekstverktøy
Endre tekstjustering, transformer, stil, vekt og farge med våre tekstverktøy og fargeverktøy .
Forkortelser
Stilisert implementering av HTMLs <abbr>
element for forkortelser og akronymer for å vise den utvidede versjonen ved sveving. Forkortelser har en standard understreking og får en hjelpemarkør for å gi ekstra kontekst ved pekeren og til brukere av hjelpeteknologier.
Legg .initialism
til en forkortelse for en litt mindre skriftstørrelse.
attr
HTML
Blockquotes
For å sitere blokker med innhold fra en annen kilde i dokumentet ditt. Pakk <blockquote class="blockquote">
rundt hvilken som helst HTML som sitatet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Navngi en kilde
Legg til en <footer class="blockquote-footer">
for å identifisere kilden. Pakk inn navnet på kildeverket i <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Justering
Bruk tekstverktøy etter behov for å endre justeringen av blokkanførselen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltall posuere erat en ante.
Lister
Ustilt
Fjern standardmargen list-style
og venstremargen på listeelementer (kun umiddelbare underordnede). Dette gjelder bare for umiddelbare barnelisteelementer , noe som betyr at du også må legge til klassen for alle nestede lister.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis i pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat kl
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
På linje
Fjern en listes kuler og bruk litt lys margin
med en kombinasjon av to klasser, .list-inline
og .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Justering av beskrivelsesliste
Juster termer og beskrivelser horisontalt ved å bruke rutenettsystemets forhåndsdefinerte klasser (eller semantiske blandinger). For lengre perioder kan du eventuelt legge til en .text-truncate
klasse for å avkorte teksten med en ellipse.
- Beskrivelseslister
- En beskrivelsesliste er perfekt for å definere begreper.
- 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.
- Avkortet begrep er avkortet
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Hekking
-
- Nestet definisjonsliste
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsive skriftstørrelser
Bootstrap v4.3 leveres med muligheten til å aktivere responsive skriftstørrelser, slik at tekst kan skaleres mer naturlig på tvers av enhets- og visningsportstørrelser. RFS kan aktiveres ved å endre $enable-responsive-font-sizes
Sass-variabelen til true
og rekompilere Bootstrap.
For å støtte RFS bruker vi en Sass mixin for å erstatte våre vanlige font-size
egenskaper. Responsive skriftstørrelser vil bli kompilert til calc()
funksjoner med en blanding av rem
og viewport-enheter for å aktivere responsiv skalering. Mer om RFS og dens konfigurasjon finner du på GitHub-depotet .