Komponensek
A Bootstrap komponensei előre elkészített felhasználói felület darabkák, rendszerint egy kötött formátumú HTML struktúrából állnak, amire a Bootstrap CSS stílusai, és adott esetben a Bootstrap JavaScript hatással van.
Ebben a fejezetben bemutatásra kerülő komponensek a legjellemzőbben használtak közül lettek kiválogatva, bővebben a komponensekről az alábbi linken olvashatunk:

Média elem

A média elem segítségével képet helyezhetünk el egy cím és a hozzá tartozó bekezdés(-ek) mellett. Jellemző felhasználása blog, vagy hír lista.
1
<div class="media">
2
<img src="duckling.jpg" class="mr-3" alt="Kiskacsa" width="96">
3
<div class="media-body">
4
<h3 class="mt-n1">Indiai futókacsa</h3>
5
A házikacsa (Anas platyrhynchos domestica) a récefélék családjába
6
tartozó baromfi, a tőkés réce (vadkacsa) alfaja, háziasított változata.
7
Többnyire fehér színben tenyésztik, de egyes vidékeken, különösen ott,
8
ahol vadon élő őseivel könnyen kereszteződhet „vad” színezetű
9
példányokat is találunk.
10
</div>
11
</div>
Copied!
A kép és a szöveges tartalom megcserélésével vízszintesen tudjuk rendezni az elemeket:
1
<div class="media">
2
<div class="media-body">
3
<h3 class="mt-n1">Indiai futókacsa</h3>
4
A házikacsa (Anas platyrhynchos domestica) a récefélék családjába
5
tartozó baromfi, a tőkés réce (vadkacsa) alfaja, háziasított változata.
6
Többnyire fehér színben tenyésztik, de egyes vidékeken, különösen ott,
7
ahol vadon élő őseivel könnyen kereszteződhet „vad” színezetű
8
példányokat is találunk.
9
</div>
10
<img src="duckling.jpg" class="ml-3" alt="Kiskacsa" width="96">
11
</div>
Copied!
Média elemről bővebben:

Kártya

A kártyákban különböző tartalmakat helyezhetünk el, például képet a tetején vagy az alján a card-img-bottom és card-img-top osztályokkal (ezt a képen kell elhelyezni).
1
<div class="card" style="width: 18rem;">
2
<img src="duckling.jpg" class="card-img-top" alt="Kiskacsa">
3
<div class="card-body">
4
<h3 class="card-title">Házikacsa</h3>
5
<p class="card-text">A házikacsa (Anas platyrhynchos domestica) a récefélék családjába tartozó baromfi, a tőkés réce (vadkacsa) alfaja, háziasított változata...</p>
6
<a href="#" class="btn btn-primary">Réce rendelés</a>
7
</div>
8
</div>
Copied!
A kártyában elhelyezett card-body osztályú elem gondoskodik az elemek eltartásáról:
1
<div class="card" style="width: 18rem;">
2
<div class="card-body">
3
<img src="duckling-t.jpg" class="img-fluid rounded mb-3" alt="Kiskacsa">
4
<h5 class="card-title">Házikacsa</h5>
5
<p class="card-text">A házikacsa (Anas platyrhynchos domestica) a récefélék családjába tartozó baromfi, a tőkés réce (vadkacsa) alfaja, háziasított változata...</p>
6
<a href="#" class="btn btn-primary">Réce rendelés</a>
7
</div>
8
</div>
Copied!
A kártyákban el lehet helyezni előre formázott listákat, ezekből függőleges navigációs menü szervezhető:
1
<div class="card" style="width: 18rem;">
2
<div class="card-header font-weight-bold">
3
Kacsaféléink
4
</div>
5
<ul class="list-group list-group-flush">
6
<li class="list-group-item"><a href="#">Házikacsa</a></li>
7
<li class="list-group-item"><a href="#">Indiai futókacsa</a></li>
8
<li class="list-group-item"><a href="#">Tőkés kacsa</a></li>
9
</ul>
10
</div>
Copied!
Kártyáról bővebben:

Jumbotron

A Jumbotron, vagy marketink banner a weboldalunk nyitó eleme, méretéből kifolyólag szöveges vagy képi tartalmára irányítja a látogató tekintetét.
1
<div class="jumbotron">
2
<h1 class="display-4">Üdvözöljük honlapunkon</h1>
3
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing
4
elit. Autem deleniti eos possimus.</p>
5
<hr class="my-4">
6
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi
7
eos numquam eius expedita eligendi rerum, exercitationem consequuntur
8
voluptatem aut quisquam?</p>
9
<a class="btn btn-primary btn-lg" href="#">Olvasson tovább</a>
10
</div>
Copied!
A Jumbotronnak van egy széles (faltól falig érő) változata. ezt a jumbotron-fluid osztállyal hozzuk létre.
1
<div class="jumbotron jumbotron-fluid">
2
<div class="container">
3
<h1 class="display-4">Üdvözöljük honlapunkon</h1>
4
<p class="lead">Lorem ipsum, dolor sit amet consectetur
5
adipisicing elit. Autem deleniti eos possimus.</p>
6
<hr class="my-4">
7
<p>Lorem ipsum dolor sit amet consectetur, adipisicing
8
elit. Animi eos numquam eius expedita eligendi rerum,
9
exercitationem consequuntur voluptatem aut quisquam?</p>
10
<a class="btn btn-primary btn-lg" href="#">Olvasson tovább</a>
11
</div>
12
</div>
Copied!
Jumbotronról bővebben:

Navigációs sáv

A navigációs sáv (navbar) egy Bootstrapban készült alkalmazás, vagy weblap fejléce. Tartalmazza a szokásos fejléc elemeket, például a logót, menüt, kereső mezőt. A navigációs sáv a Bootstrap egyik leg összetettebb komponense:
1
<nav class="navbar navbar-expand-lg navbar-light bg-light">
2
<a class="navbar-brand" href="#">Navbar</a>
3
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
4
<span class="navbar-toggler-icon"></span>
5
</button>
6
7
<div class="collapse navbar-collapse" id="navbarSupportedContent">
8
<ul class="navbar-nav mr-auto">
9
<li class="nav-item active">
10
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
11
</li>
12
<li class="nav-item">
13
<a class="nav-link" href="#">Link</a>
14
</li>
15
<li class="nav-item dropdown">
16
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
17
Dropdown
18
</a>
19
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
20
<a class="dropdown-item" href="#">Action</a>
21
<a class="dropdown-item" href="#">Another action</a>
22
<div class="dropdown-divider"></div>
23
<a class="dropdown-item" href="#">Something else here</a>
24
</div>
25
</li>
26
<li class="nav-item">
27
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
28
</li>
29
</ul>
30
<form class="form-inline my-2 my-lg-0">
31
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
32
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
33
</form>
34
</div>
35
</nav>
Copied!
A következő példában a könnyebb áttekinthetőség miatt csak egy szintű menü, található:
1
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #0ca678;">
2
<a class="navbar-brand" href="#">Cég KFT.</a>
3
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
4
aria-expanded="false" aria-label="Toggle navigation"></button>
5
<div class="collapse navbar-collapse" id="collapsibleNavId">
6
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
7
<li class="nav-item active">
8
<a class="nav-link" href="#">Főoldal</a>
9
</li>
10
<li class="nav-item">
11
<a class="nav-link" href="#">Termékek</a>
12
</li>
13
<li class="nav-item">
14
<a class="nav-link" href="#">Kapcsolat</a>
15
</li>
16
</ul>
17
<form class="form-inline my-2 my-lg-0">
18
<input class="form-control mr-sm-2" type="text" placeholder="Keresés">
19
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Keresés</button>
20
</form>
21
</div>
22
</nav>
Copied!
Bővebben a navigációs sávról:

Gomb

A Bootstrap gomb komponense jelentéstartalomtól függő megjelenést biztosít a linkeknek (a), és a gomb elemeknek (button).
1
<a href="#" class="btn btn-primary">Elsődleges</a>
2
<a href="#" class="btn btn-secondary">Másodlagos</a>
3
<a href="#" class="btn btn-success">Siker</a>
4
<a href="#" class="btn btn-danger">Veszély</a>
5
<a href="#" class="btn btn-warning">Figyelmeztetés</a>
6
<a href="#" class="btn btn-info">Információs</a>
7
<a href="#" class="btn btn-light">Világos</a>
8
<a href="#" class="btn btn-dark">Sötét</a>
Copied!
Használhatunk a vagy button elemet, a megjelenésük meg fog egyezni:
1
<a href="#" class="btn btn-primary">Én egy link vagyok</a>
2
<button type="button" href="#" class="btn btn-primary">Én egy gomb vagyok</button>
Copied!
A btn-sm és a btn-lg CSS osztályokkal kis és nagy méretű gombokat tudunk létrehozni:
1
<a href="#" class="btn btn-primary btn-sm">Kis gomb</a>
2
<a href="#" class="btn btn-primary">Közepes gomb</a>
3
<a href="#" class="btn btn-primary btn-lg">Nagy gomb</a>
Copied!
Gomb komponensről bővebben:
Last modified 1yr ago