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

Export as PDF

Copy link

Contents