Användarhandbok Avbryt

Skapa responsiva webbplatser med Bootstrap

  1. Användarhandbok för Dreamweaver
  2. Introduktion
    1. Grunderna i responsiv webbdesign
    2. Nyheter i Dreamweaver
    3. Webbutveckling med Dreamweaver – översikt
    4. Dreamweaver/vanliga frågor
    5. Kortkommandon
    6. Systemkrav för Dreamweaver
    7. Sammanfattning av funktioner
  3. Dreamweaver och Creative Cloud
    1. Synka inställningarna för Dreamweaver med Creative Cloud
    2. Creative Cloud Libraries i Dreamweaver
    3. Använda Photoshop-filer i Dreamweaver
    4. Arbeta med Adobe Animate och Dreamweaver
    5. Extrahera webboptimerade SVG-filer från bibliotek
  4. Arbetsytor och vyer i Dreamweaver
    1. Arbetsytan i Dreamweaver
    2. Optimera Dreamweaver-arbetsytan för visuell utveckling
    3. Söka efter filer baserat på filnamn eller innehåll | Mac OS
  5. Skapa webbplatser
    1. Om Dreamweaver-platser
    2. Skapa en lokal version av din webbplats
    3. Ansluta till en publiceringsserver
    4. Ställa i ordning en testserver
    5. Importera och exportera inställningarna för en Dreamweaver-plats
    6. För över befintliga webbplatser från en fjärrserver till din lokala platsrot
    7. Tillgänglighetsfunktioner i Dreamweaver
    8. Avancerade inställningar
    9. Ange platsinställningar för överföring av filer
    10. Ange proxyserverinställningar i Dreamweaver
    11. Synka inställningarna för Dreamweaver med Creative Cloud
    12. Använda Git i Dreamweaver
  6. Hantera filer
    1. Skapa och öppna filer
    2. Hantera filer och mappar
    3. Hämta och skicka filer till och från servern
    4. Checka in och checka ut filer
    5. Synka filer
    6. Jämför skillnader mellan filer
    7. Dölja filer och mappar på din Dreamweaver-plats
    8. Aktivera Design Notes för Dreamweaver-platser
    9. Sätta stopp för Gatekeeper
  7. Layout och design
    1. Använda visuella hjälpmedel för layout
    2. Layouta sidor med CSS
    3. Designa responsiva webbplatser med Bootstrap
    4. Skapa och använda mediefrågor i Dreamweaver
    5. Visa innehåll med tabeller
    6. Färger
    7. Responsiv design med flytande stödrasterlayouter
    8. Extract i Dreamweaver
  8. CSS
    1. Förstå Cascading Style Sheets (CSS)
    2. Utforma sidor med hjälp av CSS Designer
    3. Använda CSS-förbehandlare i Dreamweaver
    4. Ange CSS-formatinställningar i Dreamweaver
    5. Flytta CSS-regler i Dreamweaver
    6. Konvertera infogad CSS till en CSS-regel i Dreamweaver
    7. Arbeta med div-taggar
    8. Använda övertoningar på bakgrunden
    9. Skapa och redigera CSS3-övergångseffekter i Dreamweaver
    10. Formatera kod
  9. Sidinnehåll och resurser
    1. Ange sidegenskaper
    2. Ange CSS-rubrikegenskaper och CSS-länkegenskaper
    3. Arbeta med text
    4. Sök och ersätt text, taggar och attribut
    5. DOM-panel
    6. Redigera i live-vyn
    7. Koda dokument i Dreamweaver
    8. Markera och visa element i dokumentfönstret
    9. Ange textegenskaper i egenskapskontrollen
    10. Stavningskontrollera en webbsida
    11. Använda vågräta linjer i Dreamweaver
    12. Lägga till och ändra teckensnittskombinationer i Dreamweaver
    13. Arbeta med resurser
    14. Infoga och uppdatera datum i Dreamweaver
    15. Skapa och hantera favoritresurser i Dreamweaver
    16. Infoga och redigera bilder i Dreamweaver
    17. Lägga till medieobjekt
    18. Lägga till videor i Dreamweaver
    19. Infoga HTML5-video
    20. Infoga SWF-filer
    21. Lägga till ljudeffekter
    22. Infoga HTML5-ljud i Dreamweaver
    23. Arbeta med biblioteksobjekt
    24. Använda arabisk och hebreisk text i Dreamweaver
  10. Länkar och navigering
    1. Om länkar och navigering
    2. Länkning
    3. Bildmappningar
    4. Felsöka länkar
  11. jQuery-widgetar och effekter
    1. Använda jQuery-gränssnitt och mobilwidgetar i Dreamweaver
    2. Använd jQuery-effekter i Dreamweaver
  12. Koda webbplatser
    1. Om kodning i Dreamweaver
    2. Kodningsmiljön i Dreamweaver
    3. Ange kodningspreferenser
    4. Anpassa kodfärger
    5. Skriva och redigera kod
    6. Kodtips och kodkomplettering
    7. Komprimera och utöka kod
    8. Återanvända kod med fragment
    9. Granska kod
    10. Optimera kod
    11. Redigera kod i designvyn
    12. Arbeta med head-innehåll för sidor
    13. Infoga SSI i Dreamweaver
    14. Använda taggbibliotek i Dreamweaver
    15. Importera egna taggar i Dreamweaver
    16. Använda JavaScript-beteenden (allmänna instruktioner)
    17. Använda inbyggda JavaScript-beteenden
    18. Om XML och XSLT
    19. Utföra XSL-omvandlingar på servern i Dreamweaver
    20. Utföra XSL-omvandlingar på klienten i Dreamweaver
    21. Lägga till teckenentiteter för XSLT i Dreamweaver
    22. Formatera kod
  13. Arbetsflöden mellan produkter
    1. Installera och använda tillägg i Dreamweaver
    2. Uppdateringar i appen i Dreamweaver
    3. Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
    4. Använda Fireworks och Dreamweaver
    5. Redigera innehåll på Dreamweaver-webbplatser med Contribute
    6. Integrering mellan Dreamweaver och Business Catalyst
    7. Skapa anpassade e-postkampanjer
  14. Mallar
    1. Om Dreamweaver-mallar
    2. Känna igen mallar och mallbaserade dokument
    3. Skapa en Dreamweaver-mall
    4. Skapa ändringsbara regioner i mallar
    5. Skapa upprepande regioner och tabeller i Dreamweaver
    6. Använd valfria regioner i mallar
    7. Definiera redigerbara taggattribut i Dreamweaver
    8. Skapa kapslade mallar i Dreamweaver
    9. Redigera, uppdatera och ta bort mallar
    10. Exportera och importera XML-innehåll i Dreamweaver
    11. Lägga till eller ta bort en mall från ett befintligt dokument
    12. Redigera innehåll i Dreamweaver-mallar
    13. Syntaxregler för malltaggar i Dreamweaver
    14. Ange markeringsinställningar för mallområden
    15. Fördelar med att använda mallar i Dreamweaver
  15. Mobiler och flera skärmar
    1. Skapa mediefrågor
    2. Ändra sidorientering för mobila enheter
    3. Skapa webbappar för mobila enheter med Dreamweaver
  16. Dynamiska webbplatser, sidor och webbformulär
    1. Förstå webbprogram
    2. Konfigurera datorn för programutveckling
    3. Felsöka databasanslutningar
    4. Ta bort anslutningsskript i Dreamweaver
    5. Utforma dynamiska sidor
    6. Översikt över källor med dynamiskt innehåll
    7. Definiera källor med dynamiskt innehåll
    8. Lägga till dynamiskt innehåll på sidor
    9. Ändra dynamiskt innehåll i Dreamweaver
    10. Visa databasposter
    11. Ange och felsöka livedata i Dreamweaver
    12. Lägga till anpassade serverbeteenden i Dreamweaver
    13. Bygga formulär med Dreamweaver
    14. Använda formulär för att samla in information från användarna
    15. Skapa och aktivera ColdFusion-formulär i Dreamweaver
    16. Skapa webbformulär
    17. Förbättrat HTML5-stöd för formulärelement
    18. Använda Dreamweaver för att utveckla ett formulär
  17. Bygga program visuellt
    1. Bygga huvud- och detaljsidor i Dreamweaver
    2. Bygga sök- och resultatsidor
    3. Bygga en postinmatningssida
    4. Bygga en postuppdateringssida i Dreamweaver
    5. Bygga postborttagningssidor i Dreamweaver
    6. Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
    7. Bygga en registreringssida
    8. Bygga en inloggningssida
    9. Bygga en sida som bara behöriga användare har åtkomst till
    10. Skydda mappar i ColdFusion med Dreamweaver
    11. Använda ColdFusion-komponenter i Dreamweaver
  18. Testa, förhandsgranska och publicera webbplatser
    1. Förhandsgranska sidor
    2. Förhandsgranska Dreamweaver-webbsidor på flera enheter
    3. Testa Dreamweaver-platsen

 

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 Livevyredigering, den visuell CSS-designern, visuella mediefrågor och Extract.

Obs!

Bland de Bootstrap-versioner som stöds för närvarande finns v 4.4.1 och v 3.4.1.

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

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

  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, teckensnitt, 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 mappen css i webbplatsens rot och filen bootstrap.css 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. Alternativet Ta med en fördefinierad layout 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 1 200 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.4.0 ä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 extrahera resurser från Photoshop-kompositioner direkt.

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

      Välj Bootstrap-version 4.4.1
      Välj Bootstrap-version 4.4.1

      När du skapar en sida med Bootstrap 4.4.1 stöds jQuery-versionen 3.4.1. Bootstrap-startmallarna har uppdaterats till Bootstrap version 4.4.1.

      När du lägger till Bootstrap-komponenter på en Bootstrap-sida kan du uppgradera Bootstrap 4.0.0-sidorna till Bootstrap 4.4.1 och jQuery-versionen till 3.4.1. Klicka på Ja i dialogrutan som visas när du infogar Bootstrap-komponenter på en sida.

      Bekräftelsedialogruta för versionskompatibilitet
      Bekräftelsedialogruta för versionskompatibilitet

      Bekräftelsedialogruta för Bootstrap 3.4.1
      Bekräftelsedialogruta för Bootstrap 3.4.1

      jQuery-popupdialogruta
      jQuery-popupdialogruta

      När du importerar en Bootstrap 4.0.0-plats eller migrerar en plats från äldre versioner till nästa version av Dreamweaver anges Bootstrap-versionen till 4.4.1 i Platskonfiguration > Avancerad inställning > Bootstrap.

    Obs!

    Med Bootstrap 4.3.1 ändras höjden på en rutnätsradkolumn från 1 px till 0 px. För att göra den synlig i live-vy måste du lägga till innehåll i rutnätsradkolumnen.

  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. Alternativet Ta med en fördefinierad layout 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 kopplar 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-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, dvs. 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. 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.
Komponenter som stöds i Bootstrap 4.0.0
Komponenter som stöds i Bootstrap 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.

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

Adobes logotyp

Logga in på ditt konto