Bootstrap-asettelujen trendien, työkalujen ja kehysten mukauttaminen

bootstrap on tällä hetkellä numero yksi front-end-kehys ja helposti nopein tapa rakentaa asetteluja. Se on ollut jo vuosia ja kolmannen osapuolen kehittäjät ovat jopa julkaisseet omia resurssejaan verkossa. Nämä resurssit vaihtelevat ilmaisia ​​teemoja että yksityiskohtaiset laajennukset ja kehykset.

Tässä artikkelissa haluaisin jakaa kourallisen näistä resursseja ja parhaita käytäntöjä kehittäjille, jotka haluavat mennä pidemmälle Bootstrapin avulla.

Kaikki tämän viestin resurssit ovat ilmaisia, joten voit käyttää niitä kuitenkin sopivaksi. Vaikka et ole koskaan käyttänyt Bootstrap-ohjelmaa, löydät varmasti jotain, joka auttaa sinua aloittamaan.

Uudelleenkäsittely Bootstrapilla

Oletusarvoisen Bootstrap-kirjaston mukana tulee sen oma ainutlaatuinen muotoilu se näyttää upealta. Se on laajalti tunnettu kaikkialla verkossa, ja voit helposti kertoa, milloin sivusto on käyttämällä perinteisiä Bootstrap-elementtejä.

Mutta voit myös palauta nämä elementit itse käyttää Bootstrap-koodia ulkoasun perustana.

On muutamalla tavalla sinä pystyt tähän:

• Lisää oma tyylitaulukko, jos haluat korvata oletusasetuksen.
• Mukauta BootStrapin tulostus, joten saat vain haluamasi elementit.
• Yhdistä lisäosat ja laajennukset / teemat.

Viimeinen vaihtoehto on yleisin ja se on yksi syy Bootstrapin kasvuun niin nopeasti.

Myönnetty olen myös suuri fani heidän muokata työkalua koska se on täysin ilmainen ja antaa sinulle niin paljon valvontaa mitä ominaisuuksia haluat käyttää.

Kolmannen osapuolen kehittäjien luomia BootStrap 3/4: n resursseja on tonnia, joten on helpompaa kuin koskaan luo omat ainutlaatuiset BootStrap-asettelut kirjoittamatta paljon koodia.

Lisäosat ja lisäosat

Koska Bootstrapin mukana tulee massiivinen JavaScript-kirjasto, se on helppoa laajentaa JavaScript-ominaisuuksia. Ja kehittäjät ovat varmasti tehneet niin omilla laajennuksillaan, monet julkaistuina ilmaiseksi verkossa.

Nämä ovat kaikki suosikkini kannattaa Bootstrapia luonnollisesti. Monet heistä ajaa jQuery: llä, joten ne on myös helppo muokata, jos tiedät tiensä jQuery-kirjaston ympärille.

Lomakkeen validointi

Ensin on suosikkini lomakkeen validointi plugin, lomake Validator. Se toimii jQuery-ohjelmalla ja se tukee koko joukkoa frontend-kehyksiä: Bootstrap, Foundation, Pure, UIKit ja muut.

Sinä pystyt lisää manuaalisesti mikä tahansa määrä 51 validointia missä tahansa muodossa sivustossasi. Tämä tarkoittaa, että kävijöiden on täytettävä nämä validointivaatimukset ennen kuin ne voivat lähettää sisällön.

Monet yhteydenottolomakkeet käyttävät näitä vahvistimia vaativat toimivia sähköpostiosoitteita. Mutta voit käyttää niitä myös kuvien lataamiseen tai salasanoihin, melkein mitä tahansa Bootstrap-sydämesi toiveita.

Datetime -valitsin

Päivämäärät ovat myös valtava kipu koodata itseäsi. Monissa lomakkeissa käytetään vain päivä / kuukausi / vuosi -asetuksia, mutta voit myös käyttää sitä Bootstrap-päivämääränvalitsimen laajennus säästää itsesi vaivaa.

Se on täysin avoimen lähdekoodin ja toimii Bootstrap 3.x -kirjastossa. Huomaat myös sen tukee sekä päivämäärää ja aika käyttämällä toista jQuery-laajennusta, Moment.js.

Kaiken kaikkiaan tämä kirjasto on upea saada työpäivämääränvalitsin aktiiviseksi. Siinä on paljon riippuvuuksia mutta onneksi sinun ei tarvitse kirjoittaa paljon koodia saadaksesi sen toimimaan.

Tähtiluokitukset

Tässä on toinen hieno ominaisuus tähtiarvostelut verkossa. Sinä pystyt lisää yksi-viiden tähden luokitus kaikkialla sivustossasi, käyttämällä Bootstrap-kirjastoa JavaScript-käyttäytymiseen.

Kun käyttäjä siirtyy näiden tähtien yli, näyttö muuttuu riippumatta siitä, mikä luokitus perustuu niiden kohdistimen sijaintiin. Sitten käyttäjä napsauttaa yhdellä napsautuksella äänensä ja asettaa tähtiarvon, mukaan lukien puolen tähden luokitukset.

Tämä plugin on ehdottomasti monimutkainen koska sinä voit muuttaa paljon oletusasetuksia kehittyneempiä tekniikoita varten. Voit kuitenkin nähdä yksinkertaisen live-esittelyn, jonka avulla voit arvioida, täyttääkö tämä tähti-luokitus -lisäosa sivustosi kanssa.

WATable

Bootstrap on mukana oma taulukkoasettelu näyttää taulukkotiedot etupaneelissa. Mutta WATable plugin, voit lisätä koko joukon lisäominaisuuksia Bootstrap-taulukoihin.

Tämä on yksi yksityiskohtaisimmista jQuery-laajennuksista, jotka ovat vain joitakin ominaisuuksia, joita voit lisätä:

• Mukautettu sivunumerointi.
• Sarakkeiden lajittelu.
• Tietojen suodatus.
• Taulukon animaatiovaikutukset.
• Valitse koko rivi.

VESI kuvataan a Sveitsin armeijan veitsen pöydän laajennuksia ja minun on hyväksyttävä tämä kuvaus. Se, että se tukee Bootstrapia, on vain kakku.

Nämä olivat joitakin suosikkisovelluksiani, mutta siellä on niin monia muita. Voit selata vielä lisää tällä sivulla, jos olet utelias.

Bootstrap-kehykset

Bootstrap on itse asiassa suuri kehys, koska se antaa käyttäjille mahdollisuuden muokkaa HTML- ja CSS-oletusasetuksia muutaman luokan.

Kehittäjät ovat kuitenkin ottaneet oletusarvoisen BootStrap-kirjaston ja lisänneet oman tyylinsä luodakseen vielä suuremmat kehykset toimivat kuin teemat, joten sinun ei tarvitse restoot Bootstrapia tyhjästä.

Onneksi he ovat kaikki vapaita ja ne kaikki toimivat BootStrap-oletusarvoina.

Bootflat

Ehkä tunnetuin BootStrap-kehys on Bootflat-käyttöliittymä että noudattaa tasaisen suunnittelun suuntausta.

Se toimii kaikki oletusarvoiset Bootstrap-ominaisuudet, mukaan lukien kaikki JavaScript-komponentit. Suurimmat erot ovat enemmän suunnittelu ja rakenne missä sivun elementit käyttävät litteitä värimalleja siirtyäksesi Bootstrapin gradienttityypeistä pois.

Bootflat ei ole käytetty liikaa hyvin paljon, joten voit lisätä tämän kehyksen mihin tahansa aloitussivulle tai kotisivulle, jotta saat sivustollesi ainutlaatuisen ulkoasun.

Se on 100% vapaata ja jopa mukana värinvalitsija, joten löydät tasaiset värijärjestelmät, jotka sopivat ulkoasuun.

Get Shit Done

Tämä yllättävän tylsä ​​UI-paketti myös rakentaa Bootstrap 3 -kirjaston päälle ja se julkaistaan ​​ilmaiseksi GitHubissa.

Get Shit Done tulee Creative Tim -joukkueesta, jossa he myyvät muutamia premium-resursseja. Tällä erityisellä käyttöliittymäsarjalla on pro-versio, mutta se ei ole tarpeen.

Avoimen lähdekoodin versiolla on enemmän kuin tarpeeksi kaikille ja voit tarkistaa live-esittely nähdä miten se näyttää selaimessa.

Bootstrap-materiaalin suunnittelu

Toinen suosittu muotoilu on Googlen materiaalisuunnittelu. Tämä on muotoilukieli, joka alun perin tehtiin Android-sovellusten suunnittelijoille, mutta on sittemmin ollut levitä verkkoon ja hankki paljon tukea UI / UX-suunnittelijoista.

Tämä uskomaton Bootstrap-materiaalikehys käyttää materiaalin suunnittelun ominaisuuksia rakenna mukautettu muotoilu pois Bootstrapin kirjastosta.

Oletuksena se on tukee kaikkea BootStrap 3: ssa ja sitä uudistetaan parhaillaan myös Bootstrap 4: n tukemiseksi. Lisätietoja on virallisella kotisivulla, jossa on dokumentteja ja demoja.

Vastaava kirjasto, jota saatat kokeilla MDBootstrap, vaikka minusta tämä on hieman vaikeampi työskennellä.

Bootplus

Google loi materiaalin suunnittelukielen, mutta niillä on myös omat tyylinsä monille niiden työkaluille ja web-sovelluksille.

Bootplus jäljittelee Google+ -liittymän tyyliä, yhdessä useiden Googlen ohjeasiakirjojen, Google Driveen ja vastaavien web-sovellusten kanssa. Siinä on kaikki samat ominaisuudet kuin Bootstrap, mukaan lukien ruudukot, layout-tyylit, elementtityylit ja JavaScript-komponentit.

Voit jopa selata sivuston demoa nähdäksesi erot Bootplus: n ja alkuperäisen Bootstrap-käyttöliittymän välillä. Vapaa resurssi, Bootplus on laaja ja se sopii kaikille, jotka haluavat Googlen suunnittelutekniikoita.

Työkalut ja resurssit

Lopuksi haluan sukeltaa moniin ilmaisiin työkaluihin Bootstrap-asettelujen mukauttaminen ja rakentaminen.

Nämä työkalut ovat kaikki web-sovelluksia ja monet niistä ovat jopa avoinna GitHubista. Ne on tehty säästämään aikaa ja auttamaan sinua suunnittelemaan uskomattomia Bootstrap-ulkoasuja ilman paljon koodia.

Live-editori

Vapaa Bootstrap live -editori on yksi parhaista työkaluista muille kuin teknisille suunnittelijoille. Jos et tiedä miten koodata, voit luottaa tähän Bootstrap-rakentajaan, jotta voit luoda koko ulkoasun tyhjästä.

Se toimii suoraan selaimessasi ja voit jopa valita valmiista malleista aloittaaksesi.

Sivupalkin vaihtoehdot sallivat lisää tiettyjä CSS-arvoja jos tiedät jonkinlaisen frontend-koodauksen. Voit kuitenkin myös käyttää GUI: ta vaihtamaan värejä, fontteja, kokoja ja melko paljon muuta.

Kun olet valmis, klikkaus “Hanki teema” ja voit kopioida / liittää päivitetyt CSS-tyylit omaan projektiisi. Erittäin helppo tapa palauttaa Bootstrap ilman, että sinun tarvitsee kerätä kaikkea tyhjästä.

Muodosta rakentaja

Tämä ilmainen Bootstrap muodostaa rakentajan on vedä ja pudota -selaimen työkalu jonka avulla voit luoda Bootstrap-lomakkeita tyhjästä.

Jälleen se vaatii nollakoodaustietoa ja sinulla on täysi pääsy kaikkiin Bootstrap 3 -elementteihin. Valitse vain haluamasi elementti ja vedä se suoraan vasemmanpuoleiseen ruutuun. Täältä voit muuttaa kaiken paikkamerkki-tekstistä CSS-luokkaan.

Kaikkein tyylikkäin muotoilija, jota olen koskaan nähnyt ja se on 100% ilmainen!

BootSwatchr

Toinen ilmainen työkalu, josta pidän BootSwatchr. Se perustuu Bootstrap-kehykseen ja antaa sinulle mahdollisuuden päivitä värit, teema-tyylit, ja yleinen asettelu sivun.

Mitä tykkään tästä sovelluksesta on, miten se tulee myös ilmainen ennalta suunniteltujen tyylien galleria.

Voit siis ladata mallin joku muu jo tehnyt tai voit käyttää sitä lähtökohtana oman teeman muokkaamiseen.

Siirtyä eteenpäin

Bootstrap on vain kasvava suosio, joten nyt on paras aika sukeltaa tähän kehykseen. Onneksi on olemassa kymmeniä laajennuksia, kehyksiä ja ilmaisia ​​työkaluja, joilla voit nopeuttaa dev-prosessia.

Tässä artikkelissa näytin juuri jäävuoren kärjen, joten jos et näe mitään täällä, se on hyödyllistä päästä ulos Googlelle ja nähdä, mitä muuta löydät.