Tipográfia

Dokumentáció és példák a Bootstrap tipográfiához, beleértve a globális beállításokat, címsorokat, törzsszöveget, listákat és még sok mást.

Ezen az oldalon

Általános beállítások

A Bootstrap alapvető globális megjelenítési, tipográfiai és hivatkozási stílusokat állít be. Ha nagyobb szabályozásra van szükség, tekintse meg a szöveges segédprogram osztályait .

Használjon natív betűkészletet , amely kiválasztja a legjobbat font-familyminden operációs rendszerhez és eszközhöz.
A befogadóbb és elérhetőbb font-sizetípusskála érdekében a böngésző alapértelmezett gyökerét használjuk (általában 16 képpont), így a látogatók szükség szerint személyre szabhatják böngészőjük alapértelmezett beállításait.
Használja a $font-family-base, $font-size-baseés $line-height-baseattribútumokat tipográfiai alapként a <body>.
Állítsa be a globális link színét a segítségével $link-color.
Használja $body-bgaz a beállításához background-colora <body>( #fffalapértelmezés szerint).

Ezek a stílusok a -ban találhatók _reboot.scss, a globális változók pedig a -ban vannak meghatározva _variables.scss. Feltétlenül állítsa $font-size-basebe rem.

Címsorok

Az összes HTML-címsor <h1>elérhető <h6>a következőig.

Cím	Példa
`<h1></h1>`	h1. Bootstrap címsor
`<h2></h2>`	h2. Bootstrap címsor
`<h3></h3>`	h3. Bootstrap címsor
`<h4></h4>`	h4. Bootstrap címsor
`<h5></h5>`	h5. Bootstrap címsor
`<h6></h6>`	h6. Bootstrap címsor

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

.h1keresztül .h6osztályok is rendelkezésre állnak, ha egy fejléc betűstílusát szeretné egyeztetni, de nem tudja használni a kapcsolódó HTML elemet.

h1. Bootstrap címsor

h2. Bootstrap címsor

h3. Bootstrap címsor

h4. Bootstrap címsor

h5. Bootstrap címsor

h6. Bootstrap címsor

html

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

Címsorok testreszabása

Használja a mellékelt segédosztályokat a kis másodlagos fejléc szövegének újbóli létrehozásához a Bootstrap 3-ból.

Díszes kijelzőfejléc Fakult másodlagos szöveggel

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Címsorok megjelenítése

A hagyományos címsorelemeket úgy alakítottuk ki, hogy a legjobban illeszkedjenek az oldal tartalmához. Ha szüksége van egy címsorra, hogy kitűnjön, fontolja meg a megjelenítési címsor használatát – ez egy nagyobb, kissé véleményesebb címsorstílus.

Kijelző 1

2. kijelző

3. kijelző

4. kijelző

5. kijelző

6. kijelző

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

A megjelenítési fejlécek a $display-font-sizesSass térképen és két változón, $display-font-weightvalamint a $display-line-height.

A megjelenítési címsorok két változóval testreszabhatók, $display-font-familyés $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Vezet

Tegye kiemelhetővé a bekezdést a hozzáadásával .lead.

Ez egy vezető bekezdés. Ez kiemelkedik a szokásos bekezdések közül.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Szövegközi elemek

Stílus a gyakori beépített HTML5-elemekhez.

Használhatja a mark címkétKiemelszöveg.

~~Ezt a szövegsort törölt szövegként kell kezelni.~~

~~Ezt a szövegsort már nem pontosként kell kezelni.~~

Ezt a szövegsort a dokumentum kiegészítéseként kell kezelni.

Ez a szövegsor aláhúzottként jelenik meg.

Ezt a szövegsort apró betűsként kell kezelni.

Ez a sor félkövér szövegként jelenik meg.

Ez a sor dőlt betűs szövegként jelenik meg.

html

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

Ügyeljen arra, hogy ezeket a címkéket szemantikai célokra kell használni:

olyan szöveget jelöl, amely hivatkozási vagy jelölési célból meg van jelölve vagy kiemelve.
oldalsó megjegyzéseket és apró betűs szövegeket, például szerzői jogi és jogi szövegeket jelent.
<s>olyan elemeket jelöl, amelyek már nem relevánsak vagy már nem pontosak.
a soron belüli szöveg egy szakaszát jelöli, amelyet úgy kell előállítani, hogy jelezze, hogy nem szöveges megjegyzéssel rendelkezik.

Ha stílust szeretne alakítani a szövegben, használja inkább a következő osztályokat:

.markugyanazokat a stílusokat fogja alkalmazni, mint a .
.smallugyanazokat a stílusokat fogja alkalmazni, mint a .
.text-decoration-underlineugyanazokat a stílusokat fogja alkalmazni, mint a .
.text-decoration-line-throughugyanazokat a stílusokat fogja alkalmazni, mint a <s>.

Bár fent nem látható, nyugodtan használhatja és HTML5-ben. célja, hogy szavakat vagy kifejezéseket emeljen ki anélkül, hogy további jelentőséget tulajdonítana, míg többnyire hang, szakkifejezések stb.

Szöveges segédprogramok

Módosítsa a szöveg igazítását, átalakítását, stílusát, súlyát, vonalmagasságát, díszítését és színét szöveg- és színsegédprogramjainkkal .

Rövidítések

A HTML elem stilizált megvalósítása <abbr>a rövidítésekhez és a mozaikszavakhoz, hogy a kibővített verziót mutasson. A rövidítések alapértelmezett aláhúzással rendelkeznek, és súgókurzort kapnak, amely további kontextust biztosít a lebegtetéskor és a kisegítő technológiák felhasználóinak.

Adjon .initialismhozzá egy rövidítést valamivel kisebb betűmérethez.

attr

HTML

html

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

Blokkidézetek

Más forrásból származó tartalomblokkok idézéséhez a dokumentumban. Tekerje <blockquote class="blockquote">körbe bármely HTML-kódot idézetként.

Egy jól ismert idézet, blokk idézőjelben található.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Forrás megnevezése

A HTML-specifikáció megköveteli, hogy a blockquote attribútum a következőn kívül legyen elhelyezve <blockquote>. Az attribútum megadásakor csomagolja <blockquote>be a-t, <figure>és használjon egy <figcaption>vagy blokk szintű elemet (pl. ) az .blockquote-footerosztállyal. Ügyeljen arra, hogy a forrásmunka nevét is becsomagolja <cite>.

Egy jól ismert idézet, blokk idézőjelben található.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Igazítás

Szükség szerint használjon szöveges segédprogramokat az idézőjel igazításának módosításához.

Egy jól ismert idézet, blokk idézőjelben található.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Egy jól ismert idézet, blokk idézőjelben található.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Listák

Stílus nélküli

Távolítsa el az alapértelmezett list-styleés a bal margót a listaelemekről (csak az azonnali gyermekeknél). Ez csak az azonnali leszármazott listaelemekre vonatkozik , vagyis minden beágyazott listához hozzá kell adnia az osztályt is.

Ez egy lista.
Teljesen stílustalannak tűnik.
Szerkezetileg ez még mindig egy lista.
Ez a stílus azonban csak az azonnali gyermekelemekre vonatkozik.
Beágyazott listák:
- nincs hatással rájuk ez a stílus
- akkor is golyót fog mutatni
- és megfelelő bal margójuk van
Ez bizonyos helyzetekben még jól jöhet.

html

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

Sorban

Távolítsa el a felsorolásjeleket, és alkalmazzon némi fényt marginkét osztály kombinációjával, .list-inlineés .list-inline-item.

Ez egy listaelem.
És egy másik.
De soron belül jelennek meg.

html

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

Leíráslista igazítása

A kifejezéseket és leírásokat vízszintesen igazítsa a rácsrendszerünk előre meghatározott osztályaival (vagy szemantikai mixinjeivel). Hosszabb időtartamra opcionálisan hozzáadhat egy .text-truncateosztályt a szöveg hárompontos csonkolásához.

Leírás listák

A leírások listája tökéletes a kifejezések meghatározásához.

Term

A kifejezés definíciója.

És még néhány helyőrző-definíciós szöveg.

Egy másik kifejezés

Ez a meghatározás rövid, így nincs benne extra bekezdés vagy ilyesmi.

A csonka kifejezés csonka

Ez akkor lehet hasznos, ha szűk a hely. Egy ellipszist ad hozzá a végéhez.

Fészekrakás

Beágyazott definíciós lista: Hallottam, hogy szereted a definíciós listákat. Hadd tegyek egy definíciós listát a definíciós listába.

html

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

Reszponzív betűméretek

A Bootstrap 5-ben alapértelmezés szerint engedélyeztük az adaptív betűméreteket, lehetővé téve a szövegek természetesebb méretezését az eszközök és a nézetablak méretei között. Nézze meg az RFS oldalát , hogy megtudja, hogyan működik ez.

Sass

Változók

A címsorokhoz van néhány dedikált változó a méretezéshez és a térközhöz.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Különféle tipográfiai elemek itt és itt Újraindításban tárgyalt különféle tipográfiai elemeknek is vannak dedikált változói.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

Nincsenek dedikált mixinek a tipográfiához, de a Bootstrap alkalmaz Responsive Font Sizing (RFS) funkciót .