Dobozok

Alert (riasztás)

Az alert "dobozok" figyelmeztetésre, riasztásra lettek kitalálva, de használhatók a tartalom egy részének színekkel való kiemelésére is. (Szélességük akkora, hogy teljesen kitöltik a tartalmazó objektumot.)

A lentieken kívül használható még az alert-primary, alert-secondary, alert-dark és alert-light is.

HTML kód

	<div class='alert alert-success'>
		<h5>Cím: alert-success</h5>
		<p>Figyelmeztetés szövege.</p>
	</div>

Eredmény

Cím: alert-success

Figyelmeztetés szövege.

HTML kód

	<div class='alert alert-info'>
		<h5>Cím: alert-info</h5>
		<p>Figyelmeztetés szövege.</p>
	</div>

Eredmény

Cím: alert-info

Figyelmeztetés szövege.

HTML kód

	<div class='alert alert-warning'>
		<h5>Cím: alert-warning</h5>
		<p>Figyelmeztetés szövege.</p>
	</div>

Eredmény

Cím: alert-warning

Figyelmeztetés szövege.

HTML kód

	<div class='alert alert-danger'>
		<h5>Cím: alert-danger</h5>
		<p>Figyelmeztetés szövege.</p>
	</div>

Eredmény

Cím: alert-danger

Figyelmeztetés szövege.


Jumbotron

Nagyon könnyen használható, rugalmas komponens, amely segítségével kiemelhetünk valamilyen tartalmat, információt.

HTML kód

	<div class='jumbotron'>
		<h1>Jumbotron cím</h1>
		<p>Ez egy olyan komponens, amely kiemel valamilyen tartalmat, információt.</p>
	</div>

Eredmény

Jumbotron cím

Ez egy olyan komponens, amely kiemel valamilyen tartalmat, információt.

HTML kód

	<div class='jumbotron bg-info text-white w-75'>
		<h1 class='text-center'>Figyelem!</h1>
		<p class='lead'>Ez egy olyan komponens, amely kiemel valamilyen tartalmat, információt.</p>
		<hr class='my-4'>
		<p>Háttérszíne: bg-info (kék), szövegszíne: text-dark (sötétszürke), szélessége: w-75 (75%)</p>
		<p>Címe: címsor1 (h1) és középre igazított (text-center)</p>
		<p>Címsor alatti bekezdés: ritkított, nagyobb betűméretű; alatta: vízszintes választóvonal</p>
		<p>Lenn: gomb (btn), nagyméretű (btn-lg), háttérszíne (btn-primary), szövegszíne (text-light) </p>
		<a class='btn btn-lg btn-primary text-light' href='#'>Tovább</a>
	</div>

Eredmény

Figyelem!

Ez egy olyan komponens, amely kiemel valamilyen tartalmat, információt.


Háttérszíne: bg-info (kék), szövegszíne: text-dark (sötétszürke), szélessége: w-75 (75%)

Címe: címsor1 (h1) és középre igazított (text-center)

Címsor alatti bekezdés: ritkított, nagyobb betűméretű; alatta: vízszintes választóvonal

Lenn: gomb (btn), nagyméretű (btn-lg), háttérszíne (btn-primary), szövegszíne (text-light)

Tovább

Modal

A Bootstrap "Modal" komponense egy felugró ablak, amely az aktuális oldal tetején jelenik meg tetszőleges egyedi tartalommal (szöveg, kép, gombok, ...). A modulok HTML, CSS és JavaScript segítségével épülnek fel.

A modal melletti háttérre, vagy benne az "X" vagy a "Close/Zárás" gombra (ha van) kattintva a modál automatikusan bezárul.

A Bootstrap egyszerre csak egy modális ablakot támogat (pontosabban egyszerre egy látható).

HTML kód

	<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal1'>
		Modal1 nyitása
	</button>
	<div class='modal' id='myModal1'>
		<div class='modal-dialog'>
			<div class='modal-content'>

				<div class='modal-body'>
					Modal törzs (body)
				</div>

			</div>
		</div>
	</div>

Eredmény fenn

Ügyeljünk a "modalbeli" kódok egyezésére (pirossal kiemelve)! A kód bármilyen szöveg lehet, de a másik modal kódjával nem egyezhet meg!

HTML kód

	<button type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal2'>
		Modal2 nyitása
	</button>
	<div class='modal' id='myModal2'>
		<div class='modal-dialog'>
			<div class='modal-content'>

				<div class='modal-header'>
					<h4 class='modal-title'>Modal fejrész (header)</h4>
					<button type='button' class='close' data-dismiss='modal'>×</button>
				</div>

				<div class='modal-body'>
					<p>Modal törzs (body): itt a "hasznos" szöveg</p>
				</div>

				<div class='modal-footer'>
					Modal lábrész (footer)
					<button type='button' class='btn btn-info' data-dismiss='modal'>Zárás</button>
				</div>

			</div>
		</div>
	</div>

Eredmény fenn

Ügyeljünk a "modalbeli" kódok egyezésére (pirossal kiemelve)! A kód bármilyen szöveg lehet, de a másik modal kódjával nem egyezhet meg!


Card (kártya)

A kártyáknak nincs rögzített szélessége az induláshoz, ezért természetesen kitöltik a szülőelem teljes szélességét. Ez könnyen testreszabható a különböző méretezési lehetőségekkel. (Itt például a szélesség százalékos beállításával: w-75, w-50, w-25.)

A lentieken kívül használható még az alert-success, alert-info, alert-warning és alert-danger is.

HTML kód

	<div class='card bg-dark text-success'>
	  <div class='card-body'>
		<h5 class='card-title'>Kártyacím</h5>
		<p>A kártya tartalma.</p>
	  </div>
	</div>

Eredmény

Kártyacím

A kártya tartalma.

HTML kód

	<div class='card bg-light w-50'>
	  <div class='card-body'>
		<h5 class='card-title'>Kártyacím</h5>
		<p>A kártya tartalma.</p>
	  </div>
	</div>

Eredmény

Kártyacím

A kártya tartalma.

HTML kód

	<div class='card bg-primary text-white w-25'>
	  <div class='card-body'>
		<h5 class='card-title'>Kártyacím</h5>
		<p>A kártya tartalma.</p>
	  </div>
	</div>

Eredmény

Kártyacím

A kártya tartalma.

HTML kód

	<div class='card bg-secondary text-dark w-75'>
	  <div class='card-body'>
		<h5 class='card-title'>Kártyacím</h5>
		<p>A kártya tartalma.</p>
	  </div>
	</div>

Eredmény

Kártyacím

A kártya tartalma.