Μάθετε για το Bootstrap: Ξεκινήστε να αναπτύσσετε ιστοσελίδες που ανταποκρίνονται

Αποκάλυψη: Η υποστήριξή σας βοηθά στη διατήρηση της λειτουργίας του ιστότοπου! Κερδίζουμε ένα τέλος παραπομπής για ορισμένες από τις υπηρεσίες που προτείνουμε σε αυτήν τη σελίδα.


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

Από την έκδοση 2, το Bootstrap ενσωματώνει στοιχεία Responsive Web Design (RWD), καθιστώντας το ένα εξαιρετικό εργαλείο για κλιμάκωση ιστοσελίδων με μία μόνο βάση κώδικα που μοιράζεται μεταξύ διαφορετικών συσκευών χρησιμοποιώντας ερωτήματα πολυμέσων CSS.

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

Τι είναι το Bootstrap?

Η ανάπτυξη του Bootstrap ξεκίνησε από τους Mark Otto και Jacob Thornton του Twitter ως μια προσπάθεια ανάπτυξης ενός εσωτερικού εργαλείου – ένα νέο πλαίσιο για την ενθάρρυνση της συνοχής μεταξύ των εσωτερικών εργαλείων στο Twitter.

Κατά τη διάρκεια αυτών των πρώτων σταδίων ανάπτυξης, το Bootstrap ονομάστηκε αρχικά «Twitter Blueprint». Το νέο πλαίσιο ωρίμασε γρήγορα και κυκλοφόρησε ως έργο ανοιχτού κώδικα στις 19 Αυγούστου 2011.

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

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

Όντας ένα πλαίσιο front-end, το Bootstrap είναι μια διεπαφή για τον χρήστη, σε αντίθεση με τον κωδικό του διακομιστή που βρίσκεται στον διακομιστή back-end. Με τη χρήση στοιχείων RWD, το Bootstrap προσαρμόζει αυτόματα ιστοσελίδες σε διαφορετικά μεγέθη οθόνης και πυκνότητα pixel σε διάφορες συσκευές.

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

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

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

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

Χαρακτηριστικά Bootstrap

Το Bootstrap είναι συμβατό με τις πιο πρόσφατες εκδόσεις των προγραμμάτων περιήγησης Google Chrome, Mozilla Firefox, Internet Explorer, Opera και Safari. Ορισμένα από αυτά τα προγράμματα περιήγησης δεν υποστηρίζονται σε όλες τις πλατφόρμες.

Τα φύλλα στυλ που παρέχουν βασικούς ορισμούς στυλ για όλα τα κύρια στοιχεία HTML περιλαμβάνονται στο Bootstrap, επιτρέποντας την εύκολη προσαρμογή της εμφάνισης του ιστότοπου.

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

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

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

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

Οφέλη από τη χρήση του Bootstrap

Τα τελευταία χρόνια, το Bootstrap έχει γίνει ένα όλο και πιο δημοφιλές πλαίσιο front-end με εκατομμύρια ιστότοπους που το χρησιμοποιούν.

Σύμφωνα με τον Christopher Gimmer του Bootstrapbay, υπάρχουν πέντε κορυφαίοι λόγοι για τη χρήση του Bootstrap.

Πρώτα, Το Bootstrap αυξάνει την ταχύτητα ανάπτυξης. Ένα από τα κύρια πλεονεκτήματα του Bootstrap είναι η τεράστια ταχύτητα ανάπτυξης.

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

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

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

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

Τρίτος, Η χρήση του Bootstrap εξασφαλίζει συνέπεια.

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

Τέταρτος, Το Bootstrap είναι εύκολα προσαρμόσιμο.

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

Πέμπτος, Καλή υποστήριξη.

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

Ξεκινώντας με το Bootstrap

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

Βασικά, το Bootstrap CSS πρέπει να αναφέρεται στην αρχική ενότητα των αρχείων HTML. Τα αρχεία JavaScript καλούνται στο τέλος του κυρίως σώματος των αρχείων HTML. Αυτή η βασική δομή HTML ονομάζεται πρότυπο Bootstrap.

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

Περιβάλλον ανάπτυξης Bootstrap

Αφού κατεβάσετε και εξαγάγετε την προ-μεταγλωττισμένη έκδοση του Bootstrap, λαμβάνετε τη δομή αρχείου Bootstrap, η οποία είναι πολύ απλή. Τα αρχεία Bootstrap βρίσκονται σε τρεις καταλόγους: css, js και γραμματοσειρές.

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

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

Πόροι Bootstrap

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

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

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

Δωρεάν διαδραστικά μαθήματα

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

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

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

  • Δείτε τα βασικά του Bootstrap στο Codecademy tutorial. Αυτό είναι ένα σύντομο σεμινάριο για αρχάριους που θα σας καθοδηγήσει σε βασικό HTML, CSS και προσθέτοντας Bootstrap στον ιστότοπό σας. Αυτό το σεμινάριο θα σας δείξει τη βασική σύνταξη του Bootstrap με τον online μεταγλωττιστή του.
  • Το W3Schools Bootstrap 3 Tutorial είναι ένας ολοκληρωμένος και πολύ λεπτομερής οδηγός βήμα προς βήμα με μια πλήρη αναφορά Bootstrap για όλες τις κατηγορίες CSS, τα στοιχεία και τα πρόσθετα JavaScript.
  • Tutorialspoint Το Bootstrap tutorial είναι πολύ λεπτομερές, καλύπτοντας σχεδόν όλα όσα πρέπει να γνωρίζετε για το Bootstrap, από το Bootstrap CSS, τα στοιχεία διάταξης, τα πρόσθετα, τις επιδείξεις και τους χρήσιμους πόρους. Αυτό το σεμινάριο Bootstrap διαθέτει επίσης έναν online μεταγλωττιστή και είναι επίσης διαθέσιμο ως λήψη PDF.

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

Επιδείξεις Bootstrap και πρόσθετοι πόροι

Δεδομένου ότι το Bootstrap είναι τόσο δημοφιλές και ευρέως χρησιμοποιούμενο, δεν είναι εύκολο να ξεχωρίσετε μερικούς ιστότοπους για να δείξετε τη δύναμη και τα χαρακτηριστικά του σε δράση.

Γι ‘αυτό θα αφήσουμε αυτήν την επιλογή στην βασική ομάδα του Bootstrap και θα σας φέρουμε την επίσημη εκδήλωση Bootstrap Expo με όμορφα και εμπνευσμένα παραδείγματα του Bootstrap.

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

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

  • Επίσημα θέματα Bootstrap από τους δημιουργούς του Bootstrap
  • Marketplace με με premium, εμπορικά θέματα και πρότυπα Bootstrap: creativemarket.com, wrapbootstrap.com, themeforest.net
  • Δωρεάν πρότυπα και θέματα Bootstrap: startbootstrap.com, shapebootstrap.net, bootstrapzero.com.

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

Ebooks και χαρτόδετα βιβλία

Υπάρχουν πολλοί διαδικτυακοί πόροι για το Bootstrap, αλλά αν προτιμάτε ένα βιβλίο ή ένα ebook, η επιλογή είναι περιορισμένη.

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

Εάν προτιμάτε φυσικά κείμενα και βιβλία, εδώ είναι μερικά από τα κείμενα Bootstrap που διατίθενται σήμερα:

  • Βήμα προς βήμα Bootstrap 3: Ένας γρήγορος οδηγός για την αποκριτική ανάπτυξη Ιστού Η χρήση του Bootstrap 3 από το Riwanto Megosinarso είναι ένας πραγματικός οδηγός βήμα προς βήμα για αρχάριους. Συνιστάται εάν είστε εντελώς νέοι στο Bootstrap και καλύπτει αρκετά για να ξεκινήσετε.
  • Jump Start Bootstrap από τον Syed Fazle Rahman είναι κατάλληλο για αρχάριους και ενδιάμεσους προγραμματιστές, καλύπτοντας όλα όσα χρειάζεστε υλοποιήστε το Bootstrap στην ιστοσελίδα σας.
  • Bootstrap Site Blueprints των David Cochran και Ian Whitley είναι γραμμένο για αρχάριους έως ενδιάμεσους προγραμματιστές front end. Καλή κάλυψη προσαρμογής στοιχείων και διατάξεων Bootstrap.

Και οι τρεις είναι επίσης διαθέσιμοι σε μορφή eBook για το Kindle.

Σημαντικοί σύνδεσμοι

  • Μπότα
  • Bootstrap στο GitHub.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map