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.
Á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-family
minden operációs rendszerhez és eszközhöz. - A befogadóbb és elérhetőbb
font-size
tí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-base
attribú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-bg
az a beállításáhozbackground-color
a<body>
(#fff
alapé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-base
be 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>
.h1
keresztül .h6
osztályok is rendelkezésre állnak, ha egy címsor 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
<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
A mellékelt segédprogram-osztályok segítségével hozza létre újra a kis másodlagos címsort a Bootstrap 3-ból.
Díszes kijelzőfejléc Fakult másodlagos szöveggel
<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.
<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-sizes
Sass térképen és két változón, $display-font-weight
valamint a $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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. Kiemelkedik a szokásos bekezdések közül.
<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.
<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:
<mark>
olyan szöveget jelöl, amely hivatkozási vagy jelölési célból meg van jelölve vagy kiemelve.<small>
oldalsó megjegyzéseket és apró betűs részeket jelent, például szerzői jogi és jogi szöveget.<s>
olyan elemeket jelöl, amelyek már nem relevánsak vagy már nem pontosak.<u>
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 adni a szövegnek, használja helyette a következő osztályokat:
.mark
ugyanazokat a stílusokat fogja alkalmazni, mint a<mark>
..small
ugyanazokat a stílusokat fogja alkalmazni, mint a<small>
..text-decoration-underline
ugyanazokat a stílusokat fogja alkalmazni, mint a<u>
..text-decoration-line-through
ugyanazokat a stílusokat fogja alkalmazni, mint a<s>
.
Bár fent nem látható, nyugodtan használhatja <b>
és <i>
HTML5-ben. <b>
célja, hogy szavakat vagy kifejezéseket emeljen ki anélkül, hogy további jelentőséget tulajdonítana, míg <i>
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 .initialism
hozzá egy rövidítést valamivel kisebb betűmérethez.
attr
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ó.
<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. <p>
) az .blockquote-footer
osztállyal. Ügyeljen arra, hogy a forrásmunka nevét is becsomagolja <cite>
.
<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.
<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>
<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.
<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 margin
ké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.
<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-truncate
osztá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.
<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;
Az itt és az Ú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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Mixins
Nincsenek dedikált mixinek a tipográfiához, de a Bootstrap alkalmazza a Responsive Font Sizing (RFS) funkciót .