Responsieve websites ontwerpen met Bootstrap

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.

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.

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.

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.

Bootstrap-bestanden openen

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:

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

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_versienummer>/css/bootstrap.min.css" rel="stylesheet">

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.

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.