Skapa responsiva webbplatser med Bootstrap

Bootstrap är ett populärt och kostnadsfritt HTML-, CSS- och JavaScript-ramverk för utveckling av responsiva mobilinriktade webbplatser. Ramverket innehåller responsiva CSS- och HTML-mallar för knappar, tabeller, navigering, bildspel (carousel) och andra element som du kan använda på dina webbsidor. Det finns några JavaScript-pluginprogram som gör att även utvecklare med grundläggande programmeringskunskaper kan utveckla fantastiska responsiva webbplatser.

Med Dreamweaver kan du skapa Bootstrap-dokument och redigera befintliga webbsidor som skapats med Bootstrap. Oavsett om du har Bootstrap-filer med färdig eller halvfärdig design kan du redigera dem i Dreamweaver. Sedan kan du förutom att redigera koden även göra ändringar i designen med visuella redigeringsfunktioner som Livevyredigering, den visuell CSS-designern, visuella mediefrågor och Extract.

Jag har använt flytande stödraster i Dreamweaver. Hur kommer jag igång med Bootstrap?

När du skapade dokument med flytande stödraster användes rätt klasser automatiskt i Dreamweaver så dina webbsidor blev responsiva. Allt du behövde göra var att fokusera på innehållet och bestämma hur det skulle formateras på nytt i olika formfaktorer.

Det är nästan likadant i Bootstrap-dokument. Du behöver bara fokusera på innehåll och design. Webbsidans flexibilitet hanteras av Dreamweaver, som är tätt integrerat med Bootstrap-ramverket.

Dreamweaver stöder för närvarande Bootstrap-versionerna 3.4.1 och 4.4.1:

”Bootstrap 3.4.1 innehåller ett responsivt, mobilprioriterat system för flytande stödraster som kan skalanpassas upp till 12 kolumner om enhetens eller visningsrutans storlek ökar. Det innehåller fördefinierade klasser för enkla layoutalternativ samt kraftfulla mixins för att skapa mer semantiska layouter.” – Bootstrap-dokumentation.

”Bootstrap 4.4.1 har ett kraftfullt responsivt, mobilprioriterat stödraster för alla typer av layouter. Det har ett 12-kolumnsystem, fem responsiva nivåer, Sass-variabler och mixins, samt dussintals fördefinierade klasser.” – Bootstrap-dokumentation.

Om du vill komma igång med Bootstrap-dokument i Dreamweaver kan du använda Bootstrap-startmallar. Dreamweaver innehåller en mängd mallar som passar olika typer av webbplatser som du kanske vill skapa, till exempel e-handel eller portfolio.

Kan jag migrera befintliga dokument med flytande stödraster till Bootstrap-dokument i Dreamweaver?

Nej, det finns ingen metod för att konvertera dina befintliga dokument med flytande stödraster till Bootstrap-dokument. Men när du skapar och designar Bootstrap-dokument i Dreamweaver är det nästan som när du skapar dokument med flytande stödraster. Du kan till exempel komma igång genom att skapa ett Bootstrap-dokument direkt från dialogrutan Nytt dokument. När du skapar dokument med flytande stödraster gör du det för tre grundläggande formfaktorer – Mobil, Pekdator eller Stationär. Ett Bootstrap-dokument skapas för grundläggande skärmstorlekar – liten, mellanstor, stor och extra stor. Layoutredigeringsalternativen som visas när du klickar på element i Bootstrap-dokument liknar även dem som finns i dokument med flytande stödraster.

Kan jag importera gamla webbplatser i den senaste versionen av Dreamweaver?

Ja. Du kan importera gamla webbplatser i den senaste versionen av Dreamweaver. När du gör det letar Dreamweaver efter CSS-filen för Bootstrap i mappen site root/css/. 

• Om webbplatsen har en Bootstrap v3 CSS-fil anges Bootstrap-versionen i Hantera platser > Avancerade inställningar > Bootstrap till 3.4.1.
• Om webbplatsen har en Bootstrap v4 CSS-fil anges Bootstrap-versionen i Hantera platser > Avancerade inställningar > Bootstrap till 4.4.1.
• Om webbplatsen saknar en CSS-fil för Bootstrap på sökvägen site root/css anges Bootstrap-versionen i Hantera platser > Avancerade inställningar > Bootstrap till 4.4.1.

Skapa Bootstrap-dokument

Du kan börja designa dina Bootstrap-webbplatser med hjälp av ett av följande alternativ i dialogrutan Nytt dokument:

• Bootstrap-startmallar (Startmallar > Bootstrap-mallar) – använd det här alternativet om du vill komma i gång snabbt utan att behöva krångla med att utforma dina sidor från grunden. Redigera bara texten och ersätt vid behov resurserna så är din webbplats klar. Mer information finns i Använda Bootstrap-startmallar.
• Skapa ett HTML-dokument baserat på Bootstrap-ramverket (Nytt dokument > HTML > Bootstrap) – använd det här alternativet om du vill skapa din webbplats steg för steg med CSS och Bootstrap-komponenter i Dreamweaver. Mer information finns i Skapa HTML-dokument baserade på Bootstrap-ramverket.
  

Använda Bootstrap-startmallar

Bootstrap-startmallar ger dig möjlighet att skapa webbsidor för populära teman på några ögonblick. Alla beroende filer i ramverket sparas automatiskt.

Skapa HTML-dokument baserade på Bootstrap-ramverket

Du börjar bygga din responsiva webbplats genom att skapa ett HTML-dokument som är baserat på Bootstrap-ramverket. Du kan välja att skapa en uppsättning Bootstrap-ramverksfiler eller använda befintliga filer. När du har skapat dokumentet kan du lägga till Bootstrap-komponenter som dragspelspaneler och bildspel (Carousel) via panelen Infoga i Dreamweaver. Om du har Photoshop-kompositioner kan du även använda Extract för att hämta bilder, teckensnitt, format, text med mera till dina Bootstrap-dokumentet.

Öppna Bootstrap-filer

Du kan öppna Bootstrap-filer på följande sätt:

• Klicka på Arkiv > Öppna och gå till Bootstrap HTML-filen.
• (Rekommenderas) Skapa en Dreamweaver-plats och se till att platsmappen pekar på den mapp som innehåller alla dina Bootstrap-filer.

När du öppnar en Bootstrap HTML-fil i Dreamweaver:

• Raderna markeras med grå streckade linjer med rundade hörn
• Kolumnerna markeras med blå, streckade linjer

CSS-filer som är associerade med Bootstrap HTML-filer kan identifieras i Dreamweaver om CSS-filnamnet innehåller ordet ”bootstrap”. Möjliga CSS-filreferenser:

• Lokal sökväg:

  Den minifierade eller avminifierade CSS-filen finns lokalt. Exempel:

  <link href="css/bootstrap.css" rel="stylesheet"> eller
  <link href="css/bootstrap.min.css" rel="stylesheet">

• Fjärrsökväg:

En minifierad eller avminifierad CSS-fjärrfil. Exempel:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Dölja, visa och hantera dolda Bootstrap-element

Ibland kan du vilja att ett element ska visas i ett visningsfönster samtidigt som du kanske vill dölja elementet för designändamål i ett annan visningsruta. 

Om du vill dölja ett Bootstrap-element högerklickar du och väljer Dölj element. Elementet är tillfälligt dolt i vyn.

Om du vill visa dolda element högerklickar du och väljer Hantera dolda element. Dolda element visas med grå, rutad bakgrund. Klicka på ögonikonen om du vill visa elementet.

Lägga till Bootstrap-komponenter

När du väljer alternativet Bootstrap-komponenter på panelen Infoga visas alla Bootstrap-komponenter som du kan lägga till i din webbsida i Dreamweaver. Komponenterna listas på panelen Infoga enligt Bootstrap-versionen i den bootstrap.css.fil som är länkad till HTML-sidan.  Med t.ex. Bootstrap v 4.0.0 visas ytterligare komponenter som t.ex. för Cards och Badges. På motsvarande sätt är komponenterna Glyphicons, Panel, Wells och Thumbnails bara tillgängliga i Bootstrap v 3.3.7. Beroende på Bootstrap-versionen visas de respektive komponenterna på panelen Infoga. Dessutom är komponenten Spinners endast tillgänglig i Bootstrap v4.4.1.

Komponenterna på panelen Infoga fylls i baserat på följande kriterier:

• Dokumentet i fokus: komponenterna på panelen Infoga fylls i baserat på Bootstrap-versionen i den Bootstrap-fil som är länkad till dokumentet. 
• Versionen i platsinställningarna: för dokument utan Bootstrap söker Dreamweaver efter versionen i Platsinställningar > Avancerat > Bootstrap. Beroende på versionen i det här alternativet fylls de respektive komponenterna i. Versionen är som standard 4.4.1 för nya platser.
• Där filerna sparas: för dokument utan Bootstrap som inte hör till en plats återger panelen Infoga komponenterna för version 4.4.1.

Om du vill lägga till en komponent drar du den från panelen till webbsidan. Innan du släpper komponenten kan du se visuella hjälpmedel som Live-stödlinjer, precisionsinfogning (med DOM) och placeringsassistenten. Med hjälp av dessa funktioner kan du snabbt placera komponenterna exakt där du vill ha dem på sidan. Mer information om hur du infogar element på webbsidor finns i Översikt över panelen Infoga.

Lägga till rader

Klicka på den rad efter vilken du vill lägga till den nya raden. Klicka sedan på ikonen Lägg till ny rad. En Bootstrap-rad och två underordnade kolumnelement med sex kolumner vardera läggs till.

Koden för den tillagda raden ser ut så här:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

där * representerar aktuell skärmstorlek i Dreamweaver.

Lägga till kolumner

Markera önskad kolumn och klicka sedan på ikonen Lägg till ny kolumn. Den markerade kolumnen dupliceras utan dess underordnade element.

Alla tomma kolumner tilldelas en minsta höjd på 20 px. Men höjden läggs inte till på sidan. Den visas bara i Live-vyn för att det ska bli lättare att infoga element i kolumnerna.

Duplicera rader och kolumner

Klicka på den rad eller kolumn som du vill duplicera och klicka sedan på ikonen Duplicera i det nedre högra hörnet. Hela raden eller kolumnen med dess innehåll dupliceras.

Ändra storlek på och förskjuta kolumner

Att ändra kolumnernas storlek och förskjutning är nödvändigt, särskilt när du skapar responsiva designer för olika visningsrutor. 

Ändra storlek på kolumner

Klicka på önskad kolumn och dra handtaget åt höger för att ändra storleken. När du ändrar storlek på en kolumn i Bootstrap v 4.0.0-dokument läggs klassen col-*-n till, där * representerar aktuell mediefråga (sm, md, ld, xl) och n representerar antalet kolumner som den upptar. För skärmstorleken Extra liten läggs klassen col-n till.

När du ändrar storlek på en kolumn i Bootstrap v 3.3.7-dokument läggs klassen col-*-n till, där * representerar aktuell mediefråga (xs, sm, md eller lg) och n representerar antalet kolumner som den upptar.

Aktuell skärmstorlek identifieras och rätt klass läggs till i Dreamweaver. Om du vill ändra storleken på kolumner så att de passar in i specifika visningsrutor kan du ändra visningsrutestorleken med alternativen längst ned till höger eller i navigeringslisten. Ändra sedan storlek på kolumnerna.

Ange förskjutning för kolumner

Klicka på önskad kolumn och dra handtaget åt vänster för att välja förskjutning för kolumnen. Förskjutningen visas som ett rutat område. När du anger förskjutning av en kolumn i Bootstrap v 4.0.0-dokument läggs klassen offset-*-n till, där * representerar aktuell mediefråga (sm, md, lg eller xl) och n representerar antalet kolumner som den upptar.

När du anger förskjutning av en kolumn i ett Bootstrap v 3.3.7-dokument läggs klassen col-*-offset-n till, där * representerar aktuell mediefråga (xs, sm, md eller lg) och n representerar antalet kolumner som den förskjuts.

Aktuell skärmstorlek identifieras och rätt klass läggs till i Dreamweaver. Om du vill ange förskjutning för kolumner så att de passar in i specifika visningsrutor kan du ändra visningsrutestorleken med alternativen längst ned till höger eller i navigeringslisten. Förskjut sedan kolumnerna.