„Bootstrap“ išdėstymų pritaikymas tendencijoms, įrankiams ir sistemoms

Bootstrap šiuo metu yra pirmajame etape ir lengvai greičiausias būdas sukurti išdėstymus. Jau daugelį metų trečiųjų šalių kūrėjai netgi paskelbė savo išteklius internete. Šie ištekliai priklauso nuo nemokamos temos į išsamius priedus ir sistemas.

Šiame straipsnyje norėčiau pasidalinti keletu jų išteklius ir geriausią praktiką kūrėjams, norintiems pereiti toliau su „Bootstrap“.

Visi ištekliai šiame pranešime yra nemokami, kad galėtumėte juos naudoti, tačiau, kaip matote, tinka. Net jei jūs niekada nenaudojote „Bootstrap“, jūs tikrai rasite kažką, kas padės jums pradėti.

Pakartotinis su Bootstrap

Numatytoji „Bootstrap“ biblioteka yra su ja savo unikalų dizainą tai atrodo fantastiška. Jis plačiai žinomas visame žiniatinklyje ir jūs galite lengvai pasakyti, kada yra svetainė naudojant tradicinius „Bootstrap“ elementus.

Bet jūs taip pat galite atkartokite šiuos elementus naudoti „Bootstrap“ kodą kaip savo išdėstymo pagrindą.

Yra keliais būdais tu gali tai padaryti:

• Pridėkite savo stilių lentelę, kad pakeistumėte numatytąjį.
• Tinkinkite „BootStrap“ išvestį, todėl gaunate tik norimus elementus.
• Sujunkite priedus ir papildinius / temas.

Paskutinis variantas yra labiausiai paplitęs ir tai viena iš priežasčių, kodėl „Bootstrap“ taip greitai augo.

Suteikiau, kad aš taip pat esu didžiulis jų gerbėjas pritaikyti įrankį nes tai visiškai nemokama ir suteikia jums tiek daug kontrolės kokias funkcijas norite naudoti.

Yra tonų išteklių „BootStrap 3/4“, kurį sukūrė trečiųjų šalių kūrėjai, todėl lengviau nei bet kada sukurti savo unikalų „BootStrap“ išdėstymą be daug kodo.

Įskiepiai ir priedai

Kadangi „Bootstrap“ yra su didžiule „JavaScript“ biblioteka, tai pakankamai paprasta išplėsti „JavaScript“ funkcijas. Ir kūrėjai tikrai tai padarė su savo įskiepiais, daugelis išleido nemokamai internete.

Tai yra mano mėgstamiausi palaikykite „Bootstrap“ natūraliai. Daug iš jų paleisti jQuery, todėl jie taip pat yra lengvai pritaikomi, jei žinote savo kelią aplink jQuery biblioteką.

Formos validatorius

Pirmiausia mano mėgstamiausia formos patvirtinimo įskiepis, formos patvirtinimas. Jis veikia su jQuery ir palaiko visą krūvą frontendų karkasų: „Bootstrap“, „Foundation“, „Pure“, „UIKit“ ir kt..

Tu gali rankiniu būdu pridėti bet kokį skaičių 51 patvirtinimo bet kokia forma jūsų svetainėje. Tai reiškia, kad lankytojai turės įvykdyti šiuos patvirtinimo reikalavimus prieš pateikdami turinį.

Daugelis kontaktų formų naudoja šiuos tikrintojus reikalauja darbo el. pašto adresų. Tačiau jūs taip pat galite juos naudoti vaizdų įkėlimui arba slaptažodžiams, beveik bet kokiam jūsų „Bootstrap“ širdies norui.

Datetime rinkiklis

Datos rinkėjai taip pat yra didžiulis skausmas koduoti save. Daugelyje formų tiesiog naudokite išskleidžiamuosius meniu dienos / mėnesio / metų nustatymams, bet taip pat galite tai naudoti Bootstrap datos parinkiklio įskiepis išgelbėti sau vargo.

Tai visiškai atviras ir veikia „Bootstrap 3.x“ bibliotekoje. Taip pat pastebėsite palaiko ir datą ir laikas naudojant kitą jQuery įskiepį, Moment.js.

Apskritai, ši biblioteka yra fantastiška, kad būtų aktyvus darbo datos parinkėjas. Ji turi daug priklausomybių tačiau, laimei, jums nereikės rašyti daug kodo, kad galėtumėte jį dirbti.

Žvaigždžių įvertinimai

Štai dar viena įdomi funkcija žvaigždžių įvertinimai žiniatinklyje. Tu gali pridėti „vieno-penkių“ žvaigždučių įvertinimą bet kurioje svetainės vietoje, naudodami „Bootstrap“ biblioteką „JavaScript“ elgsenai.

Kai naudotojas perkelia virš šių žvaigždžių, ekranas pasikeičia, nepaisant to, koks reitingas yra pagrįstas jų žymeklio padėtimi. Tada naudodamas vieną paspaudimą naudotojas balsuoja ir nustato žvaigždės įvertinimą, įskaitant pusę žvaigždučių įvertinimą.

Šis papildinys tikrai yra sudėtinga nustatyti nes tu gali pakeisti daugelį numatytųjų nustatymų pažangesnėms technologijoms. Tačiau galite matyti paprastą tiesioginį demonstraciją, kad įvertintumėte, ar šis žvaigždės reitingo papildinys atitinka jūsų svetainę.

APSAUGA

Bootstrap ateina su savo savo stalo išdėstymo stilius rodyti lentelės duomenis ant priekinės dalies. Bet, su WATable įskiepis, galite įtraukti visą papildomų funkcijų krūvą į savo „Bootstrap“ lenteles.

Tai vienas iš detaliausių jQuery papildinių, kurie yra tik keletas funkcijų, kurias galite pridėti:

• Pasirinktinis puslapių leidimas.
• Stulpelių rūšiavimas.
• Duomenų filtravimas.
• Lentelės animacijos efektai.
• Pažymėkite visas eilutes.

VANDENS yra apibūdinamas kaip a Šveicarijos armijos peilių stalviršiai ir turiu sutikti su šiuo aprašymu. Tai, kad ji palaiko „Bootstrap“, yra tik tortas.

Tai buvo keletas mano mėgstamiausių įskiepių, tačiau ten yra tiek daug kitų. Jei įdomu, šiame puslapyje galite naršyti dar daugiau.

Bootstrap sistemos

„Bootstrap“ iš tikrųjų yra didelė sistema, nes ji leidžia vartotojams tinkinti numatytuosius HTML ir CSS stilius su keliomis klasėmis.

Tačiau kūrėjai ėmėsi numatytosios „BootStrap“ bibliotekos ir pridėjo savo stilius, kad sukurtų dar didesnius rėmus dirbti kaip temos, taigi jums nereikia restilituoti nuo nulio.

Laimei, jie visi yra laisvi ir visi jie veikia pagal numatytąsias „BootStrap“ klases.

Bootflat

Galbūt labiausiai žinoma „BootStrap“ sistema yra Bootflat UI kad atitinka vienodo dizaino tendenciją.

Jis veikia visos numatytosios „Bootstrap“ funkcijos, įskaitant visus „JavaScript“ komponentus. Pagrindiniai skirtumai yra daugiau dizainas ir struktūra kur puslapių elementai naudoja plokščias spalvų schemas, kad pereitų nuo „Bootstrap“ gradiento stilių.

Bootflat nebuvo naudojamas per daug labai daug, todėl galite įtraukti šią sistemą bet kuriame nukreipimo puslapyje arba pagrindiniame puslapyje, kad sukurtumėte unikalią savo svetainės išvaizdą.

Tai 100% nemokama ir netgi ateina su spalvų parinkiklis, todėl galite rasti plokščių spalvų schemas, kad atitiktų jūsų išdėstymą.

Get Shit Done

Tai stebėtinai bukas UI rinkinys taip pat remiasi „Bootstrap 3“ bibliotekos viršuje, ir jis išleistas nemokamai „GitHub“.

Get Shit Done ateina iš „Creative Tim“ komandos, kurioje jie parduoda keletą priemokų. Šis konkretus UI rinkinys turi pro versiją, tačiau jo nereikia.

Atviro kodo versija turi daugiau nei pakankamai visiems, ir jūs galite patikrinti gyva demonstracija norėdami pamatyti, kaip jis atrodo naršyklėje.

Bootstrap medžiagos dizainas

Kita populiari dizaino tendencija „Google“ medžiagų dizainas. Tai yra dizaino kalba, iš pradžių sukurta „Android“ programų kūrėjams, tačiau nuo šiol skleisti į internetą ir surinko daug paramos iš UI / UX dizainerių.

Ši neįtikėtina „Bootstrap“ medžiagos sistema naudoja medžiagų dizaino savybes sukurti individualų dizaino stilių iš „Bootstrap“ bibliotekos.

Pagal numatytuosius nustatymus jis palaiko viską „BootStrap 3“ ir šiuo metu yra pertvarkytas taip pat palaikyti „Bootstrap 4“. Daugiau galite sužinoti oficialioje pagrindiniame puslapyje, kuriame yra dokumentacija ir demonstraciniai dokumentai.

Panaši biblioteka, kurią galite pabandyti MDBootstrap, nors aš manau, kad tai šiek tiek sunkiau dirbti.

Bootplus

„Google“ sukūrė medžiagos dizaino kalbą, bet taip pat turi savo stilių daugeliui jų įrankių ir žiniatinklio programų.

„Bootplus“ imituoja „Google+“ sąsajos stilių, kartu su daugeliu „Google“ pagalbos dokumentų, „Google“ diskų ir panašių žiniatinklio programų. Ji turi visas tas pačias funkcijas kaip „Bootstrap“, įskaitant tinklus, išdėstymo stilius, elementų stilius ir „JavaScript“ komponentus.

Jūs netgi galite naršyti demo svetainėje, kad pamatytumėte skirtumai tarp „Bootplus“ ir originalios „Bootstrap“ vartotojo sąsajos. Laisvas šaltinis „Bootplus“ yra platus ir puikiai tinka visiems, kurie mėgsta „Google“ dizaino techniką.

Įrankiai ir ištekliai

Galiausiai noriu pasinerti į daugybę nemokamų įrankių „Bootstrap“ išdėstymų pritaikymas ir kūrimas.

Šios priemonės yra visos žiniatinklio programos ir daugelis jų netgi yra atviros iš „GitHub“. Jie padėjo jums sutaupyti laiko ir padėti jums sukurti neįtikėtinus „Bootstrap“ išdėstymus be daug kodo.

Tiesioginis redaktorius

Laisvas „Bootstrap“ gyvas redaktorius yra vienas iš geriausių įrankių netechniniams projektuotojams. Jei nežinote, kaip koduoti, vis tiek galite pasikliauti šiuo „Bootstrap“ kūrėju, kad sukurtumėte visą išdėstymą nuo nulio.

Tai veikia jūsų naršyklėje ir netgi galite pasirinkti iš iš anksto paruoštų šablonų, kad pradėtumėte.

Šoninės juostos parinktys leidžia jums pridėti tam tikras CSS reikšmes jei žinote tam tikrą priekinio kodo kodavimą. Tačiau taip pat galite naudoti GUI, kad pakeistumėte spalvas, šriftus, dydžius ir beveik viską, ką norite.

Kai baigsite, spustelėkite “Gaukite temą” ir galite kopijuoti / įklijuoti atnaujintus CSS stilius į savo projektą. Labai lengvas būdas atkurti „Bootstrap“, nereikalaujant viską iš naujo.

Forma statytojas

Tai nemokama „Bootstrap“ formuotojas yra „drag-and-drop“ naršyklės įrankis kuri leidžia sukurti „Bootstrap“ formas nuo nulio.

Vėlgi, tai reikalauja nulinio kodavimo žinių ir jūs turite visišką prieigą prie visų „Bootstrap 3“ elementų. Tiesiog pasirinkite norimą elementą ir vilkite jį tiesiai į kairįjį langelį. Iš čia galite viską keisti nuo vietovės teksto iki CSS klasės.

Iki šiol geriausias statybininkas, kurį aš kada nors mačiau, ir tai yra 100% nemokama!

„BootSwatchr“

Kitas laisvas įrankis, kurį aš tikrai mėgstu „BootSwatchr“. Jis remiasi „Bootstrap“ sistema ir leidžia jums atnaujinti spalvas, temų stilius, ir bendras išdėstymas puslapio.

Ką man patinka apie šią programą, kaip ji taip pat yra su nemokama iš anksto suprojektuotų stilių galerija.

Taigi, galite atsisiųsti dizainą kažkas jau padarė arba galite tai naudoti kaip atspirties tašką savo temai pritaikyti.

Judėti pirmyn

„Bootstrap“ populiarėja, todėl dabar yra geriausias laikas į šią sistemą. Laimei, yra dešimtys įskiepių, sistemų ir nemokamų įrankių, kuriais galite paspartinti „dev“ procesą.

Šiame straipsnyje aš tiesiog parodiau ledkalnio viršūnę, taigi, jei čia nieko nematote, naudinga išeiti į „Google“ ir pamatyti, ką dar galite rasti.