Typografi
Dokumentation og eksempler til Bootstrap-typografi, herunder globale indstillinger, overskrifter, brødtekst, lister og mere.
Bootstrap indstiller grundlæggende global visning, typografi og linkstile. Når der er behov for mere kontrol, så tjek de tekstuelle hjælpeklasser .
- Brug en indbygget skrifttypestak, der vælger det bedste
font-family
til hvert operativsystem og hver enhed. - For en mere inkluderende og tilgængelig typeskala antager vi browserens standardrod
font-size
(typisk 16px), så besøgende kan tilpasse deres browserstandarder efter behov. - Brug
$font-family-base
,$font-size-base
, og$line-height-base
attributterne som vores typografiske base anvendt på<body>
. - Indstil den globale linkfarve via
$link-color
og anvend kun linkunderstregning på:hover
. - Brug
$body-bg
til at indstille abackground-color
på<body>
(#fff
som standard).
Disse stilarter kan findes i _reboot.scss
, og de globale variabler er defineret i _variables.scss
. Sørg for at sætte $font-size-base
ind rem
.
Alle HTML-overskrifter, <h1>
gennem <h6>
, er tilgængelige.
Overskrift | Eksempel |
---|---|
|
h1. Bootstrap overskrift |
|
h2. Bootstrap overskrift |
|
h3. Bootstrap overskrift |
|
h4. Bootstrap overskrift |
|
h5. Bootstrap overskrift |
|
h6. Bootstrap overskrift |
.h1
gennem .h6
-klasser er også tilgængelige, når du ønsker at matche skrifttypen på en overskrift, men ikke kan bruge det tilknyttede HTML-element.
h1. Bootstrap overskrift
h2. Bootstrap overskrift
h3. Bootstrap overskrift
h4. Bootstrap overskrift
h5. Bootstrap overskrift
h6. Bootstrap overskrift
Brug de medfølgende hjælpeklasser til at genskabe den lille sekundære overskriftstekst fra Bootstrap 3.
Traditionelle overskriftselementer er designet til at fungere bedst i indholdet på din side. Når du har brug for en overskrift, der skiller sig ud, kan du overveje at bruge en visningsoverskrift - en større, lidt mere meningsfuld overskriftsstil.
Display 1 |
Display 2 |
Display 3 |
Display 4 |
Få et afsnit til at skille sig ud ved at tilføje .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, er ikke commodo luctus.
Styling til almindelige inline HTML5-elementer.
Du kan bruge mærket til atfremhævetekst.
Denne tekstlinje er beregnet til at blive behandlet som slettet tekst.
Denne tekstlinje er beregnet til at blive behandlet som ikke længere nøjagtig.
Denne tekstlinje er beregnet til at blive behandlet som en tilføjelse til dokumentet.
Denne tekstlinje gengives som understreget
Denne tekstlinje er beregnet til at blive behandlet som småt.
Denne linje gengivet som fed tekst.
Denne linje gengivet som kursiv tekst.
.mark
og .small
klasser er også tilgængelige for at anvende de samme stilarter, <mark>
mens <small>
du undgår uønskede semantiske implikationer, som taggene ville medføre.
Selvom det ikke er vist ovenfor, er du velkommen til at bruge <b>
og <i>
i HTML5. <b>
er beregnet til at fremhæve ord eller sætninger uden at formidle yderligere betydning, mens <i>
det mest er til stemme, tekniske termer osv.
Skift tekstjustering, transformer, stil, vægt og farve med vores tekstværktøjer og farveværktøjer .
Stiliseret implementering af HTMLs <abbr>
element til forkortelser og akronymer for at vise den udvidede version på hover. Forkortelser har en standardunderstregning og får en hjælpemarkør for at give yderligere kontekst, når de svæver, og til brugere af hjælpeteknologier.
Tilføj .initialism
til en forkortelse for en lidt mindre skriftstørrelse.
attr
HTML
Til at citere indholdsblokke fra en anden kilde i dit dokument. Ombryd <blockquote class="blockquote">
enhver HTML som citatet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.
Tilføj et <footer class="blockquote-footer">
for at identificere kilden. Pak navnet på kildeværket ind i <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.
Brug tekstværktøjer efter behov for at ændre justeringen af dit blokcitat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.
Fjern standard- list-style
og venstremargen på listeelementer (kun umiddelbare børn). Dette gælder kun for umiddelbare børnelisteelementer , hvilket betyder, at du også skal tilføje klassen for alle indlejrede 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
Fjern en listes punkttegn og påfør lidt lys margin
med en kombination af to klasser .list-inline
og .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Juster termer og beskrivelser horisontalt ved at bruge vores gittersystems foruddefinerede klasser (eller semantiske mixins). På længere sigt kan du eventuelt tilføje en .text-truncate
klasse for at afkorte teksten med en ellipse.
- Beskrivelseslister
- En beskrivelsesliste er perfekt til at definere termer.
- 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.
- Afkortet udtryk er afkortet
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ud fermentum massa justo sit amet risus.
- Indlejring
-
- Indlejret definitionsliste
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Responsiv typografi refererer til skalering af tekst og komponenter ved blot at justere rodelementets font-size
inden for en række medieforespørgsler. Bootstrap gør ikke dette for dig, men det er ret nemt at tilføje, hvis du har brug for det.
Her er et eksempel på det i praksis. Vælg de font-size
s og medieforespørgsler, du ønsker.