Tipográfia

Címsorok (h1,...,h6,.display-1,...,.display-4)

A Bootstrap 4-ben az alapértelmezett betűtípus-család: "Helvetica Neue", Helvetica, Arial, sans-serif; az alapértelmezett betűméretet 16px és a sorok távolsága 1,5. Ezenkívül az összes <p> elemnél margin-top: 0 és margin-bottom: 1rem (16px).

A HTML stílusú fejlécek/címsorok (<h1> - <h6>) megnövelt betűmérettel rendelkeznek (40px, 32px, 28px, 24px, 20px, 16px).

A Bootstrap 4 "display" típusú címsorainál a normál címeknél nagyobb betűméret és kisebb betűvastagság van, és négy osztály közül választhatunk: .display-1, .display-2, .display-3, .display-4 (96px, 88px, 72px, 56px).

HTML kód

<h1>Címsor 1</h1>
<h2>Címsor 2</h2>
<h3>Címsor 3</h3>
<h4>Címsor 4</h4>
<h5>Címsor 5</h5>
<h6>Címsor 6</h6>

<h3>Nagy <small>majd kisebb</small></h3>

Eredmény

Címsor 1

Címsor 2

Címsor 3

Címsor 4

Címsor 5
Címsor 6

Nagy majd kisebb

HTML kód

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

Eredmény

Display 1

Display 2

Display 3

Display 4


Bekezdések (p)

A Bootstrap 4-ben az alapértelmezett betűtípus-család: "Helvetica Neue", Helvetica, Arial, sans-serif; az alapértelmezett betűméretet 16px és a sorok távolsága 1,5. Ezenkívül az összes <p> elemnél margin-top: 0 és margin-bottom: 1rem (16px).

HTML kód

<p>Ez <mark>kiemelt</mark> szöveg lesz.</p>
<p>Itt egy <del>törölt</del> szó a mondatban.</p>
<p>Ez most <ins>aláhúzott</ins> szöveg lesz.</p>
<p><small>Az egész mondat apróbetűs.</small></p>
<p>Itt egy <strong>félkövér</strong> szó.</p>
<p><em>Egész mondatom dőlt.</em></p>

<p>Ez <strong><ins>félkövér és aláhúzott</ins></strong>.</p>

Eredmény

Ez kiemelt szöveg lesz.

Itt egy törölt szó a mondatban.

Ez most aláhúzott szöveg lesz.

Az egész mondat apróbetűs.

Itt egy félkövér szó.

Egész mondatom dőlt.

Ez félkövér és aláhúzott.


Listák (ul,ol,dl)

Rendezetlen lista

  • tojás
  • liszt
  • tej
  • víz
  • olaj
<ul>
   <li>tojás</li>
   <li>liszt</li>
   <li>só</li>
   <li>tej</li>
   <li>víz</li>
   <li>olaj</li>
</ul>

Rendezett lista

  1. felverjük a tojást
  2. hozzászitáljuk a lisztet
  3. megsózzuk, összekeverjük
  4. hozzáöntjük: tej,víz, olaj
  5. összekeverjük
  6. kisütjük
<ol>
   <li>felverjük a tojást</li>
   <li>hozzászitáljuk a lisztet</li>
   <li>megsózzuk, összekeverjük</li>
   <li>hozzáöntjük: tej,víz, olaj</li>
   <li>összekeverjük</li>
   <li>kisütjük</li>
</ol>

Definíciós lista

Felverés
habverővel csépelni
Összekeverés
fakanállal alaposan
Sütés
kiolajozott palacsintasütőben
<dl">
  <dt>Felverés</dt>
   <dd>habverővel csépelni</dd>
  <dt>Összekeverés</dt>
   <dd>fakanállal alaposan</dd>
  <dt>Sütés</dt>
   <dd>kiolajozott p.sütőben</dd>
</dl>

Listacsoportok

Egyszerű lcs.

  • tojás
  • liszt
<ul class="list-group">
   <li class="list-group-item">tojás</li>
   <li class="list-group-item">liszt</li>
   <li class="list-group-item">só</li>
</ul>

Linkelt lcs.

<ul class="list-group">
   <a href="#" class="list-group-item list-group-item-action">tojás</a>
   <a href="#" class="list-group-item list-group-item-action">liszt</a>
   <a href="#" class="list-group-item list-group-item-action">só</a>
</ul>

Vízszintes lcs.

  • tojás
  • liszt
  • tej
<ul class="list-group list-group-horizontal">
   <li class="list-group-item">tojás</li>
   <li class="list-group-item">liszt</li>
   <li class="list-group-item">só</li>
   <li class="list-group-item">tej</li>
</ul>