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 3.4.1, 4.4.1 och 5.3.8-versioner:

• Bootstrap 3.4.1 innehåller ett responsivt, mobilt först flytande rutnätssystem som skalas upp till 12 kolumner när enhetens eller vyportens storlek ökar.Den innehåller fördefinierade klasser för enkla layoutalternativ samt kraftfulla mixins för att generera mer semantiska layouter.Se Bootstrap-dokumentation.
• Bootstrap 4.4.1, med stora förändringar, innehåller ett kraftfullt mobilt först flexbox-rutnät för att bygga layouter i alla former och skalor tack vare ett tolvkolumnssystem, fem standardresponsiva nivåer, Sass-variabler och mixins, samt dussintals fördefinierade klasser.Se Bootstrap-dokumentation.
• Bootstrap 5.3.8 introducerar förbättrade CSS-variabler för enklare anpassning, utökade färglägen inklusive stöd för mörkt läge, förbättrat rutnätssystem med uppdaterade verktyg och borttagning av beroende av jQuery för renare, snabbare och mer modern webbutveckling.Se 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. Medan du skapar flytande rutnätsdokument för tre grundläggande formfaktorer – Mobil, Surfplatta och Skrivbord, för Bootstrap börjar du med att skapa ett dokument för grundläggande skärmstorlekar – liten, medium, stor, extra stor och extra 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 platsen har en Bootstrap v4 CSS-fil, är Bootstrap-versionen i Manage Site > Avancerade inställningar > Bootstrap inställd på 5.3.8.
• om platsen inte har någon Bootstrap CSS-fil i platsens root/css-sökväg, är Bootstrap-versionen i Manage Site > Avancerade inställningar > Bootstrap inställd på 5.3.8.

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å samma sätt är Glyphicons, panel, Wells och Thumbnails-komponenter endast tillgängliga i Bootstrap v3.3.7.Beroende på Bootstrap-version ser du respektive komponenter i Insert panel.Dessutom är komponenten Spinners endast tillgänglig i Bootstrap v4.4.1.

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

• I Bootstrap v5.3.8 kan du få åtkomst till nya och förbättrade komponenter som Offcanvas, Modal, Toasts, Scrollspy och Floating Labels.Vissa äldre komponenter, som Jumbotron och Media Object, har tagits bort eller ersatts med uppdaterade verktygsbaserade metoder.Insert panel återspeglar dynamiskt dessa ändringar baserat på det länkade Bootstrap 5.3.8-ramverket.
• Dokumentet i fokus: komponenterna på panelen Infoga fylls i baserat på Bootstrap-versionen i den Bootstrap-fil som är länkad till dokumentet. 
• Version i Platsinställningar: För ett icke-Bootstrap-dokument söker Dreamweaver efter versionen i Platsinställningar > Avancerat > Bootstrap.Beroende på vald version fylls lämpliga komponenter i.Som standard är versionen 5.3.8 för nya platser.
• Var resurserna sparas: För ett icke-bootstrap-dokument som inte är en del av någon plats visar Insert panel 4.4.1-komponenterna.

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

För ett Bootstrap v5.3.8-dokument, när du ändrar storlek på en kolumn, läggs col-*-n-klassen till på samma sätt, där * representerar aktuell mediaförfrågan (sm, md, lg, xl eller xxl) och n anger antalet kolumner elementet sträcker sig över.Den nya xxl-brytpunkten ger bättre layoutkontroll för mycket stora screens.Dessutom kan du använda automatiska layoutkolumner (till exempel col eller col-md-auto) som automatiskt anpassar storlek baserat på innehåll utan att ange ett fast kolumnantal.

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

För ett Bootstrap v5.3.8-dokument, när du förskjuter kolumnen, läggs offset-*-n-klassen till, där * representerar aktuell mediaförfrågan (sm, md, lg, xl eller xxl) och n anger antalet kolumner elementet förskjuts med.Bootstrap 5 tillåter även justering med hjälp av margin-verktygsklasser (till exempel ms-auto eller me-auto) för mer flexibla och responsiva layouter.

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.