> For the complete documentation index, see [llms.txt](https://digikiad.gitbook.io/digitalis-kiadvanyok/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://digikiad.gitbook.io/digitalis-kiadvanyok/bootstrap/komponensek.md).

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

{% embed url="<https://getbootstrap.com/docs/4.4/components>" %}

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

```markup
<div class="media">
  <img src="duckling.jpg" class="mr-3" alt="Kiskacsa" width="96">
  <div class="media-body">
    <h3 class="mt-n1">Indiai futókacsa</h3>
    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.
    Többnyire fehér színben tenyésztik, de egyes vidékeken, különösen ott,
    ahol vadon élő őseivel könnyen kereszteződhet „vad” színezetű
    példányokat is találunk.
  </div>
</div>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0ZIv5zwWwLrUF8UuaF%2F-M0ZJKekPP6Ts6xgHTd0%2Fmedia-block.png?alt=media\&token=76b14958-b709-431b-a5d9-deb1aeec6cc3)

A kép és a szöveges tartalom megcserélésével vízszintesen tudjuk rendezni az elemeket:

```markup
<div class="media">
  <div class="media-body">
    <h3 class="mt-n1">Indiai futókacsa</h3>
    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.
    Többnyire fehér színben tenyésztik, de egyes vidékeken, különösen ott,
    ahol vadon élő őseivel könnyen kereszteződhet „vad” színezetű
    példányokat is találunk.
  </div>
  <img src="duckling.jpg" class="ml-3" alt="Kiskacsa" width="96">
</div>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0ZIv5zwWwLrUF8UuaF%2F-M0ZK9UJIAx_81os9HxW%2Fmedia-block-reverse.png?alt=media\&token=7ce4265c-08e4-445b-aad5-aca1d21dd025)

Média elemről bővebben:

{% embed url="<https://getbootstrap.com/docs/4.4/components/media-object/>" %}

## 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).

```markup
<div class="card" style="width: 18rem;">
  <img src="duckling.jpg" class="card-img-top" alt="Kiskacsa">
  <div class="card-body">
    <h3 class="card-title">Házikacsa</h3>
    <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>
    <a href="#" class="btn btn-primary">Réce rendelés</a>
  </div>
</div>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0cwt_VcHUnRy0eRYkw%2F-M0d63I4atcl0e3n97N1%2Fcard.png?alt=media\&token=86dd9240-1677-419c-9843-ecb6c117172c)

A kártyában elhelyezett `card-body` osztályú elem gondoskodik az elemek eltartásáról:&#x20;

```markup
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <img src="duckling-t.jpg" class="img-fluid rounded mb-3" alt="Kiskacsa">
    <h5 class="card-title">Házikacsa</h5>
    <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>
    <a href="#" class="btn btn-primary">Réce rendelés</a>
  </div>
</div>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0cwt_VcHUnRy0eRYkw%2F-M0d7TCSWY5FFsNOeJ7J%2Fcard-body.png?alt=media\&token=8626fce9-f1b4-4de7-b86d-7198363ab6af)

A kártyákban el lehet helyezni előre formázott listákat, ezekből  függőleges navigációs menü szervezhető:&#x20;

```markup
<div class="card" style="width: 18rem;">
    <div class="card-header font-weight-bold">
        Kacsaféléink
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item"><a href="#">Házikacsa</a></li>
        <li class="list-group-item"><a href="#">Indiai futókacsa</a></li>
        <li class="list-group-item"><a href="#">Tőkés kacsa</a></li>
    </ul>
</div>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0cwt_VcHUnRy0eRYkw%2F-M0dDDAfjQyuQB7M5Q_x%2Fvertical-menu.png?alt=media\&token=594c3ae0-10fe-4db7-94e4-f5fd761a2238)

Kártyáról bővebben:

{% embed url="<https://getbootstrap.com/docs/4.4/components/card/>" %}

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

```markup
<div class="jumbotron">
   <h1 class="display-4">Üdvözöljük honlapunkon</h1>
   <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing 
   elit. Autem deleniti eos possimus.</p>
   <hr class="my-4">
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi
   eos numquam eius expedita eligendi rerum, exercitationem consequuntur
   voluptatem aut quisquam?</p>
   <a class="btn btn-primary btn-lg" href="#">Olvasson tovább</a>
 </div>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0dDg_zvL0aW2ex7kUJ%2F-M0dhFnQc4bbslwylruO%2Fjumbotron.png?alt=media\&token=03731515-e262-4514-8930-b891bcfebd23)

A Jumbotronnak van egy széles (faltól falig érő) változata. ezt a `jumbotron-fluid` osztállyal hozzuk létre.

```markup
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">Üdvözöljük honlapunkon</h1>
        <p class="lead">Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Autem deleniti eos possimus.</p>
        <hr class="my-4">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing
        elit. Animi eos numquam eius expedita eligendi rerum,
        exercitationem consequuntur voluptatem aut quisquam?</p>
        <a class="btn btn-primary btn-lg" href="#">Olvasson tovább</a>
    </div>
</div>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M0dDg_zvL0aW2ex7kUJ%2F-M0dihD3_rxADk2Dtmne%2Fjumbotron-fluid.png?alt=media\&token=47a240be-283a-47bf-b962-5382cc11b97d)

Jumbotronról bővebben:

{% embed url="<https://getbootstrap.com/docs/4.4/components/jumbotron/>" %}

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

```markup
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M1MfTpot9tksfl2TR3F%2F-M1MgmhImL6jvZK5iam9%2Fnavbar.png?alt=media\&token=75db83e2-253c-4b1f-8bc4-9adf5a275561)

A következő példában a könnyebb áttekinthetőség miatt csak egy szintű menü, található:

```markup
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #0ca678;">
    <a class="navbar-brand" href="#">Cég KFT.</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
        aria-expanded="false" aria-label="Toggle navigation"></button>
    <div class="collapse navbar-collapse" id="collapsibleNavId">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
                <a class="nav-link" href="#">Főoldal</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Termékek</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Kapcsolat</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Keresés">
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Keresés</button>
        </form>
    </div>
</nav>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M1MfTpot9tksfl2TR3F%2F-M1MhTJH5E4u4K_1iZFM%2Fcompact-navbar.png?alt=media\&token=5f40e856-8049-492d-ad81-d544510db455)

Bővebben a navigációs sávról:

{% embed url="<https://getbootstrap.com/docs/4.4/components/navbar/>" %}

## Gomb

A Bootstrap gomb komponense jelentéstartalomtól függő megjelenést biztosít a linkeknek (`a`), és a [gomb](/digitalis-kiadvanyok/html/html-elemek.md#urlapok) elemeknek (`button`).

```markup
<a href="#" class="btn btn-primary">Elsődleges</a>
<a href="#" class="btn btn-secondary">Másodlagos</a>
<a href="#" class="btn btn-success">Siker</a>
<a href="#" class="btn btn-danger">Veszély</a>
<a href="#" class="btn btn-warning">Figyelmeztetés</a>
<a href="#" class="btn btn-info">Információs</a>
<a href="#" class="btn btn-light">Világos</a>
<a href="#" class="btn btn-dark">Sötét</a>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M1LoZtjzgECZft_iinS%2F-M1Lwin8ar4F3saIk5Ji%2Fbuttons.png?alt=media\&token=59d5ec87-793a-4fb6-8027-adfa3c58f00b)

Használhatunk `a` vagy `button` elemet, a megjelenésük meg fog egyezni:

```markup
<a href="#" class="btn btn-primary">Én egy link vagyok</a>
<button type="button" href="#" class="btn btn-primary">Én egy gomb vagyok</button>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M1LoZtjzgECZft_iinS%2F-M1LxemWLlylvAqMg1OM%2Fa-button.png?alt=media\&token=042384ca-2cb8-4509-8730-5bec5b8e7011)

A `btn-sm` és a `btn-lg` CSS osztályokkal kis és nagy méretű gombokat tudunk létrehozni:

```markup
<a href="#" class="btn btn-primary btn-sm">Kis gomb</a>
<a href="#" class="btn btn-primary">Közepes gomb</a>
<a href="#" class="btn btn-primary btn-lg">Nagy gomb</a>
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-M1LoZtjzgECZft_iinS%2F-M1LyfD_fs5EqAHqAv2S%2Fbutton-sizes.png?alt=media\&token=d4603fb5-b8a1-4767-9b75-2a7e214dc7c9)

Gomb komponensről bővebben:

{% embed url="<https://getbootstrap.com/docs/4.4/components/buttons/>" %}