Responsive website Dreamweaver: stap voor stap met Bootstrap

Een responsive website past zich automatisch aan aan het scherm van je bezoeker, van een smalle telefoon tot een breed beeldscherm. Bouw je zelf een responsive website, Dreamweaver maakt het je makkelijk met Bootstrap: een gratis framework met een kant-en-klaar raster (grid) en componenten zoals menu’s, knoppen en carrousels. Dreamweaver is er nauw mee geïntegreerd, zodat je zowel in code als visueel kunt werken.

In deze handleiding maak je een nieuw Bootstrap-document, leer je hoe het grid en de breakpoints werken, bekijk je je pagina op verschillende schermbreedtes met Visual Media Queries en test je het resultaat op je telefoon. Alles is gebaseerd op Dreamweaver 21.8.1, de actuele versie in Creative Cloud.

Welke Bootstrap-versies ondersteunt Dreamweaver?

Dreamweaver ondersteunt Bootstrap 5.3.8, 4.4.1 en 3.4.1. Nieuwe sites gebruiken standaard 5.3.8. Die versie heeft geen jQuery meer nodig, ondersteunt kleurmodi zoals een donkere modus en werkt met CSS-variabelen, wat aanpassen makkelijker maakt. Kies voor een nieuw project dus gewoon versie 5.

Werk je aan een oudere site, dan kijkt Dreamweaver naar het Bootstrap-bestand in de map css van je site. De ingestelde versie zie en wijzig je via Site > Sites beheren, je site bewerken en dan Geavanceerde instellingen > Bootstrap. Voeg je Bootstrap 5-componenten toe aan een oudere Bootstrap-pagina, dan biedt Dreamweaver aan om de pagina bij te werken naar 5.3.8.

Een nieuw Bootstrap-document maken

Zorg eerst dat je een site hebt ingesteld. Adobe raadt aan Bootstrap-bestanden altijd binnen een Dreamweaver-site te openen, zodat paden en CSS-bestanden goed herkend worden. Heb je nog geen site? Volg dan eerst de stappen in je eerste website maken in Dreamweaver. Daarna:

1. Kies Bestand > Nieuw.
2. Klik in het dialoogvenster Nieuw document op Nieuw document > HTML en open het tabblad Bootstrap.
3. Kies of je een nieuw Bootstrap-CSS-bestand laat maken of een bestaand bestand gebruikt. Bij een nieuw bestand maakt Dreamweaver een map css in de hoofdmap van je site en zet daar bootstrap.css in.
4. Laat Voorgedefinieerde lay-out opnemen (Include A Pre-built Layout) aangevinkt als je met een basisstructuur wilt beginnen. Wil je een lege pagina, vink het dan uit.
5. Klik op Maken en sla de pagina op, bijvoorbeeld als index.html.

Liever snel resultaat? Kies dan in hetzelfde dialoogvenster voor de startsjablonen (Starter Templates > Bootstrap Templates). Je krijgt een complete pagina, bijvoorbeeld voor een portfolio of webshop, waarin je alleen tekst en afbeeldingen vervangt.

Controleer daarna in de Code-weergave of in de <head> deze viewport-regel staat. Zonder deze regel zoomt een telefoon de pagina uit en werkt je responsive ontwerp niet goed:

Zo werkt het Bootstrap-grid

Het hart van een responsive Bootstrap-pagina is het grid van twaalf kolommen. Je bouwt elke sectie op met drie lagen: een container, daarin een row (rij) en daarin kolommen met een col-class. Het getal achter de class bepaalt hoeveel van de twaalf kolommen een blok inneemt.

  

    
Blok 1
    
Blok 2
    
Blok 3
  

In dit voorbeeld staan de drie blokken op een telefoon onder elkaar (12 van 12 kolommen). Vanaf een tablet staan er twee naast elkaar (6 + 6) en valt het derde blok eronder. Op een laptop staan ze alle drie naast elkaar (4 + 4 + 4). Je beschrijft dus per schermgrootte hoe breed een blok is, en Bootstrap regelt de rest.

Open je een Bootstrap-pagina in Dreamweaver, dan zie je rijen en kolommen als gestippelde hulplijnen in de Live-weergave. Let op: in Bootstrap 4 en 5 is een lege kolom niet zichtbaar. Zet er tijdelijk wat tekst in om hem te kunnen selecteren.

Breakpoints in Bootstrap 5

Een breakpoint is de schermbreedte waarop de lay-out verandert. Dreamweaver gebruikt voor Bootstrap 5.3.8 dezelfde standaardwaarden als Bootstrap zelf:

Breakpoint	Class-voorvoegsel	Vanaf breedte	Typisch apparaat
Extra klein	col-	kleiner dan 576px	Telefoon staand
Small	col-sm-	576px	Telefoon liggend
Medium	col-md-	768px	Tablet
Large	col-lg-	992px	Laptop
Extra large	col-xl-	1200px	Desktop
Extra extra large	col-xxl-	1400px	Breed scherm

Bootstrap werkt mobile first: een class geldt vanaf het genoemde breakpoint en voor alles wat breder is. Ontwerp daarom eerst de telefoonweergave en voeg daarna classes toe voor grotere schermen. De standaard kolomtussenruimte en schermformaten kun je bij het maken van het document wijzigen via de knop Aanpassen.

Componenten toevoegen en je eigen stijl gebruiken

In het deelvenster Invoegen (Ctrl + F2 op Windows, Cmd + F2 op de Mac) kies je de categorie Bootstrap-componenten. Daar vind je onder meer navigatiebalken, knoppen, kaarten, modals en carrousels. Sleep een component naar de juiste plek in de Live-weergave of klik erop terwijl je cursor op de gewenste plek staat. Welke componenten je ziet, hangt af van de Bootstrap-versie die aan je pagina gekoppeld is.

Het bootstrap.css-bestand dat Dreamweaver aanmaakt is alleen-lezen. Je past de Bootstrap-stijlen dus niet direct aan, maar maakt een eigen CSS-bestand dat je na Bootstrap koppelt. Zo overschrijven jouw regels de standaardstijl:

Dat eigen bestand bewerk je comfortabel met het CSS Designer-paneel. Hoe dat werkt, lees je in CSS Designer in Dreamweaver gebruiken.

Je ontwerp bekijken met Visual Media Queries

In de Live-weergave zie je boven je pagina de balk met Visual Media Queries. Elke gekleurde balk staat voor een groep media queries: groen voor regels met een maximale breedte, blauw voor regels met zowel een minimale als maximale breedte en paars voor regels met een minimale breedte.

• Klik op een balk om de pagina direct op dat breakpoint te bekijken.
• Sleep de schuifregelaar (scrubber) om de breedte geleidelijk te veranderen en te zien waar je lay-out omslaat.
• Dubbelklik op het grijze vlak rechts om terug te gaan naar de volledige breedte van het documentvenster.

Zie je de balk niet, zet hem dan aan met de knop voor Visual Media Queries in de werkbalk. Zo controleer je zonder browser of tekst niet te lang wordt, afbeeldingen meeschalen en het menu op kleine schermen netjes inklapt.

Testen op je telefoon

De Live-weergave is een goede eerste controle, maar test altijd ook in een echte browser. Met Real-time voorvertoning (F12 op Windows, Option + F12 op de Mac) open je de pagina in je browser en zie je wijzigingen direct terug. Gebruik daar de ontwikkelaarstools van je browser om verschillende telefoonformaten te simuleren.

De oude functie om pagina’s via een QR-code op je telefoon te bekijken (Device Preview) is sinds november 2021 uit Dreamweaver verdwenen. Voor een test op een echt toestel zet je de pagina daarom op een (test)server en open je die op je telefoon. Hoe dat gaat, lees je in je website online zetten via FTP. Let op leesbare tekst zonder inzoomen, knoppen die groot genoeg zijn om aan te tikken en een menu dat goed openklapt.

Tot slot

Met Bootstrap 5 en Dreamweaver heb je snel een stevige basis voor een responsive website. Begin met een nieuw Bootstrap-document of startsjabloon, bouw elke sectie op met container, rij en kolommen, en bepaal per breakpoint hoe breed je blokken zijn. Controleer het resultaat met Visual Media Queries, zet je eigen stijlen in een apart CSS-bestand en test altijd op een echte telefoon voordat je de site live zet.

Veelgestelde vragen