Bootstrapi paigutuste kohandamine suundumuste, tööriistade ja raamistike kohandamiseks

Bootstrap on praegu number üks eesmine raamistik ja lihtsalt kiireim viis paigutuste loomiseks. See on olnud juba aastaid ja kolmanda osapoole arendajad on isegi avaldanud oma ressursid võrgus. Need ressursid ulatuvad tasuta teemasid kuni üksikasjalikud pluginad ja raamistikud.

Selles artiklis tahaksin jagada mõnda neist ressursse ja parimaid tavasid arendajatele, kes soovivad Bootstrapiga edasi minna.

Kõik selle postituse ressursid on tasuta, et saaksite neid siiski kasutada. Isegi kui sa pole kunagi Bootstrapi kasutanud, leiate kindlasti siin midagi, mis aitab teil alustada.

Taastamine Bootstrapiga

Vaikimisi Bootstrap raamatukogu kaasas selle oma unikaalne disain see tundub fantastiline. See on laialt tuntud kogu veebis ja saate lihtsalt öelda, millal veebileht on kasutades traditsioonilisi Bootstrap elemente.

Aga saate ka neid elemente ennast iseenda kasutada Bootstrapi koodi oma paigutuse alusena.

Seal on mõnel erineval viisil sa suudad seda:

• Vaikeväärtuse ülekirjutamiseks lisage oma stiilileht.
• Kohanda BootStrapi väljundit, nii et sa saad ainult soovitud elemendid.
• Ühendage lisandmoodulite ja pluginate / teemadega.

Viimane valik on kõige levinum ja see on üks põhjus, miks Bootstrap on nii kiiresti kasvanud.

Lubatud olen ka nende suur fänn kohandage tööriista sest see on täiesti tasuta ja annab sulle nii palju kontrolli milliseid funktsioone soovite kasutada.

Kolmanda osapoole arendajate loodud BootStrap 3/4 jaoks on palju ressursse, nii et see on lihtsam kui kunagi varem luua oma unikaalsed BootStrap-paigutused ilma palju koodi kirjutamata.

Pluginad ja lisandmoodulid

Kuna Bootstrapil on massiivne JavaScript-raamatukogu, on see piisavalt lihtne laiendage JavaScripti funktsioone. Ja arendajad on kindlasti teinud seda omaenda pluginatega, paljud vabanevad tasuta võrgus.

Need on minu lemmikud toetada Bootstrapi loomulikult. Paljud neist käivitage jQuery, seega on neid lihtne kohandada, kui tead oma teed jQuery raamatukogu ümber.

Vormi valideerija

Kõigepealt on minu lemmik vormi valideerimise plugin, vormi valideerija. See töötab jQuery-l ja toetab tervet rida frontendraame: Bootstrap, Foundation, Pure, UIKit ja teised.

Sa saad lisage käsitsi mis tahes arv 51 valideerijat mis tahes vormi saidil. See tähendab, et külastajad peavad enne sisu esitamist täitma need valideerimisnõuded.

Paljud kontaktivormid kasutavad neid valijaid vajavad töötavaid e-posti aadresse. Kuid saate neid kasutada ka piltide üleslaadimiseks või paroolide jaoks, mis on päris palju teie Bootstrap-südame soovid.

Datetime valija

Kuupäevade valijad on ka tohutu valu ennast ise kodeerida. Paljud vormid kasutavad lihtsalt päeva / kuu / aasta seadistuste rippmenüüd, kuid seda saab kasutada ka Bootstrapi kuupäeva valija plugin päästa ennast vaeva.

See on täiesti avatud lähtekoodiga ja töötab Bootstrap 3.x teegis. Te märkate seda ka toetab mõlemat kuupäeva ja aega kasutades teist jQuery pluginat, Moment.js.

Üldiselt on see raamatukogu fantastiline, et saada tööaja valija aktiivne. See on olemas palju sõltuvusi kuid õnneks ei pea te selle töötamiseks palju koodi kirjutama.

Tärnireitingud

Siin on veel üks lahe funktsioon tärnide hinnangud veebis. Sa saad lisage ühe-viie tärni reiting kõikjal teie saidil, kasutades JavaScripti käitumise jaoks Bootstrapi raamatukogu.

Kui kasutaja liigub nende tähtede üle, muutub ekraan mis tahes reitingu alusel, mis põhineb nende kursori positsioonil. Seejärel annab kasutaja ühe klõpsuga oma hääle ja määrab tärnide, sealhulgas pool-tärni hinnangud.

See plugin on kindlasti keeruline seadistada sest sa saad muutke palju vaikesätteid täiustatud tehnikate jaoks. Kuid näete lihtsat live-demot, et hinnata, kas see tärnide hinnangu plugin sobib teie saidiga.

VENE

Bootstrap on kaasas oma tabeli paigutuse stiil tabeli andmete esitamiseks esiküljel. Aga WATable plugin, saate lisada Bootstrap tabelitele terve hulga lisafunktsioone.

See on üks kõige üksikasjalikumaid jQuery pluginaid ja need on vaid mõned funktsioonid, mida saate lisada:

• Kohandatud leheküljed.
• Veeru sortimine.
• Andmete filtreerimine.
• Tabeli animatsiooniefektid.
• Kontrollige, et valida terve rida.

KUIVATATAV on kirjeldatud kui a Šveitsi armee nuga tabeli pluginatelt ja ma pean selle kirjeldusega nõustuma. Asjaolu, et see toetab Bootstrap'i, on lihtsalt kooki jäätumine.

Need olid mõned minu lemmik pluginad, kuid seal on nii palju teisi. Kui olete uudishimulik, saate selle lehekülje kaudu veelgi rohkem sirvida.

Bootstrap raamistikud

Bootstrap on tegelikult suur raamistik, sest see võimaldab kasutajatel kohandage vaikimisi HTML- ja CSS-stiile mõne klassiga.

Kuid arendajad on võtnud vaikimisi BootStrap raamatukogu ja lisanud oma stiilid, et luua veelgi suuremad raamid toimige sarnaselt teemadele, nii et sa ei pea alustama Bootstrapi nullist.

Õnneks on nad kõik vabad ja nad kõik töötavad vaikimisi BootStrap klassides.

Bootflat

Võib-olla on kõige tuntum BootStrap raamistik Bootflat UI seda järgib kindlat disaini suundumust.

See töötab kõik vaikimisi Bootstrap funktsioonid, sealhulgas kõik JavaScripti komponendid. Peamised erinevused on rohkem disain ja struktuur kus leheküljeelemendid kasutavad lamedat värvilahendust, et eemaldada Bootstrapi gradient-stiilidest.

Bootflat ei ole ülekoormatud väga palju, nii et saate selle raamistiku lisada mis tahes sihtlehele või kodulehele, et luua oma saidile ainulaadne välimus.

See on 100% tasuta ja isegi kaasas värvivalija, nii saate leida oma paigutusele sobivad lamedad värviskeemid.

Get Shit Done

See üllatavalt nüri UI komplekt ehitatakse ka Bootstrap 3 raamatukogu peale ja see on tasuta avaldatud GitHubis.

Get Shit Done tuleb Creative Timsi meeskonnast, kus nad müüvad mõningaid lisatasusid. Sellel konkreetsel kasutajaliidese komplektil on pro versioon, kuid see pole üldse vajalik.

Avatud lähtekoodiga versioonil on igaühele rohkem kui piisav ja saate seda vaadata live demo et näha, kuidas see brauseris välja näeb.

Bootstrap materjali disain

Teine populaarne disaini trend on Google'i materiaalne disain. See on algselt Android-rakenduste disainerite jaoks loodud disainikeel levib veebis ja kogunud palju toetust UI / UX disaineritest.

See uskumatu Bootstrap materjali raamistik kasutab materjali disaini omadusi ehitada kohandatud disaini Bootstrapi raamatukogust välja.

Vaikimisi see toetab kõike BootStrap 3-s ja seda töödeldakse praegu ka Bootstrap 4 toetamiseks. Lisateavet saate ametlikust koduleheküljelt, millel on dokumentatsioon ja demod.

Sarnane raamatukogu, mida võite proovida MDBootstrap, kuigi ma leian, et see on veidi raskem töötada.

Bootplus

Google lõi materjali kujunduse keele, kuid neil on ka oma stiilid paljude nende tööriistade ja veebirakenduste jaoks.

Bootplus jäljendab Google+ liidese stiili, koos paljude Google'i abidokumentidega, Google Drive'iga ja sarnaste veebirakendustega. Sellel on kõik samad funktsioonid nagu Bootstrap, sealhulgas võrgud, paigutusstiilid, elemendi stiilid ja JavaScripti komponendid.

Saate sirvida ka demo lehel, et näha erinevused Bootplus ja algse Bootstrap UI vahel. Vaba ressursi jaoks on Bootplus ulatuslik ja sobib kõigile, kes armastavad Google'i disainitehnikaid.

Tööriistad ja ressursid

Lõpetuseks tahan sukelduda paljudesse tasuta tööriistadesse Bootstrap-paigutuste kohandamine ja loomine.

Need tööriistad on kõik veebirakendused ja paljud neist on GitHubist isegi avatud. Nad teevad aega, et säästa aega ja aidata teil kujundada uskumatuid Bootstrap-paigutusi ilma palju koodita.

Live redaktor

Tasuta Bootstrap live redaktor on üks parimaid vahendeid mittetehniliste disainerite jaoks. Kui te ei tea, kuidas koodi kodeerida, võite endiselt tugineda sellele Bootstrap-ehitajale, et luua kogu kujundus nullist.

See jookseb otse teie brauseris ja saate alustada ka eelnevalt tehtud mallidest.

Külgriba valikud võimaldavad teil lisada teatud CSS väärtused kui sa teaksid mõned frontendikoodid. Kuid saate kasutada ka GUI-d, et muuta värve, fonte, suurusi ja päris palju muud.

Kui olete valmis, klõpsa “Hangi teema” ja saate värskendatud CSS-stiilid oma projektile kopeerida / kleepida. Lihtne lihtsus Bootstrapi restyle ilma igasuguse nullist ümberkirjutamise vajaduseta.

Vormide ehitaja

See tasuta Bootstrap moodustab ehitaja on drag-and-drop brauseri tööriist mis võimaldab teil luua Bootstrap vorme nullist.

Jällegi nõuab nullkodeerimise teadmisi ja teil on täielik juurdepääs kõigile Bootstrap 3 elementidele. Valige lihtsalt soovitud element ja lohistage see vasakule kasti. Siit saate kõike muuta kohatähe tekstist CSS-klassi.

Kaugelt kõige lahedam vormi ehitaja, keda olen kunagi näinud ja see on 100% tasuta!

BootSwatchr

Teine tasuta tööriist, mis ma tõesti meeldib BootSwatchr. See tugineb Bootstrap raamistikule ja see võimaldab teil värvide värskendamine, teema stiile, ja üldine paigutus lehelt.

Mulle meeldib see app on, kuidas see ka kaasas tasuta eelnevalt kavandatud stiilide galerii.

Nii saate disaini alla laadida keegi teine ​​on juba teinud või saate seda kasutada oma teema kohandamiseks lähtepunktina.

Edasi liikuma

Bootstrap populaarsus kasvab, nii et nüüd on parim aeg sukelduda sellesse raamistikku. Õnneks on kümneid pluginaid, raamistikke ja tasuta tööriistu, mida saate kasutada protsessi kiirendamiseks.

Selles artiklis näitasin just jäämäe tippu, nii et kui sa ei näe siin midagi, mis on kasulik, mine välja Google'ile ja vaata, mida veel leiad.