Bootstrap 4 - Bootstrap eksempler

Under menupunktet 'Examples' viser Bootstrap 17 forskellige små templates , med forskellige eksempler på kode. De kan give mulighed for at 'se hvordan'. For hver af dem vises nedenfor:

Som fuld skærm

pdf-fil med deres HTML-kode

pdf-fil med deres ekste CSS-kode

javaScript (kun et par stykker)

Eksempel navn	Link til eksempel	Link til CSS-koden	Beskrivelse
Framework
Starter template			Fuldskærm position: fixed; menu og search øverst. Simpel side med centreret brødtekst.
Grid			Omfattende intro til opbygning af div-bokse og kolonner.
Jumbotron			Fuldskærm menu og search øverst. Jumbotron i container. 3-kolonners brødtekst i container. Footer i container.
Narrow Jumbotron			Header med højrestillet menu, jumbotron, brødtekst og footer samlet i container: @media (min-width: 48em) { }. (768px).
Navbars
Navbar			Opbygning af 10 forskellige menuer. 9 første med "Search": 1. Burgermenu. Udenfor container. 2. Til brug i alle viewports. Ovenfor container. 3. Til brug i viewport SM. Ovenfor container. 4. Til brug i viewport MD. Ovenfor container. 5. Til brug i viewport LG. Ovenfor container. 6. Til brug i viewport XL. Ovenfor container. 7. Til brug i viewport LG. Ovenfor container, men med container indlejret. 8. Til brug i viewport LG. Ovenfor container. Centreret. 9. Til brug i viewport LG. Indenfor container. 10. Til brug i viewport LG. Indenfor container. Centreret.
Static Top Navbar			Ovenfor container. Følger scroll.
Fixed Top Navbar			Ovenfor container. Forbliver under skærmtop ved scroll.
Bottom Navbar		Ingen	Nedenfor container. Forbliver over skærmtop ved scroll.
Custom components
Album	-		Billedgalleri (thumbnails) i flere kolonner og ubegrænset antal rækker med tekst under billeder.
Cover			Simpel template til opbygning af en fuld-skærm responsiv side. (Tilsyneladende kode baseret på tidligere - nu ikke brugbar - Bootstrap-kode).
Carousel	-		Menu ovenfor container. Div-blok ovenfor container med fuldskærm carousel. Separat divblok og indlejret container for hvert billede i karrusellen.
Blog			Opbygning af Wordpress-lignende blog-side med bred og smal kolonne.
Dashboard			Opbygning af dashboard med fixed menu ovenfor container. Anvender container-fluid. Venstre kolonne 3 <ul-blokke med
Sign-in page			Vindue til Log ind.
Justified Nav			Marketing stuff!
Sticky Footer			Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.
Sticky Footer w/ Fixed Navbar			Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the body > .container.
Experiments
Off Canvas			This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.