Twitter Bootstrap 101 Anpassa

Inbyggd i Twitter Bootstraps dokumentation är en praktisk Anpassa sida, som ger ett snabbt sätt att implementera ett anpassat färgschema, anpassad typografi och ett antal andra CSS-anpassningar. Naturligtvis är det mest kraftfulla sättet att arbeta direkt med Bootstraps mindre filer. Men med några snabba justeringar, och för de som föredrar att arbeta i rak CSS, erbjuder den här sidan dig ett bra sätt att hoppa över dina anpassningar.


Anpassa färger och typografi

I denna screencast går jag igenom dig genom att konvertera en grundläggande Bootstrap-webbplats till ett mörkt färgschema. Vi ger den en högre navbar och vi tar in ett par Google-webbfonter. Processen är snabb och ganska smärtfri!

I en kort uppföljningsvideo visar jag dig hur du letar efter fel som kan störa skapandet av dina egna CSS-filer. Du måste se upp för dessa och kunna gå tillbaka och fixa dem när de uppstår. Jag ska visa dig hur det är gjort.

I slutändan kommer många av dig att hitta detta ett bra sätt att få bollen att rulla för dina egna design.


Alternativt kan du ladda ner videoklippet eller prenumerera på webbdesigntuts + skärmdumpar via YouTube

Titta på fel!

Även ett litet typsnitt kan införa ett fel i anpassningsprocessen. Du måste titta på en "error.txt" -fil. Om det visas bredvid din anpassade CSS måste du öppna och använda den för att hjälpa dig att hitta och korrigera felaktiga poster på sidan Anpassa. Låt mig visa dig ett exempel!


Alternativt kan du ladda ner videoklippet eller prenumerera på webbdesigntuts + skärmdumpar via YouTube

Medel

Under dessa videoklipp använde vi:

  • Bootstrap anpassar sidan
  • Googles webbfonter

Du kan också finna det användbart att referera till de färg- och typografiska värden som används i skärmen: