Bootstrap vs Fund – Bulma vs Semantic vs UIkit

Son bir neçə ildə son istifadəçilərin gəzən vərdişləri müxtəlif cihazları əhatə etmək üçün inkişaf etmişdir. Nəticədə, cavab verən veb dizayn bu gün hazırlanan hər veb sayt üçün zərurətdir. Bununla birlikdə, hər bir layihə üçün sıfırdan cavab verən bir dizayn yaratmaq çox vaxt tələb edə bilər. Həyatını asanlaşdıran əla bir həll, CSS çərçivəsini istifadə etməkdir. Belə bir çərçivə sizin üçün əsas cavab dizayn dizayn prinsiplərinə diqqət yetirir. Bu müqayisədə orada olan ən yaxşı CSS çərçivələrinə nəzər salırıq və ən yaxşısını görürük. Budur Vətəndaş vs Bulant vs Semantik və UIkit.


Bu yazı növbəti layihəniz üçün düzgün CSS çərçivəsini seçməyinizə istiqamət verir. Güman edirəm ki, cəbhə texnologiyaları və cavabdeh veb dizayn prinsipləri barədə əsas bilginiz var. Hər CSS çərçivəsi Bootstrap vs Fund vs Bulma vs Semantic vs UIkit-in müxtəlif aspektlərini əhatə etmək üçün sınaqdan keçirilir. Hər çərçivənin mənşəyini və onun üstün xüsusiyyətlərini əhatə edirəm. Hər çərçivə üçün tez bir başlanğıc bələdçisini də verirəm.

Bootstrap vs Fund - Bulma vs Semantic vs UIkit

Bu yazının sonunda hər bir çərçivənin üstün xüsusiyyətlərini və məhdudiyyətlərini biləcəksiniz və onlardan hansının ehtiyacınıza ən uyğun olduğunu müəyyən etmək üçün daha yaxşı vəziyyətdə olacaqsınız. Gəlin başlayaq:

  • Çəkmə nişanı #
  • Vəqf #
  • Bulma #
  • Semantik #
  • UIkit #

Çəkmə (getbootstrap.com)

Çəkmə kəməri vs

Bootstrap veb saytları tez bir zamanda inkişaf etdirmək üçün cavab verən, mobil ilk CSS çərçivəsidir. GitHub-da 130k-dən çox ulduz olan bu siyahıdakı ən populyar CSS çərçivəsidir. Bootstrap HTML, CSS və JavaScript ilə hazırlanmış istifadəyə hazır komponentlərdən ibarətdir.

Bootstrap əvvəlcə Twitter-də 2011-ci ildə hazırlanmışdı, lakin nəticədə müstəqil bir layihəyə çevrildi. Mövcud sabit versiya 4.3. Hal hazırda inkişafda olan Bootstrap 5 jQuery istifadəsini vanil JS ilə əvəz edəcək, köhnəlmiş brauzerlər üçün dəstəyi endirəcək və mövcud test platformasını dəyişdirəcəkdir.

Bootstrap istifadə etmək üçün yeni bir veb səhifə qurarkən aşağıdakıları etməlisiniz:

  • HTML5 sənədlərindən istifadə edin
  • Görmə portalı meta etiketi yaradın
  • Baş etiketinizdə Bootstrap CSS-ni idxal edin
  • Bootstrapın JavaScript funksiyalarından hər hansı birini istifadə etmək üçün jQuery, Popper.js və sonra bootstrap.min.js qaydasında skriptləri idxal edin

Budur bir başlanğıc şablonu.




Bu dərslikdə, bu çərçivələr üçün CDN-lə əlaqəli mənbələrdən (CSS və JS sənədləri) istifadə edəcəyik. Budur sürətli bir başlanğıc bələdçi Çəkmə kəmərində.

Güclü bir mobil ilk yanaşma ilə yanaşı, çərçivənin yetkinliyinə dair əhəmiyyətli bir cəmiyyət dəstəyi də var. Üstəlik, Bootstrap bir siyahı saxlayır təsdiq edilmiş çərçivələr və dəstlər seçmək üçün, üçüncü tərəf inkişaf etdiriciləri eyni zamanda asanlıqla layihələrinizlə birləşdirilə bilən Bootstrap üçün dəstlər və paketlər təklif edirlər. Budur Bootstrap üçün pulsuz UI dəstləri. Əvvəlcə mobil olmağınızdan əlavə, toxunma ekranlarına da dəstək var. Bootstrap yetkin bir layihə olduğundan, bir çox əlçatanlıq xüsusiyyətlərini dəstəkləyir.

Bootstrapın ən böyük çatışmazlığı səhifə çəkisinin artmasıdır. Bir neçə yüz kilobayt orta səhifə ölçüsü 2MB ətrafında olan bir dünyada əhəmiyyətli olmaya da, ən yüksək səmərəliliyi hədəfləyən inkişaf etdiricilərə aid ola bilər. JQuery-dən asılılıq narahatlıq doğurur, baxmayaraq ki, jQuery-nin qaldırılmasının Bootstrap 5 üçün yol xəritəsinin bir hissəsi olduğunu bilmək təşviq edir..

�� Tərif:

  • Əvvəlcə mobil, cavab verən veb dizayn çərçivəsi
  • Yaxşı icma dəstəyi və sənədlər

�� Eksiler:

  • Böyük asılılıq ölçüsü (~ 300KB)
  • Bəzi komponentlərin işləməsi üçün jQuery-dən asılılıq

Bootstrap yaxşı bir dəstək bazası olan sabit bir platforma axtarırsınızsa, seçiminiz olmalıdır. Varsayılan komponentlərlə çox şey etmək istəməsəniz düzgün seçimdir. Çəkmə kəməri çevik bir mühitdə tez bir zamanda iterasiya etmək istəyənlər üçün idealdır.

Vəqf (fund.zurb.com)

təməl vs

İlk olaraq 2011-ci ildə Bootstrap ayı ərzində yayımlanan Fond, yalnız veb saytlar üçün deyil, həm də tətbiqlər və e-poçtlar üçün ön sinif çərçivəsidir! Bootstrap vs Foundation’un necə yığıldığını görək!

Tvitterdəki Bootstrap kimi, Fond Zurb təməlində daxili bir vasitə olaraq başladı və sonra bir çərçivə olaraq buraxıldı. Fondun mənbə kodu açıq ilk mənbədir, mobil ilk cavab dizaynına vurğu edilir. Vəqf seçmək üçün 12 sütunu olan Bootstrap üçün oxşar bir grid sisteminə malikdir. Bundan əlavə, JavaScript də isteğe bağlıdır!

Veb saytınızda Vəqfin istifadəsi üçün geniş addımlar aşağıdakılardır:

  • Yükləyin Vəqf mənbələri
  • HTML5 sənədlərindən istifadə edin
  • Baş etiketinə Fondun CSS faylını əlavə edin
  • JQuery, what-input.js və Fondun skriptlərini daxil edin
  • Bədən etiketini bitirməzdən əvvəl, Vəqf xüsusiyyətlərini müxtəlif DOM elementlərinə bağlamaq üçün çağırın

Budur sürətli bir şablon:

$ (sənəd) .qiymətləndirmə ();

Yükləyə bilərsiniz xüsusi bir quruluş Vəqf çərçivəsi sizin ehtiyaclarınıza uyğun olarsa.

Bootstrap vs Foundation-ı müqayisə etməyə çalışdığımız zaman bir-iki şey ortaya çıxır. Bootstrap cəmiyyətdən daha çox dəstək təklif edir, işləmək biraz daha asandır və diqqətinizi çəkəndə seçmək üçün geniş mövzular təqdim edir. Digər tərəfdən Vəqf, DOM elementlərinə dərslər əlavə etmədən, komponentlərinizə daha çox nəzarət və sərbəstlik verir – xüsusiyyətlər komponentlərlə əlaqəli olduğundan. Bundan əlavə, Fond bir neçə ildir ki, inkişafdadır bir çox əlçatanlıq xüsusiyyətləri təmin edir.

�� Tərif:

  • Əvvəlcə mobil, cavab verən veb dizayn çərçivəsi
  • Tətbiq və e-poçtlara dəstək verir

�� Eksiler:

  • Bootstrap kimi böyük bir asılılıq ölçüsü
  • Başlayanları aşa biləcək çox sayda xüsusiyyət

Bootstrap vs Foundation arasındakı işləmə əhəmiyyətli dərəcədə dəyişmir və ya platforma seçərkən çox şey itirmirsiniz. Layihə üzərində daha çox nəzarət etmək istəsəniz, yəqin ki, Vəqflə birlikdə getməlisiniz.

Bu yazılarla da maraqlana bilərsiniz:

  • Ən yaxşı bucaqlı idarəetmə paneli şablonları

Bulma (bulma.io)

bulma vs

Bulma, açıq mənbəyidir, yüngül CSS çərçivəsidir Flexbox.

Bootstrap səviyyəsində olmasa da, Bulma GitHub-da 35 kq ulduzdan çox populyar bir layihədir.

Bulma, modulluğa əlavə diqqət yetirərək mobil ilk, cavabdeh bir çərçivə üçün hazırlanmışdır.

Layihənizdə Bulma istifadə etmək üçün bu addımları izləməlisiniz:

  • HTML5 sənədini əlavə edin
  • Cavab verən bir görüntü üçün bir meta etiketi əlavə edin
  • Bulma CSS faylını baş etiketinizə əlavə edin
  • [Könüllü] Nişanlar istifadə etmək üçün şriftli skript əlavə edin

Budur bir şablon:

Bootstrap vs Foundation vs Bulma arasındakı mübahisəyə qayıdan Bulma daha incə bir öyrənmə əyrisinə malikdir. Bulma’nın Bootstrap və Vəqf arasındakı ciddi fərqi, çərçivədə heç bir JavaScript elementi olmadan CSS-in yeganə diqqətidir. JavaScript-nin xaric olması çərçivəni də yüngülləşdirir. Əlçatanlıq baxımından, cəmiyyət müntəzəm olaraq dəstək əlavə etsə də, Bulma yalnız qismən əlçatandır.

�� Tərif:

  • Yüngül, fleksboxa əsaslanan çərçivə
  • Modul elementlər rahatlıq təmin edir

�� Eksiler:

  • JavaScript elementləri yoxdur
  • Giriş üçün məhdud dəstək

Bir geliştirici olaraq veb üçün cavab verən elementlər yaratmağa kömək edən yüngül bir çərçivə istifadə etmək istəsəniz Bulma üçün seçim etməlisiniz. Prosesdə ilişib qalsanız, sizə kömək edəcək çərçivə üçün xeyli dəstək var.

Semantik (semantik-ui.com)

semantik vs

Semantik, intuitiv istifadəçi interfeysi yaratmaq məqsədi ilə bir CSS çərçivəsidir.

Bu çərçivədə təlim prosesini asanlaşdırmaq üçün açıq olan sinif adlarından istifadə olunur. Semantikdəki dərslər, məntiqi anlayışları sinif adları ilə əlaqələndirmək üçün ingilis dilindən ilhamlanır.

Layihənizdə Semantik komponentlərdən istifadə etmək üçün aşağıdakı addımları yerinə yetirməlisiniz.

  • HTML5 sənədini daxil edin
  • Semantik CSS faylını yükləyin
  • Hər hansı bir JavaScript elementini çağırmadan əvvəl jQuery əlavə edin
  • Semantik yazısını daxil edin

Budur bir şablon:

Bootstrap vs Foundation və digərləri ilə Semantikanı müqayisə etmək üçün, intuitiv adlandırma konvensiyalarına baxmayaraq, Semantik öyrənmək üçün mürəkkəblik baxımından qüsurlu olduğunu görürsünüz. Sənədlər genişdir, amma öyrəşmək üçün biraz vaxt lazımdır. Angular və React kimi JavaScript çərçivələri ilə inteqrasiya yaxşıdır, bu da bu çərçivələrin istifadəsini ehtiva edən bir tətbiqdə istifadə üçün ideal hala gətirir..

�� Tərif:

  • Intuitiv sinif adları
  • JavaScript çərçivələri ilə inteqrasiya

�� Eksiler:

  • Böyük layihələrin ehtiyacını yerinə yetirə bilməz
  • Cəmiyyət tərəfindən məhdud dəstək

Semantik, nisbətən daha asan öyrənmə əyrisi olan və JavaScript çərçivələrini də dəstəkləyən bir çərçivədir. Əgər tələbləriniz JavaScript-in istifadəsini əhatə edirsə, növbəti layihənizdə bu çərçivənin istifadəsini mütləq nəzərə almalısınız.

UIkit (getuikit.com)

uikit vs

UIkit, veb interfeysləri yaratmaq üçün modulluğa böyük diqqət yetirən müasir, yüngül bir çərçivədir.

GitHub-da təxminən 15k ulduz olan nisbətən yeni, açıq sous çərçivəsidir. UIkit, BrowserStack-də avtomatlaşdırılmış davamlı yerləşdirmə ilə cavab dizaynını yaratmağa kömək edir.

Layihənizdə UIkit komponentlərindən istifadə etmək üçün aşağıdakı addımları yerinə yetirməlisiniz:

  • HTML5 sənədini daxil edin
  • UIkit CSS faylını yükləyin
  • UIkit’in funksionallıq və nişanlar üçün skriptlərini daxil edin

Budur bir şablon:

UIkit-in Bootstrap vs Foundation vs Bulma ilə müqayisə etməyimizdə xeyli sayda xüsusiyyətləri var. JavaScript elementlərinə baxmayaraq, UIkit-in jQuery-dən heç bir asılılığı yoxdur ki, bu da son istifadəçi üçün yük yükünü daha az edir. Çevik bir inkişaf mühitində veb tətbiqlərinizin tez iterating versiyaları baxımından bu çərçivələr ilə mütləq boyun əyilir..

�� Tərif:

  • Modulluğa diqqət yetirin, onlarla işləməyi asanlaşdırın
  • Elementlər özelleştirilebilir, rahatlığa gətirib çıxarır

�� Eksiler:

  • Məhdud sənədləşdirmə və icma dəstəyi

UIkit sizə quruluş və xüsusiyyətlər üzərində nəzarət baxımından çox sərbəstlik versə də, çərçivə ilə bağlı problemlərlə üzləşsəniz, onlayn məhdud dəstəyə səbəb olur. Buna görə də, bu çərçivəni bir layihədə nəzərdən keçirməlisiniz, yalnız ön proqram proqramlaşdırma bacarıqlarınız kifayət qədər inkişaf etmiş olsa.

Bootstrap vs Fund vs Bulma vs Semantic vs UIkit: son düşüncələr

Ən yaxşı CSS çərçivələrinin bu müqayisəsində danışdıqlarımızı ümumiləşdirmək üçün:

  • Çox dəstəyi olan əngəlsiz bir həll istəsəniz, Bootstrap üçün gedin
  • Komponentlərinizdə daha çox sərbəstlik əldə etmək üçün Vəqfdən istifadə edin
  • Layihə üçün yüngül bir əlavə təmin etmək üçün Bulma və ya UIkit verin
  • Veb tətbiqetməniz ağır JavaScript çərçivələrindən istifadə edirsə, Semantikaya üstünlük verməlisiniz

2020-ci ildə hansı CSS çərçivəsindən istifadə edirsiniz? Aşağıdakı şərhlərdə bizə bildirin!

WordPress saytınızı sürətləndirmək üçün qəza kursumuza qoşulmağı unutmayın. Bəzi sadə düzəlişlərlə yükləmə müddətinizi hətta 50-80% azalda bilərsiniz:

Layihə, təqdimat və Karol K tərəfindən redaktə.

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