Bootstrap

Bootstrap er et komplett css stylesheet som inneholder veldig masse flotte ting. det er også responsivt og fungerer godt på mobiltelefon og nettbrett. Hvorfor finne opp kruttet når andre allerede har gjort det?

Du kan se mange eksempler på drosdal.no

Hvordan bruke det?

Du kan laste ned nødvendige filer, men det enkleste er å linke til filer på nettet (en css-fil og to javaScript filer)

I head-delen limer du inn følgende: 

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>

Hele head-en kan se slik ut:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <title>Testing av Bootstrap 3</title>
</head>

Bootsrap bygger også på k12 kolonner:

  1. Bruk container for å få en fin formatering på innholder. Start body med: <div class="container">og avslutt body med < /div> (aaltid lurt å skrive <!-- End container --> så du holder styr på hvilke div-er som avsluttes)
  2. Lag en rad: <div class="row"> - husk å avslutte på same måte som pkt.1.
  3. Ny div med kombinasjoner av kolonner der sum = 12 (12, 6+6, 4+4+4, 4+8, 3+3+3+3 etc.) Skriv: <div class="col-md-12"> - husk å avslutte hver div

Hvis du ikke orker/får tid til å gjøre dette selv kan du bruke denne malen. Den har først kun en spalte (12), deretter 6+6 (to halvdeler), deretter 4+4+4 (3 kolonner.)

Eksempler

Bruk <small> for å lage en sekundær heading: den sekundære teksten blir alltid mindre enn hovedteksten

Agder folkehøgskole Landets sørligste

Runde bilder

Bente

For å lage firkant med avrundede kanter: bytt ut img-circle med img-rounded. Prøv også img-thumbnail og img-responsive.

Trenger du å lage et oppslag som vises godt? Da kan du bruke jumbotron:

Kjempetilbud

Her kan du finne alt du trenger til en veldig rimelig penge, - det er sikker dårlig kvalitet.

Prøv evt. addr, kbd, btn btn-warning btn-lg - Stor knapp.

Lær mer på w3school.