Vaihtoehtoja Bootstrapille: työkalut sovellusten ja verkkosivustojen suunnitteluun

Nykyään minkä tahansa verkkosivuston ykkösvaatimus on toimia oikein kaikentyyppisillä laitteilla (erityisesti mobiililaitteilla). Tätä tarkoitusta varten Bootstrap on ollut yksi suosituimmista etupään kehyksistä, ja se on esiintynyt monien kehittäjien huippulistoilla. verkkosivujen suunnitteluun optimoitu mobile.

Vaikka Bootstrap on epäilemättä hämmästyttävä siinä, mitä se tekee, on joitain muita kehyksiä, jotka ovat yhtä hyviä ja saattavat sopia tarpeisiisi paremmin. Tässä artikkelissa luetellaan 10 Bootstrap vaihtoehdot jotka saattavat sopia sinulle paremmin erilaisissa skenaarioissa.

Kuten kaikki tiedätte, matkapuhelimien ja tablettien kaltaisissa laitteissa on pienempi näyttökoko ja rajallinen muisti verrattuna pöytätietokoneisiin. Siksi ei ole aina hyvä vaihtoehto sisällyttää puitteet Täydellinen Bootstrap koodissasi sen suuren tiedostokoon vuoksi.

Sen sijaan voit käyttää kirjastoa, jonka jalanjälki on pienempi kuin Bootstrap, mutta joka tarjoaa kaikki tarvittavat toiminnot. On monia muita syitä, jotka voivat saada sinut katsomaan joitakin Bootstrap-vaihtoehtoja. Aloitetaan siis alla olevista.

Ehkä saatat olla kiinnostunut: Mikä on WampServer. Käyttötavat, ominaisuudet, mielipiteet, hinnat

1. Säätiö

Maailman edistynein responsiivinen käyttöliittymä. Luo nopeasti prototyyppejä ja tuotantokoodia sivustoille, jotka toimivat kaikentyyppisillä laitteilla. Säätiö on a frontend-kehysperhe joiden avulla on helppo luoda reagoivia verkkosivustoja, sovelluksia ja sähköposteja mille tahansa laitteelle.

Se on yksi täydellisimmistä käyttöliittymäkehyksistä, ja Se on vielä täydellisempi kuin Bootstrap. Kaikki, mitä tarvitset sovellusten määrittämiseen, löytyy Foundation-kehyksestä: a mobiili suunnittelujärjestelmä jossa on muun muassa JS-laajennuksia, räätälöintiä, grid-järjestelmää, typografiaa, käyttöliittymäkomponentteja.

Sähköposteille on jopa omistettu koko kehys (mikä on periaatteessa ennenkuulumatonta käyttöliittymän ekosysteemissä). Tämä kehys vaikeuttaa Bootstrapia. Kehittäjät ihailevat sitä sen vertaansa vailla olevan joustavuuden vuoksi.

Etu

• Pohja on helposti räätälöitävissä erityisvaatimusten mukaan.
• Saatavilla on ammatillinen koulutus ja sertifiointi.
• Se tarjoaa vertaansa vailla olevan (erillisen) käyttöliittymäkehyksen sähköposteihin kohdistamiseen.
• Yhteensopiva Ruby on Rails kanssa.
• Tuki oikealta vasemmalle luettaville kielille.

Haitat

• Sillä on jyrkkä oppimiskäyrä.
• Käyttää itsepäistä CSS-esiprosessoria (Sass).
• Se on vähän raskas IO-jalanjäljen suhteen.

Ingresa aqui.

2. Bulma

Bulma on toinen parhaista Bootstrap-vaihtoehdoista. Tämä on CSS-kehys vahvasti Bootstrapin inspiroima ja perustuu moderniin Flexible Box -moduuliin, joka tunnetaan yleisesti nimellä flexbox.

Tämä kehys sisältää kaikki yleisimmät käyttöliittymäelementit, jotka voit löytää Bootstrapista (ilman JS-laajennuksia): mobiiliresponsiivinen asettelu, normalisoitu CSS, muokattavissa oleva teema, perustypografia, apu-CSS-luokat, yleiset käyttöliittymäkomponentit, kuten valikot, kortit jne.

Etu

• Super yksinkertainen verkkojärjestelmä.
• 100 % reagoiva (enimmäkseen mobiililaitteissa).
• Modulaarinen (sisältää vain sen, mitä tarvitset)

Haitat

• Grid-järjestelmä perustuu flexboxiin, joka ei ole ihanteellinen tekniikka kaksiulotteisiin asetteluihin (flexbox on parempi lineaarisiin asetteluihin).

Ingresa aqui.

3. Tailwind CSS

Tailwind CSS on erittäin muokattavissa oleva matalan tason CSS-kehys, joka on rakennettu kokonaan Bootstrapin tarjoaman käyttövalmiin apuohjelman ympärille. Apuohjelmien avulla voit yhdistää ja yhdistää monia CSS-ominaisuuksia missä tahansa ilman, että sinun tarvitsee välttämättä turvautua upotettuihin tyyleihin.

Etu

• Erittäin muokattavissa, koska se on rakennettu hyödyllisyysluokkien ympärille.
• Barebone-kehys tarkoittaa vähemmän tavaraa CSS-paketissa samalla tuloksella.
• Komponenttiyhteensopiva. Voit myös helposti luoda omia komponentteja.

Haitat

• Palveluluokkien käyttö on erittäin kiistanalaista. Jotkut tiimit käyttävät mieluummin semanttista CSS:ää hyödyllisyysluokkien sijaan, mikä tekee hyväksymisestä sinänsä menetystä.
• Ei valmiita komponentteja. Sinun täytyy etsiä niitä tai luoda ne itse.

Ingresa aqui.

4.HTML5 Boilerplate

HTML5 Boilerplate ei ole kehys, vaan HTML5-, CSS3- ja JavaScript-käyttöliittymämalli, joka on syntynyt satojen kehittäjien yhteisestä tiedosta. Sitä käytetään minkä tahansa tyyppisten verkkosivujen suunnitteluun ja auttaa luomaan nopeita, kestäviä ja reagoivia verkkosivustoja tai verkkosovelluksia.

Periaatteessa sen mukana tulee kaikki tarvittavat rakennuspalikat yhdessä paketissa yksinkertaisen tai monimutkaisen verkkosivuston suunnitteluun, kuten komentosarjakieli, ohjelmointi, muun muassa oletustulostustyylejä.

Etu

• HTML5 valmis.
• Suunniteltu progressiivista parantamista silmällä pitäen.
• Sisältää paketin, joka tarjoaa tähän mennessä parhaan ja nykyaikaisimman kokemuksen.
• Integroitu tuki web-sivun tulostamiseen.
• Kattava, helposti ymmärrettävä dokumentaatio jokaiselle koodiriville.

Haitat

• Sen uusin versio on poistanut täyden tuen vanhemmille verkkoselaimille (IE11 tai vähemmän), vaikka on versioita, jotka tukevat näitä selaimia.

Ingresa aqui.

5. Cirrus

Cirrus on yksi suosituimmista vaihtoehdoista Bootstrapille, koska se on a Täydellinen ja täysin reagoiva CSS-kehys kauniilla säätimillä ja yksinkertaisella rakenteella. Voit integroida Cirrusin mihin tahansa olemassa olevaan malliin tai käyttää sitä seuraavan projektin käynnistämiseen.

Mukana kaksi pakettivaihtoehtoa– "Ydin"-paketti yksinkertaisella tyylillä ja toiminnallisuudella sekä "ext"-paketti, joka laajentaa "ytimen" komponenttien osajoukolla nopeaa prototyyppien luomista varten.

Etu

• Yksinkertaistetun responsiivisen suunnittelun rajapisteet (mobiili, tabletti ja pöytätietokone)
• Tarjoaa kaksi modernia vaihtoehtoa asettelulle: flexbox ja grid
• Cirrus on avoimen lähdekoodin ja vapaasti käytettävä henkilökohtaisiin tai kaupallisiin verkkoprojekteihin.
• Yhteentoimivuus Vue.js:n kanssa (kolmannen osapuolen paketin kautta).

Haitat

• Rajoitetut käyttöluokat.
• Ei JS-laajennuksia, joten sinun on koodattava ne itse tarvittaessa.
• Sillä on vain 5 yhteistyökumppania ja pieni käyttäjäyhteisö.

Ingresa aqui.

6. Metro-käyttöliittymä

Metro UI on käyttöliittymäkehys, joka tuo Metron (suunnittelukielen) käsitteen Windows (SO) verkkoon. Se on täynnä yli 100 käyttöliittymäkomponenttia, joiden avulla voit suunnitella minkä tahansa tyyppisiä verkkosivustoja.

Tarjoaa kaiken, mitä Bootstrap tekee, melkein kopioksi (ainakin mitä tulee tyyliin). Metro UI:n mukana tulee myös M4Q-niminen JS-kirjasto, joka periaatteessa korvaa jQueryn ja jonka päälle on rakennettu monia JS-pohjaisia ​​toimintoja.

Etu

• Se on melkein kuin käyttäisit Bootstrapia toisenlaisen, suppean JavaScript-ytimen kanssa.
• Integroitu kansainvälistymisen tuki (i18n).
• Yhteentoimiva tärkeimpien JS-kehysten (Angular, React ja Vue) kanssa.

Haitat

• Dokumentaatio on sekava eikä kovin tiukka.

Ingresa aqui.

7. UIKit

UIKit, toinen Bootstrapin tärkeistä vaihtoehdoista, on responsiivinen modulaarinen käyttöliittymä, joka on suunniteltu kevyeksi ja helppokäyttöiseksi. Se luotiin pikselitäydellisten web-suunnittelujen tekemiseen mobiili- ja työpöytänäytöille.

Sisältää monia Käyttöliittymäkomponentit, jotka toimivat kuten Bootstrap, joka voidaan yhdistää HTML- tai JS-koodilla. Mukana on jopa uusia komponentteja, kuten Totop, Thumbnav, mm.

Etu

• CSS-esikäsittely yhteentoimiva Lessin tai Sassin kanssa.
• Kielen tuki.
• Sisäänrakennettu kuvakekirjasto.

Haitat

• Hyödyllisyysluokat ovat hyvin rajalliset Bootstrapiin verrattuna.
• Yli 600 avointa numeroa Githubissa edustaa keltaista lippua. Voi olla liian aikaista käyttää tätä kehystä yritystason sovelluksessa.

Ingresa aqui.

8. Materialisoi

Materialisoinnin on tietysti oltava myös Bootstrapin vaihtoehtojen joukossa. Se on moderni ja reagoiva CSS-kehys, joka perustuu materiaalisuunnitteluun. Google. Tämän vuoksi kehys sisältää komponentteja ja animaatioita, jotka antavat enemmän palautetta käyttäjille.

Käyttöliittymäkomponentit ovat hyvin samanlaisia ​​kuin Bootstrap (mukaan lukien JS-laajennukset), mutta ne näyttävät ja tuntuvat kevyemmiltä, ​​mikä tekee projekteista mukavampaa katsoa ja käyttää.

On olemassa erityisiä kehyslaajennuksia, jotka käsittelevät mobiilikohtaisia ​​käyttöliittymäongelmia, kuten vetämistä ja sivuvalikon käyttöä.

Etu

Laajennettavissa Sass-esikäsittelyllä

• Yhteensopiva Ruby on Rails kanssa.
• Tietyt laajennukset UX:n käsittelemiseksi mobiililaitteissa.
• Hienostunut animaatio- ja siirtymäjärjestelmä tarjoaa paremman käyttökokemuksen.
• Materialize-kehittäjät ovat suunnitelleet premium-teemoja, joita voi ostaa heidän verkkosivuiltaan. Olemassa olevat teemat lisäävät prototyyppien nopeutta.

Haitat

• Materialize-kehyksellä on suuri yhteisö, mutta sillä on edelleen yli 700 avointa ongelmaa, joihin on puututtava.

Ingresa aqui.

Ehkä haluat tietää: 8 parasta ohjelmaa verkkosivujen luomiseen

9. elementti

Elementti on joukko Uudelleenkäytettävät ja valmiiksi rakennetut Vue.js-komponentit. Periaatteet, kuten johdonmukaisuus, palaute, tehokkuus ja hallittavuus, ohjaavat tämän viitekehyksen taustalla olevia suunnittelupäätöksiä.

Jokaisen elementtipohjaisen projektin käyttöliittymäkokonaisuuden on oltava Vue.js-komponentti, jopa rakennuspalikat, kuten asettelut ja ruudukot. Tyylin mukauttaminen tehdään Scss-esikäsittelyllä.

Etu

• Muokattavat teemat.
• Sillä on erinomainen yhteisö.
• Atom/Visual Studio Code -integraatio.
• Axure rautalanka/luonnos integraatio.
• Laravel Starter Kit.
• Integroitu kansainvälistymisen tuki (i18n).
• Element jaetaan MIT-lisenssillä, jonka avulla voit käyttää sen koodia haluamallasi tavalla.

Haitat

• Sitä voidaan käyttää vain Vue.js-ympäristössä, vaikka Angular- ja React-versiot eivät välttämättä ole yhtä täydellisiä kuin alkuperäinen.
• Ei ensiluokkaista mobiilitukea.
• Siinä on edelleen yli 1000 avointa ongelmaa, jotka on korjattava. Yhteisö on valtava, mutta panokset ovat vähentyneet.
• Viitekehys synnyttää monenlaisia ​​riippuvuuksia, joilla voi olla moninkertaistava vaikutus ongelmien määrään.

Ingresa aqui.

10. Onsen

Onsen UI on käyttöliittymän kehityskehys hybridimobiilisovelluksiin (Cordova ja muut) ja web (PWA). Sen avulla kehittäjät voivat luoda mobiilisovelluksia käyttämällä verkkoteknologioita, kuten CSS, HTML5 ja JavaScript.

Se tarjoaa kaikki peruskäyttöliittymäkomponentit, joita tarvitaan mobiilisovelluksen käyttökokemukseen. Siinä on sidokset jQuerylle, AngularJS:lle, Angularille, Reactille ja Vue.js:lle.

Etu

• Muokattavat teemat.
• Laaja valikoima käyttöliittymäkomponentteja, jotka on suunniteltu erityisesti mobiilisovelluksiin.
• Anna loppukäyttäjille natiivikokemus, jota he odottavat laitteissaan olevilta sovelluksilta.
• CSS on kirjoitettu Cssnextillä, mikä tarkoittaa, että kaikki uusi CSS-syntaksi on käytettävissä.
• Se perustuu natiiviverkkokomponentteihin ja tarjoaa sidoksia AngularJS:lle, Angular 2:lle, Reactille ja Vue.js:lle.

Haitat

• Sen mukana ei tule ilmaista debuggeria, mikä tarkoittaa, että kehittäjien on tarkasteltava jokaista koodiriviä erikseen.

Ingresa aqui.

Kuinka poistaa Bootstrap

Jos haluat päästä eroon ohjelmasta käyttääksesi jotakin näytetyistä vaihtoehdoista, avaa Ohjelmat ja ominaisuudet. Toimenpide riippuu käyttämästäsi järjestelmästä. Kiinnitä huomiota:

Windows Vistalle

• Vaihe 1: ve a Kotisivu, paikka poista ohjelma osiossa Etsi ohjelmia ja tiedostot ja valitse sitten tulos ja napsauta sitä.

Windows 8, Windows 8.1 ja Windows 10 käyttöjärjestelmille

• Vaihe 1: ve a WinX ja pidä näppäimiä painettuna Windows ja X samaan aikaan. Napsauta sitten Ohjelmat ja ominaisuudet.

• Vaihe 2: Napauta Bootstrap (jonka pitäisi olla luettelossa), napsauta sitä ja napauta sitten kohtaa, jossa lukee uninstall aloittaaksesi asennuksen poistamisen.

Sinun täytyy katsoa: 7 parasta ohjelmaa yrittäjille

Pensamientos finales

Vaihtoehtoja on monia kun on kyse responsiivisen verkkosovelluksen suunnittelusta. Edellä mainitut vaihtoehdot Bootstrapille sopivat erilaisiin skenaarioihin. Siksi sinun tulee valita viisaasti, saavuttaako kehys mitä tarvitset vai ei.

Joskus Bootstrapin lisääminen pieneen verkkomalliin ei ehkä ole oikea valinta, koska se lisää paljon ylimääräistä "painoa", joka voi hidastaa yksinkertaista verkkosivustoasi.

Yksi huomioitava seikka on, että Google "ei pidä" verkkosivustoista, joiden latautuminen kestää yli 3 sekuntia. Lisäksi se alentaa verkkosivustosi yleistä sijoitusta. Siksi sinun tulee käyttää jonkin aikaa sen valitsemiseen CSS-kehys sopii erityistarpeisiisi.