Twitter Bootstrap 101 aanpassen

Ingebouwd in Twitter Bootstrap's documentatie is een handige Customize-pagina, die een snelle manier biedt om een ​​aangepast kleurenschema, aangepaste typografie en een aantal andere CSS-aanpassingen te implementeren. Natuurlijk is de krachtigste aanpak om direct te werken met LESS-bestanden van Bootstrap. Maar met een paar snelle aanpassingen, en voor degenen die liever in rechte CSS werken, biedt deze pagina u een geweldige manier om uw aanpassingen te starten.


Kleuren en typografie aanpassen

In deze screencast zal ik je helpen bij het converteren van een standaard Bootstrap-site naar een donker kleurenschema. We geven het een langere navigatiebalk en we halen een paar Google-weblettertypen op. Het proces is snel en vrij pijnloos!

In een korte follow-up video laat ik je zien hoe je kunt controleren op fouten die het aanmaken van je aangepaste CSS-bestanden kunnen verstoren. U moet opletten voor deze en in staat zijn om terug te gaan en ze op te lossen wanneer ze zich voordoen. Ik zal je laten zien hoe dat is gebeurd.

Op het einde zullen velen van jullie dit een geweldige manier vinden om de bal aan het rollen te krijgen voor jouw eigen ontwerpen.


Of download de video of abonneer je op Webdesigntuts + screencasts via YouTube

Let op fouten!

Zelfs een kleine typfout kan een fout in het aanpassingsproces introduceren. U moet een 'error.txt'-bestand bekijken. Als het samen met uw aangepaste CSS wordt weergegeven, moet u het openen en gebruiken om fouten te verhelpen die u kunt corrigeren op de pagina Aanpassen. Ik zal je een voorbeeld laten zien!


Of download de video of abonneer je op Webdesigntuts + screencasts via YouTube

Middelen

Tijdens deze video's gebruikten we:

  • Aanpassingspagina van Bootstrap
  • Google Web Fonts

U kunt het ook handig vinden om te verwijzen naar de kleur- en typografiewaarden die in de screencast worden gebruikt: