Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
mattias_guestbook [2019-12-16 15:30]
Mattias Hamberg created
mattias_guestbook [2021-12-21 12:38]
Mattias Hamberg
Line 17: Line 17:
 I denna uppgift ska du få testa att använda dig av Bootstrap. Detta gör du genom att i head-sektionen lägga till följande css-filer: I denna uppgift ska du få testa att använda dig av Bootstrap. Detta gör du genom att i head-sektionen lägga till följande css-filer:
  
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> +<code html> 
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css">+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 
 +</code>
  
 Lägg också till dessa script alldeles innan `</body>`-taggen i slutet av dokumentet Lägg också till dessa script alldeles innan `</body>`-taggen i slutet av dokumentet
  
-  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script+<code html
-  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> 
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> +</code>
 ==== Studera dokumentationen ==== ==== Studera dokumentationen ====
  
-Nästa steg är att kolla igenom och försöka förstå dokumentationen. Den hittar du på: https://getbootstrap.com/ och bör användas under hela uppgiften. Poängen är att du ska lära dig att söka, hitta och använda dig av dokumentationer.+Nästa steg är att kolla igenom och försöka förstå dokumentationen. Den hittar du på: https://getbootstrap.com/docs/5.1/ och bör användas under hela uppgiften. Poängen är att du ska lära dig att söka, hitta och använda dig av dokumentationer.
  
 ==== Regler & tips ==== ==== Regler & tips ====
  
-  - Ditt slutresultat ska se exakt ut som facitbilderna.+  - Ditt slutresultat ska se typ exakt ut som facitbilderna (Facit är framtaget med Bootstrap 4.5).
   - Du får använda dig av Bootstrap och Bootstraps dokumentation.   - Du får använda dig av Bootstrap och Bootstraps dokumentation.
-  - Du får inte skriva någon css själv+  - Du får inte skriva någon egen css. 
-  - Du får inte lägga till några ytterligare element i din html-markup+  - Inga classoch for-attribut ska vara tomma
-  - Alla class-attribut ska innehålla en klass.+  - Du ska validera den data du skickar och visa ett felmeddelande för dina besökare
  
 ==== Ladda ner ==== ==== Ladda ner ====
  
-Den zip-fil du ska utgå ifrån är denna.+Den zip-fil du ska utgå ifrån är denna
 + 
 +{{mattias_guestbook.zip}}