Az öt legfontosabb Bootstrap-alternatíva

A Bootstrap mindenütt megtalálható, de nem mindig a megfelelő eszköz a feladathoz. Íme néhány nagyszerű alternatíva!


Ha manapság véletlenszerűen ellenőrzi a weboldal elülső oldalának forráskódját, akkor valószínű, hogy a Bootstrap alatta található. Valamennyien annyira hozzászoktunk az olyan fogalmakhoz, mint a konténerfolyadék, sor, col-sm-6 stb., Hogy nehéz elképzelni, hogy bármilyen más előtér-fejlesztési stílus lehetséges. És tehát amikor ki kell építeni a következő projektet, tudattalanul elérjük a Bootstrapot. Ugyanakkor a népszerűség nem teszi a Bootstrap-ot megfelelővé minden projekthez és igényhez.

Valójában, az igazán sovány előtárakhoz az összes berakodása Bootstrap CSS és a JS jelentős duzzadást okozhat.

Ennek a cikknek két célja van:

  1. Adjon meg nem Bootstrap-szerű élő alternatívákat a Bootstrap-hez
  2. Magyarázza el, miért érdemes fontolóra venni ezeket az alternatívákat a Bootstrap alatt

Úgy gondolom, hogy a magyarázó rész valóban fontos, mert az emberek a legtöbb esetben még csak nem is veszik észre, hogy problémájuk van, vagy hogy a Bootstrap felvételével megnehezítik munkájukat. Végül, kérjük, vegye figyelembe, hogy ez semmilyen módon nem indítja el a Bootstrap üzenetet. Szeretem a Bootstrap 4-et, és amikor csak tudok, használom. De akkor egyéni fejlesztő vagyok, akinek gondolkodnia kell a legnépszerűbb megoldás alkalmazásáról; szintén nem vagyok önmagában felhasználói felület fejlesztő, ezért nem aggódok túl sok dolog miatt, amikor felépítem a felületeimet..

És ezzel nézzük meg, milyen alternatíváink vannak.

Flexbox rács

Gondolkodj csak egy percig: a Bootstrap használatának legnagyobb oka, és továbbra is használja, a rácsrendszere. Persze, némi megszokni kellett a sor, a col-md-6 stb. Osztályokhoz, de most már második természet, ha egy sor, oszlop, eltolás stb. Elrendezésére gondolunk..

És ha őszinte vagy magaddal, akkor észreveszi, hogy a Bootstrap minden másja kissé fárasztó munka. Rengeteg osztály emlékezik arra, hogy űrlapokat, navigációt, gombokat, táblákat vagy bármi mást végez. Ha olyan vagy, mint én, még mindig nem szokott hozzá az osztályokhoz és azokhoz, amit csinálnak, és gyakran a Bootstrap programot csak a rácshoz használja, és az összes többi CSS-t magának írja.

Ha igen, akkor sokkal jobban meg tudod csinálni Flexbox rács.

A Flexbox rács, ahogy a neve is sugallja, egy CSS alapú rácsrendszer flexbox tulajdonságait. A CSS technikával ellentétben azonban az összes bonyolultság szépen kivonul, így csak az elemek elhelyezésére összpontosít, a kívánt módon. A legjobb az egészben, ha az összes kód- és osztálynév utánozza azt, amit a Bootstrap 4-ben szeretne, ami azt jelenti, hogy a két eszköz közötti váltáshoz nulla mentális súrlódás szükséges. Például az alábbiak szerint néz ki a „tér körül” kód a Flexbox rácsban:

körül

körül

körül

Ennek a rácsrendszernek a tömörített CSS-fájlja csupán 10,7 KB, így több száz KB-t takaríthat meg a végleges letöltési méretben. Manapság a Flexbox rács a kedvencem, mivel nem akarok harcolni a Bootstrap ellen, hogy teljes mértékben testreszabjam. Szeretek vanília elemekkel kezdeni, és magam stílusolni őket, a Flexbox rácsot használva, bárhova kell.

Tanul Flexbox itt, online.

PureCSS

Nem lenne jó, ha a Bootstrap modulokra oszlik, és csak a szükséges modult importálhatja?

Jól, PureCSS tovább haladt, és éppen ezt megtette – egy modulkészlet, amely a weboldal különféle funkcionális területeire terjed ki. Választhat egy vagy az összes letöltésére, de a letöltési méret nem haladja meg a 3,7 KB-t!

Igen, ezt olvastam jól.

Az összes modul, összekapcsolva és beillesztve, 3,7 KB, bár külön-külön többet jelent. A rácsmodul mindössze 0,8 KB, míg az alapmodul 1,0 KB. A PureCSS mögötti csapat azt mondja, hogy azt teljes egészében a mobil eszközökre építették, így a CSS minden sorát a hatékonyság érdekében alaposan megvizsgálták, mielőtt beillesztették volna..

Tegyük fel, hogy csak a rács és az űrlapok modulra van szüksége. Nos, töltse le csak ezt a kettőt (az alapmodullal együtt), és kevesebb, mint 3,4 KB-val készül el! Ha nem kívánja használni őket, akkor nem kell belefoglalnia a Gombok, Táblák és Menük modulok CSS-be.

A PureCSS-nek azonban vannak osztályai, és a kapott kód nem utánozza azt a Bootstrap-ot, amelybe Ön valószínűleg hozzászokott:

Lorem Ipsum

Dolor Sit Amet

Nyilvánvaló munkaerő

Praesent consectetur

Észre fogja venni, hogy már nincs 12 oszlopos rács. A PureCSS rácsrendszerével meghatározza, hogy mekkora szélességet kell az oszlopnak megtennie. Tehát a pure-u-lg-1-4 azt jelenti, hogy ennek az elemnek a nagy képernyőkön a rendelkezésre álló szélesség 1/4-át vagy 25% -át kell elfoglalnia. Szélességek többszörös 1/5-ös szintén rendelkezésre állnak.

Mindent összevetve, a PureCSS egy felszabadító és csodálatos CSS eszköz (keretrendszer?), Amelyet igény szerint kiválaszthat. Ugyanakkor meglehetősen sok bevételi és tanulási görbével jár, mivel meg kell tanulnia egy új (kissé eltérő) működési módot..

A PureCSS-nek is vannak saját osztályai és alapértelmezett stílusa, tehát abban, hogy nem különbözik túlságosan a Bootstrap-tól.

Zimit

Az Zimit A keretrendszer egy furcsa-man-out ebben a listában. Igen, ez a felhasználói felületek létrehozásának keretrendszere, de célja az egyes felhasználói felületek típusai: maketek.

Vannak idők, amikor fejlesztenie kell a termék működésének bemutatására szolgáló felületet. Ideális módja ennek természetesen az, ha egy felhasználói felület tervezőjét / fejlesztőjét bevonják, és elkészítik a maketeket az egyik fejlett drótkeretező eszközön (szem előtt tartják a Moqups, Blasmic stb.). Az oldalak pixelre tökéletesek, a színséma elegáns és jól megválasztott, és az oldalak nyitva állnak a részvételhez, áttekintésekhez, megjegyzésekhez stb..

De a való élet nem ideális, és gyakran te vagy az egyetlen ember, aki munkát végez, és minden kalapot viselnie kell, és a munkát elvégeznie kell. Ilyenkor olyan keretet szeretne, amely:

  • Kódolást tesz lehetővé HTML / CSS-ben
  • Könnyű
  • Alapvető alkatrészek széles skálájával rendelkezik
  • Megfelelő és következetes stílusnyelve van
  • Ha lehetséges, hasonlít a drótváz kialakításának „szürkés” hangjára
  • Könnyen megtanulható
  • Van beépített CSS előfeldolgozó

Zimit ezeket a négyzeteket jelöli. Csak 84 KB méretű, és széles választékát kínálja az alkatrészek közül. Íme néhány példa, amelyeket igazán vonzónak találtam, mivel a saját kódolása sok időt vesz igénybe.

Fanézet

Kenyérmorzsa

Lapok

Sokkal többféle finomságot lehet felfedezni. Nézd meg őket itt.

Nézzük meg, hogy néz ki a kód. Így használhatja a rácsrendszert Zimitben:

4 oszlop
4 oszlop

4 oszlop
4 oszlop

A „c” itt az „oszlop”, azaz a „c4” négy olyan egységet jelent, amely négy egységet tartalmaz (a rács 12 méretű, akárcsak a Bootstrapé). Nagyon hasonló a Bootstraphez, és véleményem szerint nagyon intuitív.

Mindent egybevetve, a Zimit egy komplett és egyszerű keret az érzékeny felhasználói felület prototípusainak fejlesztéséhez, amelyek gyorsan reagálnak és jól néznek ki. Sokkal jobb, mint a Bootstrap (amikor a prototipizálásról van szó), mert a Bootstrap egy sokkal nagyobb letöltésű, és az eredményül kapott kialakítás nagyon jó.

HTML KickStart

A legtöbb épített projektben a sebesség kritikus. A webfejlesztés leggyorsabb akadálya a front-end rész, és a front-end fejlesztés legnagyobb „késleltetője” az elegáns megjelenésű, interaktív alkotóelemek kódolásának szükségessége. Mivel az összetevők viselkedésének sokféle módja van, és számos képernyőméret is van az irányításhoz, az összetevők kódolása és kezelése rémálommá válhat a fejlesztő számára.

HTML KickStart alternatívát kínál.

Egyszerűen fogalmazva; ez egy igazán karcsú alkatrész gyűjtemény, amelyet egyszerűen belevethet a projektekbe, és drasztikusan lerövidítheti a fejlesztési időt. Íme néhány szép összetevő, amelyeket találtam:

Ledob

gombok

Lapok (középen és ikonokkal)

bekövetkezése

Ha tetszik a Bootstrap az a tény miatt, hogy kész megoldással rendelkezik minden általános webdizájn-problémára, de Ön az Anyagtervezési stílus rajongója, akkor próbálja ki bekövetkezése.

A materializáció többnyire olyan, mint a Bootstrap – 12 pontos rácsrendszer, eltolások és olyan ismert elemek, mint az űrlapok, kártyák stb. Ennek ellenére vannak bizonyos finomságok, amelyek vonzóak lehetnek sok.

Ellenütemű

A Materialize CSS push / pull funkciója lehetővé teszi az oszlopok átrendezését. Ez emlékeztet az új CSS Grid szabványra, ahol az elrendezés eltér az elemek sorrendjétől.

Ez az oszlop széles, 7 oszlop széles, jobbra tolva, öt oszloppal.
5 oszlop széles, 7 oszlop balra húzva.

Ennek eredménye a következő:

Észre fogja venni, hogy az oszlopok helyet cseréltek, ami valószínűleg elérhetetlen a hagyományos Bootstrap-alapú CSS-ben.

JavaScript finomságok

Számos JavaScript-funkció és effektus létezik, amelyek a Materialize-hez kapcsolódnak. Az eszköztipp, a pirítós (Android-szerű rövid távú értesítések), a Parallex, a Pushpin stb. Ezek közül néhány. Az egyik igazán csodálatos hatás, amelyet tetszett, a FeatureDiscovery, amely alapvetően lehetővé teszi, hogy kiemeljen egy elemet az oldalon egy eseménynél (mondjuk, gombnyomás), hogy felhívja a felhasználó figyelmét erre az elemre. Nehéz teljes szavakkal leírni, ezért látogasson el a https://materializecss.com/feature-discovery.html oldalra, hogy megnézze, mire gondolok..

Mindent összevetve, a Materialize kiváló alternatíva a Bootstrap számára, vagy azok számára, akik egy teljes funkcionalitású Material CSS keretrendszert akarnak alkalmazni..

Következtetés

A Bootstrap szinonimája az érzékeny tervezésnek. A Bootstrap népszerűsítette a „mobil első tervezés” kifejezést, és megmutatta, hogyan lehet ezt megtenni. De míg a Bootstrap a munkát legtöbbször elvégzi, a munka elvégzése nem mindig elég. Ha úgy érzi, hogy a Bootstrap korlátozza Önt, és hogy az Ön igényei különlegesek, akkor az itt felsorolt ​​egyik lehetőség segít. ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map