28.7. fejezet: Betűk és szövegek
A Bootstrap alapértelmezésként a 16px-es betűméretet (font-size) használja, valamint az 1,5-ös sortávolságot (line-height). Az alapvető betűtípus (font-family) a „Helvetica Neue”, majd sorba a következők: Helvetica, Arial, sans-serif. Továbbá az összes <p> elem esetén van 0-s felső margó (margin-top), valamint 1rem-es (16px) alsó margó (margin-bottom).
A Bootstrap szövegeiben használhatóak a <h1> - <h6> főcím kiemelésként. Ennek a lényeges része:
<div class="container">
<h1>h1 Bootstrap heading (2.5rem = 40px)</h1>
<h2>h2 Bootstrap heading (2rem = 32px)</h2>
<h3>h3 Bootstrap heading (1.75rem = 28px)</h3>
<h4>h4 Bootstrap heading (1.5rem = 24px)</h4>
<h5>h5 Bootstrap heading (1.25rem = 20px)</h5>
<h6>h6 Bootstrap heading (1rem = 16px)</h6>
</div>
Lehetőség nyílik a kijelző címsorainak kiemelésére is (nagyobb betűméret és vékonyabb betűtípus). Itt négy különféle lehetőségből lehet választani. (cssbootstrap10.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap betűk</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Képernyő fejlécek</h1>
<p>Lehetőség nyílik a kijelző címsorainak kiemelésére is (nagyobb betűméret és vékonyabb betűtípus):</p>
<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>
</div>
</body>
</html>
Minden fejlécen belül extra elemként bele lehet építeni a <small> taget az alábbi minta szerint:
<h1>h1 főcím <small>kisebb szöveggel</small></h1>
Másik kiemelési lehetőség a <mark> elem, ami sárga hátteret ad a kijelölt kifejezésnek. Pl.:
<p>Használhatjuk a <mark>kiemelt</mark> szöveget.</p>
További kiemelési lehetőségek:
- <abbr>: pontozott aláhúzás.
- <blockquote>: más forrásból idézett tartalmi blokk.
- <dl><dt><dd>: a sima HTML-ben megszokott módon használható.
- <code>: kódrészletek kiemelésére javasolt.
- <kbd>: billentyűzet-beviteli részlet kiemelése.
- <pre>: előre formázott bevitel, azaz nincs átalakítás.
További fontosabb szövegbeli elemek:
|
.font-weight-bold |
félkövér szöveg |
|
.font-weight-bolder |
kövérebb szöveg |
|
.font-italic |
döntött szöveg |
|
.font-weight-light |
vékonyított szöveg |
|
.font-weight-lighter |
kevésbé vékonyított szöveg |
|
.font-weight-normal |
normál vastagságú szöveg |
|
.lead |
kiemeli a szöveget |
|
.small |
kisebb szöveg (80%-a az eredetinek) |
|
.text-left |
balra rendezett szöveg |
|
.text-*-left |
balra rendezett szöveg sm/md/lg/xl képernyőkön |
|
.text-break |
megakadályozza a hosszú szöveg tördelését |
|
.text-center |
középre rendezett szöveg |
|
.text-*-center |
középre rendezett szöveg sm/md/lg/xl képernyőkön |
|
.text-decoration-none |
eltávolítja az aláhúzást egy linkből. |
|
.text-right |
jobbra rendezett szöveg |
|
.text-*-right |
jobbra rendezett szöveg sm/md/lg/xl képernyőkön |
|
.text-justify |
hasábszerűen rendezett szöveg |
Példa a használatukra:
<div class="container">
<h1>Font weight and italics</h1>
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text.</p>
<p class="font-italic">Italic text.</p>
</div>
A téma részletesebb tárgyalása:
https://www.w3schools.com/bootstrap4/bootstrap_typography.asp
Minden alkalmazott típus részletes tárgyalása:
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp