logo Czechitas HTML a CSS

Bootstrap

Bootstrap je jeden z mnoha CSS frameworků, které vám usnadní vytváření responzivních webových stránek. Jeho výhodou je, že je velmi rozšířený, takže na něj najdete spoustu návodů a příkladů. Bootstrap je také velmi dobře zdokumentovaný.

Napojení

Nejjednodušší způsob, jak začít používat Bootstrap, je přidat odkaz na jeho CSS soubor do hlavičky HTML. To uděláte takto:

<html>
	<head>
		<!-- … -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link
			href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
			rel="stylesheet"
		/>
	</head>
	<!-- … -->
</html>

Rozložení stránky

Bootstrap vám nabízí mnoho prvků. Kombinací .container, .row a .col můžete vytvořit responzivní rozložení stránky. Více o grid systému v dokumentaci. Pro nastavení mezer mezi sloupci a řádky slouží gutters. Pro obecnější nastavení mezer slouží Spacing.

Responzivní obrázky

Třída img-fluid přidá obrázku max-width: 100%, aby nepřetekl rodiče, a height: auto, aby si udržel poměr stran.

<img src="…" class="img-fluid" alt="…" />

Předchystané komponenty

Pro pokročilé

Cvičení