Προσαρμογή τάσεων διάταξης εκκίνησης, εργαλείων και πλαισίων

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

Σε αυτό το άρθρο, θα ήθελα να μοιραστώ μερικές από αυτές πόρους και βέλτιστες πρακτικές για τους προγραμματιστές που θέλουν να προχωρήσουν περαιτέρω με το Bootstrap.

Ολα τα οι πόροι σε αυτήν την ανάρτηση είναι δωρεάν, ώστε να μπορείτε να τα χρησιμοποιήσετε όσα θεωρείτε κατάλληλα. Ακόμα κι αν δεν έχετε χρησιμοποιήσει ποτέ το Bootstrap είστε σίγουροι ότι θα βρείτε κάτι εδώ που θα σας βοηθήσει να ξεκινήσετε.

Restyling με Bootstrap

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

Αλλά, μπορείτε επίσης Restyle αυτά τα στοιχεία σας για να χρησιμοποιήσετε τον κώδικα του Bootstrap ως το θεμέλιο για τη διάταξή σας.

Υπάρχουν με λίγους διαφορετικούς τρόπους μπορείτε να το κάνετε αυτό:

• Προσθέστε το δικό σας φύλλο στυλ για να αντικαταστήσετε την προεπιλογή.
• Προσαρμόστε την έξοδο του BootStrap, ώστε να έχετε μόνο τα στοιχεία που θέλετε.
• Συνδυασμός με πρόσθετα και πρόσθετα / θέματα.

Αυτή η τελευταία επιλογή είναι η πιο κοινή και είναι ένας από τους λόγους Bootstrap έχει αυξηθεί τόσο γρήγορα.

Είμαι επίσης ένας τεράστιος ανεμιστήρας του προσαρμόσετε το εργαλείο γιατί είναι εντελώς δωρεάν και σας δίνει τόσο μεγάλο έλεγχο τα χαρακτηριστικά που θέλετε να χρησιμοποιήσετε.

Υπάρχουν τόνοι πόρων για το BootStrap 3/4, που δημιουργήθηκαν από προγραμματιστές τρίτων κατασκευαστών, οπότε είναι ευκολότερο από ποτέ να δημιουργήστε τη δική σας μοναδική διάταξη BootStrap χωρίς να γράψω πολύ κώδικα.

Plugins & add-ons

Δεδομένου ότι το Bootstrap έρχεται με μια τεράστια βιβλιοθήκη JavaScript, είναι αρκετά εύκολο να το κάνετε επεκτείνετε τις λειτουργίες JavaScript. Και οι προγραμματιστές έχουν κάνει σίγουρα αυτό με τα δικά τους plugins, πολλοί κυκλοφορούν δωρεάν online.

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

Έντυπο επικύρωσης

Το πρώτο είναι το αγαπημένο μου έντυπο επικύρωσης φόρμας, Validator φόρμας. Τρέχει στο jQuery και υποστηρίζει ένα σωρό πλαίσια πλαισίων: Bootstrap, Foundation, Pure, UIKit και άλλα.

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

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

Εργαλείο επιλογής ημερομηνίας

Συλλέκτες ημερομηνιών είναι επίσης ένας τεράστιος πόνος για τον εαυτό σας. Πολλές φόρμες χρησιμοποιούν μόνο τα αναπτυσσόμενα μενού για τις ρυθμίσεις ημέρας / μήνα / έτους, αλλά μπορείτε επίσης να το χρησιμοποιήσετε Bootstrap plugin επιλογής ημερομηνίας για να εξοικονομήσετε τον εχθρό.

Είναι απόλυτα ανοικτού κώδικα και εκτελείται στη βιβλιοθήκη Bootstrap 3.x. Θα το παρατηρήσετε επίσης υποστηρίζει και την ημερομηνία και του χρόνου χρησιμοποιώντας ένα άλλο πρόσθετο jQuery, Moment.js.

Γενικά, αυτή η βιβλιοθήκη είναι φανταστική για να έχει ενεργοποιημένο έναν λειτουργό επιλογής ημερομηνίας εργασίας. Έχει πολλές εξαρτήσεις αλλά, ευτυχώς, δεν θα χρειαστεί να γράψετε πολύ κώδικα για να το λειτουργήσετε.

Αξιολογήσεις αστέρων

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

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

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

WATable

Το bootstrap έρχεται με το δικό του το δικό του στυλ σχεδίασης πίνακα για την εμφάνιση των πινακοποιημένων δεδομένων στο μέτωπο. Αλλά, με το WAT plugin, μπορείτε να προσθέσετε μια ολόκληρη δέσμη πρόσθετων λειτουργιών στους πίνακες Bootstrap.

Αυτό είναι ένα από τα πιο λεπτομερή plug-ins jQuery εκεί έξω και αυτά είναι μόνο μερικά από τα χαρακτηριστικά που μπορείτε να προσθέσετε:

• Προσαρμογή σελίδων.
• Ταξινόμηση στηλών.
• Φιλτράρισμα δεδομένων.
• Εφέ κίνησης πίνακα.
• Επιλέξτε-επιλέξτε ολόκληρες σειρές.

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

Αυτά ήταν μερικά από τα αγαπημένα μου plugins, αλλά υπάρχουν τόσοι πολλοί άλλοι εκεί έξω. Μπορείτε να περιηγηθείτε ακόμη περισσότερο σε αυτή τη σελίδα αν είστε περίεργοι.

Πλαίσια εκκίνησης

Το bootstrap είναι ένα μεγάλο πλαίσιο γιατί επιτρέπει στους χρήστες προσαρμόστε τα προεπιλεγμένα στυλ HTML και CSS με μερικές τάξεις.

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

Ευτυχώς, είναι όλα ελεύθερα και όλοι τρέχουν στις προεπιλεγμένες κατηγορίες BootStrap.

Bootflat

Ίσως το πιο γνωστό πλαίσιο BootStrap είναι Bootflat UI ότι ακολουθεί την επίπεδη τάση σχεδιασμού.

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

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

Είναι 100% δωρεάν και έρχεται ακόμη και με ένα επιλογέας χρώματος, ώστε να μπορείτε να βρείτε σχήματα επίπεδου χρώματος που να ταιριάζουν με τη διάταξη σας.

Αποκτήστε το κόλπο

Αυτό απροσδόκητα αμβλύ UI κιτ επίσης, χτίζει πάνω από τη βιβλιοθήκη Bootstrap 3 και κυκλοφορεί δωρεάν στο GitHub.

Get Shit Done έρχεται από την ομάδα στο Creative Tim όπου πωλούν λίγους πόρους πριμοδότησης. Αυτό το συγκεκριμένο κιτ UI έχει μια επαγγελματική έκδοση αλλά δεν είναι καθόλου απαραίτητο.

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

Σχεδιασμός υλικού εκκίνησης

Μια άλλη δημοφιλής τάση σχεδιασμού είναι Σχεδιασμός υλικού της Google. Αυτή είναι μια γλώσσα σχεδιασμού που έγινε αρχικά για σχεδιαστές εφαρμογών Android, αλλά έχει από τότε απλώνεται επάνω στον ιστό και συγκέντρωσε πολλή υποστήριξη από τους σχεδιαστές του UI / UX.

Αυτό το απίστευτο πλαίσιο υλικού Bootstrap χρησιμοποιεί τα χαρακτηριστικά σχεδιασμού υλικού για να να δημιουργήσετε ένα προσαρμοσμένο στυλ σχεδίασης από τη βιβλιοθήκη του Bootstrap.

Από προεπιλογή, αυτό υποστηρίζει τα πάντα στο BootStrap 3 και αυτή τη στιγμή αναδιαμορφώνεται για να υποστηρίξει επίσης το Bootstrap 4. Μπορείτε να μάθετε περισσότερα στην επίσημη αρχική σελίδα που διαθέτει τεκμηρίωση και επιδείξεις.

Μια παρόμοια βιβλιοθήκη που μπορείτε να δοκιμάσετε είναι MDBootstrap, αν και βρίσκω αυτό το ένα λίγο πιο δύσκολο να εργαστεί με.

Bootplus

Η Google δημιούργησε τη γλώσσα σχεδιασμού υλικού, αλλά έχει και το δικό της στυλ για πολλά από τα εργαλεία και τις εφαρμογές ιστού.

Το Bootplus μιμείται το στυλ διεπαφής του Google+, μαζί με πολλά από τα έγγραφα βοήθειας της Google, το Google Drive και παρόμοιες εφαρμογές ιστού. Έχει όλα τα ίδια χαρακτηριστικά με το Bootstrap, συμπεριλαμβανομένων πλεγμάτων, στυλ σχεδίασης, στυλ στοιχείων και στοιχεία JavaScript.

Μπορείτε ακόμη να περιηγηθείτε σε μια επίδειξη στο site για να δείτε το διαφορές μεταξύ του Bootplus και του αρχικού χρήστη του Bootstrap. Για έναν δωρεάν πόρο, το Bootplus είναι εκτεταμένο και είναι ιδανικό για όποιον προτιμά τις τεχνικές σχεδίασης της Google.

Εργαλεία και πόροι

Τέλος, θέλω να βουτήξω στα πολλά δωρεάν εργαλεία την προσαρμογή και την οικοδόμηση των γραμμών Bootstrap.

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

Ζωντανός επεξεργαστής

Το δωρεάν Bootstrap live editor είναι ένα από τα καλύτερα εργαλεία για τους μη τεχνικούς σχεδιαστές. Εάν δεν ξέρετε πώς να κωδικοποιήσετε μπορείτε να βασιστείτε σε αυτό το Bootstrap builder για να δημιουργήσετε μια ολόκληρη διάταξη από το μηδέν.

Το τρέχει ακριβώς στο πρόγραμμα περιήγησής σας και μπορείτε ακόμη και να επιλέξετε από προ-κατασκευασμένα πρότυπα για να ξεκινήσετε.

Οι επιλογές στην πλαϊνή μπάρα σας επιτρέπουν προσθέστε ορισμένες τιμές CSS αν γνωρίζετε κάποια κωδικοποίηση των frontend. Αλλά, μπορείτε επίσης να χρησιμοποιήσετε το GUI για να αλλάξετε χρώματα, γραμματοσειρές, μεγέθη και σχεδόν οτιδήποτε άλλο θέλετε.

Μόλις τελειώσετε, Κάντε κλικ “Αποκτήστε θέμα” και μπορείτε να αντιγράψετε / επικολλήσετε τα ενημερωμένα στυλ CSS στο δικό σας έργο. Ένας έξοχος εύκολος τρόπος για να restyle Bootstrap χωρίς να χρειάζεται να ξανακωδικοποιήσετε τα πάντα από το μηδέν.

Δημιουργός φορμών

Αυτό είναι δωρεάν Εκπαιδευτής φόρμας εκκίνησης είναι ένα drag-and-drop εργαλείο περιήγησης που σας επιτρέπει να δημιουργήσετε φόρμες εκκίνησης από την αρχή.

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

Μέχρι στιγμής ο πιο cool κατασκευαστής που έχω δει ποτέ και είναι 100% δωρεάν!

BootSwatchr

Ένα άλλο δωρεάν εργαλείο που μου αρέσει είναι BootSwatchr. Βασίζεται στο πλαίσιο Bootstrap και σας επιτρέπει ενημερώστε τα χρώματα, τα θέματα στυλ, και το συνολική διάταξη της σελίδας.

Αυτό που μου αρέσει σχετικά με αυτή την εφαρμογή είναι πως έρχεται επίσης με ένα δωρεάν συλλογή προ-σχεδιασμένων στυλ.

Έτσι, μπορείτε να κατεβάσετε ένα σχέδιο που κάποιος άλλος έχει ήδη κάνει ή μπορείτε να το χρησιμοποιήσετε ως σημείο εκκίνησης για να προσαρμόσετε το δικό σας θέμα.

Προχωρώντας μπροστά

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

Σε αυτό το άρθρο, έδειξα ακριβώς την άκρη του παγόβουνου, οπότε αν δεν βλέπετε τίποτα εδώ είναι χρήσιμο βγείτε στο Google και δείτε τι άλλο μπορείτε να βρείτε.