Bootstrap izkārtojumu tendenču, rīku un ietvaru pielāgošana

Bootstrap pašlaik ir numur viens front-end ietvars un viegli ātrākais veids, kā veidot izkārtojumus. Tas jau ir bijis apmēram gadus, un trešo pušu izstrādātāji ir pat publicējuši savus resursus tiešsaistē. Šie resursi ir no bezmaksas tēmas uz detalizēti papildinājumi un ietvari.

Šajā rakstā es vēlos dalīties nedaudzos no tiem resursus un labāko praksi izstrādātājiem, kuri vēlas iet tālāk ar Bootstrap.

Visi resursi šajā amatā ir bezmaksas, lai jūs varētu tos izmantot, taču jūs to redzat. Pat ja jūs nekad neesat izmantojis Bootstrap, jūs noteikti atradīsiet kaut ko, kas palīdzēs jums sākt darbu.

Atjaunošana ar Bootstrap

Noklusējuma Bootstrap bibliotēka tiek piegādāta ar tās savu unikālo dizainu tas izskatās fantastiski. Tas ir plaši pazīstams visā tīmeklī, un jūs varat viegli pateikt, kad tīmekļa vietne ir izmantojot tradicionālos Bootstrap elementus.

Bet jūs varat arī atjaunojiet šos elementus pats izmantot Bootstrap kodu kā izkārtojuma pamatu.

Tur ir dažādi Tu to vari izdarīt:

• Pievienojiet savu stilu, lai pārrakstītu noklusēto.
• Pielāgojiet BootStrap izeju, lai iegūtu tikai tos elementus, kurus vēlaties.
• Apvienojiet ar papildinājumiem un spraudņiem / tēmām.

Šī pēdējā iespēja ir visizplatītākā, un tas ir viens no iemesliem, kāpēc Bootstrap ir tik strauji pieaudzis.

Piešķirts, ka esmu arī milzīgs viņu līdzjutējs pielāgot rīku jo tas ir pilnīgi bez maksas un dod jums tik lielu kontroli kuras funkcijas vēlaties izmantot.

Ir daudz resursu BootStrap 3/4, ko izveidojuši trešo pušu izstrādātāji, tāpēc tas ir vieglāk nekā jebkad agrāk izveidojiet savus unikālos BootStrap izkārtojumus rakstot daudz koda.

Spraudņi un papildinājumi

Tā kā Bootstrap ir aprīkots ar masīvu JavaScript bibliotēku, tas ir pietiekami vienkārši paplašināt JavaScript funkcijas. Un izstrādātāji noteikti ir to darījuši ar saviem spraudņiem, daudzi ir pieejami bez maksas tiešsaistē.

Tie ir visi mani favorīti atbalstīt Bootstrap dabiski. Daudzi no viņiem palaist uz jQuery, tāpēc tie ir arī viegli pielāgojami, ja jūs zināt savu ceļu ap jQuery bibliotēku.

Veidlapas validators

Vispirms tas ir mans mīļākais veidlapas validācijas spraudnis, veidlapu validators. Tā darbojas uz jQuery un tā atbalsta visu frontes ietvaru: Bootstrap, Foundation, Pure, UIKit un citus.

Jūs varat manuāli pievienojiet jebkuru skaitu 51 validatoru uz jebkuru formu jūsu vietnē. Tas nozīmē, ka apmeklētājiem būs jāievēro šīs validācijas prasības, pirms tie var iesniegt saturu.

Daudzas kontaktu veidlapas izmanto šos validatorus pieprasīt darba e-pasta adreses. Bet jūs varat arī tos izmantot attēlu augšupielādei vai parolēm, gluži kaut ko, ko vēlas jūsu Bootstrap sirds.

Datetime atlasītājs

Datuma atlasītāji arī ir milzīga sāpes, lai sevi kodētu. Daudzās veidlapās vienkārši izmantojiet nolaižamās izvēlnes dienas / mēneša / gada iestatījumiem, bet jūs varat arī to izmantot Bootstrap datuma atlasītāja spraudnis lai saglabātu sev problēmu.

Tas ir pilnīgi atvērtā koda un darbojas Bootstrap 3.x bibliotēkā. Jūs to pamanīsiet atbalsta gan datumu un laiku izmantojot citu jQuery spraudni, Moment.js.

Kopumā šī bibliotēka ir fantastiska, lai aktivizētu darba datuma atlasītāju. Tas ir daudz atkarību bet par laimi, jums nav nepieciešams rakstīt daudz koda, lai to iegūtu.

Zvaigžņu vērtējumi

Šeit ir vēl viena atdzist iezīme zvaigžņu vērtējumi tīmeklī. Jūs varat pievienojiet vienu-piecu zvaigžņu vērtējumu jebkurā vietā jūsu vietnē, izmantojot Bootstrap bibliotēku JavaScript darbībām.

Kad lietotājs pārvēršas pār šīm zvaigznēm, displejs mainās neatkarīgi no vērtējuma, pamatojoties uz kursora pozīciju. Pēc tam ar vienu klikšķi lietotājs nodod balsojumu un nosaka zvaigznīti, ieskaitot puszvaigžņu vērtējumus.

Šis spraudnis noteikti ir sarežģīti izveidot jo jūs varat mainīt noklusējuma iestatījumus uzlabotas tehnoloģijas. Bet, jūs varat redzēt vienkāršu tiešraides demonstrāciju, lai novērtētu, vai šis zvaigžņu novērtējums spraudnis atbilst jūsu vietnei.

ŪDENS

Bootstrap nāk ar tās paša galda izkārtojuma stils lai parādītu tabulas datus priekšpusē. Bet, ar WATable spraudnis, Bootstrap tabulām varat pievienot visu ķekaru papildu funkcijas.

Šis ir viens no sīki izstrādātajiem jQuery spraudņiem, un tie ir tikai daži no iespējām, ko varat pievienot:

• Pielāgota lapošana.
• Kolonnas šķirošana.
• Datu filtrēšana.
• Tabulas animācijas efekti.
• Pārbaudīt visu rindu atlasi.

Ūdeņains ir aprakstīts kā a Šveices armijas galda spraudņu nazis un man ir jāpiekrīt šim aprakstam. Fakts, ka tas atbalsta Bootstrap, ir tikai apledojums uz kūka.

Tie bija daži no maniem iecienītākajiem spraudņiem, bet tur ir tik daudz citu. Jūs varat pārlūkot vēl vairāk šajā lapā, ja vēlaties.

Bootstrap sistēmas

Bootstrap faktiski ir liels ietvars, jo tas ļauj lietotājiem pielāgot noklusējuma HTML un CSS stilus ar dažām klasēm.

Bet izstrādātāji ir izmantojuši noklusējuma BootStrap bibliotēku un pievienojuši savus stilus, lai izveidotu vēl lielākus ietvarus darbojas kā tēmas, tāpēc jums nav nepieciešams restartēt Bootstrap no nulles.

Par laimi, viņi visi ir brīvi, un tie visi darbojas noklusējuma BootStrap klasēs.

Bootflat

Iespējams, ka vispazīstamākā BootStrap sistēma ir Bootflat UI to atbilst vienotas dizaina tendencei.

Tas strādā ar visas noklusējuma Bootstrap funkcijas, ieskaitot visus JavaScript komponentus. Galvenās atšķirības ir vairāk dizains un struktūra kur lapas elementi izmanto plakanas krāsu shēmas, lai izvairītos no Bootstrap gradienta stiliem.

Bootflat nav pārmērīgi izmantots ļoti daudz, lai jūs varētu pievienot šo sistēmu jebkurā izvietošanas lapā vai mājaslapā, lai izveidotu unikālu vietnes izskatu.

Tas ir 100% bezmaksas un pat nāk ar krāsu atlasītājs, lai jūs varētu atrast plakanās krāsu shēmas, kas atbilst jūsu izkārtojumam.

Get Shit Done

Tas pārsteidzoši neass UI komplekts arī balstās uz Bootstrap 3 bibliotēku, un tas tiek atbrīvots bez maksas GitHub.

Get Shit Done nāk no komandas Creative Tim, kur viņi pārdod dažus piemaksu resursus. Šim konkrētajam lietotāja interfeisa komplektam ir pro versija, bet tas vispār nav nepieciešams.

Atvērtā koda versijai ir vairāk nekā pietiekami ikvienam, un jūs varat pārbaudīt tiešraides demonstrācija lai redzētu, kā tas izskatās pārlūkprogrammā.

Bootstrap materiāla dizains

Vēl viena populāra dizaina tendence ir Google materiālais dizains. Šī ir dizaina valoda, kas sākotnēji izstrādāta Android lietotņu dizaineriem, bet kopš tā laika izplatīties tīmeklī un ieguva lielu atbalstu no UI / UX dizaineriem.

Šis neticamais Bootstrap materiāla ietvars izmanto materiālu dizaina iezīmes veidojiet pielāgotu dizaina stilu no Bootstrap bibliotēkas.

Pēc noklusējuma tā atbalsta visu programmā BootStrap 3 un pašlaik tiek pārstrādāta, lai atbalstītu arī Bootstrap 4. Jūs varat uzzināt vairāk oficiālajā mājaslapā, kurā ir dokumentācija un demo.

Līdzīga bibliotēka, kuru varat izmēģināt MDBootstrap, lai gan man tas ir nedaudz grūtāk strādāt.

Bootplus

Google izveidoja materiāla dizaina valodu, bet viņiem ir arī savi stili daudziem saviem rīkiem un tīmekļa lietotnēm.

Bootplus imitē Google+ interfeisa stilu, kopā ar daudziem Google palīdzības dokumentiem, Google disku un līdzīgām tīmekļa lietotnēm. Tam ir visas tās pašas funkcijas kā Bootstrap, tostarp režģi, izkārtojuma stili, elementu stili un JavaScript komponenti.

Jūs varat pat pārlūkot demonstrāciju vietnē, lai redzētu atšķirības starp Bootplus un sākotnējo Bootstrap UI. Par brīvu resursu Bootplus ir plašs un tas ir ideāli piemērots ikvienam, kam patīk Google dizaina metodes.

Rīki un resursi

Visbeidzot, es vēlos ienirt daudzos bezmaksas rīkos Bootstrap izkārtojumu pielāgošana un veidošana.

Šie rīki ir visas tīmekļa lietojumprogrammas, un daudzi no tiem ir pat atvērti no GitHub. Tie tiek veikti, lai ietaupītu jūsu laiku un palīdzētu veidot neticamus Bootstrap izkārtojumus bez daudz koda.

Live redaktors

Bezmaksas Bootstrap dzīvs redaktors ir viens no labākajiem instrumentiem netehniskajiem dizaineriem. Ja nezināt, kā ievadīt kodu, jūs joprojām varat paļauties uz šo Bootstrap veidotāju, lai izveidotu visu izkārtojumu no nulles.

Tā darbojas tieši jūsu pārlūkprogrammā un jūs varat pat izvēlēties no iepriekš sagatavotām veidnēm, lai sāktu darbu.

Iespējas sānjoslā ļauj jums pievienot dažas CSS vērtības ja jūs zināt kādu frontendu kodu. Taču, izmantojot GUI, varat mainīt krāsas, fontus, izmērus un daudz ko citu.

Kad esat pabeidzis, klikšķis “Saņemiet tēmu” un jūs varat kopēt / ielīmēt atjauninātos CSS stilus savā projektā. Super vienkāršs veids, kā restartēt Bootstrap bez nepieciešamības atkārtot visu no nulles.

Veidot veidotāju

Šī bezmaksas Bootstrap veido veidotāju ir velciet un nometiet pārlūka rīku kas ļauj jums izveidot Bootstrap veidlapas no nulles.

Atkal, tā prasa nulles kodēšanas zināšanas un jums ir pilnīga piekļuve visiem Bootstrap 3 elementiem. Vienkārši atlasiet vēlamo elementu un velciet to pa labi kreisajā lodziņā. No šejienes jūs varat nomainīt visu, sākot no vietas vārda teksta, uz CSS klasi.

Līdz šim stilīgākais veidotājs, ko esmu redzējis, un tas ir 100% bezmaksas!

BootSwatchr

Vēl viens bezmaksas rīks, kas man patiešām patīk BootSwatchr. Tas balstās uz Bootstrap sistēmu un ļauj jums atjaunināt krāsas, motīvus, un kopējais izkārtojums lapas.

Kas man patīk par šo lietotni, ir tas, kā tas nāk arī ar bezmaksas iepriekš izveidotu stilu galerija.

Tātad, jūs varat lejupielādēt dizainu kāds cits jau ir izdarījis vai arī varat to izmantot kā sākuma punktu, lai pielāgotu savu tēmu.

Virzīties uz priekšu

Bootstrap popularitāte pieaug, tāpēc tagad ir labākais laiks ienirt šajā sistēmā. Par laimi, ir desmitiem spraudņu, ietvaru un bezmaksas rīku, kurus varat izmantot, lai paātrinātu dev procesu.

Šajā rakstā es tikko parādīju ledusbola galu, tāpēc, ja šeit neko neredzat, tas ir noderīgi, lai saņemtu Google un skatītu, ko vēl var atrast.