Kuinka vaihtaa Bootstrap yksinkertaisesti ja tehokkaasti
bootstrap ei ole missään nimessä ainoa HTML / CSS-käyttöliittymä, mutta mielestäni on turvallista sanoa, että se on muuttanut peliä. Tämä keittiön pesuallas sisältänyt koodinpilkku on tehnyt monien sovellusten (ja verkkosivuston) suunnittelun ja kehittämisen paljon helpommaksi ja suositteli massiivista HTML-kehystä sivutuotteena.
Valitettavasti sen ominaispiirteensä laaja ulottuvuus vetoaa ihmisluontoa koskeviin näkökohtiin, ja monet ihmiset, jotka haluavat käyttää sitä, pysyvät ennallaan. Nyt, mielessäsi, oletustyylit ja layout-verkko eivät ole pahoja millä tahansa ulottuvuudella mielikuvitusta. He ovat seurausta paljon kovaa työtä ja laaja testaus Twitter-tiimi. Ne ovat yhtä vankka perustus, joka rakentuu kuin mikä tahansa.
Mutta se on kaikki ne: säätiö. Kehykset, kuten heidän nimensä ehdottavat, ei ole tarkoitettu käytettäväksi kaiken, kaiken ratkaisun UX-tarpeisiisi. Yksi poikkeus tähän sääntöön voi olla, jos kehität jotain sisäistä, jota yleisö ei koskaan näe. Mutta sitten ... Koko idea on ottaa ne edelleen, laajentaa niitä ja muuttaa niitä.
Bootstrapin kehittäjät ovat todella tehneet erittäin hyvää työtä tämän tekemisen helpottamiseksi: niiden koodi on modulaarinen; ja voit ladata kehyksen yksittäisiä osia käyttämään sopivaksi. He ovat jopa antaneet räätälöintityökalu niiden verkkosivuilla, joiden avulla voit muokata kaikkia muuttujia tarpeen mukaan.
Loput ovat kuitenkin meidän päällämme. Ja mies, jotkut todella vaikuttavat suunnittelijat ja kehittäjät ovat tehostaneet luomalla modeja ja työkaluja, jotka jättävät meidät muille ilman tekosyitä. Ei ole mitään syytä ratkaista oletuksia.
Arvioi yksittäiset projektit; ehkä Bootstrapin oletustyyppikuvio sopii sinulle, mutta väriteema ja verkko eivät ole, ehkäpä tarvitset erilaisia kuvakkeita. Määritä paikat, joissa Bootstrap ei vastaa tarpeitasi, ja tarkastele seuraavia resursseja.
Bootstrap modit
Nämä ovat täydellisiä modeja, jotka ottavat käyttöön peruskäskytyksen UI: n ja muuttavat sen melkein tuntemattomiksi. Niiden käyttö on jonkin verran erityistä ja rajoitettua; mutta jos he vastaavat tarpeisiisi, he voivat säästää aikaa ja rahaa.
Flat UI
Tämän luettelon ensimmäinen mod on Flat UI. Julkaistu kaverit klo Designmodo , Flat UI saavutti välittömän suosiota design-yhteisössä ja hyvästä syystä: se on kaunis.
Rakastettu niille, jotka rakastavat litteää muotoilua - toisin kuin Bootstrapin hieman skeuomorfiset taipumukset - jokainen UI-elementti on suunniteltu uudelleen pohjimmiltaan uudella esteettisellä.
Vektorikuvakkeilla, uusilla kuvakkeiden kuvakkeiden fontilla, muokatuilla käyttöliittymien elementeillä (kuten tehtäväluettelolla) ja useilla helposti muunnelluilla värinmuodoilla Flat UI on tehnyt minulle ja todennäköisesti monet muutkin ajattelevat, mitä Bootstrap voi näyttää.
Oma lemmikkini peitellä: tekstin koko perusosion elementille on vähän pieni verkkosivustolle. Ollakseen oikeudenmukainen, se on luultavasti aivan sovelluksen käyttöliittymässä, jossa tekstin voi laittaa melko pieniin tiloihin.
Flat-käyttöliittymä on ilmainen, mutta voit maksaa pro-versiosta lisäelementeillä, toiminnoilla ja PSD-tiedostoilla.
Fbootstrapp
Muistatko kuinka sanoin, että jotkut näistä modeista olivat melko tiettyjä käyttötapauksia? No minä en ole valehtelemassa. Fbootstrapp on kokonaan uudelleen työstetty yhteensopivaksi Facebookin käyttöliittymän elementtien kanssa.
Miksi kukaan tekisi niin? No, omien sanojensa mukaan "Fbootstrapp on työkalupakki, jonka tarkoituksena on käynnistää Facebook iFrame -sovellusten kehittäminen molemmissa koossa. Se sisältää alusta CSS ja HTML typografialle, lomakkeille, painikkeille, taulukoille, ristikoille, navigointiin ja muille, tyypillisen Facebook-ilmeen tyyliin. "
Facebook-sovelluksen kehittäjät, huomioikaa: työsi helpottui.
Jumpstart UI admin -malleja
Bootstrap voi olla tarkoitettu käytettäväksi sovelluksissa, mutta se vaatii vähän työtä, jos aiot tehdä klassisen "admin-käyttöliittymän" sen kanssa. Jumpstart-käyttöliittymä tuo kolme erilaista mallia, jotka tekevät tämän hienosti.
Järjestelmänvalvojan käyttöliittymän kuvakkeet, widgetityylit, jQuery-pohjaiset tietojen visualisointisovittimet ja paljon muuta yhdistyvät puhtaissa, muokattavissa ja täysin reagoivissa ulkoasuissa.
Nämä modit kuitenkin eroavat toisista tärkeimmistä tavoista. Ei ole ilmaista versiota; sinun on maksettava niistä suoraan. Ne eivät kuitenkaan ole kovin kalliita: ne vaihtelevat 15 dollarin ja 20 dollarin välillä. Sillä tavoin, että ne ovat menneet, haluaisin sanoa, että se on sen arvoista, jos ne täyttävät sinun erityistarpeesi.
BootMetro
Jotkut ihmiset rakastavat sitä, ja monet horjuvat sitä intohimoisesti; mutta ei kieltäydy siitä, että Windows 8 ja sen Metro UI ovat aiheuttaneet sekoitus muotoiluun. Minulle, elämäni puolesta, ei voi todellakaan ajatella mitään käyttötapausta (jonkin ohjelmistokaupan ulkopuolella), jossa tällainen käyttöliittymä olisi erityisen hyödyllinen. Mutta hei, in BootMetro meillä on yksi!
Se on ilmainen, ja näyttää olevan melko täydellinen, joten tarkista se. Se ei välttämättä ole erityisen hyödyllinen useimmille ihmisille, mutta se on mielenkiintoinen koodikokeilu. (Tarkoitan todella? Bootstrap ja Metro? En nähnyt tulevan.)
Bootstrap-räätälöintityökalut
Joten haluat räätälöidä Bootstrap-asetukset paremmin UI / UX-tarpeiden mukaiseksi. Mistä aloitat? Voisit sukeltaa suoraan koodiin. Olen tehnyt niin. Kerron kuitenkin, että se voi olla karkea.
Jos haluat muuttaa koko typografian tai painikkeen ja linkkien värit tai navbar-tyylit manuaalisesti, olet auki jonkin aikaa. Voit muokata kaikkia räätälöintisovelluksen muuttujia Bootstrap-verkkosivustolla, mutta sinun on tiedettävä kaikkien värien HEX-koodit, eikä näet mitään visuaalista palautetta, kun teet muutoksia.
Onneksi meille on olemassa vain muutama Bootstrap-teemapäällikkö, joka luotiin nimenomaan tähän tarkoitukseen. Nämä ovat kaksi parasta, jotka olen löytänyt toistaiseksi.
StyleBootstrap
Jos et voi sivuuttaa epäsäännöllistä käyttöliittymää, StyleBootstrap on tehokas työkalu useimpien UI-elementtien elementtien muokkaamiseen, jotka löytyvät kehyksestä. Jos haluat aloittaa nopeasti, muuttamalla vain ilmeisimpiä asioita, niin tämä on paikka aloittaa.
Bootstrap Magic
Bootstrap Magic on työkalu, jota haluat käyttää, jos haluat tehdä perusteellisen uudelleenmuotoilun kehyksestä. Se on mukavampi, yksinkertaisempi käyttöliittymä ja antaa sinulle mahdollisuuden tweak paljon enemmän elementtejä kuin StyleBootstrap. Varoitetaan, vaikka ... tämä kestää kauemmin. Se sanoi, että se ei silti kestäisi niin kauan kuin se muuttuisi kaiken käsin.
Lisäosat ja katkelmat
Riittävät sanoa, että Bootstrapilla ei ole sellaisia asioita, jotka saattavat olla hyödyllisiä. Aluksi meillä on kuvakkeita.
Fontti mahtava
Bootstrapin kuvakkeet ovat viileitä, mutta rajoitetusti. Sinulla on tummia kuvakkeita, niin sinulla on kevyitä kuvakkeita, jotka kaikki on asetettu mukavaan pieneen sprite -kuvaan. Kuvakkeiden kirjasimet ovat kuitenkin paljon monipuolisempia. Kaikki, mitä voit tehdä tekstillä CSS3: lla, voit tehdä näihin kuvakkeisiin. Muuta kokoa, väriä, anna heille pudotus varjo; se on aivan kirjaimellisesti yhtä helppoa kuin kirjoittaminen CSS: llä. Noin 361 kuvaketta tämän kirjoituksen aikaan, Fontti mahtava kannattaa tarkistaa.
Bootsnipp
Bootsnipp on kirjaston HTML-koodinpätkä, jotka on suunniteltu toimimaan Bootstrapin avulla, oletettavasti lisäämättä ylimääräisiä kirjastoja. Leikkeet sisältävät: välilehtikirjamerkinnät ja kirjautumislomakkeet, karusellit, paremmat kalenterit, Gmailin kaltaisen sähköpostiliittymän, media-soittimen käyttöliittymän ja paljon muuta.
Jos olet lukinnut yrittäessäsi selvittää, kuinka elementtejä yhdistetään käyttöliittymään, tutustu Bootsnipp-kirjastoon. Jos heillä ei ole juuri sitä, mitä tarvitset, koodin esimerkit saattavat auttaa sinua selvittämään, miten se tehdään.
Se ei ole kaikki ...
Twitterin suosikkikehyksen ollessa laajalti käytössä, on luultavasti enemmän tietoa Bootstrapin muokkaamisesta kuin mikä tahansa luettelo voi sisältää.
Loppujen lopuksi tämä on mitä Internet on, eikö? Se ja ... kissat.
Oletko muuttanut Bootstrapia? Teitkö sen manuaalisesti vai käytätkö resurssia? Kerro meille kommentit.