Bootstrap je velice jednoduchý nástroj na pochopení, má již přednastavené třídy s CSS atributy, tato stránka slouží pouze pro letmou ukázku. S Bootstrape je možné vytvořit jakoukoliv kombinaci grafického rozvržení, pro případné detailnější syntaxe kódu odkazuji na W3Schools, kde najdete vše potřebné k maturitě a dalším projektům.
Pro importování bootstrapu vložíme tuto část kódu do <head>:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap rozlišuje 2 druhy kontejnerů
.container
.container-fluid, který zabírá celkovou šíři obrazovky
Stránka v se v bootsrapu dělí na 12 dílků, dílky můžeme používat jak chceme, ale jejich součet musí vždy být menší nebo roven 12
col pužíváme pro určení velikosti dílků
col-*-*pužíváme pro responzivní design, kde první * určuje responsivitu (sm,md,lg,xl,xxl) a druhá * počet dílků
<mark> - vypadá takto mark
<abbr> - vypadá takto abbr
<code> - vypadá takto code
<kbd> - vypadá takto kbd
Třídy barev jsou: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body a .text-light
muted
important
success
information
warning
danger
secondary
dark grey
body
Stejné barvy fungujou i na pozadí s třídou bg-*barva*
The .table class adds basic styling (light padding and horizontal dividers) to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |