Klik op Bestand > Nieuw.
- Dreamweaver Handboek
- Inleiding
- Dreamweaver en Creative Cloud
- De werkruimten en weergaven van Dreamweaver
- Sites opzetten
- Over Dreamweaver-sites
- Een lokale versie van uw site instellen
- Verbinding maken met een publicatieserver
- Een testserver instellen
- Instellingen van Dreamweaver-sites importeren en exporteren
- Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
- Toegankelijkheidsfuncties in Dreamweaver
- Geavanceerde instellingen
- Sitevoorkeuren instellen voor het overzetten van bestanden
- Proxyserverinstellingen opgeven in Dreamweaver
- Dreamweaver-instellingen synchroniseren met Creative Cloud
- Git gebruiken in Dreamweaver
- Bestanden beheren
- Bestanden maken en openen
- Bestanden en mappen beheren
- Bestanden van uw server ophalen en op uw server plaatsen
- Bestanden inchecken en uitchecken
- Bestanden synchroniseren
- Bestanden vergelijken om verschillen op te sporen
- Bestanden en mappen op uw Dreamweaver-site camoufleren
- Ontwerpnotities inschakelen voor Dreamweaver-sites
- Potentieel misbruik van Gatekeeper voorkomen
- Lay-out en ontwerp
- CSS
- Informatie over CSS (Cascading Style Sheets)
- Pagina's opmaken met CSS ontwerpen
- CSS-preprocessors gebruiken in Dreamweaver
- CSS-stijlvoorkeuren instellen in Dreamweaver
- CSS-regels verplaatsen in Dreamweaver
- Inline CSS converteren naar een CSS-regel in Dreamweaver
- Werken met div-tags
- Verlopen toepassen op een achtergrond
- CSS3-overgangseffecten maken en bewerken in Dreamweaver
- Code opmaken
- Pagina-inhoud en assets
- Pagina-eigenschappen instellen
- Eigenschappen voor CSS-koppen en CSS-koppelingen
- Werken met tekst
- Tekst, tags en kenmerken zoeken en vervangen
- Het deelvenster DOM
- Bewerken in Live View
- Documenten coderen in Dreamweaver
- Elementen selecteren en weergeven in het documentvenster
- Teksteigenschappen instellen in de eigenschappencontrole
- Spelling op een webpagina controleren
- Horizontale lijnen gebruiken in Dreamweaver
- Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
- Werken met assets
- Datums in Dreamweaver invoegen en bijwerken
- Favoriete assets maken en beheren in Dreamweaver
- Afbeeldingen invoegen en bewerken in Dreamweaver
- Mediaobjecten toevoegen
- Video's toevoegen in Dreamweaver
- HTML5-video invoegen
- SWF-bestanden invoegen
- Audio-effecten toevoegen
- HTML5-audio invoegen in Dreamweaver
- Werken met bibliotheekitems
- Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
- Koppelingen en navigatie
- jQuery-widgets en -effecten
- Websites coderen
- Over coderen in Dreamweaver
- Coderingsomgeving in Dreamweaver
- Coderingsvoorkeuren instellen
- Codekleuren aanpassen
- Code schrijven en bewerken
- Coderingstips en codevoltooiing
- Code samenvouwen en uitvouwen
- Code hergebruiken met codefragmenten
- Linting voor code gebruiken
- Code optimaliseren
- Code bewerken in de ontwerpweergave
- Werken met de kopinhoud van pagina's
- Include-bestanden op de server invoegen in Dreamweaver
- Tagbibliotheken gebruiken in Dreamweaver
- Aangepaste tags importeren in Dreamweaver
- JavaScript-gedrag gebruiken (algemene instructies)
- Ingebouwd JavaScript-gedrag toepassen
- Over XML en XSLT
- XSL-transformaties op de server uitvoeren in Dreamweaver
- XSL-transformaties op de client uitvoeren in Dreamweaver
- Tekenentiteiten toevoegen voor XSLT in Dreamweaver
- Code opmaken
- Productonafhankelijke workflows
- Extensies in Dreamweaver installeren en gebruiken
- In-app updates in Dreamweaver
- Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
- Werken met Fireworks en Dreamweaver
- Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
- Integratie van Dreamweaver met Business Catalyst
- Persoonlijke e-mailcampagnes maken
- Sjablonen
- Over Dreamweaver-sjablonen
- Sjablonen en op een sjabloon gebaseerde documenten herkennen
- Een Dreamweaver-sjabloon maken
- Bewerkbare gebieden maken in sjablonen
- Herhalingsgebieden en tabellen maken in Dreamweaver
- Optionele gebieden in sjablonen gebruiken
- Bewerkbare tagkenmerken in Dreamweaver definiëren
- Geneste sjablonen maken in Dreamweaver
- Sjablonen bewerken, bijwerken en verwijderen
- XML-inhoud exporteren en importeren in Dreamweaver
- Een sjabloon uit een bestaand document toepassen of verwijderen
- Inhoud bewerken in Dreamweaver-sjablonen
- Syntaxisregels voor sjabloontags in Dreamweaver
- Voorkeuren voor de markering van sjabloongebieden instellen
- Voordelen van het gebruik van sjablonen in Dreamweaver
- Mobiel en meerdere schermen
- Dynamische sites, pagina's en webformulieren
- Informatie over web-applicaties
- Uw computer instellen voor het ontwikkelen van applicaties
- Problemen met databaseverbindingen oplossen
- Verbindingsscripts verwijderen in Dreamweaver
- Dynamische pagina's ontwerpen
- Overzicht van dynamische inhoudsbronnen
- Bronnen met dynamische inhoud definiëren
- Dynamische inhoud toevoegen aan pagina's
- Dynamische inhoud wijzigen in Dreamweaver
- Databaserecords weergeven
- Livegegevens leveren en problemen oplossen Dreamweaver
- Aangepast servergedrag toevoegen in Dreamweaver
- Formulieren maken met Dreamweaver
- Formulieren gebruiken om informatie van gebruikers te verzamelen
- ColdFusion-formulieren maken en inschakelen in Dreamweaver
- Webformulieren maken
- Verbeterde HTML5-ondersteuning voor formulierelementen
- Een formulier ontwikkelen met Dreamweaver
- Applicaties visueel samenstellen
- Hoofd- en detailpagina's maken in Dreamweaver
- Zoekpagina's en resultatenpagina's maken
- Een pagina voor het invoegen van records maken
- Een pagina voor het bijwerken van records maken in Dreamweaver
- Pagina's voor het verwijderen van records maken in Dreamweaver
- ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
- Een registratiepagina maken
- Een aanmeldingspagina maken
- Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
- Mappen beveiligen in ColdFusion met Dreamweaver
- ColdFusion-componenten gebruiken in Dreamweaver
- Websites testen, voorvertonen en publiceren
- Problemen oplossen
Voor een responsieve website die vooral is bedoeld voor mobiele apparaten, kunt u in Dreamweaver eenvoudige Bootstrap-sjablonen gebruiken en Bootstrap-componenten die u kunt slepen en neerzetten.
Bootstrap is een populair gratis HTML-, CSS- en JavaScript-framework voor het ontwikkelen van responsieve websites voor mobiel gebruik. Het framework bevat responsieve CSS- en HTML-sjablonen voor knoppen, tabellen, navigatie, afbeeldingscarrousels en andere elementen die u op uw webpagina kunt gebruiken. Er zijn enkele optionele JavaScript-insteekmodules beschikbaar die ontwikkelaars in staat stellen om fantastische responsieve websites te ontwikkelen, zelfs als ze alleen over basiskennis beschikken.
Met Dreamweaver kunt u Bootstrap-documenten maken en bestaande webpagina's bewerken die zijn gemaakt met Bootstrap. Of u nu volledig ontworpen Bootstrap-bestanden of conceptontwerpen hebt, u kunt in Dreamweaver zowel de code bewerken als wijzigingen in het ontwerp aanbrengen met visuele bewerkingsfuncties als Bewerken met Live View, CSS ontwerpen, Visuele mediaquery's en Extract.
Bootstrap-versies die momenteel worden ondersteund, zijn 4.4.1 en 3.4.1.
Algemene vragen
Ik heb altijd dynamische rasters gebruikt in Dreamweaver. Hoe ga ik aan de slag met Bootstrap?
Als u documenten met dynamische rasters maakte, werden de overeenkomende klassen automatisch toegepast in Dreamweaver om de webpagina's responsief te maken. U hoefde zich enkel op de inhoud te richten en te bepalen hoe deze inhoud opnieuw wordt weergegeven in de verschillende vormfactoren.
Bootstrap-documenten werken op een vergelijkbare manier en u hoeft zich alleen te concentreren op de inhoud en het ontwerp. De responsiviteit van uw webpagina wordt automatisch in Dreamweaver afgehandeld via nauwe integratie met het Bootstrap-framework.
Dreamweaver ondersteunt momenteel Bootstrap 3.4.1 en 4.4.1:
"Bootstrap 3.4.1 biedt een responsief systeem met dynamische rasters dat is gericht op mobiele apparaten en waarmee tot 12 kolommen correct kunnen worden geschaald wanneer de apparaat- of viewportgrootte toeneemt. Dit systeem omvat vooraf gedefinieerde klassen voor eenvoudige lay-outopties en krachtige mixins voor het genereren van meer semantische lay-outs." - Bootstrap-documentatie.
"Bootstrap 4.4.1 heeft grote veranderingen ondergaan en biedt nu een krachtig flexbox-raster dat is gericht op mobiele apparaten om lay-outs van allerlei vormen en schaalgroottes te maken dankzij een systeem met twaalf kolommen, vijf responsieve standaardlagen, Sass-variabelen en mixins en tientallen voorgedefinieerde klassen." - Bootstrap-documentatie.
Als u aan slag wilt gaan met Bootstrap-documenten in Dreamweaver, kunt u overwegen om eenvoudige Bootstrap-sjablonen te gebruiken. Dreamweaver bevat een aantal sjablonen die zijn gericht op verschillende soorten websites die u mogelijk wilt maken, zoals een e-commercesite of portfolio.
Als u een nieuw Bootstrap-document helemaal zelf wilt maken, kunt u dit altijd doen zoals wordt beschreven in het gedeelte Bootstrap-documenten maken.Kan ik bestaande documenten met dynamische rasters in Dreamweaver migreren naar Bootstrap-documenten?
Nee, is er geen directe methode voor het converteren van uw bestaande documenten met dynamische rasters naar Bootstrap-documenten. De gebruikerservaring in Dreamweaver bij het maken en ontwerpen van Bootstrap-documenten is echter wel vergelijkbaar met die voor het maken van documenten met dynamische rasters. U kunt bijvoorbeeld beginnen door rechtstreeks vanuit het dialoogvenster Nieuw document een Bootstrap-document te maken. Terwijl u documenten met dynamische rasters voor drie basisvormfactoren (Mobiel, Tablet en Desktop) maakt, begint u voor Bootstrap met het maken van een document voor basisschermgrootten (klein, normaal, groot en extra groot). De bewerkingsopties voor de lay-out die worden weergegeven wanneer u op elementen in Bootstrap-documenten klikt, zien er ook vergelijkbaar uit met de opties in documenten met dynamische rasters.
Kan ik oude sites importeren in de nieuwste versie van Dreamweaver?
Ja, u kunt oude sites importeren in de nieuwste versie van Dreamweaver. Wanneer u dit doet, zoekt Dreamweaver het CSS-bestand voor Bootstrap in de map hoofdmap_van_site/css/.
- Als de site een CSS-bestand voor Bootstrap 3 heeft, wordt de Bootstrap-versie bij Site beheren > Geavanceerde instellingen > Bootstrap ingesteld op 3.4.1.
- Als de site een CSS-bestand voor Bootstrap 4 heeft, wordt de Bootstrap-versie bij Site beheren > Geavanceerde instellingen > Bootstrap ingesteld op 4.4.1.
- Als de site geen CSS-bestand voor Bootstrap in het pad hoofdmap_van_site/css heeft, wordt de Bootstrap-versie bij Site beheren > Geavanceerde instellingen > Bootstrap ingesteld op 4.4.1.
Bootstrap-documenten maken
U kunt beginnen met het ontwerpen van uw Bootstrap-website door een van de volgende opties in het dialoogvenster Nieuw document te gebruiken:
- Eenvoudige Bootstrap-sjablonen (Eenvoudige sjablonen > Bootstrap-sjablonen): gebruik deze optie als u snel aan de slag wilt gaan en uw pagina's niet helemaal zelf wilt maken. U hoeft enkel de tekst te bewerken en zo nodig de middelen te vervangen, waarna uw responsieve website klaar is. Zie Eenvoudige Bootstrap-sjablonen gebruiken voor meer informatie.
- Een HTML-document maken op basis van het Bootstrap-framework (Nieuw document > HTML > Bootstrap): gebruik deze optie als u uw website helemaal zelf wilt bouwen met CSS en Bootstrap-componenten in Dreamweaver. Zie HTML-documenten maken op basis van het Bootstrap-framework voor meer informatie.
Eenvoudige Bootstrap-sjablonen gebruiken
Met eenvoudige Bootstrap-sjablonen kunt u heel snel webpagina's voor populaire thema's maken. Alle afhankelijke bestanden in het framework worden automatisch opgeslagen.
-
-
Klik in het dialoogvenster Nieuw document dat wordt weergegeven, op Eenvoudige sjablonen en selecteer vervolgens de gewenste sjabloon in de lijst met Bootstrap-sjablonen.
-
Klik op Maken.
Er wordt een HTML-pagina gemaakt die is gebaseerd op de geselecteerde sjabloon. U kunt de pagina nu wijzigen door waar nodig componenten toe te voegen of te verwijderen en tekst of middelen te bewerken.
HTML-documenten maken op basis van het Bootstrap-framework
U kunt beginnen met het ontwikkelen van uw responsieve website door een HTML-document te maken dat is gebaseerd op het Bootstrap-framework. U kunt ervoor kiezen om een set met Bootstrap-frameworkbestanden te maken of bestaande bestanden te gebruiken. Nadat het document is gemaakt, kunt u Bootstrap-componenten, zoals accordeons en carrousels, toevoegen met het deelvenster Invoegen in Dreamweaver. Of gebruik in het geval van Photoshop-composities Extract om bijvoorbeeld afbeeldingen, lettertypen, stijlen en tekst aan het Bootstrap-document toe te voegen.
-
Klik op Bestand > Nieuw.
-
Klik in het dialoogvenster Nieuw document op Nieuw document > HTML en klik vervolgens op de tab Bootstrap.
-
Ga als volgt te werk om een nieuw bestand bootstrap.css (en de andere Bootstrap-bestanden) te maken:
Geef op of u een nieuw CSS-bestand voor Bootstrap wilt maken of een bestaand CSS-bestand wilt gebruiken.
Als u ervoor kiest om een nieuw CSS-bestand te maken, wordt in de hoofdmap een map 'css' gemaakt. Het bestand bootstrap.css wordt naar de nieuwe map gekopieerd. Als u ervoor kiest om een bestaand CSS-bestand te gebruiken, geeft u het pad op of bladert u naar de locatie van het CSS-bestand.
-
Klik op Nieuw maken.
-
(Optioneel) Als u een ander CSS-document wilt koppelen aan uw document, klikt u op in de sectie CSS koppelen. Het dialoogvenster Externe stijlpagina koppelen wordt weergegeven. Geef de instellingen op en klik op OK.
-
De optie Voorgedefinieerde lay-out opnemen biedt een standaardstructuur voor het Bootstrap-document.
Als u de basisstructuur niet wilt gebruiken en wilt beginnen met een leeg document, schakelt u de optie Voorgedefinieerde lay-out opnemen uit.
-
(Optioneel) De standaardlay-out bevat 12 kolommen met een tussenruimte van 30 pixels. De standaardschermgrootten zijn 576 pixels, 768 pixels, 992 pixels en 1200 pixels.
Als u deze instellingen wilt wijzigen, klikt u op Aanpassen. Het bestand bootstrap.css wordt overeenkomstig aangepast.
Opmerking:Voor Bootstrap 3.4.0 zijn de standaardschermgrootten 768 pixels, 992 pixels en 1200 pixels.
-
Selecteer Gebruik Extract om uw pagina te maken met uw Photoshop-composities als u het deelvenster Extract wilt openen (indien dit is gesloten). Hiermee kunt u direct beginnen met het extraheren van middelen uit Photoshop-composities.
Een nieuwe site wordt standaard gemaakt met Bootstrap-versie 4.4.1. Nadat u het document hebt gemaakt, vindt u de mappen css en js in de hoofdmap van de site. Als u de site echter wilt maken met Bootstrap-versie 3.4.1, selecteert u Site > Sites beheren. Selecteer de hoofdmap van de site. Klik op Geavanceerde instellingen > Bootstrap. Selecteer 3.4.1 in de vervolgkeuzelijst Bootstrap-versie. Voor Bootstrap-versie 3.4.1 vindt u de mappen css, js en fonts in de hoofdmap van de site.
Wanneer u een Bootstrap 4.4.1-pagina maakt, wordt jQuery-versie 3.4.1 ondersteund. De eenvoudige sjablonen voor Bootstrap zijn bijgewerkt voor Bootstrap-versie 4.4.1.
Wanneer u Bootstrap-componenten toevoegt aan een Bootstrap-pagina, kunt u de Bootstrap 4.0.0-pagina's bijwerken naar Bootstrap 4.4.1 en de jQuery-versie naar 3.4.1. Klik op Ja in het dialoogvenster dat verschijnt wanneer u Bootstrap-componenten in een pagina invoegt.
Wanneer u een Bootstrap 4.0.0-site importeert of wanneer u een site migreert van een vorige versie naar de volgende versie van Dreamweaver, wordt de Bootstrap-versie ingesteld op 4.4.1 bij Site-instelling > Geavanceerde instellingen > Bootstrap.
Opmerking:Met Bootstrap 4.3.1 wordt de hoogte van een rasterrijkolom gewijzigd van 1 px in 0 px. Als u de kolom in Live View zichtbaar wilt maken, moet u wat inhoud aan de rasterrijkolom toevoegen.
-
-
Ga als volgt te werk om bestaande Bootstrap-frameworkbestanden te gebruiken:
-
Klik op Bestaand gebruiken en geef het pad naar het bestand bootstrap.css op. U kunt ook bladeren naar de locatie waar het CSS-bestand is opgeslagen.
-
(Optioneel) Als u een ander CSS-document wilt koppelen aan uw document, klikt u op in de sectie CSS koppelen. Geef de instellingen op in het dialoogvenster Externe stijlpagina koppelen en klik op OK.
-
De optie Voorgedefinieerde lay-out opnemen biedt een basisstructuur voor het Bootstrap-document. Als u de basisstructuur niet wilt gebruiken en wilt beginnen met een leeg document, schakelt u de optie Voorgedefinieerde lay-out opnemen uit.
-
-
Klik op Maken.
Het bestand bootstrap.css dat wordt gemaakt, is een alleen-lezen bestand. U kunt deze stijlen dus niet bewerken met CSS ontwerpen. Het deelvenster Eigenschappen in CSS ontwerpen is uitgeschakeld in Bootstrap-bestanden.
Als u de stijl van het Bootstrap-document wilt wijzigen, moet u een ander CSS-bestand maken waarmee de bestaande stijlen worden overschreven en dit bestand aan het document koppelen.
Bootstrap-bestanden openen
In Dreamweaver kunt u het beste alleen documenten openen en bewerken die zijn gemaakt met versie 3 en hoger van Bootstrap.
U kunt Bootstrap-bestanden op een van de volgende manieren openen:
- Klik op Bestand > Openen en blader naar het Bootstrap HTML-bestand.
- (Aanbevolen) Maak een Dreamweaver-site en stel de sitemap in op de map met uw Bootstrap-bestanden.
Wanneer u een Bootstrap HTML-bestand opent in Dreamweaver:
- Zijn de rijen gemarkeerd met grijze onderbroken lijnen met afgeronde hoeken;
- Zijn de kolommen gemarkeerd met blauwe onderbroken lijnen.
In Dreamweaver worden de CSS-bestanden die zijn gekoppeld aan een Bootstrap HTML-bestand, herkend als de naam van het CSS-bestand 'bootstrap' bevat. De verwijzing naar een CSS-bestand kan één of alle van de volgende onderdelen omvatten:
- Lokaal pad:
Het geminimaliseerde of niet-geminimaliseerde CSS-bestand is lokaal aanwezig. Bijvoorbeeld:
<link href="css/bootstrap.css" rel="stylesheet"> of
<link href="css/bootstrap.min.css" rel="stylesheet"> - Extern pad:
- CDN
Een geminimaliseerd of niet-geminimaliseerd extern CSS-bestand. Bijvoorbeeld:
<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_versienummer>/css/bootstrap.min.css" rel="stylesheet">
Bootstrap-stijlpagina's in de tags link en import worden ondersteund in Dreamweaver. Genest importeren (koppelen naar een stijlpagina waarmee vervolgens een andere stijlpagina wordt geïmporteerd) wordt echter niet ondersteund.
Bootstrap-elementen verbergen en zichtbaar maken en verborgen elementen beheren
Soms is het mogelijk vereist dat een element in een viewport moet worden weergeven terwijl een andere viewport actief is. In dat geval kunt u voor ontwerpdoeleinden het element het beste verbergen.
Als u een Bootstrap-element wilt verbergen, klikt u met de rechtermuisknop en kiest u Element verbergen. Het element wordt tijdelijk verborgen in de weergave.
Als u verborgen elementen wilt bekijken en zichtbaar maken, klikt u met de rechtermuisknop en kiest u Verborgen elementen beheren. De verborgen elementen worden weergegeven met een grijze, gestreepte achtergrond. Klik op het oogpictogram om het element zichtbaar te maken.
Bootstrap-componenten toevoegen
Met de optie Bootstrap-componenten in het deelvenster Invoegen worden alle Bootstrap-componenten weergegeven die u kunt toevoegen aan uw webpagina in Dreamweaver. De beschikbare componenten worden weergegeven in het deelvenster Invoegen en zijn afhankelijk van de Bootstrap-versie van het bestand bootstrap.css dat aan de HTML-pagina is gekoppeld. In Bootstrap 4.0.0 ziet u bijvoorbeeld extra componenten zoals Kaarten en Badges. Op dezelfde manier zijn de componenten Glyphicons, Deelvenster, Bronnen en Miniaturen alleen beschikbaar in Bootstrap 3.3.7. Afhankelijk van de Bootstrap-versie ziet u de overeenkomende componenten in het deelvenster Invoegen. De component voor een draaiend rondje is bovendien alleen beschikbaar in Bootstrap 4.4.1.
De componenten in het deelvenster Invoegen worden toegevoegd op basis van de volgende criteria:
- Het document dat de focus heeft: de componenten in het deelvenster Invoegen worden weergegeven op basis van de Bootstrap-versie in het Bootstrap-bestand dat aan het document is gekoppeld.
- Versie in sitevoorkeuren: voor een niet-Bootstrap-document zoekt Dreamweaver de versie via Sitevoorkeuren > Geavanceerd > Bootstrap. Afhankelijk van de versie in deze optie worden de juiste componenten weergegeven. Voor nieuwe sites is de versie standaard 4.4.1.
- Waar de bestanden zijn opgeslagen: voor een niet-Bootstrap-document dat geen deel uitmaakt van een site, worden de 4.4.1-componenten weergegeven in het deelvenster Invoegen.
Als u een component wilt toevoegen, sleept u deze vanuit het deelvenster naar de webpagina. Controleer visuele hulpmiddelen zoals Livehulplijnen, nauwkeurig invoegen (met DOM) en assistentie bij plaatsen voor u de component neerzet. Met deze hulpmiddelen kunt u de componenten snel en nauwkeurig op de pagina plaatsen. Zie Overzicht van het deelvenster Invoegen voor meer informatie over het invoegen van elementen op uw webpagina.
Rijen toevoegen
Klik op de vereiste rij waarna u de nieuwe rij wilt invoegen. Klik vervolgens op het pictogram Nieuwe rij toevoegen. Er wordt een Bootstrap-rij ingevoegd, samen met twee onderliggende kolomelementen met elk zes kolommen.
De code voor de toegevoegde rij is als volgt:
<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>
waarbij * de huidige schermgrootte in Dreamweaver aangeeft.
Kolommen toevoegen
Selecteer de vereiste kolom en klik vervolgens op het pictogram Nieuwe kolom toevoegen. De geselecteerde kolom wordt zonder de onderliggende elementen gedupliceerd.
Aan alle lege kolommen wordt een minimumhoogte van 20 pixels toegewezen. Deze hoogte wordt echter niet werkelijk toegevoegd aan de pagina, maar wordt alleen getoond in Live View, zodat u eenvoudiger elementen kunt invoegen in de kolommen.
Rijen en kolommen dupliceren
Klik op de rij of kolom die u wilt dupliceren en klik vervolgens op het pictogram voor dupliceren in de rechterbenedenhoek. De volledige rij of kolom wordt gedupliceerd met de bijbehorende inhoud.
Via de optie Rij toevoegen of Kolom toevoegen dupliceert u de rij of kolom inclusief klassen, maar zonder inhoud.
Kolommen vergroten/verkleinen en verschuiven
Het vergroten/verkleinen en verschuiven van kolommen is met name van belang wanneer u responsive designs voor verschillende viewports maakt.
Kolommen vergroten/verkleinen
Klik op de gewenste kolom en versleep de greep aan de rechterkant om de kolomgrootte aan te passen. Wanneer u de kolomgrootte aanpast voor een Bootstrap 4.0.0-document, wordt de klasse col-*-n toegevoegd, waarbij * de huidige mediaquery aangeeft (sm, md, ld of xl) en n het aantal kolommen dat deze inneemt. Voor de schermgrootte Extra klein wordt de klasse col-n toegevoegd.
Wanneer u de kolomgrootte aanpast voor een Bootstrap 3.3.7-document, wordt de klasse col-*-n toegevoegd, waarbij * de huidige mediaquery aangeeft (xs, sm, md of lg) en n het aantal kolommen dat deze inneemt.
In Dreamweaver wordt de huidige schermgrootte vastgesteld en wordt de overeenkomende klasse toegevoegd. Als u kolommen wilt vergroten of verkleinen om de kolommen af te stemmen op specifieke viewports, wijzigt u de viewportgrootte met de opties in de rechterbenedenhoek of in de scrubber. Vervolgens kunt u de benodigde kolomgrootte instellen.
Kolommen verschuiven
Klik op de vereiste kolom en versleep de greep aan de linkerkant om de kolom te verschuiven. De verschuiving wordt weergegeven als een gestreept gebied. Wanneer u de kolom verschuift voor een Bootstrap 4.0.0-document, wordt de klasse offset-*-n toegevoegd, waarbij * de huidige mediaquery aangeeft (sm, md, lg of xl) en n het aantal kolommen dat deze inneemt.
Wanneer u de kolom verschuift voor een Bootstrap 3.3.7-document, wordt de klasse col-*-offset-n toegevoegd, waarbij * de huidige mediaquery aangeeft (xs, sm, md of lg) en n het aantal kolommen dat deze wordt verschoven.
In Dreamweaver wordt de huidige schermgrootte vastgesteld en wordt de juiste klasse toegevoegd. Als u kolommen wilt verschuiven om de kolommen af te stemmen op specifieke viewports, wijzigt u de viewportgrootte met de opties in de rechterbenedenhoek of in de scrubber. Vervolgens kunt u de benodigde kolommen verschuiven.