Bootstrap is een populair framework voor het werken met html, css en JavaScript. Je kunt er snel professionele websites mee ontwerpen. En dan in het bijzonder zogeheten responsieve websites, die mooi meeschalen met het type apparaat waarop ze bekeken worden. Hoe gaat dat in zijn werk?

Bootstrap is vooral een goede hulp bij het maken van ‘responsive’ of responsieve websites. Responsief houdt in dat de weergave wordt aangepast aan de beschikbare ruimte. Open maar eens een website als die van de NOS in een venster en maak dit venster steeds kleiner. Let op hoe de weergave zich aanpast. Op een klein scherm zal bijvoorbeeld het menu compacter worden en verhuist een kolom van de rechterkant naar onderen. De meeste websites werken al zo en dat is voor een groot deel te danken aan Bootstrap.

We gaan aan de slag met Bootstrap en we gaan handmatig een verse start maken. Maak daarvoor eventueel een nieuw mapje voor je Bootstrap-site aan en open deze map in je favoriete teksteditor. Wij gebruiken de teksteditor Brackets.

Starten met bootstrap

Ga naar getbootstrap.com. Zorg dat rechtsboven de laatste versie is geselecteerd. Zo heb je meteen de juiste bijbehorende documentatie. Klik dan op Get Started. Blader naar onderen, naar Starter template. Klik in dit venster op Copy. Hiermee kopieer je alle html-code naar het klembord. Plak het dan in een nieuw bestand in Brackets en bewaar het als html-bestand, bijvoorbeeld index.html. Open Live Voorbeeld om te zien hoe het eruitziet. Dit wordt ons vertrekpunt. 

De html-code zal weinig verrassingen hebben. Wel is de metatag viewport nieuw. Je weet dat de viewport het zichtbare gedeelte van een pagina is. De aanduiding width=device-width geeft in feite aan dat de browser de breedte van de pagina gelijk moet stellen aan de schermbreedte van het apparaat. Als het ontbreekt, zullen apparaten zelf de weergave aanpassen, wat ze zeker op smartphones verre van optimaal doen.

Stylesheets en scripts

In de head ziet je hoe het stylesheet van Bootstrap wordt geladen. Dit bevat alle vooraf gedefinieerde stijlen die je direct kunt gebruiken. We raden aan om onder dit stylesheet een verwijzing te maken naar een eigen, nu nog leeg stylesheet, waarin je aanpassingen maakt:

<link href="css/custom.css" rel="stylesheet" type="text/css">

Deze stijlen zullen, omdat het stylesheet later is geladen, voorrang hebben boven de standaardstijlen van Bootstrap. Onderaan het html-document zie je hoe de jQuery-bibliotheek en een Bootstrap-bundel worden geladen. Die laatste omvat ook Popper.js, een soort hulpbibliotheek voor JavaScript waarvan veel Bootstrap-componenten gebruikmaken. 

Alle onderdelen worden vanaf een zogenoemd Content Delivery Network (CDN) geladen. Als je zo’n CDN gebruikt, zal altijd automatisch de dichtstbijzijnde server worden gebruikt, zodat iedere bezoeker optimale prestaties heeft. Je mag de scripts natuurlijk ook op je eigen pc (of later je hostingaccount) zetten.

©PXimport

Om te zien welke mogelijkheden je hebt, is het slim om de documentatie erbij te houden. Onder Layout zie je tips voor bijvoorbeeld het werken met grids. Ook het kopje Content verdient je aandacht. Hier lees je over alle mogelijke manieren om met afbeeldingen te werken en om bijvoorbeeld tekst of tabellen op te maken. 

Onder Components vind je uiteenlopende componenten die je kunt opnemen in je pagina. Onder Utilities zie je handige opties die je kunt gebruiken. Zo kun je door een class toe te voegen bijvoorbeeld de tekst- of achtergrondkleur wijzigen, of marges en padding beïnvloeden.

Containers en jumbotrons

We beginnen met wat tips voor de lay-out. Uitgebreide details hierover vind je in de documentatie in het betreffende gedeelte. Als voorbeeld zullen we de kop <h1> in een zogenoemde container zetten:

Omdat we hier container als classnaam gebruiken, wordt de breedte in sprongetjes aan de vensterbreedte aangepast. Dat komt door enkele @media-regels in het stylesheet, waaronder deze twee:

Wat hier wordt bepaald, is dat indien de breedte van het venster minimaal 576 pixels is, de container maximaal 540 pixels groot moet zijn. En als het venster minimaal 768 pixels is, moet de container een maximale breedte van 720 pixels aannemen. 

Gebruik je container-fluid, dan zijn zulke regels er niet en wordt steeds de volledige breedte gebruikt. Deze @media-regels vormen ook de basis voor responsieve websites. Dit soort details kun je achterhalen via het volledige stylesheet van Bootstrap (zie onderstaande alinea’) of via de ontwikkelaarstools, door rechts op een element te klikken en dan Inspecteren te kiezen.

Het is handig om de bronbestanden van Bootstrap bij de hand te hebben. Deze vind je op deze pagina onder Source files. Pak het zip-bestand na het downloaden uit in een map op je pc. Je kunt nu altijd even spieken hoe iets precies wordt aangepakt in bijvoorbeeld het stylesheet van Bootstrap, die in het mapje dist/css staat.

Met een kleine aanpassing van de classnaam maak je een zogenoemde jumbotron, een grote grijze box die de volledige schermbreedte inneemt en vooral is bedoeld om de aandacht op bepaalde content te vestigen.

Als je in de documentatie naar Utilities gaat, zie je onder Colors hoe je met een paar extra classes de kleur van de achtergrond en tekst kunt veranderen, bijvoorbeeld bg-primary om het de standaard (blauwe) achtergrondkleur te geven en text-white voor een witte tekstkleur:

Meer mogelijkheden

Op een vergelijkbare manier kun je bijvoorbeeld mooie buttons of strakkere formulieren maken. De documentatie is een onmisbare hulplijn en gelukkig heel verzorgd. En omdat het framework zo populair is, vind je op internet enorm veel voorbeelden of zelfs kant-en-klare sites die ermee zijn gebouwd. Je hebt de volledige versie van de Bootstrap-bibliotheek en kunt naar vrijheid alle componenten proberen. Ben je wat verder en heb je een goed beeld van wat je wel of niet gaat gebruiken, dan is het slim die bibliotheek wat terug te brengen.

Bootstrap maakt gebruik van Sass, een soort vereenvoudigde taal om css in te schrijven. Je herkent de bestanden aan de .scss-extensie. Zulke bestanden moeten worden omgezet naar css voordat de browser ze kan gebruiken. Daarvoor gebruik je een zogenoemde pre-processor. Het proces wordt ook wel compileren genoemd. Het voordeel van deze benadering is dat je precies kunt aangeven welke componenten van Bootstrap je wel of niet nodig hebt, zodat de uiteindelijke bibliotheek niet groter wordt dan nodig. Ook kun je persoonlijke aanpassingen mee laten nemen, bijvoorbeeld aangepaste standaardkleuren of een andere aanvangsgrootte voor het lettertype.

©PXimport

Werken met grids

Mede dankzij Bootstrap werken veel websites responsief, waarbij met een grid wordt gewerkt om de pagina in vlakken te verdelen. We laten zien hoe je dit toepast. Bij Bootstrap kun je een pagina flexibel verdelen in maximaal twaalf kolommen. Meestal zul je die niet allemaal nodig hebben en zul je ze groeperen om bredere kolommen te maken. Het grid is responsief en de kolommen kunnen zich herschikken, afhankelijk van de schermgrootte. De achterliggende techniek die Bootstrap gebruikt heet Flexbox. Dat kun je samen met CSS Grid gebruiken om complexere lay-outs te maken met alleen css.

Flexbox en CSS Grid zijn bedoeld om samen te gebruiken. Met CSS Grid is elke denkbare lay-out te maken, in een denkbeeldig grid met horizontale en verticale lijnen. Flexbox werkt maar in één richting tegelijk en is daarom eenvoudiger te doorgronden. Je kunt het ook gebruiken binnen een met CSS Grid gedefinieerde rij (horizontaal) of kolom (verticaal). Flexbox lost problemen op die met standaard css uitdagend zijn, zoals een gelijkmatige verdeling van elementen binnen de ruimte of een aantal kolommen met precies dezelfde hoogte, ongeacht de inhoud.

©PXimport

Gelijke kolommen

We vergeten Flexbox even en richten ons op het werken met grids in Bootstrap. Als eerste voorbeeld maken we een lay-out met drie kolommen die in de browser steeds dezelfde breedte moeten krijgen, onafhankelijk van de schermgrootte van het apparaat. We beginnen met een container, waar we vervolgens één rij aan toevoegen met in die rij drie kolommen met col als class:

Verschillende schermgroottes

Stel dat bovenstaande opmaak zich niet leent voor kleinere apparaten, zoals een smartphone, maar eigenlijk alleen voor tablets of groter. Dan zul je een andere class moeten gebruiken dan col. We gaan de weergave richten op alle schermen vanaf een bepaalde breedte. Alle opties zie je in de documentatie van Bootstrap onder Layout / Grid. 

De belangrijkste zijn je col-sm-* voor kleine schermen zoals smartphones, col-md-* voor gemiddelde schermen zoals tablets, col-lg-* voor grotere schermen als een desktop-pc en col-xl-* voor nog grotere schermen. Het sterretje staat voor een bepaald getal, waarbij de som van de kolommen steeds twaalf is. We zullen dat demonstreren.

Lay-outs voor tablets

Om de lay-out op tablets en groter te richten, veranderen we alleen voor elke kolom de class col naar col-md-4. De kolommen staan dan nog steeds netjes naast elkaar vanaf een schermbreedte van 768 pixels, maar op kleinere schermen worden ze onder elkaar gezet. Merk op dat de som van de kolommen (4-4-4) twaalf is. Andere combinaties zijn ook mogelijk, zoals een 3-6-3 opstelling:

Nog meer responsiviteit

We gaan een nog wat flexibelere lay-out maken. Het doel is dat op apparaten met groot scherm (aangegeven door col-lg-*) de kolommen naast elkaar staan, zoals hierboven in 3-6-3-opstelling. Bij een gemiddelde schermbreedte (col-md-*) moeten de eerste twee kolommen in een verhouding van 1:2 naast elkaar staan en moet de derde kolom naar onderen verhuizen. Dat kun je als volgt bereiken:

Zoals je ziet is er een klein beetje rekenwerk nodig. Op apparaten met gemiddeld scherm worden de eerste kolom (col-md-4) en tweede kolom (col-md-8) naast elkaar in een 1:2-verhouding gezet, en omdat de som twaalf is, wordt de derde kolom (col-md-12) automatisch daaronder gezet. Bootstrap geeft je die flexibiliteit. Op grotere schermen wordt de pagina normaal volgens 3-6-3 opgebouwd.

Probeer het in je browser door de vensterbreedte langzaam kleiner of groter te maken. Er zijn meer trucjes, maar de belangrijkste basisprincipes hebben we nu doorgenomen, waarmee je nu verder kunt experimenteren! 

Kom je er niet helemaal uit? Op de website van Bootstrap vind je bij Examples handige voorbeelden van lay-outs die met het framework zijn gemaakt. Je kunt het als inspiratie voor je eigen creaties gebruiken of zelfs voorbeelden een-op-een overnemen, als je dat wilt.

Je kent het wel: je wil iets online bestellen of even het saldo op je rekening checken. En dan komt het: je moet inloggen. Maar, wat was ook al weer het wachtwoord? De geboortedatum van je partner, de laatste twee cijfers van je postcode in combinatie met je lengte? Voor je het weet druk je weer op de knop 'Wachtwoord vergeten'... Dat kan makkelijker.

Partnerbijdrage - in samenwerking met Bitdefender

Ons brein is er niet voor gemaakt om voor vijftig verschillende sites unieke codes te onthouden. En juist daarom zijn wachtwoordmanagers de laatste jaren zo populair geworden. In dit artikel kijken we eens goed naar de oplossing van Bitdefender. Ze zijn wereldberoemd om hun antivirus, maar kunnen ze ook zorgen dat jij nooit meer buitengesloten wordt bij je eigen accounts?

Waarom een wachtwoordmanager?

Laten we eerlijk zijn, de meeste mensen gebruiken nog steeds overal hetzelfde wachtwoord, of een kleine variatie daarop. Of ze schrijven het ergens op. Dat voelt misschien wel veilig, tot je beseft hoe lek het internet soms kan zijn of dat je net dat boekje kwijtraakt.

Met een wachtwoordmanager zoals Bitdefender SecurePass password manager los je dat probleem voor een groot deel op. Die fungeert als een onzichtbare butler die je helpt met de wachtwoorden invullen, ook al is het misschien lastig of spannend om alles zomaar uit handen te geven. Je installeert de software op je eigen computer en je telefoon, en je bedenkt één heel sterk hoofdwachtwoord. Dat is de enige die je nog hoeft te onthouden.

Zodra je die invoert, gaat de kluis open en regelt Bitdefender de rest. Als je dan naar Facebook of je favoriete webshop gaat, ziet het programma dat je wil inloggen en vult het de velden voor je in. Je hoeft niet meer te typen, niet meer te denken en vooral niet meer te stressen. Het mooie is dat het programma je ook meteen helpt bij het aanmaken van wachtwoorden voor nieuwe accounts. In plaats van dat jij weer moet gaan nadenken over een code met een uitroepteken en een cijfer, genereert de software gewoon een onmogelijk te kraken reeks tekens uit en slaat deze direct op. En jij ziet het wachtwoord niet eens, en dat hoeft ook niet, want de software onthoudt het voor je.

En ben je bang dat je misschien ook het hoofdwachtwoord niet meer weet? SecurePass genereert ook nog een digitale herstelsleutel die je in het allerergste geval dan kunt inzetten om in te loggen. Die herstelsleutel bewaar je bij voorkeur op een andere plek dan je smartphone of computer, of print je uit en sla je op in een kluis.

Lokaal opgeslagen: veilig!

Het blijft een raar idee: al je wachtwoorden bij één bedrijf parkeren. Wat als zij gehackt worden? Dan ligt alles op straat, toch? Nou, gelukkig zit dat bij Bitdefender wel goed in elkaar. De versleuteling van je wachtwoorden gebeurt namelijk lokaal op jouw eigen apparaat, nog voordat het via het internet naar hun servers wordt gestuurd. Jouw hoofdwachtwoord is de sleutel die die versleuteling ongedaan maakt. Omdat Bitdefender jouw hoofdwachtwoord niet heeft (en ook nergens opslaat), kan niemand bij jouw gegevens; ook niet in geval van een lek of hack.

Maar omdat Bitdefender jouw wachtwoord nergens hebben opgeslagen, niet hebben, kunnen ze je ook niet helpen als je het vergeet. Er is geen "wachtwoord vergeten" optie voor je hoofdwachtwoord. Je krijgt bij het installeren alleen die speciale herstelcode. Die moet je echt uitprinten of op een veilige plek bewaren, want als je je hoofdwachtwoord kwijt bent én die herstelcode, dan ben je echt de pineut en kom je je kluis nooit meer in.

Hoe werkt het in de praktijk?

Bitdefender SecurePass installeer je als app op een Android- of iOS-toestel, en is beschikbaar als browser-add-on voor de Windows- en MacOS-versies van Chrome, Edge, Firefox en Safari.

Veiligheid is leuk, maar als de software lastig is in gebruik, gooi je het er na een week weer vanaf. Gelukkig heeft Bitdefender goed gekeken naar hoe mensen surfen en software gebruiken. De interface oogt fris voor zowel de browser-extensie als de app op je telefoon. Wat vooral fijn is, is de synchronisatie. We leven in een tijd waarin je 's ochtends op je telefoon zit, overdag op een laptop werkt en 's avonds misschien met een tablet op de bank hangt. Als je op je laptop een nieuw wachtwoord aanmaakt voor Netflix, wil je niet op je telefoon die hele rits tekens moeten overtypen.

Je hebt daardoor toegang tot alle accounts zonder dat je overal moet nadenken over wat de gebruikersnaam of het wachtwoord ook echt precies was: makkelijk en handig dus!

Het meeste werk gebeurt via een extensie in je browser (via het icoontje rechtsboven in de browser) of via de app op je telefoon. Bitdefender synchroniseert dit razendsnel. Zodra je iets opslaat op het ene apparaat, is het vrijwel meteen beschikbaar op het andere. Daarnaast doet het meer dan alleen wachtwoorden. Je kunt er ook notities in kwijt die niemand mag zien

Ook is het handig dat je een of meerdere betaalkaarten en creditcards kunt toevoegen. Iedere keer dat je op een betaalpagina komt, laat Bitdefender je een scherm zien waarop je kunt aangeven welke opgeslagen creditcard je wil gebruiken. Na de selectie vult Bitdefender automatisch alle creditcardgegevens in en kun je de bestelling afmaken.

Gebruik je slechte of makkelijk te raden wachtwoorden, dan is er een beveiligingsscan die ten eerst kijkt of je geen zwakke wachtwoorden hebt gebruikt, maar ook op het dark web op de achtergrond scant naar gelekte gegevens. Je krijgt dan direct de tip om je wachtwoord direct aan te passen.

Tot slot

Als we alles op een rijtje zetten, is Bitdefender SecurePass een goede keuzae als je geen zin hebt in een lastig te beheren omgeving . Voor de gemiddelde gebruiker is dit precies wat je zoekt. Het doet wat het moet doen: het beveiligt je gegevens muurvast en haalt de frustratie van het inloggen weg. Vooral als je al gebruikmaakt van de antivirus van Bitdefender, is dit een logische toevoeging die naadloos in je bestaande pakket past. Het is misschien even wennen om de controle uit handen te geven, maar als je eenmaal gewend bent aan het feit dat je nooit meer een wachtwoord hoeft te onthouden, wil je nooit meer terug.

Bij ID.nl zijn we dol op kwaliteitsproducten waar je niet de hoofdprijs voor betaalt. Een paar keer per week speuren we binnen een bepaald thema naar zulke deals. Ben je op zoek naar een betaalbare bluetooth-hoofdtelefoon met een goed geluid? Vandaag hebben we vijf interessante modellen voor je gespot.

Sennheiser Accentum Plus Wireless

Sennheiser bracht afgelopen voorjaar een nieuwe bluetooth-koptelefoon op de markt. En wat voor één, want de Accentum Plus Wireless is comfortabel, gebruiksvriendelijk én betaalbaar. Zoals je van de Duitse audiospecialist mag verwachten, is de geluidskwaliteit prima op orde. De gebruikersreviews op Kieskeurig.nl liegen er dan ook niet om. Alle testers gaven deze koptelefoon een 9 of 10 als reviewscore.

Handig is dat je diverse audio-instellingen naar wens kunt aanpassen. Dat werkt met een app op een smartphone. Een ander speerpunt is de functie actieve ruisonderdrukking (ANC), zodat je geen of nauwelijks storende omgevingsgeluiden hoort. Ideaal voor wie aandachtig naar een luisterboek, podcast of rustig muziekalbum wil luisteren.

Volgens Sennheiser houdt een volgeladen accu het ongeveer 50 uur vol. Is de batterij leeg, dan kun je evengoed weer snel luisteren. Na tien minuten snelladen kan de Accentum Plus Wireless er weer 5 uur tegenaan. Voor een hoog draagcomfort heeft de hoofdtelefoon zachte oorkussens en een verstelbare hoofdband met binnenvoering. Bovendien is hij met een gewicht van 227 gram ook niet zo zwaar. Geïnteresseerden kiezen tussen een zwarte en witte behuizing. Meer weten? Lees dan deze review op ID.nl.

Skullcandy Hesh ANC

Op zoek naar een ANC-koptelefoon voor minder dan 100 euro? Dat komt mooi uit, want dit exemplaar van Skullcandy is op Kieskeurig.nl momenteel goedkoper dan ooit. Aan de hand van vier meetmicrofoons registreert de Hesh ANC omgevingsgeluiden, waarna de geïntegreerde chip vliegensvlug een tegengeluid berekent. Deze bluetooth-hoofdtelefoon dempt op die manier lawaai, zodat je op elke plek geconcentreerd kunt luisteren. De oplaadbare batterij heeft volgens de fabrikant een maximale speeltijd van 22 uur. Accu leeg? Na 10 minuten opladen kun je weer 3 uur luisteren.

Dit over-earmodel bevat binnenin twee audiodrivers van 40 millimeter. Die zijn verantwoordelijk voor het geluid. Tijdens een luistersessie hoef je geen smartphone uit je broek- of jaszak te halen. Gebruik gewoon de knopjes op de oorschelp om de audioweergave te bedienen. Wijzig onder meer het volumeniveau en skip nummers. De behuizing weegt 228 gram en heeft een vouwbaar ontwerp. Hierdoor past dit luisterapparaat makkelijk in een tas.

Sony ULT Wear (WH-ULT900N)

Kun jij een flinke portie bas wel waarderen? De onlangs verschenen Sony ULT Wear (zwart/wit/groen) valt dan ongetwijfeld bij je in de smaak. Je drukt op de ULT-knop om het basniveau verder op te voeren. Gunstig voor liefhebbers van opzwepende muziekstijlen als dance, hiphop en rock. Een andere belangrijke eigenschap is de aanwezigheid van actieve ruisonderdrukking. Sony heeft deze techniek erg goed onder de knie, waardoor je niet of nauwelijks omgevingsgeluiden hoort. Wanneer je veel onderweg bent, komt de bijgesloten stevige reishoes goed van pas.

De rechteroorschelp bevat een handig aanraakpaneel waarmee je de muziek kunt bedienen. Veeg omhoog voor meer volume en veeg vooruit om naar het volgende liedje te gaan. Als je de Sony Headphones-app op een smartphone installeert, kun je diverse audio-instellingen aanpassen. Ga bij een volledig opgeladen accu uit van een luistertijd van zo’n 30 uur. Schakel je actieve ruisonderdrukking uit, dan kun je zelfs 50 uur luisteren. Lees in deze uitgebreide review meer informatie over deze betaalbare koptelefoon.

Audio-Technica ATH-M50XBT2

Vergeleken met veel andere over-ear-hoofdtelefoons heeft dit exemplaar relatief grote drivers van 45 millimeter. Dat bevordert een krachtig en open geluid. Daarnaast loopt het (brede) frequentiebereik van 15 Hz tot 28 kHz. Je mag dus een gedetailleerde weergave verwachten. Overigens ondersteunt de Audio-Technica ATH-M50XBT2 geen actieve ruisonderdrukking. Het Japanse merk focust zich met dit product namelijk louter op een hoge audiokwaliteit. Wegens de gesloten constructie dempt de koptelefoon alsnog omgevingsgeluiden.

Zoals we inmiddels van Audio-Technica gewend zijn, heeft ook deze bluetooth-koptelefoon een lange accuduur. Een volledig opgeladen batterij biedt een luistertijd van ongeveer 50 uur. Bij een lege accu kun je eventueel 10 minuten snelladen, waarna je weer 3 uur kunt luisteren. De behuizing heeft een fysieke knop waarmee je inkomende telefoonoproepen kunt aannemen. Verder roep je via deze knop ook jouw favoriete stemassistent op, zoals Google Assistent of Siri. Tot slot pas je in een app op je smartphone naar eigen smaak de equalizer-instellingen aan. De ATH-M50XBT2 is in een zwarte en blauwe versie te koop.

Marshall Monitor II A.N.C.

De Marshall Monitor II A.N.C. combineert een fraai retrodesign met goed geluid. Deze bluetooth-koptelefoon was op het moment van schrijven niet eerder zo goedkoop. Hoewel het Britse audiomerk op zijn eigen website een adviesprijs van 299 euro hanteert, vragen enkele webshops momenteel minder dan 200 euro. Dankzij de actieve ruisonderdrukking is het een prima luistermaatje voor onderweg. Vervelende omgevingsgeluiden verdwijnen namelijk naar de achtergrond. Je kiest in een app op je smartphone de mate van ruisonderdrukking.

De geïntegreerde accu ondersteunt een maximale luistertijd tot ongeveer 45 uur. Bij gebruik van actieve ruisonderdrukking kun je nog altijd 30 uur luisteren. Verder laad je een lege accu in een kwartier weer deels op. De luistertijd bedraagt dan ongeveer 5 uur. De goudkleurige knop springt direct in het oog. Die ondersteunt diverse functies, zoals het aanpassen van het volume en het door elkaar husselen van nummers. Er is ook nog een kleinere zwarte knop. Switch daarmee tussen verschillende geluidsmodi of roep een stemassistent op. Deze over-ear-hoofdtelefoon heeft een opvouwbare constructie, waardoor je hem makkelijk meeneemt.