Tartalmak

Tipográfia

A Bootstrap a HTML elemeket előformázza, a szöveges tartalmakat egy natív fontkészlettel látja el, minden operációs rendszernek a megfelelő rendszer fontkészletét töltve be.
1
<h1>H1 cím</h1>
2
<h2>H2 cím</h2>
3
<h3>H3 cím</h3>
4
<h4>H4 cím</h4>
5
<h5>H5 cím</h5>
6
<h6>H6 cím</h6>
7
<p>Bekezdés, lorem ipsum dolor sit amet consectetur
8
adipisicing elit. Quasi commodi excepturi ullam
9
doloremque quam amet veniam aut asperiores veritatis
10
rem aliquam voluptatem accusamus, optio odio quisquam
11
perspiciatis exercitationem id. Consequuntur!</p>
Copied!
A megszokott címeken kívül lehetőség van nagy fontméretű, kiemelt címeket is használni, a display-1, display-2, display-3, display-4 CSS osztályokkal:
1
<h1 class="display-1">Display 1 cím</h1>
2
<h1 class="display-2">Display 2 cím</h1>
3
<h1 class="display-3">Display 3 cím</h1>
4
<h1 class="display-4">Display 4 cím</h1>
Copied!
Hasonlóan a címekhez, a bekezdéseknek is van egy kiemelt verziója, amit a lead osztállyal hozunk létre. A példában csak az első bekezdésre tesszük rá:
1
<p class="lead">Lorem ipsum dolor sit amet consectetur
2
adipisicing elit. Ipsum quidem asperiores atque adipisci
3
ipsa maxime soluta suscipit eaque. Facere, similique?</p>
4
<p>Cumque tempora molestiae eum fuga expedita dolorum
5
commodi. Quae labore voluptas consequatur vitae cum
6
repellat, perferendis eaque delectus ipsum corporis!</p>
7
<p>Quia repellendus natus consectetur velit voluptatem
8
ducimus, error ut minus laborum dolores ad sequi simi
9
ique ipsam eaque earum itaque veritatis!</p>
Copied!

Képek

Reszponzív képek

Reszponzív, környezetéhez adaptálódó méretű képet az img-fluid CSS osztállyal tudunk készíteni:
1
<img src="duckling.jpg" class="img-fluid" alt="Kiskacsa">
Copied!
Ezek a képek nem nyomják szét a szülő elemüket, autómatikusan felveszik a rendelkezésre álló helyet szélességben.

Képek úsztatása szövegben

Kép szövegbe ágyazását a float left, és a float-right CSS osztályok teszik lehetővé:
1
<p><img src="duckling.jpg" class="w-25 mr-3 my-1 float-left" alt="Kiskacsa">
2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni facilis,
3
quibusdam aliquam quae perspiciatis saepe, veritatis aut a libero aperiam
4
quidem autem, optio modi ullam temporibus non eum nesciunt neque? A illo
5
laborum quis laboriosam, natus molestias unde quam dolorum iure doloribus,
6
saepe, accusamus dignissimos vero beatae corporis ratione cupiditate suscipit
7
nam odio recusandae numquam quasi ipsum aperiam! Voluptatibus, est. Qui,
8
omnis quasi? Iste ut odio temporibus molestiae corrupti assumenda delectus
9
hic repellat nulla voluptatum dicta officia ullam natus libero, placeat
10
expedita similique! Magni facere recusandae quia, laudantium assumenda conseq
11
uuntur.</p>
12
13
<p><img src="duckling.jpg" class="w-25 ml-3 my-1 float-right" alt="Kiskacsa">
14
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni facilis,
15
quibusdam aliquam quae perspiciatis saepe, veritatis aut a libero aperiam
16
quidem autem, optio modi ullam temporibus non eum nesciunt neque? A illo
17
laborum quis laboriosam, natus molestias unde quam dolorum iure doloribus,
18
saepe, accusamus dignissimos vero beatae corporis ratione cupiditate suscipit
19
nam odio recusandae numquam quasi ipsum aperiam! Voluptatibus, est. Qui,
20
omnis quasi? Iste ut odio temporibus molestiae corrupti assumenda delectus
21
hic repellat nulla voluptatum dicta officia ullam natus libero, placeat
22
expedita similique! Magni facere recusandae quia, laudantium assumenda conseq
23
uuntur.</p>
Copied!
Kiskacsa balra úsztatva
Kiskacsa jobbra úsztatva.

Kép lekerekített sarkokkal

A kép sarkának lekerekítéséhez lássuk el egy rounded osztállyal:
1
<img src="duckling.jpg" class="rounded" alt="Kiskacsa">
Copied!
Állítható a lekerekítés mértéke is, a rounded osztály mellett használhatjuk a rounded-sm és a rounded-lg osztályokat.
1
<!-- Kép kis lekerekítéssel -->
2
<img class="rounded-sm" src="duckling-s.jpg" alt="Kiskacsa">
3
4
<!-- Kép közepes lekerekítéssel -->
5
<img class="rounded" src="duckling-s.jpg" alt="Kiskacsa">
6
7
<!-- Kép nagy lekerekítéssel -->
8
<img class="rounded-lg" src="duckling-s.jpg" alt="Kiskacsa">
Copied!

További kép stílusok

1
<!-- Körkép, csak négyzetes képekkel működik jól. -->
2
<img class="rounded-circle" src="duckling.jpg" alt="Kiskacsa">
3
4
<!-- Bélyegkép, izléses kerettel -->
5
<img class="img-thumbnail" src="duckling-s.jpg" alt="Kiskacsa">
Copied!
Last modified 1yr ago
Export as PDF
Copy link