Bootstrap Tools & Resources

Bootstrap ThemeRoller

Met behulp van Bootstrap ThemeRoller kun je veel instellingen van het theme aanpassen. Je kunt je voorkeuren instellen terwijl je daarnaast een voorvertoning te zien krijgt. De basiskleuren, typografie  en formulier elementen van het theme zijn aanpassen bij de basic settings. Wil je graag nog wat verder gaan, dan kun je bij de advanced settings nog veel meer naar je hand zetten. De kleuren voor de standaard buttons kun je met behulp van een color picker wijzigen of door een hexadecimale waarde in te voeren. Op dezelfde eenvoudige manier kun je er ook het uiterlijk van de navbar, meldingen, tabellen en dropdown menu’s aanpassen.

Beautiful Buttons for Twitter Bootstrap

De buttons van Bootstrap zijn heel herkenbaar en daarom zou je ze misschien wel wat willen aanpassen, zodat je website niet al te veel op andere Bootstrap websites lijkt. Beautiful Buttons for Twitter Bootstrap biedt een CSS generator waarmee je je eigen buttons kunt maken en vervolgens de CSS code daarvoor kunt kopiëren. Je kunt niet veel meer dan de kleuren aanpassen, maar indien je niet goed thuis bent in CSS, kan deze tool je goed pas komen.

Twitter Bootstrap Button Generator

Met behulp van de Twitter Bootstrap Button Generator van PlugoLabs maak je in een handomdraai buttons in verschillende formaten en stijlen, voorzien van tekst en icoontje. Je voert de tekst voor de button in en na acht keuzes te hebben gemaakt, kun je de benodigde HTML kopiëren om vervolgens in je website te plakken.

Navbar voorbeelden

De navbar van Bootstrap is vrij eenvoudig op meerdere manieren te gebruiken. De standaard navbar van Bootstrap is statisch en beslaat de volle breedte van de website. Je kunt er ook een fixed navbar van maken zoals op deze website. Plaats je de navbar in een container, dan kun je een vaste breedte aangeven. Op de pagina Navbar Examples van Webdesigntuts+ wordt besproken hoe de standaard navbar in elkaar zit en wat de mogelijkheden zijn. Daarnaast wordt voor de twee varianten stap voor stap uitgelegd hoe je de standaard Bootstrap Navbar kunt aanpassen. Alle drie de varianten van de navbar zijn responsive, waardoor ze ook goed op mobiele apparaten functioneren.