Laatst bijgewerkt: Versie 1.0

Transcriptie

1

2 Laatst bijgewerkt: Versie 1.0

3 INHOUD DEEL 1: VOORBEREIDING 1. Inleiding 2. What the is Bootstrap?! 3. Bootstrap importeren DEEL 2: PROGRAMMEREN! 4. Ontwerpen 5. De carousel, niet die van de kermis 6. Navbars... Bleh. 7. Row, row, row your boat DEEL 3: WAAROM WERKT DIT DING NIET??? 8. FAQ 9. Bedankt voor het lezen...?

4 DEEL 1 VOORBEREIDING

5 Inleiding Toen meneer Dohmen en ik het over een 'extra opdracht' hadden voor mij, heb ik een domme fout gemaakt. Aangezien ik vorig schooljaar het hele websitegedoe al had gedaan, en daar nog goed voor had gescoord ook, had meneer Dohmen het briljante idee om mij en een aantal anderen een extra opdracht te geven. Wat deze opdracht zou worden waren we vrij in, maar we moesten het wel met hem overleggen. Mijn idee was om mijn oude Informatica website een complete makeover te geven en dat zou dan mijn extra opdracht zijn. Dat vond meneer Dohmen goed, maar dan moest ik er wel een stappenplan bij gaan schrijven, dus hoe ik het gemaakt had. En toen gebeurde het. Ik zag een kans om een grapje te maken, en die kans nam ik, helaas. Ik zei tegen hem: Een stappenplan? Oh, zodat u zeker gratis een extra boekje met uitleg krijgt wat u weer op uw site kunt plaatsen? Hé, maar dat is een goed idee, schrijf maar een uitleg bij je website! En hier zit ik dan achter mijn PC, met een half kapot toetsenbord en een brein zonder inspiratie, klaar om een uitleg te schrijven over hoe ik mijn website heb verbeterd... Eh... Nou dan, als ik het ga doen, dan doe ik het nog goed ook. KOM MAAR OP, EXTRA OPDRACHT. Een woord nog vooraf, ik ga niet EXACT uitleggen hoe ik mijn website heb gemaakt, alleen de grote elementen zoals de navbar, scrollende banner et cetera... Die dingen. De interessante dingen.

6 What the is Bootstrap? Bootstrap is een open-source HTML, CSS en JavaScipt framework. Maar ik ga er vanuit dat die zin niet veel duidelijk maakt voor 95% van mijn klas. Lang verhaal kort: het maakt het optimaliseren van je website voor mobiele platforms veel simpeler, en voegt veel dingen toe om je website er extra mooi uit te laten zien. Ook bevat het een grid-system waarmee je je website makkelijker kunt indelen. Lang verhaal kort, met Bootstrap kun je dit omzetten...

7 ...Naar dit. Best cool, of niet? Alleen gaan wij onze websites nog veel beter maken dan het voorbeeld hier. Natuurlijk is Bootstrap niet verplicht om een goed uitziende website te maken, maar bij deze uitleg gebruiken we het wel. Het is simpel, vrij makkelijk te begrijpen, en daarom perfect voor beginners in webdesign, ofwel het grootste deel van de klas. Er wordt wel verwacht dat je al de basis van HTML en CSS kent, want anders kan het misschien nogal verwarrend worden. We werken in deze uitleg met een nieuwe website! Dit is makkelijker en overzichtelijker! Opdracht 1.1 Voordat we kunnen beginnen, moeten we een aantal dingen voorbereiden. Maak een nieuw mapje voor je website en maak de nodige.html-bestanden en het stylesheet.css bestand aan. Download Bootstrap hier. Pak daarna het zip-bestand ergens uit en kopieer de mapjes 'css', 'fonts' en 'js' naar je websitemapje. Als je nog niet eerder op een PC aan je website hebt gewerkt, installeer dan Notepad++ en Filezilla. Trouwens, als de links niet openen wanneer je er op klikt, houdt dan 'Ctrl' ingedrukt terwijl je klikt.

8 Opdracht 1.2 Deel je HTML-bestand in. De basistags zouden genoeg moeten zijn. Zoiets dus: <html> <head>  </head> <body> <div class= container > <nav>  </nav> <header>  </header> <section>  </section> <footer>  </footer> </div> </body> </html> Bootstrap importeren Je hebt Bootstrap al gedownload, nu moet je nog zorgen dat je HTMLbestanden Bootstrap ook laden. Dit is niet moeilijk, maar je moet een aantal dingen toevoegen in je bestand. Opdracht 1.3: Het eerste wat je moet doen, is bovenaan je website, dus boven de <html> tag, <!DOCTYPE html> neerzetten. Simpel toch? Tuurlijk, maar je wilt niet weten hoeveel mensen dit vergeten... Tsh.

9 Daarna kopieer je het volgende in je <head>. <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">   <link href="css/bootstrap.min.css" rel="stylesheet">    En het laatste wat je moet doen is dit NET BOVEN de </body> tag zetten.  <script src="  <script src="js/bootstrap.min.js"></script> Met deze code laad je de bootstrap CSS, de bootstrap JavaScript/JQuery bestanden en een aantal instellingen die Bootstrap nodig heeft om correct te werken. Dat was alles! Bootstrap is nu geïmporteerd in je HTML-bestand, nu kunnen we eindelijk echt gaan programmeren!

10 DEEL 2 PROGRAMMEREN!

11 Ontwerpen Vaak is het een goed idee om van tevoren een ontwerp te maken van hoe je wilt dat je website eruit gaat zien. Dit hoeft niet al te gecompliceerd te zijn: Een schets is al genoeg. Het is gewoon handig zodat je weet wat je doet en op het juiste spoor blijft, want dingen kunnen vaak verwarrend worden. Je hoeft niet per se een ontwerp te maken, maar ik raad het je wel aan. Zie hier de mijne. Fantastisch hè? En dan mijn uiteindelijke website...

12 De carousel, niet die van de kermis Een van de meest opvallende elementen aan mijn website is de grote banner die de hele tijd van afbeelding verandert. Dit wordt in Bootstrap een 'carousel' genoemd. Het is dan ook vergelijkbaar met een caroussel die de hele tijd doordraait, alleen zijn het hier afbeeldingen. Je kunt het zien als een lange strook die naar links beweegt, zo lijkt het alsof er elke keer vanuit de rechterkant een nieuwe afbeelding binnenkomt. De carousel staat in mijn header, en de basisopzet is vrij simpel. Om te beginnen willen we een aantal afbeeldingen hebben. Dat wordt de eerste stap. Opdracht Zoek een aantal afbeeldingen op. Het liefst van dezelfde grootte en hetzelfde type, dus allemaal.jpg, of allemaal.png. Een resolutie van 1280x720 of 1920x1080 zou perfect zijn. 2.Sla de afbeeldingen op in een mapje genaamd 'img' in je websitemapje. 3. Noem deze afbeeldingen 'slide1', 'slide2', 'slide3', enzovoort, afhankelijk van het aantal afbeeldingen dat je hebt. Nu naar de code. Opdracht Maak een nieuwe div aan in je header. Geef deze div de id 'carousel1', of 'mycarousel', maakt niet uit, wat jij zelf het fijnst vind. Sluit deze div ook. 2. Zet IN de opening tag van de div, dus waar je net ook id=... neer hebt gezet, de volgende code: class="carousel slide" data-ride="carousel" 3. Maak een div aan binnenin de div die je zonet heb aangemaakt, deze div krijgt geen id, maar in de opening tag van de div zetten we wel class= carousel-inner Vergeet deze div niet te sluiten.

13 Dat 'id' de div een naam geeft zul je wel begrijpen. Maar wat doen die andere codes nou precies? Ten eerste 'class'. Doormiddel van een div een class te geven weet het Bootstrap framework wat je bedoelt, en wat je wilt. Door te zeggen carousel slide weet Bootstrap dat: 1. Je wilt een carousel maken. 2. Je wilt een 'slide' animatie toevoegen. Zonder dit verandert de afbeelding op een hele saaie, droge manier. Met data-ride= carousel wordt nogmaals aangegeven dat dit een carousel is, en dat de afbeeldingen gewisseld moeten worden. Als je nu je html-bestand in een browser opent, gebeurt er nog niet veel. Dit komt omdat je nog geen afbeeldingen hebt ingevoegd, dat gaan we nu doen, en is wederom een vrij simpel proces. Opdracht Binnen de div met de class carousel-inner maken we X nieuwe divs aan, waarbij X het aantal afbeeldingen is dat je hebt. Elke van deze divs geef je de class item, behalve de eerste. Die krijgt de class item active. 2. Deze stap is makkelijk. Zet in elk van de divs die je zonet aan hebt gemaakt <img src=... gevolgd door de locatie van je afbeeldingen, waarschijnlijk 'img/slide1.png'. Open je index.html-bestand maar. Als je het goed hebt gedaan, heb je nu een mooie scrollende banner! Als het niet is gelukt, check dan of je code klopt, en of je afbeeldingen wel dezelfde extensie (.png/.jpg) hebben als wat je hebt neergezet in je code. Als je het volgende hebt zou alles moeten kloppen.

14 Je kunt carousels ook nog verder aanpassen, bijvoorbeeld met knoppen waarmee je naar links en rechts kunt gaan, of bolletjes onderin die aangeven hoeveel afbeeldingen er zijn en bij welke je bent. Je kunt zelfs een tekst bij de afbeelding voegen. Zoiets dus: Ik ga hier niet exact uitleggen hoe je dit doet, maar het is niet echt veel moeilijker als wat we tot nu toe hebben gedaan. Op staat een goede uitleg over wat je nog meer kunt met carousels. Ga gewoon naar hun Bootstrap tablad, en klik dan links op carousel! Easy!

15 Navbars... Bleh. Het volgende wat we gaan doen is een navbar maken. Hier kunnen we een aantal designkeuzes maken: Wil je een donkere, of lichte navbar? Wil je het menu rechts of links hebben? Wil je een standaard design, of wil je een design met zogenaamde 'pills' of 'tabs'? Wil je rechte, of afgeronde hoeken? Er zijn dus veel keuzes die je kunt maken bij bootstrap navbars. Ik ga laten zien hoe je al deze navbars kunt maken, het is niet zo moeilijk als je denkt. Opdracht 2.4 Eerst gaan we de basis van de navbar maken. 1. Pas de <nav> tag aan naar <nav class= navbar navbar-inverse > 2. Maak twee divs in je nav. In de opening tag van de eerste div zet je class="navbar-header" en in de opening tag van de tweede div zet je class= collapse navbar-collapse id= nav Als het goed is heb je nu een lange, saaie, zwarte strook. We zullen er maar eens een titel aan toevoegen. Maar eerst even nog wat uitleg: Doormiddel van de classes die je net hebt toegevoegd (navbar navbarinverse, navbar-header en collapse navbar-collapse) geef je aan dat het: 1. Een navbar is. 2. Je navbar donker wordt. 3. Dat er een header inzit waar een titel of afbeelding in kan. 4. Dat de navbar op kleinere schermen moet worden ingeklapt. Punt 2 en 3 gaan we dus nu op focusen. In de volgende opdracht leg ik uit hoe je je navbar wat minder nutteloos maakt.

16 Opdracht 2.5 We beginnen met een titel, die naar je index.html leidt. 1. Binnen de div genaamd navbar-header maken we een <a> tag met de class navbar-brand en een href die verwijst naar je index.html. Tussen de openingstag en de sluitingstag zet je de tekst die je als titel wilt hebben. 2. We zitten nu nog steeds in de div navbar-header, onder de <a> tag om precies te zijn. Daar zet je deze code neer: <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> De eerste code zul je wel begrijpen, maar wat we met de tweede code doen vereist misschien wat uitleg. Het is eigenlijk vrij simpel. Het voegt een knop toe waarmee je de navbar uit-en in kunt klappen. Dus, wanneer je op een kleiner scherm zit, zoals bijvoorbeeld een telefoon, en de links op de navbar passen niet meer op het scherm, dan zorgt die knop ervoor dat je extra menu krijgt met je navbar elementen. Zo dus: Navbar op PC. Navbar op telefoon, ingeklapt. Navbar op telefoon, uitgeklapt (nadat je op de knop hebt gedrukt dus).

17 Je hebt alleen nog geen links erin staan, dus dit heeft nog geen nut... Maar dat gaan we nu veranderen. We gaan een navbar maken die ook daadwerkelijk ergens naar verwijst! Opdracht 2.6 Een menu maken zal wel niet zo moeilijk zijn... Toch? 1. Binnen de div met de class collapse navbar-collapse maken we een <ul> tag met een aantal <li> tags erin. Binnenin de opening tag van <ul> zet je class= nav navbar-nav 2. Maak je links binnen de <li></li> tags. Dus gewoon een <a> tag die verwijst naar een html bestand, met een naam tussen de opening en closing tag. Zoals je al een aantal keer eerder hebt gedaan... Hopelijk. 3. Als je wilt dat, zoals in mijn navbar, de link naar de pagina waarop je op dat moment bent donkerder wordt, dan voeg je aan de <li> tag van die link class= active toe. Da's alles. Nu gaan we de navbar aanpassen. In de volgende kopjes kun je zien hoe je makkelijk het design kan veranderen. Kleur: Donker of licht? Simpel, laat navbar-inverse staan als je het donker wilt hebben, en haal navbar-inverse weg als je de lichte versie wilt hebben. Verder kun je de kleur nog aanpassen in je CSS. Dit doe je door navbar-inverse weg te halen, en dan in je Stylesheet deze regel toe te voegen:.navbar { background-color: #kleur; } De <a> tags, links of rechts? Deze is ook vrij simpel, het enige wat je moet doen is achteraan in het class gedeelte van je <ul> tag pull-right zetten. Tabs of pills ter decoratie? Dit werkt alleen als je geen navbar-inverse in je <nav> tag hebt staan. Wat doen pills of tabs? Niet heel veel, ze geven alleen wat extra decoratie. Je kunt ze toevoegen door nav-tabs of nav-pills achteraan in het class gedeelte van je <ul> tag te zetten. Rechte of afgeronde hoeken? Je hebt standaard een navbar met afgeronde hoeken, maar als je rechte hoeken wilt, zet je dit in je CSS Stylesheet..navbar { border-radius: 0!important; }

18 Row, row, row your boat Heb je ook wel eens dat probleem in HTML... Dat het je maar niet lukt om een pagina correct in te delen... en het lijkt helemaal nergens meer op... Nou, die tijd is voorbij, want Bootstrap heeft een geweldig systeem voor je! HET GRID-SYSTEEM MET COLUMNS EN ROWS! Dit zogenaamde grid-systeem is vrij simpel. Het lijkt een beetje op hoe je een table zou indelen, alleen kun je hier de grootte van de kolommen makkelijk bepalen. In de afbeelding boven aan de pagina zie je hoe het werkt: Je creëert eerst een rij door div class= row neer te zetten. In deze rij kun je dan kolommen maken. Hoe maak je kolommen? Nou, eerst moet je weten dat een rij 12 lang is. 12 wat? Ik heb ook geen idee. We noemen het maar blokken. Aan de hand van deze 12 blokken kunnen we dus kolommen maken. Dit doen we door een aantal nieuwe divs te maken binnen de div die we net hebben gemaakt. Deze nieuwe divs geven we de class col-md-x. Er gebeurt nu nog niet veel, dat komt omdat we op de plaats van x een cijfer neer moeten zetten. Het cijfer dat je in moet vullen bij x, is het aantal blokken dat je wilt dat je kolom breed moet zijn. Dus stel, je wilt twee gelijke kolommen, dan krijg je deze code: <div class= row > <div class= col-md-6 > <h1>dit is je eerste kolom</h1> </div> <div class= col-md-6 > <h1>dit is je tweede kolom</h1> </div> </div> Dat is toch niet zo moeilijk, of wel? Als je dit systeem goed gebruikt, kun je heel makkelijk je pagina's indelen. En het hoeven niet altijd kolommen van gelijke grootte te zijn. Stel, je wilt 3 kolommen, maar je wilt dat de middelste net zo breed wordt als de twee buitenste kolommen bij elkaar. Dat zou betekenen dat de middelste kolom 6 blokken breed moet worden, en de twee buitenste kolommen 3 blokken. Op de volgende pagina zie je hoe dat eruit ziet als code.

19 <div class= row > <div class= col-xs-3 > <h1>dit is je eerste, smalle kolom</h1> </div> <div class= col-xs-6 > <h1>dit is je tweede, bredere kolom</h1> </div> <div class= col-xs-3 > <h1>dit is je derde, smalle kolom</h1> </div> </div> Als je goed op hebt gelet, zul je merken dat deze code een beetje anders is als wat ik zojuist heb uitgelegd. In plaats van col-md-6, heb ik col-xs-6 gebruikt. Waarschijnlijk vraag je je nu af: Waarom? Het antwoord is vrij simpel. Bootstrap kan niet alleen kolommen aanduiden, het kan ook zien op wat voor platform jij een website bekijkt. Afhankelijk van het platform kan Bootstrap de grootte veranderen. Dit doet Bootstrap met verschillende aanduidingen voor de verschillende grootten en platforms. XS: SM: MD: LG: Telefoons (Extra Small) Tablets (Small) Laptops en standaard PC's (Medium) PC's met een erg groot scherm (Large) Je zou dus verschillende grootten in kunnen stellen op verschillende platforms. Dit doe je dan op deze manier: <div class= row > <div class= col-xs-6 col-sm-7 col-md-8 col-lg-9 > </div> <div class= col-xs-6 col-sm-5 col-md-4 col-lg-3 > </div> </div> Maar wat als je wilt dat meerdere platforms dezelfde grootte hebben? Hoe doe je dat dan? Moet je dan voor elk platform de grootte apart instellen? Het antwoord is nee. Stel je maakt een col-xs-6, dan is de grootte op alle grotere platforms automatisch ook 6 blokken. Maak je een col-md-6, dan zijn alle medium en large platforms 6 blokken, maar het telt dan niet voor alles wat kleiner dan dat is. Wanneer je dus een waarde invult, geldt die waarde voor de grootte die je hebt gekozen, én alles wat groter dan dat is.

20 DEEL 3 WAAROM WERKT DIT #@$!DING NIET???

21 FAQ Werkt er iets niet? Zit je ergens vast? Hier zijn wat problemen en oplossingen die misschien overeenkomen met de jouwe. Niks wat er in deze uitleg staat werkt? INSTALLEER BOOTSTRAP EERST. Om de een of andere reden werken andere Bootstrap classes zoals img-rounded niet meer, hoe komt dit? Als je in je CSS de border-radius op 0 hebt gezet, zoals bij de stap waar je de navbar rechte hoeken kunt geven, dan kan het soms zijn dat dit het hele bestand aantast. Als je toch wilt dat een img wordt afgerond, maak je een nieuwe CSS regel voor die afbeeldingen en zet je daar in: border-radius: X%!important; Hierin vervang je X door een percentage, wat afhangt van hoe afgerond je een afbeelding wil hebben. Mijn columns zien er erg raar uit en willen niet meewerken. Zorg dat je columns altijd in een div genaamd row hebt staan! Anders kan dit erg veel problemen opleveren! Waarom gaat mijn carousel niet naar de volgende afbeelding? 1. Je hebt data-ride= carousel niet in de opening tag van de div gezet. 2. Je hebt JQuery niet goed geladen (de code dus vergeten onderin de body te zetten bij de voorbereiding) 3. Je staat met je muis op de afbeelding. Zolang je met je muis niet op de afbeelding staat, zal het gewoon door blijven draaien. Kan ik ook een deel van de navbar links hebben, én een deel van de navbar rechts hebben? Ja, dan moet je gewoon twee <ul> elementen hebben. Eentje geef je de class pull-right, en de ander geef je de class pull-left.

22 Bedankt voor het lezen...? Het spijt me dat ik je zo gemarteld heb met deze extreem lange stukken tekst. Hier heb je een veel te vaak gebruikte meme als beloning. Wow. Hopelijk weet je nu wel iets meer van Bootstrap, en kun je je website ook al een stuk mooier maken. Voor meer informatie over het gebruik van Bootstrap, kun je nog altijd naar gaan en daar een kijkje nemen bij hun Bootstrap tutorials.