Share
En zo komen we eindelijk bij de laatste zelfstudie in de serie, waarin je leert hoe je aangepaste kleurensets maakt.
Als je je aan het begin herinnert, toen we de grote veranderingen doornamen, meldde ik dat de auteurs van BS een extra bestand hadden verstrekt om BS3 er precies zo uit te laten zien als BS2, in plaats van het platte uiterlijk te gebruiken.
In deze reeks hebben we de standaard BS3-flatlook gebruikt, maar als je de vooraf gebouwde JavaScript-versie van BS3 downloadt van de Bootstrap-website, zul je een nieuw bestand vinden in het archief dat je download genaamd bootstrap-theme.css.
Als je dit bestand direct in je project linkt nadat je het kernbestand bootstrap.css hebt toegevoegd, zul je zien dat, hoewel je nu de nieuwe BS3 gebruikt, het uiterlijk van je applicatie nog steeds lijkt op BS2.
De auteurs beseften dat een van de belangrijkste obstakels voor de toepassing van BS3 in nieuwe toepassingen het onvermogen was om het op een aangepaste manier te stylen, maar met gemak.
Als je een gebruiker van LESS of zelfs Sass was (BS3 heeft nu Sass-bindingen), dan was dit geen probleem. Je hebt simpelweg de LESS-bronnen geopend, de variabelen en Mixins aangepast die je nodig hebt, en dingen door de LESS-compiler geleid om je nieuwe CSS-script te krijgen.
Helaas gebruikte niet iedereen MINDER; in feite hadden veel ontwikkelaars en ontwerpers alleen de mogelijkheid om de eenvoudige oude vooraf gecompileerde CSS- en JavaScript-bestanden te downloaden, dus er moest een betere manier worden gevonden.
De eerste verandering was het openen van de volledige Less-bronnen naar een in-page aanpassingsprogramma direct op de Bootstrap hoofdsite, maar dit is geen nieuw ding; je hebt deze pagina eerder op een beperkte manier kunnen gebruiken. Met BS3 heeft het aanpassingsprogramma Minder echter een complete revisie ondergaan en kunt u het nu opnieuw definiëren alles dat BS3 gebruikt, van lettergroottes en lettertypen, tot rasterformaten, triggerpoints en basiscontextuele kleurensets.
In feite is er nu niets dat niet kan worden gewijzigd voordat u besluit om uw nieuwe aangepaste CSS te downloaden, zoals de volgende afbeelding laat zien:
Schermafbeelding van de bovenste helft van de nieuwe aanpassingsfunctieVanwege de enorme omvang van de tool is het onmogelijk om alles in deze tutorial te laten zien, maar het is gemakkelijk genoeg om te openen. Ga gewoon naar de Bootstrap-website en klik op Aanpassen in de bovenste menubalk. Je zult ook zien dat je veel andere opties hebt, zoals welke JavaScript plug-ins en toolkits je moet opnemen, welke componenten je moet opnemen en een basistijl die je misschien niet wilt.
Als u bijvoorbeeld alleen het rastersysteem wilt gebruiken en niets anders, kunt u eenvoudig alleen het rastersysteem selecteren en de selectie van alle andere componenten opheffen..
De BS3-site zal dan alleen de vereiste code genereren om op te nemen, en niet meer. Dit is een zegen voor die mensen die klagen dat alle Bootstrap-sites er hetzelfde uitzien, omdat het betekent dat uw site absoluut niet hetzelfde hoeft te zijn als de rest - u kunt gewoon de bits gebruiken die u nodig hebt en uw eigen spullen gebruiken voor al de rest.
Er zijn nog twee andere manieren waarop u uw build kunt aanpassen. De eerste is om het extra 'bootstrap-thema' CSS-stijlblad te nemen, een kopie te maken en vervolgens de stijlen naar eigen inzicht te wijzigen. Dit is niet zo eenvoudig als het gebruik van de aanpassingshulpmiddelen, maar het is ook niet zo moeilijk als het alternatief.
De meeste klassenamen en instellingen die u wilt wijzigen om uw persoonlijke merk in BS3 te stempelen, zijn al gescheiden in het BS2-thema, dus de snelste manier om te experimenteren is eenvoudigweg een prototypepagina samenstellen met de belangrijkste bedieningselementen en elementen u wilt wijzigen en vervolgens uw exemplaar van het BS2-thema koppelen.
Als je Node gebruikt en zoiets als Bower, wordt het nog eenvoudiger, omdat je live reload kunt gebruiken, en je kunt je voorbeeldpagina bijna direct in realtime bekijken terwijl je je aangepaste versie van het themapap aanpast.
De tweede manier is iets meer betrokken, en zoals beschreven in de BS3-documenten, komt in twee smaken: lichte aanpassingen en zware aanpassingen.
Een voorbeeld van een lichte aanpassing is het toevoegen van een contextuele kleurklasse aan het knopelement. Als u bijvoorbeeld wilt toevoegen btn-sky naast de btn-info, btn-primaire, enz. klassen, kunt u een enkel stijlblad definiëren dat de volgende regels bevat:
.btn-sky, .btn-sky: hover, .btn-sky: active color: # 000000; text-shadow: 0 -1px 0 rgba (0, 0, 0, 2); achtergrondkleur: # AAD4FF; rand: 1px effen zwart; .btn-sky background-repeat: repeat-x; achtergrondafbeelding: lineair verloop (boven, # 00FFFF 0%, # FFFF00 100%); .btn-sky: hover background-position: 0 -10px;
Als het correct wordt toegevoegd en gelinkt, ziet het er ongeveer zo uit:
Uitvoer van codevoorbeeld, indien gebruikt met het maatmonsterBij gebruik met een normaal knoplabel op de volgende manier:
Het moeilijkste deel van het gebruik van deze methode is het doornemen van de CSS-basistypogrammen om de namen te vinden die u wilt negeren; het is niet bepaald moeilijk, gewoon langdradig.
Als je er een hebt zoals de knop hierboven, of je hebt een waarschuwing, paneel, lijst of andere klasse gevonden en gekopieerd, dan kun je gemakkelijk een sjabloon maken die kan worden hergebruikt wanneer je een aangepaste klasse van die klasse wilt toevoegen type.
Zware aanpassingen verschillen niet heel erg van lichte aanpassingen; het grote verschil is dat je de hele klas overschrijft.
Dus, bijvoorbeeld, je vindt alle klassen gerelateerd aan BTN, kopieer ze, pas ze aan en voeg ze afzonderlijk toe.
De nieuwe architectuur binnen het BS3-framework betekent nu dat wanneer u de doelselectoren en hun broers en zussen kent, het eenvoudig is om een overschrijving te maken. Zoals ik al heb opgemerkt, bevat het bootstrap-themabestand al veel van wat je misschien toch wilt wijzigen, en als dat geen optie is, probeer dan sites zoals Bootswatch.com:
Schermopname van het zoete en kersenthema van Bootswatch.comVele anderen hebben duizenden thema's om uit te kiezen, zowel gratis als betaald, dus er is geen excuus voor je Bootstrap-site om er hetzelfde uit te zien als de rest van anderen.
Ik hoop dat je deze serie leuk vond en dat het je helpt een betere ontwikkelaar te worden met Bootstrap 3. In deze nieuwe wereld van responsief webdesign is BS3 een raamwerk dat niet lichtvaardig moet worden genomen - het vertegenwoordigt veel onderzoek door een van de grootste sociale-mediabedrijven die er zijn, en wordt gebruikt om de meeste van hun openbare sites te ondersteunen.
Als je vragen wilt stellen over het boek, kan ik over het algemeen op Twitter rondhangen als @shawty_ds. Je kunt me over het algemeen ook vinden op LinkedIn of in de gebruikersgroep Linked.NET (Lidnug) die ik daar help.
Blijf tot de volgende keer kalm en blijf bootstrappen.
Deze tutorial staat voor een hoofdstuk van Bootstrap 3 Shortlyly, een gratis eBoek van het team van Syncfusion.
Accentsconagua