Det finns massor med guider och hjälpsidor i form av pdf:er, videor och annat på internet. Googla dig fram!

Bootstraps webbsajt innehåller mycket matnyttigt. Läs särskilt Getting started, CSS samt Components.

w3schools har massor med bra kodexempel. Du kan även prova modifiera exemplen och se vad det ger för resultat. Praktiskt!

Du kan också googla fram guider, till exempel Create a responsive website in Dreamweaver CC – Part 1, Part 2 och Part 3 och filmen Build responsive websites in Dreamweaver CC.

Dreamweaver har en hjälptext på svenska som visar hur man skapar Boostrap-dokument och lägger till Bootstrap-komponenter.


skapa bootstrapsida i dreamweaver


om bootstrap

Twitter Bootstrap använda för att bygga responsiva webbplatser (webbplatser som anpassar sig efter storleken på skärmen). Det är ett kostnadsfritt ramverk som använder sig av HTML, CSS och JavaScript. Ramverket innehåller mallar för typografi, navigering, bildspel (carousel), knappar, formulär och mycket annat. Man lägger enkelt in sådana på sina webbsida och kan sedan anpassa dem efter egna behov och önskemål.

Bootstrap skapades av Mark Otto och Jacob Thornton för att ge Twitter ett enhetligt utseende och struktur. En konsekvent struktur sparar tid och gör arbetet effektivare, särskilt när flera olika människor arbetar med samma projekt.

Bootstrap är logiskt och effektivt att arbeta med och relativt enkelt att lära sig använda. Det följer standarder för HTML5 och CSS3 och fungerar bra på olika plattformar och webbläsare.

skapa bootstrapsida i dreamweaver

Denna lathund visar hur du gör om du inte vill utgå från en mall.

  1. Skapa en rotmapp och ställ in rotmappen i Dreamweaver. Det är viktigt eftersom det automatiskt kommer att skapas en del mappar i den mapp som är inställd som rotmapp.
  2. Arkiv > Nytt
  3. Välj Nytt dokument, Dokumenttyp HTML, Ramverk Bootstrap. Vid Bootstrap CSS väljer du Skapa nytt. Om "Ta med en fördefinierad layout" är förbockad tar du bort den bocken (förutsatt att du vill bygga upp sidan själv).
  4. Skapa
  5. Ge sidan en lämplig titel och spara den som index.html.
  6. Börja bygga sajten.

 

tänk i rutsystem

När du designar i Bootstrap ska du tänka dig ett rutsystem.

Precis som när ni designat webbsidor tidigare börjar du med en container som samlar innehållet. Standardbredden för containern är 1170 pixlar för en stor skärm. Denna delas in i 12 kolumner, vilket ger 97 pixlar per kolumn för en stor skärm. Mindre skärmar ger smalare kolumner.

Nu blir det lite rörigt, för kolumner kan vara både de tolftedelar som containern delas in i, och de synliga kolumner som du använder i din design. Hädanefter kommer jag att kalla en "standardkolumn" för en tolftedel, och de kolumner du själv väljer att använda i din layout för kolumn. Den sistnämda kan alltså sträcka sig över en eller flera tolftedelar.

Du gör rader (row) och lägger där in kolumner i önskad bredd utifrån hur många tolftedelar breda de ska vara. Du kan också välja att en kolumn ska läggas ett visst antal kolumner från kanten.

Några exempel:

kolumner

Om skärmen, eller snarare webbläsarfönstret, är tillräckligt bred kommer kolumnerna på respektive rad att ligga bredvid varandra horisontellt. Om skärmen är liten hamnar de under varandra.

Om mer än 12 kolumner placeras på en rad kommer de kolumner som inte ryms hoppa ner och lägga sig under de andra.

Läs mer på getbootstrap.com/css/#grid-example-basic.


container, rader & kolumner


container

Panelen Infoga > Bootstrap-komponenter > Container eller Container-fluid. (Om du inte ser panelen hittar du den under menyn Fönster > Infoga.)

Båda varianterna, container och container-fluid, är responsiva men på olika sätt. Du kan se båda varianterna nedan (ljusgröna linjer), eller ännu hellre genom att klicka här så slipper du scrolla upp och ner när du ska begrunda skillnaden. Sitter du vid en större skärm kan du prova dra i webbläsarfönstrets kant så det blir bredare respektive smalare och se containrarna uppträder.

Klassen .container har en fast bredd för varje skärmstorlek som anges i stilmallen. Minskar webbläsarfönstrets storlek kommer containerna att minska i storlek stegvis. Koden du använder är:

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

Med klassen .container-fluid fylls hela webbläsarfönstrets bredd. Koden är:

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

 

skärmar & tolftedelsbredder

extra små skärmar (telefoner)

Mindre än 768 pixlar breda
Container-bredd: auto
Tolftedelsbredd: auto
Klass-prefix: .col-xs-

 

små skärmar

Mer än 768 pixlar breda
Container-bredd: 750 pixlar
Tolftedelsbredd: ca 62 pixlar
Klass-prefix: .col-sm-

 

mediumstora skärmar

Mer än 992 pixlar breda
Container-bredd: 970 pixlar
Tolftedelsbredd: ca 81 pixlar
Klass-prefix: .col-md-

 

stora skärmar

Mindre än 1200 pixlar breda
Container-bredd: 1170 pixlar
Tolftedelsbredd: ca 97 pixlar
Klass-prefix: .col-lg-

 

(Det går ändra inställningarna i stilmallen vid behov.)

infoga rader

Panelen Infoga > Bootstrap-komponenter > Grid Row with column. Du kommer att få frågan hur många kolumner du vill ha på raden. Väljer du till exempel tre, kommer du att få tre kolumner som sträcker sig över fyra tolftedelar vardera.

Det går också bra att skriva in koden för att skapa en rad manuellt:

<div class="row">
Innehåll
</div>

 

.container

.container-fluid

infoga kolumner

I detta fall avses de synliga kolumnerna på sidan, alltså inte de de tolftedelar som containern delas in i utan den eller de kolumner du använder i din design. Sådana kolumner kan räcka över en eller flera tolftedelar av containern.

Om du använder Dreamweavers verktyg "Grid Row with column" skapas kolumnerna automatiskt när du lägger in en rad. Ofta kan det vara lika enkelt att skriva in koden manuellt, särskilt om man vill ha olika breda kolumner.

<div class="row">
<div class="col-md-8">
... </div>
<div class="col-md-4">
... </div>
</div>

Exempel på kolumner

.col-md kan bytas mot annat prefix efter önskemål. Se gulmarkerad text högre upp på sidan. Man kan även ange olika bredd på kolumnen för olika skärmar om man vill:

<div class="row">
<div class="col-xs-12 col-md-8">
... </div>
<div class="col-xs-6 col-md-4">
... </div>
</div>

 

Om du vill att kolumnen ska förskjutas en eller flera tolftedelar åt höger använder du offset. I exemplet nedan är kolumnen sex tolftedelar bred och centrerad genom att förskjutas tre tolftedelar åt höger.

<div class="row">
<div class="col-md-6 col-md-offset-3">
... </div>
</div>

Exempel på kolumner

 

Klicka här så kan du se hur rader med tre kolumner med olika klasser uppträder på olika skärmar!

container, row & div

Dags för en liten sammanfattning. Koden för en container innehållande två rad och tre kolumner (som vardera spänner över fyra tolftedelar) per rad blir:

<div class="container">

<div class="row">
<div class="col-md-4"> ... </div>
<div class="col-md-4"> ... </div>
<div class="col-md-4"> ... </div>
</div>

<div class="row">
<div class="col-md-4"> ... </div>
<div class="col-md-4"> ... </div>
<div class="col-md-4"> ... </div>
</div>

</div>

visa eller gömma element

Ibland kan man välja att dölja en del av innehållet om skärmen är liten. Det kan man göra genom att lägga till klassen .hidden följt av vilken skärmstorlek det ska gälla. Sitter du vid en lite större skärm, prova dra i kanten på webbläsarfönstret och göra det smalare och bredare. Eller ännu heller, klicka här så öppnas koden i ett eget fönster där inte annat innehåll gör att du måste scrolla upp och ner. I exemplet nedan är klassen lagd till taggen för stycke, p, men kanske vanligare är att man döljer en hel kolumnm om skärmen är liten.

<p class="hidden-xs">.hidden-xs</p>

.hidden-md

På samma sätt går det välja att innehåll bara visas på vissa skärmstorlekar med klassen .visible

.visible-xs

.visible-sm

.visible-md

.visible-lg

 

Missa inte exemplen på en egen sida!


bootstrapkomponenter


infoga bootstrapkomponenter

En stor fördel med Bootstrap är att det finns en mängd element som är fördefinerade. Du behöver alltså inte koda så mycket. Det finns färdiga menyer, knappar, bildspel (carousel) och mycket annat att lägga in. Läs mer på getbootstrap.com/components.

För att lägga in en komponent går du till panelen Infoga och väljer Bootstrap-komponenter och den komponent du vill använda.

meny med navbar-verktyget

Panelen Infoga > Bootstrap-komponenter > Navbar (välj vilken) ger en färdig list med diverse innehåll som du enkelt anpassar till dina behov.

 

vilken ska jag välja?

Basic navbar ger en meny överst på sidan. Skrollar du följer menyn med.

<nav class="navbar navbar-default">

Navbar fixed to top lägger sig överst på sidan och ligger kvar där även om du skrollar ner. Padding kommer att läggas till i body automatiskt för att inte översta delen av sidan ska döljas av menyn.

<nav class="navbar navbar-default navbar-fixed-top">

Navbar fixed to bottom hamnar längst ner och ligger synligt där hela tiden även om du skrollar.

<nav class="navbar navbar-default navbar-fixed-bottom">

Inverted navbar ger en meny på mörk bakgrund.

<nav class="navbar navbar-inverse">

 

vad är brand?

Här kan du skriva ett sidans eller företagets namn, eller med fördel lägga in en logotype.

<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>

 

formuläret

Med navbar läggs ett formulär in. Det kan användas till exempel som sökformulär, men fungerar inte av sig självt. Det går vi inte igenom här. Har du inte tänkt använda det, ta bort det.

 

hur tar man bort element från navbar?

Ett bra sätt att försäkra sig om att ta bort rätt rader om man inte är så van att koda är att använda sig av DOM-panelen. (Ser du den inte hittar du den under menyn Fönster.) Klicka någonstans i det du vill ta bort så ser du vad som blir markerat i DOM-panelen. Prova klicka steg för steg uppåt och se vad som markeras då. När för mycket blir markerat, går du tillbaka neråt ett steg och trycker på Delete-knappen. Blev det fel, ångra med Commando-Z (mac) eller Control-Z (PC). (Du hittar en liknande funktion precis under fönstret du kodar i.)

Är det formuläret i navbar du vill ta bort är det "Form" du ska markera och ta bort.

 

container eller container-fluid?

När du lägger in en navbar läggs den i en "container-fluid". På en större skärm kommer innehåll att hamna längst ut mot sidorna av skärmen.

Navbar i container-fluid

Vill du att det ska ligga i linje med container-innehåll på sidan är det enkelt att ändra från:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">

till:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">

Navbar i container

 

Läs mer under Navbar på getbootstrap.com.

andra menyer & menyobjekt

Självklart behöver du inte använda en färdig navbar från Dreamweavers Infoga-meny för att göra en meny. Det finns många olika sätt att gå tillväga.

Det finns flera olika knappar, listor, flikar och annat som går använda i menyer på Infoga-menyn i Dreamweaver.

Det finns mycket läsvärt i ämnet på getbootstrap.com. Några särskilt intressanta delar när det gäller menyer kan vara:

 

multi level dropdown

I tidigare versioner av bootstrap hittade man information om hur man gör multi level dropdowns, alltså menyer med undermenyner i flera steg. I informationen till den version som gäller i skrivande stund (3.3.6) hittar jag inget sådant. En ren gissning är att det är för att det inte fungerar så bra på mobiltelefoner (men egentligen har jag alltså ingen aning). Det är inget problem att söka fram instruktioner om hur man gör ändå, men man bör tänka sig för innan man lägger in sådant som inte fungerar i olika webbläsare och på olika plattformar. Likafullt har jag valt att använda mig av enstaka sådana på min site (läroboken och uppgifterna i fotokursen) för att menyerna i dessa fall skulle bli så enormt långa annars. I de fallen har jag lagt in dubbla menyer för att inte utestänga dem som besöjer sajten från en mobiltelefon.


Panelen Infoga > Bootstrap-komponenter > Carousel

 

Storleken på bilderna bör väljas utifrån den storlek de får på stora skärmar. Är de större blir bildspelet onödigt tungladdat. Ofta är det snyggt med samma storlek på alla bilder, men det fungerar förstås inte om du växlar mellan stående och liggande bilder. Personligen brukar jag välja att ha samma höjd på bilderna en sådan gång, men tittar man på dem på en mobiltelefon kommer de ändå att variera i höjd. Tänk på att filnamnen inte får innehålla å, ä, ö, mellanslag eller konstiga tecken!

I koden som skapas finns plats för tre bilder, men det är inga problem lägga till fler. Lägg till en till listpost för varje extra bild och ge den ett högre nummer:

<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
<li data-target="#carousel1" data-slide-to="3"></li>
</ol>

 

Dessutom duplicerar du följande:

<div class="item"><img src="bildens_namn.png" alt="Bildtext" class="center-block">
<div class="carousel-caption">
<h3>Third slide Heading</h3>
<p>Third slide Caption</p>
</div>
</div>

Fyll i önskad bildtext, eller ta bort följande rader om du inte vill ha någon:

<h3>Third slide Heading</h3>
<p>Third slide Caption</p>

Om du vill veta mer om vad koden som infogas betyder hittar du en förklaring på w3schools.com.

---

Om du har större utrymme än bilderna fyller upp ser du grå toningar på sidorna. Vill slippa dem kan du skapa en extra stilmall (om du inte redan gjort det, du bör inte göra egna ändringar i den automatskapade) och lägga in följande kod:

.carousel-control.left, .carousel-control.right {
background-image:none !important;
filter:none !important;
}

responsiv bild

Panelen Infoga > Bootstrap-komponenter > Responsive Image (välj form)

Som vanligt börjar du med att kopiera in bilden till lämplig mapp i rotmappen, ge den ett bra namn och anpassa filstorleken och komprimeringsgraden så att bilden inte blir onödigt tungladdad. Lämplig storlek är den största storlek bilden kommer att visas i. Ska den kunna fylla hela containern behöver du en bredd på ca 1200 pixlar. I och med att du gör bilden responsiv kommer den att krympa vid behov, men sajten blir onödigt tungladdad med för stora bilder.

Följande kod läggs in om du väljer default-inställningen. Du måste själv välja vilken bild som ska visas och fylla i alternativtexten.

<img src="bildens_adress/bildens_namn.png" class="img-responsive" alt="Här skriver du vad bilden föreställer">

Det finns några alternativ:

  • Default
  • Circular gör bilden rund eller oval, beroende på bildens proportioner
    <img src="bild.png" class="img-circle img-responsive" alt="">
  • Rounded corner rundar hörnen på bilden
    <img src="bild.png" class="img-rounded img-responsive" alt="">
  • Thumbnail lägger till en liten ram runt bilden
    <img src="bild.png" class="img-thumbnail img-responsive" alt="">

thumbnail-verktyget

Panelen Infoga > Bootstrap-komponenter > Thumbnail

För att du ska få en chans att förstå detta verktyg infogar jag "thumbnail" rakt av och gör inget mer än att länka in en bild:

Thumbnail Image 1

Thumbnail 1 label

Optional content and buttons for Thumbnail #1

ButtonButton

 

 

Så här ser koden ut. Det infogas alltså en ny rad och kolumn automatiskt (rödmarkerat), och min kolumn delas in ytterligare en gång vilket gör det "tumnageln" väldigt smal. I det här fallet, när jag redan står i en lämplig kolumn, borde jag ta bort dessa rader.

<div class="row">
<div class="col-md-4">

<div class="thumbnail"><img src="/foto/bilder/utsnitt5.jpg" alt="Thumbnail Image 1">
<div class="caption">
<h3>Thumbnail 1 label</h3>
<p>Optional content and buttons for Thumbnail #1</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>

</div>
</div>

Det här fungera bra till exempel på en startsida där man vill locka läsaren att upptäcka mer av sajten, eller kanske för att framhäva en nyhet eller ett erbjudande.

Naturligtvis kan man ta bort en eller båda knapparna om man vill det, och ha vanliga länkar istället, eller länka bilderna.

Vill man ha en annan bredd kan man förstås välja ett annat antal tolftedelar som kolumnen ska nå över:

<div class="col-md-6">

 

 

Ofta duplicerar man det grönmarkerade i koden och lägger in några rutor. Här har jag också lagt in klassen som gör bilderna rundade i hörnen, se "responsiv bild".

<img src="bild.jpg" class="img-rounded" alt="">

Thumbnail Image 1

Agnes

Skön tjej som vet vad hon vill

Läs mer

Thumbnail Image 1

Ruben

Kille med sinne för detaljerna

Läs mer

Thumbnail Image 1

Simon

Nej, han röker inte på riktigt

Läs mer

Läs mer om Thumbnails.


glyphicons

Panelen Infoga > Bootstrap-komponenter > Glyphicones (välj vilken)

Med Bootstrap medföljer ett stort antal glyfer, symboler. De är normalt inte gratis, men Glyphicons bjuder på dem mot att man länkar tillbaka till dem när det är möjligt. Några av dem finns i Infoga-menyn. Övriga hittar du på getbootstraps sajt.

Så här ser det ut om man infogar glyfen Home med Infoga-panelen:

<span class="glyphicon glyphicon-home" aria-hidden="true"></span>

Man kan också använda glyfer på annat sätt, till exempel på en knapp:

<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-volume-off" aria-hidden="true">
</span></button>

 

jumbotron

Panelen Infoga > Bootstrap-komponenter > Jumbotron

Jumbotron är en stor skärm som används på sportarenor och musikkonserter. I webbsammanhang är det ett element som ber om extra uppmärksamhet.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

 

 

breadcrumbs

Panelen Infoga > Bootstrap-komponenter > Breadcrumbs

Breadcrumbs, eller brödsmulor på svenska, används för att visa sökvägen till sidan besökaren navigerat till. Man brukar göra de olika stegen klickbara. Särskilt praktiskt på större sajter.

 


typografi & färger


stilmall

Du får automatiskt med en CSS-fil när du skapar en webbsida i Dreamweaver. Den är låst för att du inte ska göra ändringar i den. Istället skapar du en ny stilmall och gör dina ändringar där. Koppla även den till sidan.

<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/min_egen_stilmall.css">
</head>

Du kan med fördel utgå från den sida den ska kopplas till när du skapar den:

Panelen CSS Designer > + [Skapa en ny CSS-fil] > Bläddra > Namnge filen > Spara > Stäng

typografi

getbootstrap.com och w3schools.com har bra och lättlästa översikter över typografin, så jag kommer inte att skriva så mycket här. Titta på deras sidor!

En mycket vanlig sak jag vill ta upp är dock hur man justerar texten:

<p class="text-left">text-left</p>

text-left, vänsterjusterad

text-center, centrerad

text-right, högerjusterad

text-justify, marginaljusterad text. Här behövs fler tecken för att du ska se hur det blir så jag fortsätter att skriva om ingenting egentligen.

Det går sätta in dessa klasser i annat än texttaggar som <p> och <h1>. Sätter du en sådan klass på till exempel en <div> så gäller instruktionen allt innehåll i diven.

<div class="col-sm-4 text-center">

färger

I Bootstrap används ofta orden primary, success, info, warning och danger i klasser för att ange färger, exempel:

<p class="text-muted">text-muted</p>

text-muted

text-important

text-success

text-information

text-warning

text-danger

<p class="bg-primary">bg-primary</p>

bg-primary

bg-success

bg-info

bg-warning

bg-danger

 


 

Behöver du mer hjälp? Använd dig av den lärarledda studietiden på tisdagar!
Maila eller säg till vad du vill ha hjälp med i förväg, så läraren är förberedd.