nl en de fi id nl nl nl nl nl en en nl nl en en nl nl nl en en nl en en nl nl en en nl it nl nl nl en en nl nl nl fi en nl nl en en en nl nds nl nl nl nds nl nl nl fr nl nl en nl nb en nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl nl de nl nl nl de nl nl nl nl nl nl nl nl nl nl nl nl en nl fr en nl it pl en it de en en en nl en en en et nl en en ca en en en en nl en en nl en nl en nl
Domeinnaam Je adres op internet met extensies als .nl & .com. Mail Professioneel e-mailen met je eigen domein – veilig en reclamevrij. Mailarchivering Automatische en veilige archivering voor je bedrijf.
SSL-certificaten Bescherm je website optimaal dankzij versleuteling Microsoft 365 Je documenten altijd bij de hand met Office 365.
Websites voor beginners en professionals.
Sitebuilder Perfect voor beginners: zonder voorkennis je eigen website. Webshop Snel en professioneel online verkopen.
Snel, veilig en krachtig: hosting & WordPress van professionals voor professionals.
WordPress hosting In een handomdraai je eigen, veilige WordPress site. Hosting Perfect voor professionele en supersnelle websites. Hosting Mini Ons mini-hostingpakket – voor een mini-prijs.
WooCommerce Je eigen webshop maken met WordPress
Monitor het succes en verbeter de performance van je website
STRATO marketingRadar Het perfecte starterspakket voor online marketing. STRATO rankingCoach Snel en simpel een toppositie in zoekmachines als Google. STRATO listingCoach Verschijn met één klik in de belangrijkste online directory's.
STRATO adCoach Maak en beheer eenvoudig Google Ads-campagnes.
Sneller gaat niet: 100% merk-hardware voor virtual en dedicated systemen.
VPS Linux Krachtige Linux VPS met SSD-power & Plesk. VPS Windows VPS met véél RAM & Windows Datacenter-licentie. Cyber Protect Veiligheid dankzij professionele back-ups & anti-malware
Dedicated Server Linux Eigen hardware met root-rechten – voor veeleisende hosting. Dedicated Server Windows Merk-hardware met Administrator-toegang. ServerCloud Flexibele, schaalbare servers in de cloud.
Bestanden online opslaan & automatisch back-uppen naar de Europese cloud.
HiDrive Sla je bestanden op in de Europese cloud. HiDrive Business Veilig teamwork met je online harde schijf. HiDrive S3 De object storage voor je bedrijfsdata.
Cyber Protect Veiligheid dankzij professionele back-ups & anti-malware
Bootstrap Tutorial: de eerste stappen met het Twitter-framework
Wat maakt Bootstrap dan zo interessant?
Bootstrap: download en de eerste stappen
HTML/CSS-kennis is een belangrijke voorwaarde
Bootstrap is een front-end framework dat ontwikkelaars gebruiken om allerlei soorten websites te maken, onafhankelijk van op welk apparaat deze gebruikt zullen worden. De ontwikkelaars van Twitter kwamen jaren geleden met Bootstrap op de proppen. Dit open source project biedt een uitgebreid en divers gamma aan designtemplates. Deze zijn gebaseerd op HTML en CSS. Daarnaast zijn er ook optionele JavaScript-extensies. Twitter was oorspronkelijk van plan om Bootstrap te gebruiken als een interne tool met als doel hun eigen templates en ontwerpen meer uniform te maken. Het sociale netwerk besloot echter al snel om het framework te publiceren op het open source platform GitHub. Hier werd het snel een van de meest populaire projecten met als gevolg dat er ondertussen al duizenden - verbeterde - spin-offs voortgebracht zijn.
Wat maakt Bootstrap dan zo interessant?
Dankzij de HTML- en CSS-sjablonen hoeven ontwikkelaars die goede ideeën voor nieuwe websites hebben niet meer van nul af aan te beginnen. De inhoud wordt direct uit de toolkits gehaald en in HTML-documenten toegevoegd, zodat er geen lastige en ingewikkelde CSS-configuraties meer nodig zijn. Hier zijn enkele zaken die rechtstreeks zijn opgenomen in het programma:
Een ander belangrijk aspect is de Bootstrap grid lay-out. De rasterindeling in 12 kolommen maakt het voor de gebruikers gemakkelijker om nauwkeurig afstanden te bepalen en zo de afzonderlijke elementen op de website te positioneren. Of het nu gaat om desktop, mobiele telefoons of PC's met kleine beeldschermen, geen probleem! Gebruikers kunnen immers kiezen tussen verschillende schermformaten bij het plaatsen van elementen in het Bootsrap raster. Precies door deze flexibiliteit is Bootstrap zo goed uitgerust voor een responsive webdesign.
Ontwikkelaars kunnen extra gebruikersinterfaces toevoegen (bijv. tooltips of dialoogvensters) door middel van de optionele JavaScript-plugins. Deze zijn gebaseerd op het JavaScript-framework jQuery. Daarnaast kunnen ze hier ook door de werking van de bestaande besturingselementen uitbreiden, zoals bijvoorbeeld met een automatische autofill-functie voor de invoervakken. Hoe gebruik je Bootstrap dan met JavaScript? Voeg simpelweg de jQuery-library toe aan je HTML-document.
Bootstrap: download en de eerste stappen
Bootstrap werd door Twitter gedistribueerd als een gratis framework, zodat het kosteloos te downloaden en te gebruiken is. Met de gratis beschikbare programmeercode kunnen de meer ervaren ontwikkelaars het framework aanpassen aan hun eigen behoeften en voorkeuren. In onze handleiding hieronder wordt uitgelegd welke stappen je moet volgen voordat je de Bootstrap CSS- en JavaScript-sjablonen kunt gebruiken.
Ga naar de officiële website getbootstrap.com en download het Bootstrap-pakket. Dit bevat zowel de CSS- en JavaScript-bestanden (één in standaardvorm, één in geminimaliseerde vorm) als de lettertypen en het optionele Bootstrap-thema.
Pak daarna het bestand uit en sleep de Bootstrap-map naar de gewenste projectmap in je eigen systeem.
Deze map bevat op haar beurt 'css'-, 'fonts'- en 'js'- mappen. In de map 'font' vind je meer dan 250 icoontjes in het Glyphicons Halflings-font. Deze icoontjes zijn opengesteld voor Bootstrap en dus gratis te gebruiken. De bestanden in de map 'css' en 'js' beschrijven we hieronder afzonderlijk:
bootstrap.css: CSS-code in leesbare vorm
bootstrap.min.css: geminimaliseerde CSS-code. Inhoud die niet relevant is voor de interpretatie van de code, zoals spaties, is verwijderd
bootstrap.css.map: bevat CSS source maps die je bij webdesign helpen om de originele brongegevens in LESS-formaat te vinden
bootstrap-thema.css: CSS-bestand met handige (optionele) voorgeprogrammeerde thema’s
bootstrap-thema.min.css: geminimaliseerde code van het thema
bootstrap-thema.css.map:source map van het thema
bootstrap.js: JavaScript-code in leesbare vorm
bootstrap.min.js: geminimaliseerde JavaScript code
Als je JavaScript-elementen wilt gebruiken, download dan de aanvullende JavaScript-bibliotheek jQuery.
Zodra alle componenten aanwezig zijn en je er vertrouwd mee bent, kan het echte werk beginnen. Om je een duidelijk voorbeeld te geven creëren we een HTML-welkomspagina, die we daarna omzetten in een Bootstrap-template.
Open je favoriete code-editor, zoals Notepad++, en vul in een leeg venster de volgende code in:
Hallo, das ist mein erstes Bootstrap-Template!
De metatag ‘viewport’ in de head-area zorgt ervoor dat de website ook optimaal weergegeven wordt op mobiele toestellen.
Sla het project op als ‘basic.html’ op je desktop
Implementeer de Bootstrap JavaScript- en CSS-bestanden in de HTML-code om van dit gewone HTML-document een Bootstrap-template te maken. Geef hiervoor aan in welk pad de mappen zich bevinden. Het is aan te raden om JavaScript helemaal op het einde toe te voegen aan het document, omdat dit anders de laadtijd van je website kan verlengen. Dit is hoe je code eruit zou moeten zien:
Hallo, das ist mein erstes Bootstrap-Template!
Tot slot sla je het document op als ‘bootstrap-template.html’. Door dubbel te klikken, kun je bootstrap-html openen in een browser naar keuze waar je het bericht “Hallo, dit is mijn eerste Bootstrap-template!” in de titel (h1) zult zien.
Nu kun je het template naar eigen wens vormgeven. De verschillende codes voor typografie, buttons, het Bootstrap Grid systeem, etc. kunnen gevonden worden op de officiële website van Bootstrap.
HTML/CSS-kennis is een belangrijke voorwaarde
Hoewel Bootstrap gebruikers voorgeprogammeerde inhoud aanbiedt, kom je niet ver met het framework zonder voorafgaande HTML-kennis en CSS-knowhow. Het is zelfs voor ervaren ontwikkelaars aan te raden om wat tijd te nemen om er in te komen en vertrouwd te raken met de programmeertaal, maar het framework gebruiken loont zeker de moeite. Bootstrap ontwikkelde immers veel - soms gratis - templates die je rechtstreeks kunt downloaden. Hiermee bespaar je heel wat tijd. Dus, wie regelmatig met HTML, CSS en JavaScript werkt, zal al snel de voordelen van Bootstrap inzien. Hieronder vind je de belangrijkste voordelen in een oogopslag:
De erg goede opties wanneer het op responsive webdesign aankomt
De regelmatige updates en de ondersteuning vanuit de gemeenschap
Het gebruik gaat gepaard met hoogwaardige documentatie en illustratie
Voeg daar nog eens aan toe dat het om een open source project gaat, en je weet waarom Bootstrap één van de populairste frameworks voor webdesign is.
Natuurlijk is Bootstrap niet de enige goede optie voor responsive webdesign. Kunnen beginners die geen CSS-, JavaScript- of HTML-ervaring hebben wel dezelfde aantrekkelijke resultaten behalen als ervaren ontwikkelaars met het door Twitter-ontwikkelde Bootstrap? Lees er meer over!