Prilagođavanje trendova, alata i okvira za Bootstrap Layouts

bootstrap trenutno je broj jedan front-end okvir i lako najbrži način za izgradnju izgleda. To je već godinama, a programeri trećih strana čak su i online objavili vlastite resurse. Ovi resursi se kreću od besplatne teme do detaljni dodaci i okviri.

U ovom članku bih želio podijeliti nekoliko tih resursima i najboljim praksama za programere koji žele ići dalje uz Bootstrap.

Svi resursi u ovom postu su besplatni, tako da ih možete koristiti kako god želite. Čak i ako nikada niste koristili Bootstrap sigurno ćete pronaći nešto što će vam pomoći da započnete.

Ponovno postavljanje uz Bootstrap

Zadana knjižnica Bootstrap dolazi sa svojim vlastiti jedinstveni dizajn to izgleda fantastično. To je nadaleko poznato na cijelom webu i možete lako znati kada je web-lokacija koristeći tradicionalne elemente Bootstrap.

Ali možete i vi obnovite ove elemente sami koristiti Bootstrap-ov kôd kao temelj vašeg izgleda.

Tamo su nekoliko različitih načina možeš ti to:

• Dodajte vlastitu listu stilova da biste prebrisali zadanu postavku.
• Prilagodite BootStrap izlaz, tako da dobivate samo one elemente koje želite.
• Kombinirajte s dodacima i dodatcima / temama.

Ta posljednja opcija je najčešća i to je jedan od razloga zašto je Bootstrap tako brzo rastao.

Odobren sam i njihov veliki obožavatelj prilagodite alat jer je potpuno besplatno i daje vam toliko kontrole koje značajke želite koristiti.

Postoje tone resursa za BootStrap 3/4, koje su kreirali drugi proizvođači, tako da je lakše nego ikad stvorite vlastite jedinstvene BootStrap izglede bez puno pisanja koda.

Dodaci i dodaci

Budući da Bootstrap dolazi s masivnom JavaScript bibliotekom, to je jednostavno proširite značajke JavaScripta. I programeri su to svakako učinili sa svojim vlastitim dodatcima, mnogi su objavljeni besplatno na internetu.

To su svi moji favoriti Podržavajte Bootstrap izvorno. Mnogi od njih pokrenuti na jQuery, tako da ih je lako prilagoditi ako znate svoj put oko knjižnice jQuery.

Validator obrasca

Prvi je moj favorit dodatak za provjeru obrasca, Validator obrasca. Pokreće se na jQuery i podržava cijelu hrpu frontend okvira: Bootstrap, Foundation, Pure, UIKit i druge.

Možeš ručno dodajte neograničeni broj od 51 validatora na bilo koji obrazac na Vašoj web lokaciji. To znači da će posjetitelji morati ispuniti zahtjeve za provjeru valjanosti prije nego što mogu poslati sadržaj.

Mnogi obrasci za kontakt koriste ove validatore zahtijevaju radne adrese e-pošte. No, možete ih koristiti i za prijenos slika ili zaporke, gotovo sve što vaše Bootstrap-srce želi.

Birač podataka u vremenu

Sakupljači datuma su također velika bol kod sebe. Mnogi oblici samo koriste padajuće izbornike za postavke dan / mjesec / godina, ali to također možete koristiti Dodatak za odabir datuma za pokretanje da spasi sam sebe.

To je potpuno open-source i radi na knjižnici Bootstrap 3.x.. Također ćete to primijetiti podržava oba datuma i vrijeme pomoću drugog dodatka za jQuery, Moment.js.

Sve u svemu, ova je knjižnica fantastična za aktivan radni alat za odabir datuma. Ima mnogo zavisnosti ali, na svu sreću, nećete morati pisati mnogo koda da biste ga mogli koristiti.

Ocjene zvjezdicama

Evo još jedne kul značajke za ocjene zvjezdica na internetu. Možeš dodajte ocjenu jedan na pet zvjezdica bilo gdje na web-lokaciji pomoću biblioteke Bootstrap za ponašanje JavaScripta.

Kada korisnik prelazi preko tih zvijezda, prikaz se mijenja na bilo koji način na kojem se ocjena temelji na položaju pokazivača. Zatim, jednim klikom, korisnik glasa i postavlja ocjenu zvjezdicom, uključujući ocjene od pola zvjezdice.

Ovaj dodatak je definitivno komplicirano postaviti zato što možeš promijeniti mnoge zadane postavke za naprednije tehnike. No, možete vidjeti jednostavan demo uživo kako biste izmjerili odgovara li ovaj dodatak za ocjenjivanje zvjezdicom vašoj web-lokaciji.

WATable

Bootstrap dolazi sa svojim vlastiti stil izgleda stola za prikaz tabličnih podataka na sučelju. Ali, s Plutajući dodatak, možete dodati cijelu hrpu dodatnih značajki u vaše Bootstrap tablice.

Ovo je jedan od najdetaljnijih jQuery dodataka, a to su samo neke od značajki koje možete dodati:

• Custom pagination.
• Sortiranje stupaca.
• Filtriranje podataka.
• Učinci animacije tablice.
• Označite da biste odabrali cijele retke.

WATable je opisan kao a Švicarski vojni nož dodataka za stol i moram se složiti s ovim opisom. Činjenica da podržava Bootstrap je samo glazura na torti.

To su neki od mojih omiljenih dodataka, ali ima ih mnogo. Na ovoj stranici možete pregledavati još više ako ste znatiželjni.

Okviri za pokretanje sustava

Bootstrap je zapravo veliki okvir jer korisnicima omogućuje prilagodite zadane HTML i CSS stilove s nekoliko razreda.

No, programeri su preuzeli zadanu knjižnicu BootStrap i dodali svoje vlastite stilove kako bi stvorili još veće okvire rade kao teme, tako da ne morate restyle Bootstrap ispočetka.

Srećom, svi su slobodni i svi se pokreću na zadanim klasama BootStrap-a.

Bootflat

Možda je najpoznatiji BootStrap okvir Bootflat UI da slijedi trend dizajna.

Radi s sve zadane značajke pokretanja, uključujući sve JavaScript komponente. Glavne razlike su više u dizajn i struktura gdje elementi stranice koriste ravne sheme boja kako bi se odmaknuli od stilova gradijenta Bootstrap-a.

Bootflat nije prekomjerno korišten jako puno, tako da ovaj okvir možete dodati na bilo koju odredišnu stranicu ili početnu stranicu da biste stvorili jedinstveni izgled za svoju web-lokaciju.

To je 100% besplatno i čak dolazi s birač boja, tako da možete pronaći ravne sheme boja koje odgovaraju vašem rasporedu.

Donesi sranje

Ovaj iznenađujuće tupi UI kit također se gradi na vrhu Bootstrap 3 knjižnice i besplatno je objavljena na GitHubu.

Get Shit Done dolazi iz tima u Creativeu gdje prodaju nekoliko vrhunskih resursa. Ovaj specifičan UI kit ima pro verziju, ali to uopće nije potrebno.

Otvorena verzija ima više nego dovoljno za svakoga i možete pogledati demo uživo da biste vidjeli kako izgleda u pregledniku.

Dizajn materijala za pokretanje

Još jedan popularan trend dizajna je Googleov dizajn materijala. To je jezik dizajna koji je izvorno izrađen za dizajnere aplikacija za Android, ali je od tada proširio na web i prikupili su mnogo podrške od UI / UX dizajnera.

Ovaj nevjerojatni Bootstrap materijalni okvir koristi značajke dizajna materijala izgradite stil prilagođenog dizajna iz Bootstrapove knjižnice.

Prema zadanim postavkama podržava sve u BootStrap 3 i trenutno se prerađuje kako bi podržao i Bootstrap 4. Možete saznati više na službenoj početnoj stranici koja ima dokumentaciju i demonstracije.

Slična knjižnica koju možete isprobati jest MDBootstrap, iako mi je ovo malo teže raditi.

Bootplus

Google je stvorio jezik dizajna materijala, ali oni također imaju svoje stilove za mnoge od svojih alata i web-aplikacija.

Bootplus oponaša stil sučelja usluge Google+, uz mnoge Googleove dokumente za pomoć, Google disk i slične web-aplikacije. Ima sve iste značajke kao i Bootstrap, uključujući rešetke, stilove izgleda, stilove elemenata i komponente JavaScripta.

Možete čak i pregledati demo na web-lokaciji da biste vidjeli razlike između Bootplusa i izvornog korisničkog sučelja Bootstrap. Za besplatan resurs, Bootplus je opsežan i savršen je za svakoga tko voli Googleove tehnike dizajna.

Alati i resursi

Na kraju, želim zaroniti u mnoge besplatne alate prilagođavanje i izgradnja Bootstrap izgleda.

Ovi alati su sve web-aplikacije, a mnoge od njih su čak otvorene s izvorima na GitHubu. Oni su napravljeni kako bi vam uštedjeli vrijeme i pomogli pri dizajniranju nevjerojatnih Bootstrap izgleda bez mnogo koda.

Uređivač uživo

Besplatno Bootstrap live editor je jedan od najboljih alata za ne-tehničke dizajnere. Ako ne znate kako se kodira, još uvijek se možete osloniti na ovog graditelja Bootstrap-a kako biste kreirali cijeli izgled od početka.

To pokreće se izravno u vašem pregledniku i čak možete odabrati unaprijed pripremljene predloške da biste započeli.

Opcije u bočnoj traci omogućuju vam dodati određene vrijednosti CSS-a ako znate neko kodiranje sučelja. Ali, možete koristiti i GUI za promjenu boja, fontova, veličina i svega što vam se sviđa.

Kada završite, klik “Nabavite temu” i možete kopirati / zalijepiti ažurirane CSS stilove u svoj projekt. Super jednostavan način za restyle Bootstrap bez potrebe za rekodiranjem svega ispočetka.

Graditelj obrazaca

Ovo je besplatno Graditelj obrasca za pokretanje sustava je alat za pregledavanje povlačenjem i ispuštanjem koji vam omogućuje da stvorite Bootstrap obrasce od nule.

Opet, to zahtijeva znanje o nultom kodiranju i imate potpuni pristup svim elementima Bootstrap 3. Jednostavno odaberite željeni element i povucite ga u lijevu kutiju. Odavde možete promijeniti sve od teksta rezerviranog mjesta do CSS klase.

Daleko najcool graditelj formi koje sam ikada vidio i 100% je besplatan!

BootSwatchr

Još jedan besplatan alat koji mi se stvarno sviđa BootSwatchr. Ona se oslanja na Bootstrap okvir i to vam omogućuje ažurirajte boje, stilove tema, i ukupni izgled stranice.

Što mi se sviđa u ovoj aplikaciji je kako ona također dolazi s besplatna galerija unaprijed dizajniranih stilova.

Dakle, možete preuzeti dizajn koji netko je već napravio ili to možete koristiti kao početnu točku za prilagođavanje vlastite teme.

Ići naprijed

Bootstrap je sve popularniji, pa je sada najbolje vrijeme uronite u taj okvir. Srećom, postoje desetine dodataka, okvira i besplatnih alata koje možete koristiti za ubrzavanje procesa obrade.

U ovom sam članku upravo pokazao vrh ledenog brijega, pa ako ne vidite ništa korisno, izađite na Google i vidite što još možete pronaći.