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!

Bland de Bootstrap-versioner som stöds för närvarande finns v 4.0.0 och v 3.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.

Dreamweaver stöder för närvarande Bootstrap-versionerna 3.3.7 och 4.0.0:

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

Om du vill skapa ett Bootstrap-dokument från grunden kan du göra det enligt anvisningarna i avsnittet Skapa Bootstrap-dokument.

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.3.7.
  • om webbplatsen har en Bootstrap v4 CSS-fil anges Bootstrap-versionen i Hantera platser > Avancerade inställningar > Bootstrap till 4.0.0.
  • 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.0.0.

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

      Skapa ett nytt Bootstrap-dokument
      Skapa ett nytt Bootstrap-dokument
    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 576 px, 768 px, 992 px och 1200 px. 

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

      Obs!

      Standardskärmstorlekarna för Bootstrap v 3.3.7 är 768, 992 och 1 200 px.

    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). Genom att göra så kan du börja direkt med att extrahera resurser från Photoshop-kompositioner.

      Som standard skapas webbplatsen med Bootstrap v4.0.0. När du skapat dokumenten finns css- och js-mapparna i platsens rotmapp. Om du vill skapa webbplatsen med Bootstrap version 3.3.7 väljer du Plats > Hantera platser. Välj platsens rotmapp. Klicka på Avancerade inställningar > Bootstrap. I listrutan Bootstrap-version väljer du 3.3.7. För Bootstrap-version 3.3.7 finns mapparna för css, js, och teckensnitt i platsens rotmapp.

      Välj Bootstrap-version 3.3.7
      Välj Bootstrap-version 3.3.7
  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. Ange inställningarna i dialogrutan Länka till formatmall 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:

  • Klicka på Arkiv > Öppna och gå till Bootstrap HTML-file.
  • (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ölja Bootstrap-element i Dreamweaver
Dölja Bootstrap-element i Dreamweaver

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 Bootstrap-element
Hantera dolda Bootstrap-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. 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.

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.0.0 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.0.0.
Komponenter som stöds i Bootstrap 4.0.0
Komponenter som stöds i Bootstrap 4.0.0

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