Bootstrap - opbygning

Overblik

En bootstrap side er opbygget ligesom et almindeligt HTML5 dokument, men hvor selve body inddeles i sektioner. Sektionerne (kaldet containers) er opbygget som herinder.

_
_

Med kode vil det se ud som herunder:

	
<div class="container">

		<div class="row">
		
				<div class="col-xs-xx">
			
						*** INDHOLD ***	

				</div> <!-- Slut på col -->
		
				<div class="col-xs-xx">
			
						*** INDHOLD ***	

				</div> <!-- Slut på col -->
	
		</div> <!-- Slut på row-->
	
</div> <!-- Slut på container -->
	

Mobile first

Bootstrap er designet til at være mobile first og at være responsive. Dvs. at det automatisk vil tilpasse sig den enhed du ser produktet på.

I tabellen herinder kan du se de maksimale bredder som Bootstrap er designet til.

Enhed Skærmstørrelse Maksimal bredde Klasse
Telefoner mindre end 768 Fylder hele enheden (auto) col-sm-
Tablets større end 768 760 pixels col-md-
Små skærme større end 992 970 pixels col-lg-
Store skærme større end 1200 1170 col-xl-

Containers

Containerer er det mest basale layoutelement i bootstrap. Containere er bootstrapsidens byggeklodser.

Man kan forestille sig at en bootstrap en række stablede containere. På den måde kan man både opdele sin side semantisk (indholdsmæssigt), eller efter design

_
_

Container typer

Der findes to klasser af containere.

  • container
  • container-fluid

class="container"

	
<div class="container">
  ...
</div>
	

class="container-fluid"

	
<div class="container-fluid">
  ...
</div>
	

Forskellen mellem de to klasser er, at container maksimalt fylder 1200 pixels, hvor container-fluid fylder hele skærmen.

Vidas.dk er sat på med container-fluid, så siden kan bruge hele skærmen.

Rækker og kolonner

For at kunne styre designet i bootstrap kan man anvende et GRID-system. På den måde kan man inddele en sin continer ved at angive hvor mange kolonner hver sekstion skal dække. Se nedestående tabel:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

vidas.dk er inddelt med 3-6, hvor menuen er i de tre første kolonner.

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
Menu Indhold

Man får adgang til GRID systemet ved at indsætte nedenstående kode. Her sat på til en 3-9 konfiguration:

	
<div class="container">

	<div class="row">

			<div class="col-xs-3">
		
					*** Indholdsfortegnelse ***

			</div> <!-- Slut på col -->

			<div class="col-xs-9">
		
					*** Brødtekst ***	

			</div> <!-- Slut på col -->

	</div> <!-- Slut på row-->
	
</div> <!-- Slut på container-->
	

Kolonne klasser

Det responsive design (tilpassende design) fungerer ved at det fjerner containerns kolonneinddeling ved et "breaking point". Du kan prøve at se effekten i de to nedestående dokumenter.

Testdokument med class="container": test_container.html (maksimal bredde = 1200px)

Testdokument med class="container-fluid": test_container_fluid.html (fylder hele browserens bredde)

Læg mærke til hvordan de enkelte containere går fra et kolonne design ved deres "breaking point" til at de kommer til at de står under hinanden.

Enhed Breaking point Maksimal bredde Klasse
Alle skærme mindre end 576 col-
Telefoner mindre end 768 Fylder hele enheden (auto) col-sm-
Tablets større end 768 760 pixels col-md-
Små skærme større end 992 970 pixels col-lg-
Store skærme større end 1200 1170 col-xl-

Mockup

Hvis du vil designe din side på papir først, så kan du downloade et Bootstrap Grid her: A4 side med Bootstrap Grid.

Ekstra design

På w3cschools side om Bootstrap kan du læse om hvordan du kan indsætte andre designelementer som:

  • Knapper
  • Inputfelter
  • Dropdowns
  • Modal (popup vinduer)
  • Kolaps
  • ...

Læs mere her: https://www.w3schools.com/bootstrap/

Button Styles

Well Size

Small Well
Normal Well
Large Well

Alerts

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.

Glyphicon Examples

Envelope icon:

Envelope icon as a link:

Search icon:

Search icon on a button:

Search icon on a styled button:

Print icon:

Print icon on a styled link button: Print

Vertical (basic) form

Form control: input

The form below contains two input elements; one of type text and one of type password:

Modal Example

Tooltip Example

Hover over me

Popover Example

Toggle popover

Skabelon

Her kan du hente en standardskabelon der indeholder en jumbotron.

bootstrap_skabelon.zip