logo   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 navnLink til
eksempel
Link til
HTML-koden
Link til
CSS-koden
Link til
java
Script
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.




















x
x