Αν δεν έχετε ακούσει ποτέ για το Bootstrap, ένα πλαίσιο που αναπτύχθηκε από το Twitter για την κατασκευή όμορφων ιστότοπων, λείπετε! Το Bootstrap καθιστά αρκετά γρήγορο και εύκολο το σχεδιασμό ενός ιστότοπου χωρίς πολλές γνώσεις στο CSS (Cascading Style Sheets). Εάν είστε νέοι στον προγραμματισμό του ιστού, δεν χρειάζεται να γνωρίζετε τίποτα σχετικά με το CSS για να αρχίσετε να μαθαίνετε πώς λειτουργεί το Bootstrap. το μόνο που χρειάζεστε είναι ένα ενιαίο έγγραφο HTML. Θα ρίξουμε μια ματιά στο Bootstrap, δείχνοντάς σας τι είναι όλο, πώς λειτουργεί, και αν είναι μια καλή επιλογή για κάθε ιστοσελίδα που χτίζετε.
Εισαγωγή του API Bootstrap στο αρχείο HTML σας
Έχετε μερικές επιλογές για την εισαγωγή Bootstrap στο κύριο αρχείο έργου σας. Η πρώτη επιλογή είναι να εισαγάγετε όλα τα απαραίτητα αρχεία Bootstrap στο έργο σας. Μπορείτε να το κάνετε αυτό κάνοντας λήψη του πακέτου και φορτώνοντας το στο φάκελο του έργου σας. Βεβαίως, θα πρέπει να συνδέσετε το πρωτεύον αρχείο CSS Bootstrap στο έγγραφό σας. Ο επίσημος ιστότοπος του Bootstrap έχει έναν οδηγό βήμα προς βήμα για το πώς να το κάνετε αυτό.
Η άλλη επιλογή είναι να παραλείψετε τη λήψη του πακέτου και να χρησιμοποιήσετε ένα δίκτυο παροχής περιεχομένου (CDN). Ένα CDN σάς επιτρέπει να συνδέσετε τα πρωταρχικά αρχεία Bootstrap στο έγγραφο HTML χωρίς ποτέ να το κατεβάσετε. Αυτό, φυσικά, δεν είναι πάντα καλό για τους επαγγελματικούς ιστότοπους, γιατί δεν θα ήμουν πολύ γρήγορος να αφήσω την επιχείρησή μου ή τη σελίδα του χαρτοφυλακίου μου σε μοίρα αν ο διακομιστής αυτός θα έπεφτε ποτέ. Είναι καλύτερο να έχετε τα αρχεία στο έργο σας, αλλά για τους σκοπούς της μάθησης, το CDN θα κάνει καλά.
Για να εισαγάγετε το Bootstrap στο έγγραφό σας HTML, θα χρειαστεί να τοποθετήσετε τον ακόλουθο κώδικα μέσα στο
ετικέτα στο έγγραφο HTML:Μόλις οι σύνδεσμοι εισαχθούν σε αυτήν την ετικέτα κεφαλής, θα πρέπει να ρυθμίσετε όλες τις επιλογές για να ξεκινήσετε να χρησιμοποιείτε τις κλάσεις Bootstrap. Το έγγραφό σας θα πρέπει να έχει το εξής σχήμα:
Bootstrap και κλάσεις
Τα στοιχεία Bootstrap αναλύονται σε κατηγορίες, τα οποία είναι απλώς μια δέσμη προ-γραπτών CSS που μπορείτε να εισαγάγετε στη σήμανσή σας. Η εισαγωγή κλάσεων στη σήμανσή σας είναι εύκολη, απλά πρέπει να γνωρίζετε το όνομα της κλάσης που θέλετε να χρησιμοποιήσετε και στη συνέχεια να την εφαρμόσετε σε ένα από τα στοιχεία HTML χρησιμοποιώντας την τιμή class = "classname", όπως αναλύθηκε σε προηγούμενο άρθρο.
Το δύσκολο κομμάτι είναι να υπολογίσουμε πώς όλα αυτά συνεργάζονται για να δημιουργήσουν κάτι όμορφο. Μπορείτε να δείτε όλες τις διαφορετικές κατηγορίες που είναι διαθέσιμες στο Bootstrap απευθείας από την επίσημη τεκμηρίωση. Τώρα, το mastering Bootstrap είναι μια άλλη ιστορία. Αυτό δεν είναι κάτι που εμείς ή οποιοσδήποτε άλλος μπορεί να σας διδάξει. Μπορείτε να παρακολουθήσετε το σεμινάριο μετά από το σεμινάριο, αλλά να κάνετε καλό στο να χρησιμοποιήσετε το πλαίσιο, το οποίο έρχεται με πολλές δοκιμές και λάθη. ¶Και, αυτό απαιτεί από εσάς να πάρετε το χέρι-επάνω με αυτό στα δικά σας έργα.
Με αυτό το πνεύμα, σας παρακαλώ να ξεκινήσετε το δικό σας έργο HTML στον υπολογιστή σας χρησιμοποιώντας το Atom ή κάποιο άλλο πρόγραμμα επεξεργασίας κειμένου, να εξετάσετε ποιες είναι οι τάξεις HTML και CSS και στη συνέχεια να αρχίσετε να παίζετε με το Bootstrap. Και αν γνωρίζετε αρκετά σήμανση, ίσως να δημιουργήσετε ακόμη και τον δικό σας ιστότοπο χαρτοφυλακίου ως δοκιμαστική άσκηση.
Είναι bootstrap μια βιώσιμη επιλογή για κάθε ιστοσελίδα;
Bootstrap είναι ένα μεγάλο πλαίσιο, αλλά είναι μια βιώσιμη επιλογή για κάθε ιστοσελίδα που δημιουργείτε; Εξαρτάται πραγματικά από τον κύριο του έργου καθώς και από τις απαιτήσεις του έργου. Σε πολλά επαγγελματικά περιβάλλοντα, δεν θα έχετε πραγματικά την επιλογή των τεχνολογιών που χρησιμοποιείτε, καθώς αυτό θα είναι σε μεγάλο βαθμό από τον Project Manager. Εάν ο εν λόγω διαχειριστής του έργου επιλέξει να χρησιμοποιήσει το Bootstrap, θα το συνδυάσετε και με έναν τόνο προσαρμοσμένου CSS. Αυτό γενικά καθιστά την ιστοσελίδα σας μοναδική και διαφορετική από άλλες ιστοσελίδες χρησιμοποιώντας το Bootstrap.
Εγώ, προσωπικά, δεν βλέπω το Bootstrap ως μια εξαιρετική επιλογή για κάθε ιστοσελίδα. Σίγουρα, μπορεί να βοηθήσει και να παράσχει μερικές συντομεύσεις, αλλά τελικά έχω διαπιστώσει ότι ο σχεδιασμός από την αρχή με το CSS είναι η καλύτερη διαδρομή σε μεγάλο βαθμό εξαιτίας του ελέγχου που έχετε πάνω του. Αλλά για άλλη μια φορά, αν ξεκινάτε απλώς στον προγραμματισμό ιστού, δεν είναι κακό να χρησιμοποιήσετε το Bootstrap καθόλου, αλλά μην το βασίζεστε σε αυτό για την καριέρα σας.
Αξίζει να σημειωθεί ότι εάν είστε αρχάριος προγραμματιστής, δεν θα πρέπει να χρησιμοποιήσετε το Bootstrap για όλα τα έργα του χαρτοφυλακίου σας. Μπορεί να συναντήσει ότι μπορεί να είστε ικανός με το API, αλλά δεν ξέρετε εξ ολοκλήρου το δρόμο σας γύρω από το CSS. Τούτου λεχθέντος, είναι καλό να έχετε ένα αξιοπρεπές μείγμα τόσο του χαρτοφυλακίου σας (ή ακόμα και αποκλειστικά CSS, καθώς είναι εύκολο να παραλάβετε Bootstrap).
Κλείσιμο
Αυτός είναι ό, τι είναι το Bootstrap με λίγα λόγια. Όπως ανέφερα προηγουμένως, σας ενθαρρύνω να ξεκινήσετε το δικό σας έργο HTML και να προσθέσετε μερικές από τις διαφορετικές κλάσεις σε στοιχεία για να αρχίσετε να παίζετε με το πλαίσιο. Μπορείτε να βρείτε όλες τις διαφορετικές συνιστώσες Bootstrap με επεξηγήσεις και παραδείγματα κώδικα εδώ.
Το bootstrap είναι πραγματικά ένα χρήσιμο εργαλείο, αλλά θυμηθείτε να μην το βασίζεστε μόνο του! Είναι καλό να είστε εξοικειωμένοι με αυτό και να γνωρίζετε το δρόμο σας γύρω από το πλαίσιο, αλλά βεβαιωθείτε επίσης ότι βουτάτε στο CSS για να καταλάβετε πραγματικά τι συμβαίνει πίσω από τα σκηνικά. Όχι μόνο αυτό, αλλά μια σταθερή γνώση στις CSS compliments Bootstrap πολύ, επιτρέποντάς σας να κάνετε πραγματικά μερικές μοναδικές και όμορφες ιστοσελίδες με τη δική σας προσαρμογή.
