Werk je website uit in Bootstrap Studio. Dan kan je werken met het grid-systeem Bootstrap (gebaseerd op 12-kolommen). Meer uitleg zie https://www.w3schools.com/bootstrap5

Bootstrap Studio

Jullie mogen als leerling gebruik maken van de software Bootstrap Studio. Je zal hiervoor een bevestiging krijgen op jullie schoolmail voornaam.familienaam@richtpuntninove.be

1. Het Bootstrap Studio-venster is onderverdeeld in een aantal functionele gebieden:
   1. Componentenpaneel – Het bestaat uit de tabbladen Studio en Online . Bevat alle beschikbare componenten die u kunt slepen en neerzetten op het werkgebied (6) en het overzicht (2).
   2. Overzichtspaneel – Het geeft u een snel overzicht van alle componenten op de pagina. Componenten kunnen hier worden gesleept en opnieuw worden gerangschikt.
   3. Editorpaneel – bevat HTML- en Stijlen-tabbladen. U kunt erop klikken om het uit te vouwen en het los te koppelen als een apart venster.
   4. Ontwerppaneel - bevat alle pagina's, CSS, SASS-bestanden en afbeeldingen van uw ontwerp. Wanneer u dubbelklikt, worden pagina's geopend in het werkgebied (6) en andere middelen - in het Editor -paneel (3).
   5. Optiepaneel – toont de opties van de geselecteerde component(en) en geeft u eenvoudige visuele aanpassingsbedieningen.
   6. Het werkgebied - hier ziet u een voorbeeld van de pagina, kunt u componenten slepen en neerzetten en tekst bewerken.

   U kunt meer over de panelen leren door enkele van onze tutorials in de hoofdnavigatie te volgen.

Vergeet niet de basis regels. Je geeft de breedte van de kolom weer voor de mobiele versie = de standaard grootte.

div of section > container > row > col

Voorbeeld:

 

 

Download Start.bsdesign

We gaan deze website na maken.

Stappenplan

Importeer de foto's in de map images onder het palet Design.

1. Sleep het component navbar in the stage. Verander de titel naar "Eigennaam Bakery".
Lijn het element nav naar rechts uit (Alignment End) via de options onder de option palet. Verander de namen van de menu naar Cake, Pricing, Order. Voeg nog een item bij Contact Us.

2. Sleep een div element onder de navbar en sleep nadien een element jumbotron of Highlight Clean genest erin. Laat dit los over de HTML tag onderaan links.
Voeg een id toe aan de div #promo. Verwijder de 2de knop.

3. Laat de div geselecteerd een klik op Create een nieuwe CSS element onder styles.css (zie palet Styles).
Voeg volgende eigenschappen toe aan #promo:

text-align: center;
padding: 40px;
background: url("background.jpg") no-repeat;
background-size: cover;

 

Verander de CSS van de klasse .highlight-clean

.highlight-clean {
color: #000;
background-color: rgba(255,255,255,0.7);
padding: 40px;
border-radius: 20px;
max-width: 800px;
margin: 0 auto;
}

 

4. Media query:
De padding is bij kleine schermen te veel. Selecteer bovenaan het laptop-icoon (< 992px)

Typ de 2 selectors opnieuw #promo & .highlight-clean en kies voor add media query. Het icoon dat is geselecteerd geeft de pixel grootte aan.


Voeg een container component toe met daarin een heading en een alinea. Dit mag gewone dummy tekst zijn. Voeg de naam .site-section toe aan de klasse bij container.

Dupliceer de body selector en kopieer deze naar je styles.css. Verander het lettertype naar

body {
font-family: Arial,Helvetica, sans-serif;
}

.site-section {
  text-align: center;
  padding: 50px 0 60px;
}
.site-section h1 {
  font-weight: normal;
  margin-bottom: 30px;
}

.site-section p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 20px;
}

Dupliceer de vorige container. Verander de titel en verwijder de alinea. Voeg nu eerst een rij toe en dan een kolom, geef bij opties de waarde 10 mee en centreer horizontaal. Geef ook een klasse mee class="col-10 mx-auto col-md-4 item". Kies vanaf tablet versie (md) voor de breedte van de kolom 4 (= 3 kolommen naast elkaar).

 

We gaan nu iconen boven de titels plaatsen, sleep deze via components > icon. Dubbelklik om een ander icoon te kiezen ipv de ster. Vergroot het icoon via een groter lettertype mee te geven.

#why .item .fa {
  font-size: 42px;
}

 

Bekijk de site mobiel. Als het onder elkaar staat komen de kolommen te dicht bij elkaar. We gaan wat marges toevoegen.

#why .item {
  margin-top: 40px;
}
#why .item h2 {
  font-size: 23px;
}

We gaan de container in een div slepen en een achtergrondkleur meegeven. Maak een klasse aan .container-blue

.blue-section {
  background-color: #cef2ee;
}

De navbar gaan we fixeren of vastzetten. Ook de optie fluid uitvinken (volledige browser breedte). We gaan #promo wel meer boven marge moeten geven.

#promo {
 margin-top: 65px;
}

Voeg het logo voor de titel en geef deze de id naam #logo.

#logo {
  max-height: 42px;
  margin-right: 10px;
  margin-top: -3px;
  display: inline-block;
}

Verander ook nog de kleuren van de iconen zodat ze bij het logo passen. Doe dit met het pipet binnen de kleurkiezer.

Verander de kleur van de alinea in de 3 kolommen:

.blue-section p {
  color: #99aba9;
}

 

Verander de kleur van de knop:

.highlight-clean .buttons .btn {
  background: #e47db3;
  color: #fff;
}

Dupliceer de welkom container en sleep deze onderaan in de pagina. Verwijder het alinea.
Sleep eerst een row en dan een column. Kies in de optie MD 4

Sleep nu een component thumbnail in de kolom. Verwijder de body met de tekst. Dubbelklik en kies de foto "desert-1.jpg". Sleep een link er eerst boven en nadien sleep je de image erop. Verwijder de tekst.

Als laatste maak je volgende footer na, probeer het nu zelf eens ...

Ga naar https://cdnjs.com/libraries/lightbox2

Kopieer eerst de CSS en dan de JavaScript:

https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css

https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox-plus-jquery.js

Voeg het attribuut data-lightbox="cakes" toe aan je link

Controleer in de browser nu zou alles moeten werken.

 

Als laatste gaan we je website exporteren naar een HTML bestand.

Ga naar Export Settings en geef een lokatie mee.

Je kan ook rechtstreeks verbinding maken met je webruimte via ftp.
Verander enkel je voornaam bij direction en vraag het paswoord aan de leerkracht 😉

Ingebouwde thema's

Om een ​​ander thema voor uw ontwerp te selecteren, moet u het dialoogvenster Instellingen openen en een ander thema kiezen in de vervolgkeuzelijst. Dit verandert de kleuren en het uiterlijk van zaken als navigatiebalken, knoppen, kaarten en meer.

Aangepaste thema's

De app ondersteunt ook het importeren van aangepaste versies van het Bootstrap-framework. Er zijn veel manieren om aangepaste Bootstrap-builds te maken:

• SASS . gebruiken (opent nieuw venster)om de bronbestanden van het framework uit te breiden en themavariabelen te overschrijven (aanbevolen).
• De CSS-variabelen wijzigen (opent nieuw venster)Bootstrap-blootstelling om de standaardthemakleuren en -stijlen te wijzigen.
• Handmatig bewerken van het door Bootstrap gecompileerde CSS-bestand voor distributie.
• Andere methoden zijn afhankelijk van uw build-tools en de versie van Bootstrap die u gebruikt.

Welke aanpak je ook kiest, het eindresultaat moet altijd een gewoon CSS-bestand zijn dat de kern van het Bootstrap-framework bevat, samen met eventuele stijlwijzigingen die je hebt toegevoegd.

Om het gecompileerde CSS-bestand van uw thema te importeren, opent u het dialoogvenster Instellingen en klikt u op de knop Thema's beheren . Daar kun je je thema importeren en het zal verschijnen in de vervolgkeuzelijst voor thema's, naast de ingebouwde thema's.

Na het importeren van een thema krijgt het de naam van het door u opgegeven bestand. U kunt de naam vervolgens naar wens wijzigen met de knop Bewerken ( ).

Het toevoegen van een mooi lettertype aan uw ontwerp is een van de beste manieren om het er meer gepolijst en premium uit te laten zien. Met Bootstrap Studio heb je de mogelijkheid om te kiezen uit duizenden gratis lettertypen, met dank aan de Google Fonts-bibliotheek. Je hebt ook de mogelijkheid om je eigen volledig aangepaste lettertypen toe te voegen.

Google-lettertypen

Het toevoegen van een weblettertype vanuit Google Fonts gaat supersnel. Klik om te beginnen met de rechtermuisknop op de groep Lettertypen in het deelvenster Ontwerp en kies de Manage Fontsoptie.

Hierdoor wordt de Google Fonts-browser geopend.

Hier kunt u zoeken naar lettertypefamilies, filteren op categorie en ondersteunde taal en de stijlen activeren die u nodig hebt.

Nadat u uw selectie hebt opgeslagen , zullen bij het stylen van elementen op de pagina de nieuwe lettertypen beschikbaar zijn in de Font Family-invoer.

Vergeet niet om altijd een fallback-lettertype achter uw weblettertype op te nemen, voor het geval dat laatste niet kan worden geladen of niet wordt ondersteund door oudere webbrowsers.

Aangepaste lettertypen

Soms moet u een aangepast lettertype gebruiken dat niet beschikbaar is in Google Fonts. In dit geval kunt u uw lettertype rechtstreeks in de app importeren.

Uw lettertype converteren naar een weblettertype

Alleen webfonts kunnen in Bootstrap Studio worden geïmporteerd. Maar dankzij gratis online diensten zoals Transfonter (opent nieuw venster), kunt u elk normaal lettertype-formaat converteren naar een webfont. Voeg gewoon uw lettertypebestanden toe en klik op Converteren . Dit geeft je een zip-bestand met je webfont.

Uw weblettertype importeren

Nadat je het zip-bestand hebt uitgepakt dat je hierboven hebt gegenereerd (of als je al een webfont hebt), klik je met de rechtermuisknop op de groep Lettertypen in Bootstrap Studio en kies je Import Webfont. Navigeer in de bestandsbrowser naar het webfont en selecteer het css-bestand in de map.

Het CSS-bestand van een webfont bevat belangrijke metagegevens die de beschikbare gewichten en tekensets van uw lettertype beschrijven, die Bootstrap Studio gebruikt om uw lettertype correct te importeren.

Het lettertype weergeven

Het enige dat overblijft is om het lettertype dat je hebt geïmporteerd in te stellen als font-familyeen element op je pagina, door een beetje CSS te schrijven. In het onderstaande voorbeeld hebben we het webfont ingesteld dat op het hele document moet worden gebruikt, maar je kunt dit eenvoudig beperken tot specifieke elementen zoals koppen.

Een smaakvolle scroll- of hover-animatie kan uw ontwerp interactiever en leuker maken. Bootstrap Studio biedt een breed scala aan animaties die eenvoudig in uw project kunnen worden geïmplementeerd.

Om een ​​animatie aan een component toe te voegen, selecteert u deze en gaat u naar het tabblad Animatie van het Optiepaneel . Er zijn drie soorten animaties: Scroll , Hover en Load .

Scroll animaties

Scroll-animaties worden geactiveerd wanneer u naar beneden/boven op uw pagina scrolt. U kiest een paar configuratie-opties, zoals het animatie-effect en de duur, en Bootstrap Studio zorgt ervoor dat alle vereiste bibliotheken en CSS worden opgenomen om het te laten werken. Intern worden onze scroll-animaties mogelijk gemaakt door de AOS-bibliotheek (opent nieuw venster).

Op het tabblad Animaties kunt u de volgende instellingen wijzigen:

• Type - Stel het animatietype in (bijv. fade-up, fade-down, inzoomen, uitzoomen en meer)
• Duur - Duur van animatie (ms)
• Offset - Activeer de animatie op enige afstand van het element (in px)
• Vertraging - Vertraag de animatie (ms)
• Eén keer afspelen - Kies of de animatie één keer moet worden geactiveerd, of elke keer dat je omhoog/omlaag naar het element scrolt

Zweef animaties

Hover-animaties worden uitgevoerd wanneer u uw muis over een element beweegt. Om ze te laten werken, gebruikt Bootstrap Studio de Animate CSS (opent nieuw venster)bibliotheek intern.

Er is een groot aantal animatie-effecten beschikbaar, zoals bounce, pulse, wobble enz. Als u uw animaties rechtstreeks in Bootstrap Studio wilt testen, klikt u op de knop Afspelen .

Animaties laden

Laadanimaties worden automatisch uitgevoerd wanneer de pagina in de browser wordt geladen. Je hebt controle over het type animatie en of je oneindig wilt herhalen.

Animaties verwijderen

Wanneer voor een component een animatie is gedefinieerd, wordt er een felgekleurde ster naast weergegeven in het deelvenster Overzicht, zodat u in één oogopslag kunt zien welke componenten worden geanimeerd.

Om een ​​animatie uit een component te verwijderen, selecteert u deze en stelt u op het tabblad Animaties de trigger in op Nooit .

Hiermee wordt de animatie verwijderd die aan dat element is toegewezen.

Bootstrap Studio biedt u een eenvoudige manier om uw site te optimaliseren voor zoekmachines en sociale netwerken. U kunt sitemaps, sociale kaarten voor Facebook en Twitter en favicons definiëren.

SEO-instellingen

Het instellen van een titel en beschrijving heeft invloed op de manier waarop uw site wordt weergegeven in de zoekresultaten van Google en Bing. In Instellingen > SEO kun je deze opties instellen en een voorbeeld bekijken. Deze instellingen zijn globaal en worden overgenomen door alle pagina's, tenzij ze een eigen titel/beschrijving hebben.

Sitemap

Verderop kunt u ervoor zorgen dat een sitemap.xmlbestand wordt gegenereerd wanneer u exporteert . Alle pagina's in uw ontwerp worden opgenomen in de sitemap, zodat zoekmachines ze gemakkelijker kunnen vinden.

Favicons

Favicons worden weergegeven door browsers en mobiele apparaten wanneer uw website op een tabblad staat of is vastgezet op het startscherm van het apparaat. Importeer uw favicon als een PNG-afbeelding in uw ontwerp en stel deze vervolgens in Instellingen > Favicons in .

Facebook (Grafiek openen)

Facebook ondersteunt het Open Graph-protocol (opent nieuw venster)voor het declareren van metagegevens over uw website. Dit kan behoorlijk ingewikkeld zijn, maar Instellingen> SEO> Open Graph maakt het pijnloos. De configuratie die je hier instelt, bepaalt hoe je website wordt weergegeven in de Facebook-nieuwsfeed van mensen.