Bootstrap 3 Succinctly Tilpasse Bootstrap 3

Og så endelig kommer vi til den siste opplæringen i serien, som viser deg hvordan du oppretter egendefinerte fargesett.

Hvis du husker tilbake i begynnelsen, da vi gikk gjennom de store endringene, nevnte jeg at BS-forfatterne hadde gitt en ekstra fil for å få BS3 til å se ut som BS2, i stedet for å bruke det flate utseendet.

I hele denne serien har vi brukt standard BS3 flatlook, men hvis du laster ned den forhåndsbygde JavaScript-versjonen av BS3 fra Bootstrap-nettstedet, finner du en ny fil i arkivet du laster ned kalt bootstrap-theme.css. 

Hvis du kobler denne filen til prosjektet ditt umiddelbart etter at du har tatt med kjernen bootstrap.css filen, vil du oppdage at selv om du bruker den nye BS3, ser utseendet på applikasjonen din fortsatt på BS2.

Forfatterne innså at en av de viktigste barrierer for vedtak av BS3 i nye applikasjoner var manglende evne til å utforme det på en tilpasset måte, men med letthet.

Hvis du var bruker av LESS, eller til og med Sass (som BS3 har nå Sass-bindinger), så var dette ikke et problem. Du åpnet ganske enkelt opp de MINDRE kildene, tweaked variablene og Mixins du trengte, og kjørte ting gjennom MINDRE kompilatoren for å få det nye CSS-skriptet.

Dessverre brukte ikke alle mindre. Faktisk hadde mange utviklere og designere bare muligheten til å laste ned og inkludere de vanlige gamle forhåndskompilerte CSS- og JavaScript-filene, så en bedre måte måtte bli funnet.

Den første forandringen var å åpne opp alle Mindre kilder til et tilpasningsverktøy på siden direkte på Bootstraps hovedsted, men dette er ikke noe nytt; Du var i stand til å bruke denne siden før på en begrenset måte. Med BS3 har Mindre tilpasningsverktøyet imidlertid fått en fullstendig overhaling, og du kan nå omdefinere alt at BS3 bruker, fra skriftstørrelser og skrifttyper, til og med til gridstørrelser, utløserpunkter og grunnleggende kontekstuelle fargesett.

Faktisk er det nå ingenting som ikke kan endres før du bestemmer deg for å laste ned ditt nye tilpassede CSS, som følgende bilde viser:

Skjermbilde av den øverste halvdelen av det nye tilpasningsverktøyet

På grunn av den store størrelsen på verktøyet er det umulig å vise hele greia i denne opplæringen, men det er lett nok å få tilgang til. Bare gå til Bootstraps nettsted og klikk Tilpass i øverste menylinje. Du vil også se at du har mange andre alternativer, for eksempel hvilke JavaScript-pluginer og verktøy som skal inkluderes, hvilke komponenter som skal inkluderes, og basestilen du kanskje ikke vil ha.

For eksempel, hvis alt du vil bruke er rutenettet, og ingenting annet, så kan du bare velge bare rutenettet og avmarkere alle de andre komponentene.

BS3-siden vil da generere bare den nødvendige koden for å inkludere, og ikke mer. Dette er en velsignelse for de som klager over at alle Bootstrap-nettsteder ser på samme måte, fordi det betyr at nettstedet ditt absolutt ikke trenger å se ut som resten - du kan bare bruke biter du trenger, og bruk dine egne ting for alt annet.

Det er to andre måter du kan tilpasse byggingen din på. Den første er å ta det ekstra "bootstrap-tema" CSS-stilarket, lage en kopi, og endre deretter stilene slik det passer deg. Dette er ikke så enkelt som å bruke tilpasningsverktøyene, men det er heller ikke så vanskelig som alternativet.

De fleste klassenavnene og innstillingene du vil endre for å stemple ditt personlige merke i BS3, er allerede skilt ut i BS2-temaet, så den raskeste måten å eksperimentere er, er ganske enkelt å sette sammen en prototypeside med hovedkontrollene og elementene du vil endre, og deretter lenke i din kopi av BS2-temaet.

Hvis du bruker Node og noe som Bower, blir det enda enklere, fordi du kan bruke live reload, så bare se endringseksemplarsiden din i nær sanntid mens du tilpasser din egendefinerte versjon av temaarket.

Den andre måten er litt mer involvert, og som beskrevet i BS3-dokumentene, kommer i to smaker: lette tilpasninger og store tilpasninger.

Et eksempel på en lett tilpasning er å legge til en kontekstuell fargeklasse til knappelementet. For eksempel, hvis du ønsket å legge til btn-sky ved siden av btn-info, btn-primær, etc. klasser, kan du definere et enkelt stilark for å holde følgende regler:

.btn-sky, .btn-sky: svever, .btn-sky: active color: # 000000; tekstskygge: 0 -1px 0 rgba (0, 0, 0, 2); bakgrunnsfarge: # AAD4FF; grense: 1 px solid svart;  .btn-sky background-repeat: repeat-x; bakgrunnsbilde: lineær gradient (topp, # 00FFFF 0%, # FFFF00 100%);  .btn-sky: svever bakgrunnsstilling: 0 -10px; 

Når det legges til og kobles inn riktig, bør det se slik ut: 

Utgang fra kodeeksempel, når den brukes med tilpasningsprøven

Når den brukes med en vanlig knappetikett på følgende måte:

Min Sky Button 

Den vanskeligste delen av å bruke denne metoden går gjennom basen CSS stilark for å finne navnene du vil overstyre; Det er ikke akkurat vanskelig, bare langvarig.

Når du har en slik som knappen ovenfor, eller du har funnet og kopiert et varsel, panel, liste eller annen klasse, kan du enkelt lage en mal som kan gjenbrukes når du vil legge til en tilpasset klasse av det type.

Tunge tilpasninger er ikke veldig forskjellige fra lystilpasninger; Den store forskjellen er at du overstyrer hele klassen.

Så for eksempel finner du alle klassene relatert til btn, kopiere dem, endre dem, og inkludere dem separat.

Den nye arkitekturen inne i BS3-rammen betyr nå at når du vet målvelgerne, og deres søsken, er det enkelt å skape en overstyring. Som jeg allerede har påpekt, inneholder bootstrap-temafilen allerede mye av det du kanskje vil endre i alle fall, og hvis det ikke er et alternativ, kan du prøve nettsteder som Bootswatch.com:

Skjermbilde av søtt og kirsebærtema fra Bootswatch.com

Mange andre har tusenvis av temaer å velge mellom, både gratis og betalt for, så det er ingen unnskyldning for at Bootstrap-siden din skal se ut som alle andre s.

Konklusjon

Jeg håper du likte denne serien, og at den hjelper deg til å bli en bedre utvikler ved hjelp av Bootstrap 3. I denne nye verden med responsivt webdesign er BS3 et rammeverk som ikke bør tas lett - det representerer mye forskning av en av de største sosiale medier selskaper i eksistens, og er vant til å drive de fleste av deres offentlig-facing nettsteder.

Hvis du vil nå ut og spørre meg om spørsmål om boken, kan jeg generelt bli funnet å henge på Twitter som @shawty_ds. Du kan også generelt finne meg på LinkedIn, eller i Linked.NET (Lidnug) -brukergruppen som jeg hjelper med å løpe der.

Til neste gang, vær rolig og fortsett oppstart.

Denne opplæringen representerer et kapittel fra Bootstrap 3 Succinctly, en gratis eBok fra teamet ved Syncfusion.