Source

Typografi

Dokumentation och exempel för Bootstrap-typografi, inklusive globala inställningar, rubriker, brödtext, listor och mer.

Globala inställningar

Bootstrap ställer in grundläggande globala visnings-, typografi- och länkstilar. När mer kontroll behövs, kolla in textverktygsklasserna .

  • Använd en inbyggd teckensnittsstack som väljer det bästa font-familyför varje operativsystem och enhet.
  • För en mer inkluderande och tillgänglig typskala, antar vi webbläsarens standardrot font-size(vanligtvis 16px) så att besökare kan anpassa sina webbläsarstandarder efter behov.
  • Använd $font-family-base, $font-size-base, och $line-height-baseattributen som vår typografiska bas tillämpad på <body>.
  • Ställ in den globala länkfärgen via $link-coloroch använd endast länkunderstrykning på :hover.
  • Använd $body-bgför att ställa in a background-colorpå <body>( som #fffstandard).

Dessa stilar finns inom _reboot.scss, och de globala variablerna definieras i _variables.scss. Se till att ställa $font-size-basein rem.

Rubriker

Alla HTML-rubriker, <h1>genom <h6>, är tillgängliga.

Rubrik Exempel

<h1></h1>

 h1. Bootstrap rubrik

<h2></h2>

 h2. Bootstrap rubrik

<h3></h3>

 h3. Bootstrap rubrik

<h4></h4>

 h4. Bootstrap rubrik

<h5></h5>

 h5. Bootstrap rubrik

<h6></h6>

 h6. Bootstrap rubrik 
<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>

.h1genomklasser .h6finns också tillgängliga, för när du vill matcha teckensnittsstilen för en rubrik men inte kan använda det associerade HTML-elementet.

h1. Bootstrap rubrik

h2. Bootstrap rubrik

h3. Bootstrap rubrik

h4. Bootstrap rubrik

h5. Bootstrap rubrik

h6. Bootstrap rubrik

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

Anpassa rubriker

Använd de medföljande verktygsklasserna för att återskapa den lilla sekundära rubriktexten från Bootstrap 3.

Snygg displayrubrik Med bleka sekundär text 
<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Visa rubriker

Traditionella rubrikelement är designade för att fungera bäst i innehållet på sidan. När du behöver en rubrik för att sticka ut, överväg att använda en visningsrubrik — en större, lite mer egensinnig rubrikstil.

Display 1
Display 2
Display 3
Display 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>

Leda

Få ett stycke att sticka ut genom att lägga till .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Inline textelement

Styling för vanliga inline HTML5-element.

Du kan använda markeringstaggen för attmarkeratext.

Denna textrad är avsedd att behandlas som raderad text.

Denna textrad är avsedd att behandlas som inte längre korrekt.

Denna textrad är avsedd att behandlas som ett tillägg till dokumentet.

Denna textrad återges som understruken

Denna textrad är avsedd att behandlas som finstilt.

Denna rad återges som fet text.

Denna rad återges som kursiv text.

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

.markoch .smallklasser är också tillgängliga för att tillämpa samma stilar som <mark>och <small>samtidigt som man undviker alla oönskade semantiska implikationer som taggarna skulle medföra.

Även om det inte visas ovan, använd gärna <b>och <i>i HTML5. <b>är tänkt att markera ord eller fraser utan att förmedla ytterligare betydelse medan <i>är mest för röst, tekniska termer, etc.

Textverktyg

Ändra textjustering, transformera, stil, vikt och färg med våra textverktyg och färgverktyg .

Förkortningar

Stiliserad implementering av HTMLs <abbr>element för förkortningar och akronymer för att visa den utökade versionen vid hovring. Förkortningar har en förinställd understrykning och får en hjälpmarkör för att ge ytterligare sammanhang vid hovring och för användare av hjälpmedel.

Lägg .initialismtill en förkortning för en lite mindre teckenstorlek.

attr

HTML

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

Blockcitat

För att citera innehållsblock från en annan källa i ditt dokument. Linda <blockquote class="blockquote">runt vilken HTML som helst som citat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Namnge en källa

Lägg till ett <footer class="blockquote-footer">för att identifiera källan. Slå in namnet på källverket i <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

Någon känd i källtiteln 
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Inriktning

Använd textverktyg efter behov för att ändra justeringen av ditt blockcitat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

Någon känd i källtiteln 
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heltal posuere erat en ante.

Någon känd i källtiteln 
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Listor

Ostylad

Ta bort standardmarginalen list-styleoch vänstermarginalen på listobjekt (endast omedelbara underordnade). Detta gäller bara objekt för omedelbara underordnade listor , vilket innebär att du måste lägga till klassen för alla kapslade listor också.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem vid 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
<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

I kö

Ta bort en listas kulor och applicera lite ljus marginmed en kombination av två klasser, .list-inlineoch .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Beskrivningslistjustering

Justera termer och beskrivningar horisontellt genom att använda vårt rutsystems fördefinierade klasser (eller semantiska mixins). För längre sikt kan du valfritt lägga till en .text-truncateklass för att trunkera texten med en ellips.

Beskrivningslistor
En beskrivningslista är perfekt för att definiera 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.
Trunkerad term är trunkerad
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Häckande
Kapslad definitionslista
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Responsiv typografi

Responsiv typografi hänvisar till att skala text och komponenter genom att helt enkelt justera rotelementets font-sizeinom en serie mediefrågor. Bootstrap gör inte detta åt dig, men det är ganska enkelt att lägga till om du behöver det.

Här är ett exempel på det i praktiken. Välj vilka font-sizes och media frågor du vill.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}