Bootstrap vs Foundation εναντίον Bulma vs Semantic vs UIkit

Τα τελευταία χρόνια, οι συνήθειες περιήγησης των τελικών χρηστών έχουν εξελιχθεί ώστε να περιλαμβάνουν μια ποικιλία συσκευών. Ως αποτέλεσμα, ο ανταποκρινόμενος σχεδιασμός ιστοσελίδων είναι απαραίτητη για κάθε ιστότοπο που αναπτύσσεται σήμερα. Ωστόσο, η δημιουργία ενός αποκριτικού σχεδιασμού από το μηδέν για κάθε έργο μπορεί να είναι χρονοβόρα. Μια εξαιρετική λύση που κάνει τη ζωή σας πιο εύκολη είναι να χρησιμοποιήσετε ένα πλαίσιο CSS. Ένα τέτοιο πλαίσιο φροντίζει για τις βασικές αρχές σχεδιασμού απόκρισης για εσάς. Σε αυτήν τη σύγκριση, ρίχνουμε μια ματιά σε μερικά από τα καλύτερα πλαίσια CSS εκεί έξω και βλέπουμε ποιο είναι το καλύτερο. Εδώ είναι το Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit.


Αυτή η ανάρτηση σας καθοδηγεί να επιλέξετε το σωστό πλαίσιο CSS για το επόμενο έργο σας. Υποθέτω ότι έχετε βασικές γνώσεις τεχνολογιών front-end και ανταποκρινόμενες αρχές σχεδιασμού ιστοσελίδων. Κάθε πλαίσιο CSS έχει δοκιμαστεί για να καλύψει διάφορες πτυχές του Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit. Καλύπτω την προέλευση κάθε πλαισίου και τα κορυφαία χαρακτηριστικά του. Σας δίνω επίσης έναν οδηγό γρήγορης εκκίνησης για κάθε πλαίσιο.

Bootstrap vs Foundation εναντίον Bulma vs Semantic vs UIkit

Στο τέλος αυτής της ανάρτησης, θα γνωρίζετε τα κορυφαία χαρακτηριστικά και τους περιορισμούς κάθε πλαισίου και θα είστε σε καλύτερη θέση για να προσδιορίσετε ποια από αυτές ταιριάζει καλύτερα στις ανάγκες σας. Ας αρχίσουμε:

  • Bootstrap #
  • Θεμέλιο #
  • Bulma #
  • Σημασιολογικό #
  • UIkit #

Μπότα (getbootstrap.com)

Bootstrap vs

Το Bootstrap είναι ένα ανταποκρινόμενο, CSS πλαίσιο για πρώτη φορά σε κινητές συσκευές για γρήγορη ανάπτυξη ιστότοπων. Είναι το πιο δημοφιλές πλαίσιο CSS σε αυτήν τη λίστα, με πάνω από 130 χιλιάδες αστέρια στο GitHub. Το Bootstrap περιέχει έτοιμα προς χρήση στοιχεία που αναπτύχθηκαν με HTML, CSS και JavaScript.

Το Bootstrap αναπτύχθηκε αρχικά στο Twitter το 2011, αλλά τελικά εξελίχθηκε σε ένα ανεξάρτητο έργο. Η τρέχουσα σταθερή έκδοση είναι 4.3. Το Bootstrap 5, που βρίσκεται σε εξέλιξη, θα αντικαταστήσει τη χρήση του jQuery με το vanilla JS, θα μειώσει την υποστήριξη για ξεπερασμένα προγράμματα περιήγησης και θα αλλάξει την τρέχουσα πλατφόρμα δοκιμών.

Για να χρησιμοποιήσετε το Bootstrap, πρέπει να κάνετε τα εξής κατά τη δημιουργία μιας νέας ιστοσελίδας:

  • Χρησιμοποιήστε τον τύπο HTML5
  • Δημιουργήστε μια μετα-ετικέτα θύρας προβολής
  • Εισαγάγετε το Bootstrap CSS στην ετικέτα κεφαλής σας
  • Εισαγάγετε σενάρια με τη σειρά jQuery, Popper.js και, στη συνέχεια, bootstrap.min.js για να χρησιμοποιήσετε οποιαδήποτε από τις λειτουργίες JavaScript του Bootstrap

Εδώ είναι ένα πρότυπο εκκίνησης.




Σε αυτό το σεμινάριο, θα χρησιμοποιήσουμε τις εκδόσεις πόρων που φιλοξενούνται σε CDN (αρχεία CSS και JS) για αυτά τα πλαίσια. Εδώ είναι μια γρήγορη αρχή οδηγός στο Bootstrap.

Εκτός από μια ισχυρή προσέγγιση για κινητά, υπάρχει σημαντική υποστήριξη από την κοινότητα που διαθέτει έως την ωριμότητα του πλαισίου. Επιπλέον, ενώ το Bootstrap διατηρεί μια λίστα με εγκεκριμένα πλαίσια και κιτ για να διαλέξετε, τρίτοι προγραμματιστές προσφέρουν επίσης κιτ και πακέτα για Bootstrap που μπορούν να ενσωματωθούν στα έργα σας εξίσου εύκολα. Εδώ είναι η επιλογή μας δωρεάν κιτ UI για Bootstrap. Εκτός από την πρώτη φορητή συσκευή, υπάρχει κάποια υποστήριξη για οθόνες αφής. Καθώς το Bootstrap είναι ένα ώριμο έργο, υποστηρίζει πολλές δυνατότητες προσβασιμότητας.

Το μεγαλύτερο μειονέκτημα του Bootstrap είναι η αύξηση του βάρους της σελίδας. Ενώ μερικές εκατοντάδες kilobyte μπορεί να μην είναι σημαντικές σε έναν κόσμο όπου το μέσο μέγεθος σελίδας είναι περίπου 2MB, μπορεί να αφορά προγραμματιστές που στοχεύουν στην υψηλότερη απόδοση. Η εξάρτηση από το jQuery προκαλεί ανησυχία, αν και είναι ενθαρρυντικό να γνωρίζουμε ότι η αφαίρεση του jQuery είναι μέρος του οδικού χάρτη για το Bootstrap 5.

�� Πλεονεκτήματα:

  • Πλαίσιο σχεδιασμού ιστοσελίδων για κινητά πρώτα
  • Καλή κοινοτική υποστήριξη και τεκμηρίωση

�� Μειονεκτήματα:

  • Μεγάλο μέγεθος εξάρτησης (~ 300KB)
  • Εξάρτηση από το jQuery για τη λειτουργία ορισμένων στοιχείων

Το Bootstrap θα πρέπει να είναι η επιλογή μετάβασης αν ψάχνετε για μια σταθερή πλατφόρμα με καλή βάση υποστήριξης. Είναι η σωστή επιλογή εάν δεν θέλετε να παίζετε με τα προεπιλεγμένα στοιχεία. Το Bootstrap είναι ιδανικό για όσους θέλουν να επαναλάβουν γρήγορα λύσεις σε ένα ευέλικτο περιβάλλον.

θεμέλιο (foundation.zurb.com)

ίδρυμα vs

Το Ίδρυμα, που κυκλοφόρησε για πρώτη φορά μέσα σε ένα μήνα από το Bootstrap το 2011, είναι μια κατηγορία πλαισίων διεπαφής για όχι μόνο ιστότοπους, αλλά και εφαρμογές και email! Ας δούμε πώς συσσωρεύεται το Bootstrap vs Foundation!

Ακριβώς όπως το Bootstrap στο Twitter, το Ίδρυμα ξεκίνησε ως εσωτερικό εργαλείο στο ίδρυμα Zurb και στη συνέχεια κυκλοφόρησε τελικά ως πλαίσιο. Ο πηγαίος κώδικας του Ιδρύματος είναι ανοιχτού κώδικα, με έμφαση στα σχέδια που ανταποκρίνονται στα κινητά. Το Ίδρυμα διαθέτει ένα παρόμοιο σύστημα πλέγματος με το Bootstrap με 12 στήλες για να διαλέξετε. Επιπλέον, το JavaScript είναι προαιρετικό!

Τα γενικά βήματα για τη χρήση του Ιδρύματος στον ιστότοπό σας είναι τα εξής:

  • Κατεβάστε το Πόροι ιδρύματος
  • Χρησιμοποιήστε τον τύπο HTML5
  • Προσθέστε το αρχείο Foundation CSS στην επικεφαλίδα
  • Συμπεριλάβετε τα σενάρια jQuery, what-input.js και Foundation
  • Λίγο πριν από τη λήξη της ετικέτας σώματος, καλέστε τη συνάρτηση foundation () για να επισυνάψετε τις ιδιότητες Foundation σε διάφορα στοιχεία DOM

Εδώ είναι ένα πρότυπο γρήγορης εκκίνησης:

$ (έγγραφο). Ίδρυμα ();

Μπορείτε να πραγματοποιήσετε λήψη μια προσαρμοσμένη έκδοση του πλαισίου του Ιδρύματος εάν αυτό ταιριάζει στις ανάγκες σας.

Όταν προσπαθούμε να συγκρίνουμε το Bootstrap vs Foundation, προκύπτουν μερικά πράγματα. Το Bootstrap προσφέρει περισσότερη υποστήριξη από την κοινότητα, είναι λίγο πιο εύκολο να συνεργαστείς και σου δίνει ένα ευρύ φάσμα θεμάτων για να διαλέξεις όταν κοιτάζεις. Το Foundation, από την άλλη πλευρά, σας δίνει περισσότερο έλεγχο και ελευθερία στα στοιχεία σας, χωρίς να χρειάζεται να προσθέσετε τάξεις σε στοιχεία DOM – καθώς οι ιδιότητες σχετίζονται με στοιχεία. Επίσης, δεδομένου ότι το Ίδρυμα βρίσκεται σε εξέλιξη εδώ και μερικά χρόνια, είναι παρέχει πολλές δυνατότητες προσβασιμότητας.

�� Πλεονεκτήματα:

  • Πλαίσιο σχεδιασμού ιστοσελίδων για κινητά πρώτα
  • Παρέχει υποστήριξη για εφαρμογές και email

�� Μειονεκτήματα:

  • Μεγάλο μέγεθος εξάρτησης όπως το Bootstrap
  • Τεράστιος αριθμός χαρακτηριστικών που μπορεί να κατακλύσουν τους αρχάριους

Η λειτουργικότητα μεταξύ Bootstrap vs Foundation δεν αλλάζει σημαντικά και δεν θα χάσετε πολλά όταν επιλέγετε οποιαδήποτε πλατφόρμα. Τούτου λεχθέντος, θα πρέπει πιθανώς να πάτε με το Ίδρυμα εάν θέλετε περισσότερο έλεγχο στο έργο σας.

Μπορεί επίσης να σας ενδιαφέρει αυτά τα άρθρα:

  • Καλύτερα πρότυπα γωνιακού πίνακα ελέγχου διαχειριστή

Μπουλμά (bulma.io)

bulma vs

Το Bulma είναι ένα ανοιχτού κώδικα, ελαφρύ πλαίσιο CSS που βασίζεται στο Flexbox.

Αν και δεν είναι αρκετά στο επίπεδο του Bootstrap, το Bulma είναι ένα αρκετά δημοφιλές έργο στο GitHub με πάνω από 35k αστέρια.

Το Bulma έχει σχεδιαστεί σε ένα κινητό, πρώτο, ανταποκρινόμενο πλαίσιο, με πρόσθετη εστίαση στην αρθρωτότητα.

Για να χρησιμοποιήσετε το Bulma στο έργο σας, πρέπει να ακολουθήσετε αυτά τα βήματα:

  • Προσθέστε τον τύπο HTML5
  • Προσθέστε μια μετα-ετικέτα για μια αποκριτική θύρα προβολής
  • Συμπεριλάβετε το αρχείο Bulma CSS στην επικεφαλίδα σας
  • [Προαιρετικό] Προσθέστε το σενάριο γραμματοσειράς για να χρησιμοποιήσετε εικονίδια

Εδώ είναι ένα πρότυπο:

Επιστρέφοντας στη συζήτηση για το Bootstrap vs Foundation vs Bulma, η Bulma έχει μια πιο ήπια καμπύλη μάθησης. Μια σημαντική διαφορά της Bulma σε σχέση με το Bootstrap και το Foundation είναι η μοναδική εστίαση στο CSS, χωρίς στοιχεία JavaScript στο πλαίσιο. Η εξαίρεση της JavaScript καθιστά το πλαίσιο ελαφρύ και πολύ. Όσον αφορά την προσβασιμότητα, το Bulma είναι μόνο μερικώς προσβάσιμο, αν και η κοινότητα προσθέτει υποστήριξη σε τακτική βάση.

�� Πλεονεκτήματα:

  • Ελαφρύ πλαίσιο βασισμένο σε flexbox
  • Τα αρθρωτά στοιχεία επιτρέπουν την ευελιξία

�� Μειονεκτήματα:

  • Χωρίς στοιχεία JavaScript
  • Περιορισμένη υποστήριξη για προσβασιμότητα

Ως προγραμματιστής, θα πρέπει να επιλέξετε το Bulma εάν θέλετε να χρησιμοποιήσετε ένα ελαφρύ πλαίσιο που σας βοηθά να δημιουργήσετε στοιχεία απόκρισης για τον Ιστό. Υπάρχει σημαντική υποστήριξη για το πλαίσιο που θα σας βοηθήσει εάν κολλήσετε στη διαδικασία.

Σημασιολογικός (semantic-ui.com)

σημασιολογική εναντίον

Το Semantic είναι ένα πλαίσιο CSS με στόχο τη δημιουργία διαισθητικών διεπαφών χρήστη.

Αυτό το πλαίσιο χρησιμοποιεί ονόματα τάξεων που είναι προφανή για να διευκολύνουν τη μαθησιακή διαδικασία. Τα μαθήματα στο Σημασιολογικό εμπνέονται από την αγγλική γλώσσα για να συνδέσουν λογικές έννοιες με ονόματα τάξεων.

Για να χρησιμοποιήσετε τα σημασιολογικά στοιχεία στο έργο σας, πρέπει να ολοκληρώσετε τα ακόλουθα βήματα:

  • Συμπεριλάβετε τον τύπο HTML5
  • Φόρτωση του αρχείου σημασιολογικού CSS
  • Συμπεριλάβετε το jQuery πριν καλέσετε στοιχεία JavaScript
  • Συμπεριλάβετε το σενάριο του Semantic

Εδώ είναι ένα πρότυπο:

Για να συγκρίνετε το Semantic με το Bootstrap vs Foundation και τα άλλα, θα παρατηρήσετε ότι, παρά τις διαισθητικές συμβάσεις ονοματολογίας, το Semantic υπολείπεται όσον αφορά την πολυπλοκότητα να μάθει. Η τεκμηρίωση είναι εκτεταμένη, αλλά χρειάζεται λίγος χρόνος για να το συνηθίσετε. Η ενοποίηση με πλαίσια JavaScript όπως το Angular και το React είναι καλή, γεγονός που το καθιστά ιδανικό για χρήση σε μια εφαρμογή που περιλαμβάνει τη χρήση αυτών των πλαισίων.

�� Πλεονεκτήματα:

  • Διαισθητικά ονόματα τάξεων
  • Ενσωμάτωση με πλαίσια JavaScript

�� Μειονεκτήματα:

  • Μπορεί να μην ικανοποιεί την ανάγκη μεγάλων έργων
  • Περιορισμένη υποστήριξη από την κοινότητα

Το σημασιολογικό είναι το πλαίσιο που έχει μια σχετικά ευκολότερη καμπύλη εκμάθησης και υποστηρίζει επίσης πλαίσια JavaScript. Εάν οι απαιτήσεις σας περιλαμβάνουν τη χρήση JavaScript, θα πρέπει σίγουρα να εξετάσετε τη χρήση αυτού του πλαισίου στο επόμενο έργο σας.

UIkit (getuikit.com)

uikit εναντίον

Το UIkit είναι ένα σύγχρονο, ελαφρύ πλαίσιο με μεγάλη έμφαση στην αρθρωτότητα για τη δημιουργία διεπαφών Ιστού.

Είναι ένα σχετικά νέο πλαίσιο open-souce με περίπου 15k αστέρια στο GitHub. Το UIkit σάς βοηθά να δημιουργήσετε ανταποκρινόμενα σχέδια, με αυτόματη συνεχή ανάπτυξη στο BrowserStack.

Για να χρησιμοποιήσετε στοιχεία UIkit στο έργο σας, πρέπει να ολοκληρώσετε τα ακόλουθα βήματα:

  • Συμπεριλάβετε τον τύπο HTML5
  • Φόρτωση του αρχείου UIkit CSS
  • Συμπεριλάβετε τα σενάρια του UIkit για λειτουργικότητα και εικονίδια

Εδώ είναι ένα πρότυπο:

Το UIkit διαθέτει σημαντικό αριθμό δυνατοτήτων εάν το συγκρίνουμε με το Bootstrap vs Foundation vs Bulma. Παρά τα στοιχεία JavaScript, το UIkit δεν έχει καμία εξάρτηση από το jQuery, γεγονός που καθιστά το ωφέλιμο φορτίο για τον τελικό χρήστη μικρότερο. Στέκεται σίγουρα λαιμός με λαιμό με αυτά τα πλαίσια όσον αφορά την ταχεία επανάληψη εκδόσεων των εφαρμογών ιστού σας σε ένα ευέλικτο περιβάλλον ανάπτυξης.

�� Πλεονεκτήματα:

  • Επικεντρωθείτε στην αρθρωτότητα, καθιστώντας εύκολη τη συνεργασία μαζί τους
  • Τα στοιχεία είναι προσαρμόσιμα, οδηγώντας σε ευελιξία

�� Μειονεκτήματα:

  • Περιορισμένη τεκμηρίωση και υποστήριξη κοινότητας

Ενώ το UIkit σας δίνει μεγάλη ελευθερία όσον αφορά τον έλεγχο της δομής και των χαρακτηριστικών, είναι αρκετά νέο, το οποίο οδηγεί σε περιορισμένη υποστήριξη στο διαδίκτυο, εάν αντιμετωπίζετε προβλήματα με το πλαίσιο. Επομένως, θα πρέπει να λάβετε υπόψη αυτό το πλαίσιο σε ένα έργο μόνο εάν οι δεξιότητές σας προγραμματισμού front-end έχουν προχωρήσει αρκετά.

Bootstrap vs Foundation vs Bulma vs Semantic vs UIkit: τελικές σκέψεις

Για να συνοψίσουμε τι συζητήσαμε σε αυτήν τη σύγκριση των κορυφαίων πλαισίων CSS:

  • Εάν θέλετε μια λύση χωρίς προβλήματα που έχει πολλή υποστήριξη, αναζητήστε το Bootstrap
  • Για να αποκτήσετε περισσότερη ελευθερία στα συστατικά σας, δοκιμάστε το Foundation
  • Για να εξασφαλίσετε μια ελαφριά προσθήκη στο έργο σας, δοκιμάστε το Bulma ή το UIkit
  • Εάν η εφαρμογή ιστού σας χρησιμοποιεί βαριά πλαίσια JavaScript, θα πρέπει να επιλέξετε το Semantic

Ποιο πλαίσιο CSS χρησιμοποιείτε το 2020; Ενημερώστε μας στα παρακάτω σχόλια!

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Διάταξη, παρουσίαση και επεξεργασία από τον Karol K.

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