INHOUDSOPGAVE
- Wat is Bootstrap?
- Hoe werkt het?
- Bootstrap Code Snippets
- Overige informatie over het toepassen Bootstrap
Wat is Bootstrap?
Om het plaatsen van nieuwe content makkelijker te maken hebben wij de optie om Bootstrap te gebruiken toegevoegd. Bootstrap is een CSS framework waar al bepaalde CSS is toegevoegd, zodat de gebruiker alleen nog maar de classes aan de HTML hoeft toe te voegen. Dit maakt het dus mogelijk om snel styling toe te passen op bepaalde elementen in de HTML.
Bootstrap is zowel in de Homepage builder als in de CK-teksteditors te gebruiken. En in de Homepage builder wordt ook meteen getoond hoe het eruit komt te zien.
Let op! Voordat je met Bootstrap aan de slag gaat is het wel een vereiste dat je (basis)kennis hebt van HTML en CSS. Het toepassen van Bootstrap valt onder eigen verantwoordelijkheid.
Hoe werkt het?
Bootstrap verdeeld de pagina in rijen (row) en kolommen (col). Dit komt door het grid "systeem" van Bootstrap. Een pagina kan zoveel rijen hebben als je wilt, maar heeft maar 12 kolommen tot zijn beschikking.
In de praktijk zal je eerst een div om de content dat je wilt plaatsen moeten zetten met de class row. Zodat Bootstrap weet dat de content die in de div staat bij elkaar hoort.
<div class="row">
<!-- plaats hier de content die je wilt toevoegen in de kolommen-->
</div>
Om elke row class moet ook nog een div gezet worden met de class container. Ook als je meerdere rows wilt toevoegen moet de container class eromheen gezet worden.
<div class="container">
<div class="row">
<!-- plaats hier de content die je wilt toevoegen in de kolommen-->
</div>
</div> <div class="container">
<div class="row">
<!-- plaats hier de content die je wilt toevoegen in de kolommen-->
</div>
</div>
Let op! Dit hoef je alleen te doen als je bijv. eerst categorieën wilt tonen en daaronder producten of tekst wilt tonen. Als je bijv. 4 categorieën hebt en deze op 2 regels wilt tonen (2x 2 kolommen), dan kan dit gewoon in dezelfde row geplaatst worden. Bootstrap plaatst het namelijk automatisch op een nieuwe regel wanneer er niet genoeg ruimte is om het op 1 regel te tonen.
Wanneer je dit heb staan zal er nog één div om de content gezet moeten worden waarmee je aan geeft hoeveel kolommen de content mag gebruiken. Standaard zal de content de hele breedte, dus 12 kolommen, innemen. Maar stel dat je bijv. 2 div's naast elkaar wilt hebben staan, hoe moet dat dan? Elke div zal dan 6 kolommen in beslag moeten nemen. De class die dan toegevoegd zal moeten worden aan de div om de content heen is col-6.
<div class="container">
<div class="row">
<div class="col-6">
<!-- plaats hier de content die je wilt toevoegen-->
</div>
<div class="col-6">
<!-- plaats hier de content die je wilt toevoegen-->
</div>
</div>
</div>
Dit proces kan je vergelijken met bijv. een tabel. De container is de hele tabel en houd alles bij elkaar. De row is een rij in de tabel met allemaal verschillende waardes, bijv. appels en peren. En col is een kolom met de informatie van de betreffende row. De tabel heeft maar 12 kolommen waar informatie in gezet kan worden. Maar standaard zijn al deze kolommen samengevoegd tot 1 kolom. Door de kolom te splitsen krijg je meer kolommen en kan je meer verschillende soorten informatie over bijv. appels kwijt.
Maar er zijn natuurlijk veel meer mogelijkheden, dan alleen maar 2 kolommen naast elkaar. Soms wil je ook 3 of 4 kolommen naast elkaar. Hieronder staan nog een aantal van deze situaties beschreven met de classes die dan gebruikt kunnen worden:
- bij 2,5 kolommen, kan de class col-5 gebruikt worden;
- bij 3 kolommen, kan de class col-4 gebruikt worden;
- bij 4 kolommen, kan de class col-3 gebruikt worden;
- bij 6 kolommen, kan de class col-2 gebruikt worden;
- en bij 12 kolommen, kan de class col-1 gebruikt worden.
En het kan natuurlijk ook voorkomen dat je bijv. op desktop de content over 2 kolommen wilt verdelen, maar op mobiel gewoon 1 kolom wilt gebruiken. Ook hiervoor heeft Bootstrap een oplossing. Voor elke scherm grootte heeft Bootstrap een "code" (breakpoints) toegevoegd die daarvoor gebruikt kan worden:
- voor mobiel gebruiken ze de afkorting xs en sm;
- voor tablets gebruiken ze de afkorting md;
- en voor desktop gebruiken ze de afkorting lg en xl.
Maar hoe werkt dit dan in de praktijk? Neem het voorbeeld dat hierboven genomen is. Als je de content alleen op desktop over 2 kolommen wilt verdelen kan je i.p.v. de class col-6 de class col-lg-6 gebruiken. Dan zal hij alleen op desktop het in 2 kolommen tonen en op mobiel en tablet terugvallen op de default, dus 12 kolommen. Je hoeft dus niet voor elke scherm grootte dit in te vullen. Hij zal het namelijk terugvallen op de default voor alle schermen die kleiner zijn en de waarde die je hebt gebruikt toepassen op alle andere schermen. Dus stel je wilt voor tablet én desktop 2 kolommen naast elkaar en op mobiel gewoon 1, dan volstaat het om alleen de class col-md-6 toe te voegen. Hij zal het dan dus op alle schermen die groter zijn dan tablet toepassen.
Een ander scenario zou kunnen zijn dat je op mobiel 1 kolom wilt hebben, op tablet 2 kolommen en op desktop 3. Dan zullen de volgende classes toegevoegd moeten worden aan de div waar de content in komt te staan: col-xs-12 col-md-6 col-lg-4.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-4">
<!-- plaats hier de content die je wilt toevoegen-->
</div>
<div class="col-xs-12 col-md-6 col-lg-4">
<!-- plaats hier de content die je wilt toevoegen-->
</div>
</div>
</div>
Als je nog meer wilt weten over Bootstrap, bekijk dan hun documentatie.
Bootstrap Code Snippets
We snappen dat dit allemaal veel informatie in één keer is en dat je misschien ook weinig kennis van HTML hebt om dit goed toe te kunnen passen. Daarom hebben wij, om het leven wat makkelijker te maken, wat code snippets voor je gemaakt waar je alleen nog maar de tekst, afbeeldingen en linken in aan hoeft te passen.
Categorieën (of producten) toevoegen
Wanneer je extra links naar categorieën met afbeeldingen wilt toevoegen op een pagina kan dat door de code hieronder toe te passen.
Let op! Om deze code werkend te krijgen moeten de volgende dingen nog aangepast worden (in de code en backoffice):
- Vervang in de code hier boven het volgende:
- het woord "link" met de link naar de categorie die hier genoemd wordt, als je bijv. een categorie genaamd "accessoires" wilt toevoegen en de URL van die categorie bijv. https://www.mijnwebshop.nl/accessoires/ is vervang je het woord "link" met "accessoires" waardoor de code er als volgt uit zal zien: href="/accessoires/". Let op: het woord "link" staat, per categorie, 2x in de code;
- het woord "imageSrc" met de naam en extentie van de afbeelding, bijv: afbeelding.jpg. De code zal er dan als volgt uitzien: `src="/images/categorieimages/afbeelding.jpg"`;
- het woord "altTekst" met een omschrijving van de afbeelding, stel de omschrijving is "afbeelding van een categorie" zal de code er als volgt uitzien: alt="afbeelding van een categorie";
- "Naam Product / Categorie" met de naam van de categorie, bijv. "Accessoires".
- Wanneer je dit allemaal hebt aangepast, kan de code toegevoegd worden door in de Homepage builder of CK-editor op "Broncode" te klikken en de code daar in het veld, op de plek waar je het wilt hebben staan, te plakken en sla de wijzigingen op.
- Zet als laatste de opties "Layout classes toevoegen" en "Flex classes toevoegen" aan onder "Website uiterlijk > Algemeen > Algemeen > Bootstrap" en test of het allemaal goed gelukt is op de des betreffende pagina.
Één rij met 3 categorieën (of producten) naast elkaar
Klik hier om de code weer te geven
<div class="container">
<div class="row">
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Twee rijen met 3 categorieën (of producten) naast elkaar
Klik hier om de code weer te geven
<div class="container">
<div class="row">
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-4">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Één rij met 4 categorieën (of producten) naast elkaar
Klik hier om de code weer te geven
<div class="container">
<div class="row">
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Twee rijen met 4 categorieën (of producten) naast elkaar
Klik hier om de code weer te geven
<div class="container">
<div class="row">
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
<!-- categorie-->
<div class="d-flex justify-content-center align-items-center col-xs-6 col-md-3">
<div class="card animation__opacity">
<div class="card-img-top">
<a href="/link/">
<img src="/images/categorieimages/imageSrc" width="250" height="250" alt="altTekst"/>
</a>
</div>
<div class="card-body">
<div class="d-flex justify-content-center align-content-center">
<a href="/link/">
<span>Naam Categorie</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Tekst met een afbeelding ernaast
Wanneer je tekst met een afbeelding ernaast, of twee teksten naast elkaar, wilt toevoegen op een pagina kan dat door de code hieronder toe te passen.
Let op! Om deze code werkend te krijgen moeten de volgende dingen nog aangepast worden (in de code en backoffice):
- Vervang in de code hier boven het volgende:
- het woord "titel" met de titel die je er wilt hebben staan;
- het woord "tekst" met de tekst die je er wilt hebben staan;
- "Bekijk assortiment" als je de tekst in de button wilt aanpassen;
- het woord "imageSrc" met de naam en extentie van de afbeelding, bijv: afbeelding.jpg. De code zal er dan als volgt uitzien: src="/images/categorieimages/afbeelding.jpg";
- het woord "altTekst" met een omschrijving van de afbeelding, stel de omschrijving is "afbeelding van een categorie" zal de code er als volgt uitzien: alt="afbeelding van een categorie";
- het woord "link" met de link naar een pagina, als je bijv. een categorie genaamd "accessoires" wilt toevoegen en de URL van die categorie bijv. https://www.mijnwebshop.nl/accessoires/ is vervang je het woord "link" met "accessoires" waardoor de code er als volgt uit zal zien: href="/accessoires/".
- Wanneer je dit allemaal hebt aangepast, kan de code toegevoegd worden door in de Homepage builder of CK-editor op "Broncode" te klikken en de code daar in het veld, op de plek waar je het wilt hebben staan, te plakken en sla de wijzigingen op.
- Zet als laatste de opties "Layout classes toevoegen", "Flex classes toevoegen" en "Offset classes toevoegen" aan onder "Website uiterlijk > Algemeen > Algemeen > Bootstrap" en test of het allemaal goed gelukt is op de des betreffende pagina.
Tekst met een afbeelding rechts
Klik hier om de code weer te geven
<div class="container">
<div class="row">
<div class="d-flex flex-column justify-content-center col-lg-5">
<header class="flex-row">
<h2>titel</h2>
</header>
<div>
<p>tekst</p>
</div>
<!-- Haal deze code weg als je geen button erbij wilt hebben (weghalen tot: Tot hier)-->
<div>
<a class="btn configuration_button_productinfo" href="link">
<span>Bekijk assortiment</span>
<!-- Verwijder de regel hieronder als je geen pijltje naast de tekst wilt hebben staan-->
<i class="icon icon-arrow-right8">​</i>
<!-- verwijderen tot hier voor het pijltje-->
</a>
</div>
<!-- Verwijderen tot hier voor de button-->
</div>
<div class="offset-lg-1 col-lg-6">
<img src="imageSrc" alt="altTekst" />
</div>
</div>
</div>
Tekst met een afbeelding links
Klik hier om de code weer te geven
<div class="container">
<div class="row flex-lg-row-reverse">
<div class="d-flex flex-column justify-content-center col-lg-5 offset-lg-1">
<header class="flex-row">
<h2>titel</h2>
</header>
<div>
<p>tekst</p>
</div>
<!-- Haal deze code weg als je geen button erbij wilt hebben (weghalen tot: Tot hier)-->
<div>
<a class="btn configuration_button_productinfo" href="link">
<span>Bekijk assortiment</span>
<!-- Verwijder de regel hieronder als je geen pijltje naast de tekst wilt hebben staan-->
<i class="icon icon-arrow-right8">​</i>
<!-- verwijderen tot hier voor het pijltje-->
</a>
</div>
<!-- Verwijderen tot hier voor de button-->
</div>
<div class="col-lg-6">
<img src="imageSrc" alt="altTekst" />
</div>
</div>
</div>
Twee teksten naast elkaar
Klik hier om de code weer te geven
<div class="container">
<div class="row flex-lg-row-reverse">
<div class="d-flex flex-column justify-content-center col-lg-5 offset-lg-1">
<header class="flex-row">
<h2>titel</h2>
</header>
<div>
<p>tekst</p>
</div>
<!-- Haal deze code weg als je geen button erbij wilt hebben (weghalen tot: Tot hier)-->
<div>
<a class="btn configuration_button_productinfo" href="link">
<span>Bekijk assortiment</span>
<!-- Verwijder de regel hieronder als je geen pijltje naast de tekst wilt hebben staan-->
<i class="icon icon-arrow-right8">​</i>
<!-- verwijderen tot hier voor het pijltje-->
</a>
</div>
<!-- Verwijderen tot hier voor de button-->
</div>
<div class="col-lg-6">
<img src="imageSrc" alt="altTekst" />
</div>
</div>
</div>
Overige informatie over het toepassen Bootstrap
Let op! Deze informatie is voor gebruikers die meer kennis hebben van HTML én CSS.
Container classes
Zoals te zien is in de code snippets wordt over het algemeen gewoon de class container gebruikt. Dit is echter niet de container class van Bootstrap maar van Shoptrader zelf. Wanneer je de container class van Bootstrap wilt gebruiken, moet je er "st_" voor zetten (st_container, st_container-fluid). Dit is gedaan om te voorkomen dat deze twee classes met elkaar in conflict raken. De reden dat er over het algemeen gebruik wordt gemaakt van de container class van Shoptrader, is om ervoor te zorgen dat de content overal even breed is. Dit aangezien op de container class van Shoptrader vaak een max-width wordt gezet.
Responsive breakpoints
De breakpoints zijn bij Bootstrap als volgt opgebouwd:
/*breakpoint xs*/
@media (min-width: 576px) {
}
/*breakpoint sm*/
@media (min-width: 768px) {
}
/*breakpoint md*/
@media (min-width: 992px) {
}
/*breakpoint lg*/
@media (min-width: 1200px) {
}
/*breakpoint xl*/
@media (min-width: 1400px) {
}