Both sides previous revision
Previous revision
Next revision
|
Previous revision
Next revision
Both sides next revision
|
mattias_guestbook [2019-12-16 15:32] Mattias Hamberg [Ladda ner] |
mattias_guestbook [2019-12-17 10:18] Mattias Hamberg [Lägg till Bootstrap] |
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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css"> |
| </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://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> | <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://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/ 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. För att komma igång får du gärna titta på denna video: |
| |
| <html> |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/7g8Gg2QVdeU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
| </html> |
==== Regler & tips ==== | ==== Regler & tips ==== |
| |
- Ditt slutresultat ska se exakt ut som facitbilderna. | - Ditt slutresultat ska se exakt ut som facitbilderna. |
- 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 class- och for-attribut ska vara tomma. |
- Alla class-attribut ska innehålla en klass. | |
| |
==== Ladda ner ==== | ==== Ladda ner ==== |