Handboek Annuleren

Responsieve websites ontwerpen met Bootstrap

  1. Dreamweaver Handboek
  2. Inleiding
    1. Basisbeginselen van responsief webontwerp
    2. Nieuwe functies in Dreamweaver
    3. Webontwikkeling met Dreamweaver: een overzicht
    4. Dreamweaver / Algemene vragen
    5. Sneltoetsen
    6. Systeemvereisten voor Dreamweaver
    7. Functieoverzicht
  3. Dreamweaver en Creative Cloud
    1. Dreamweaver-instellingen synchroniseren met Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Photoshop-bestanden gebruiken in Dreamweaver
    4. Werken met Adobe Animate en Dreamweaver
    5. Voor het web geoptimaliseerde SVG-bestanden uit Libraries extraheren
  4. De werkruimten en weergaven van Dreamweaver
    1. De werkruimte van Dreamweaver
    2. De werkruimte van Dreamweaver optimaliseren voor visuele ontwikkeling
    3. Bestanden zoeken op bestandsnaam of inhoud | Mac OS
  5. Sites opzetten
    1. Over Dreamweaver-sites
    2. Een lokale versie van uw site instellen
    3. Verbinding maken met een publicatieserver
    4. Een testserver instellen
    5. Instellingen van Dreamweaver-sites importeren en exporteren
    6. Bestaande websites overzetten van een externe server naar de hoofdmap van uw lokale site
    7. Toegankelijkheidsfuncties in Dreamweaver
    8. Geavanceerde instellingen
    9. Sitevoorkeuren instellen voor het overzetten van bestanden
    10. Proxyserverinstellingen opgeven in Dreamweaver
    11. Dreamweaver-instellingen synchroniseren met Creative Cloud
    12. Git gebruiken in Dreamweaver
  6. Bestanden beheren
    1. Bestanden maken en openen
    2. Bestanden en mappen beheren
    3. Bestanden van uw server ophalen en op uw server plaatsen
    4. Bestanden inchecken en uitchecken
    5. Bestanden synchroniseren
    6. Bestanden vergelijken om verschillen op te sporen
    7. Bestanden en mappen op uw Dreamweaver-site camoufleren
    8. Ontwerpnotities inschakelen voor Dreamweaver-sites
    9. Potentieel misbruik van Gatekeeper voorkomen
  7. Lay-out en ontwerp
    1. Visuele lay-outhulpmiddelen gebruiken
    2. Uw pagina opmaken met CSS
    3. Responsieve websites ontwerpen met Bootstrap
    4. Mediaquery's maken en gebruiken in Dreamweaver
    5. Inhoud in tabellen presenteren
    6. Kleuren
    7. Responsive design met dynamische rasterlay-outs
    8. Extract in Dreamweaver
  8. CSS
    1. Informatie over CSS (Cascading Style Sheets)
    2. Pagina's opmaken met CSS ontwerpen
    3. CSS-preprocessors gebruiken in Dreamweaver
    4. CSS-stijlvoorkeuren instellen in Dreamweaver
    5. CSS-regels verplaatsen in Dreamweaver
    6. Inline CSS converteren naar een CSS-regel in Dreamweaver
    7. Werken met div-tags
    8. Verlopen toepassen op een achtergrond
    9. CSS3-overgangseffecten maken en bewerken in Dreamweaver
    10. Code opmaken
  9. Pagina-inhoud en assets
    1. Pagina-eigenschappen instellen
    2. Eigenschappen voor CSS-koppen en CSS-koppelingen
    3. Werken met tekst
    4. Tekst, tags en kenmerken zoeken en vervangen
    5. Het deelvenster DOM
    6. Bewerken in Live View
    7. Documenten coderen in Dreamweaver
    8. Elementen selecteren en weergeven in het documentvenster
    9. Teksteigenschappen instellen in de eigenschappencontrole
    10. Spelling op een webpagina controleren
    11. Horizontale lijnen gebruiken in Dreamweaver
    12. Lettertypecombinaties toevoegen en aanpassen in Dreamweaver
    13. Werken met assets
    14. Datums in Dreamweaver invoegen en bijwerken
    15. Favoriete assets maken en beheren in Dreamweaver
    16. Afbeeldingen invoegen en bewerken in Dreamweaver
    17. Mediaobjecten toevoegen
    18. Video's toevoegen in Dreamweaver
    19. HTML5-video invoegen
    20. SWF-bestanden invoegen
    21. Audio-effecten toevoegen
    22. HTML5-audio invoegen in Dreamweaver
    23. Werken met bibliotheekitems
    24. Arabische en Hebreeuwse tekst gebruiken in Dreamweaver
  10. Koppelingen en navigatie
    1. Over koppelingen en navigatie
    2. Koppelingen
    3. Afbeeldingen met hyperlinks
    4. Problemen met koppelingen oplossen
  11. jQuery-widgets en -effecten
    1. De jQuery-gebruikersinterface en mobiele widgets in Dreamweaver gebruiken
    2. jQuery-effecten gebruiken in Dreamweaver
  12. Websites coderen
    1. Over coderen in Dreamweaver
    2. Coderingsomgeving in Dreamweaver
    3. Coderingsvoorkeuren instellen
    4. Codekleuren aanpassen
    5. Code schrijven en bewerken
    6. Coderingstips en codevoltooiing
    7. Code samenvouwen en uitvouwen
    8. Code hergebruiken met codefragmenten
    9. Linting voor code gebruiken
    10. Code optimaliseren
    11. Code bewerken in de ontwerpweergave
    12. Werken met de kopinhoud van pagina's
    13. Include-bestanden op de server invoegen in Dreamweaver
    14. Tagbibliotheken gebruiken in Dreamweaver
    15. Aangepaste tags importeren in Dreamweaver
    16. JavaScript-gedrag gebruiken (algemene instructies)
    17. Ingebouwd JavaScript-gedrag toepassen
    18. Over XML en XSLT
    19. XSL-transformaties op de server uitvoeren in Dreamweaver
    20. XSL-transformaties op de client uitvoeren in Dreamweaver
    21. Tekenentiteiten toevoegen voor XSLT in Dreamweaver
    22. Code opmaken
  13. Productonafhankelijke workflows
    1. Extensies in Dreamweaver installeren en gebruiken
    2. In-app updates in Dreamweaver
    3. Microsoft Office-documenten invoegen in Dreamweaver (alleen Windows)
    4. Werken met Fireworks en Dreamweaver
    5. Inhoud bewerken op Dreamweaver-sites met behulp van Contribute
    6. Integratie van Dreamweaver met Business Catalyst
    7. Persoonlijke e-mailcampagnes maken
  14. Sjablonen
    1. Over Dreamweaver-sjablonen
    2. Sjablonen en op een sjabloon gebaseerde documenten herkennen
    3. Een Dreamweaver-sjabloon maken
    4. Bewerkbare gebieden maken in sjablonen
    5. Herhalingsgebieden en tabellen maken in Dreamweaver
    6. Optionele gebieden in sjablonen gebruiken
    7. Bewerkbare tagkenmerken in Dreamweaver definiëren
    8. Geneste sjablonen maken in Dreamweaver
    9. Sjablonen bewerken, bijwerken en verwijderen
    10. XML-inhoud exporteren en importeren in Dreamweaver
    11. Een sjabloon uit een bestaand document toepassen of verwijderen
    12. Inhoud bewerken in Dreamweaver-sjablonen
    13. Syntaxisregels voor sjabloontags in Dreamweaver
    14. Voorkeuren voor de markering van sjabloongebieden instellen
    15. Voordelen van het gebruik van sjablonen in Dreamweaver
  15. Mobiel en meerdere schermen
    1. Mediaquery's maken
    2. Paginastand voor mobiele apparaten wijzigen
    3. Web-apps voor mobiele apparaten maken met Dreamweaver
  16. Dynamische sites, pagina's en webformulieren
    1. Informatie over web-applicaties
    2. Uw computer instellen voor het ontwikkelen van applicaties
    3. Problemen met databaseverbindingen oplossen
    4. Verbindingsscripts verwijderen in Dreamweaver
    5. Dynamische pagina's ontwerpen
    6. Overzicht van dynamische inhoudsbronnen
    7. Bronnen met dynamische inhoud definiëren
    8. Dynamische inhoud toevoegen aan pagina's
    9. Dynamische inhoud wijzigen in Dreamweaver
    10. Databaserecords weergeven
    11. Livegegevens leveren en problemen oplossen Dreamweaver
    12. Aangepast servergedrag toevoegen in Dreamweaver
    13. Formulieren maken met Dreamweaver
    14. Formulieren gebruiken om informatie van gebruikers te verzamelen
    15. ColdFusion-formulieren maken en inschakelen in Dreamweaver
    16. Webformulieren maken
    17. Verbeterde HTML5-ondersteuning voor formulierelementen
    18. Een formulier ontwikkelen met Dreamweaver
  17. Applicaties visueel samenstellen
    1. Hoofd- en detailpagina's maken in Dreamweaver
    2. Zoekpagina's en resultatenpagina's maken
    3. Een pagina voor het invoegen van records maken
    4. Een pagina voor het bijwerken van records maken in Dreamweaver
    5. Pagina's voor het verwijderen van records maken in Dreamweaver
    6. ASP-opdrachten gebruiken om een database aan te passen in Dreamweaver
    7. Een registratiepagina maken
    8. Een aanmeldingspagina maken
    9. Een pagina maken waartoe alleen geautoriseerde gebruikers toegang hebben
    10. Mappen beveiligen in ColdFusion met Dreamweaver
    11. ColdFusion-componenten gebruiken in Dreamweaver
  18. Websites testen, voorvertonen en publiceren
    1. Pagina's voorvertonen
    2. Dreamweaver-webpagina's voorvertonen op meerdere apparaten
    3. Uw Dreamweaver-site testen
  19. Problemen oplossen
    1. Opgeloste problemen
    2. Bekende problemen

 

 

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.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online