Handboek Annuleren

Responsieve websites ontwerpen met Bootstrap

 

 

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.

Opmerking:

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.

  1. Klik op Bestand > Nieuw.

  2. Klik in het dialoogvenster Nieuw document dat wordt weergegeven, op Eenvoudige sjablonen en selecteer vervolgens de gewenste sjabloon in de lijst met Bootstrap-sjablonen.

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

  1. Klik op Bestand > Nieuw.

  2. Klik in het dialoogvenster Nieuw document op Nieuw document > HTML en klik vervolgens op de tab Bootstrap.

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

    1. Klik op Nieuw maken.

      Een nieuw Bootstrap-document maken
      Een nieuw Bootstrap-document maken

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

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

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

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

      Bootstrap-versie 4.4.1 selecteren
      Bootstrap-versie 4.4.1 selecteren

      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.

      Bevestigingsvenster voor versiecompatibiliteit
      Bevestigingsvenster voor versiecompatibiliteit

      Het bevestigingsvenster Bootstrap 3.4.1
      Het bevestigingsvenster Bootstrap 3.4.1

      jQuery-popup-dialoogvenster
      jQuery-popup-dialoogvenster

      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.

  4. Ga als volgt te werk om bestaande Bootstrap-frameworkbestanden te gebruiken:

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

      Bootstrap-documenten maken met bestaande frameworkbestanden
      Bootstrap-documenten maken met bestaande frameworkbestanden

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

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

  5. Klik op Maken.

Opmerking:

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

Opmerking:

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

Opmerking:

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.

Bootstrap-elementen verbergen in Dreamweaver
Bootstrap-elementen verbergen in Dreamweaver

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.

Verborgen Bootstrap-elementen beheren
Verborgen Bootstrap-elementen beheren

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.
Ondersteunde componenten in Bootstrap 4.0.0
Ondersteunde componenten in Bootstrap 4.4.1

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.

Opmerking:

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.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?