För att skapa en mobilanpassad, responsiv webbplats använder du Bootstrap-startmallar och drar och släpper Bootstrap-komponenter i Dreamweaver.

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 Live-vyredigering, visuell CSS Designer, visuella mediefrågor och Extract.

Obs!

Den Bootstrap-version som stöds för närvarande är v3.3.7.

Vanliga frågor

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.

”Bootstrap 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.

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.

Om du vill skapa ett Bootstrap-dokument från grunden kan du alltid göra det. Följ bara anvisningarna här.

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 eller stor. Layoutredigeringsalternativen som visas när du klickar på element i Bootstrap-dokument liknar även dem som finns i dokument med flytande stödraster.

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.

  1. Klicka på Arkiv > Nytt.

  2. Klicka på Startmallar i dialogrutan Nytt dokument som visas och välj sedan en önskad mall i listan över Bootstrap-mallar.

  3. Klicka på Skapa. 

    En HTML-sida som baseras på den mall du har valt skapas. Du kan nu ändra sidan genom att lägga till eller ta bort komponenter, redigera text eller resurser efter behov.

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, typsnitt, format, text med mera till dina Bootstrap-dokumentet.

  1. Klicka på Arkiv > Nytt.

  2. Klicka på Nytt dokument > HTML i dialogrutan Nytt dokument och klicka sedan på fliken Bootstrap.

  3. Utför följande åtgärder om du vill skapa en ny bootstrap.css-fil (och de övriga Bootstrap-filerna):

    Ange om du vill skapa en ny Bootstrap-CSS eller använda en befintlig CSS.

    Om du väljer att skapa en ny CSS skapas en css-mapp i webbplatsens rot och bootstrap.css-filen kopieras till den nya mappen. Om du väljer att använda en befintlig CSS anger du sökvägen eller bläddrar till platsen för denna CSS.

    1. Klicka på Skapa nytt.

      Skapa Bootstrap-dokument med nya ramverk
      Skapa Bootstrap-dokument med nya ramverksfiler

    2. (Valfritt) Om du vill koppla andra CSS till ditt dokument klickar du på  i avsnittet Koppla CSS. Dialogrutan Länka till formatmall öppnas. Ange önskade inställningar och klicka på OK.

    3. Ta med ett fördefinierat layoutalternativ tillhandahåller en grundläggande Bootstrap-dokumentstruktur.

      Om du inte vill använda den grundläggande strukturen utan vill börja med ett tomt dokument avmarkerar du alternativet Ta med en fördefinierad layout.

    4. (Valfritt) Standardlayouten innehåller 12 kolumner med 30 px fästmarginal. Standardskärmstorlekarna är 768, 992 och 1 200 px.

      Klicka på Anpassa om du vill ändra de här inställningarna. Bootstrap.css-filen ändras med hänsyn till detta.

    5. Välj Använd Extract för att skapa en sida med Photoshop-kompositioner om du vill att panelen Extract ska öppnas (om den är stängd). Då kan du komma i gång direkt genom att extrahera resurser från Photoshop-kompositioner.

    När du har skapat dokumentet finns det tre mappar – css, js och Typsnitt – i webbplatsens rotmapp.

  4. Utför följande åtgärder om du vill använda befintliga Bootstrap-ramverksfiler:

    1. Klicka på Använd befintlig och ange sökvägen till filen bootstrap.css. Du kan även bläddra till den plats där din CSS sparas.

      Skapa Bootstrap-dokument med hjälp av befintliga ramverksfiler
      Skapa Bootstrap-dokument med hjälp av befintliga ramverksfiler

    2. (Valfritt) Om du vill koppla andra CSS till ditt dokument klickar du på  i avsnittet Koppla CSS. Dialogrutan Länka till formatmall öppnas. Ange önskade inställningar och klicka på OK.

    3. Ta med ett fördefinierat layoutalternativ tillhandahåller en grundläggande Bootstrap-dokumentstruktur. Om du inte vill använda den grundläggande strukturen utan vill börja med ett tomt dokument avmarkerar du alternativet Ta med en fördefinierad layout.

  5. Klicka på Skapa.

Obs!

Den bootstrap.css-fil som skapas är skrivskyddad. Du kan därför inte redigera dessa stilar med CSS Designer. Egenskapskontrollen i CSS Designer är inaktiverad i Bootstrap-filer.

Om du vill ändra formateringen för ditt Bootstrap-dokument skapar du en annan CSS-fil för att åsidosätta de befintliga formaten och bifogar den sedan till dokumentet.

Öppna Bootstrap-filer

Obs!

Vi rekommenderar att du bara öppnar och redigerar dokument som skapats i Bootstrap version 3 och senare i Dreamweaver.

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

  • Arkiv > Öppna och bläddra 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">

Obs!

Bootstrap-formatmallar i både länk- och importtaggar stöds i Dreamweaver. Däremot stöds inte kapslad import, d.v.s. att länka till en formatmall som i sin tur importerar en annan formatmall.

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.

Dölj element
Dölj element

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.

Hantera dolda element
Hantera dolda element

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.

Bootstrap-komponenter på panelen Infoga
Bootstrap-komponenter på panelen Infoga

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 i 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.

Obs!

Alternativet Lägg till rad eller Lägg till kolumn duplicerar raden eller kolumnen med klasser, men utan innehållet.

Ändra storlek på och förskjutning för 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 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 för kolumnen 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. Välj sedan förskjutning för kolumnerna.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy