Μάθετε το Bootstrap 4 σε αυτό το δωρεάν μάθημα 10 μερών

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

Γι 'αυτό συνεργαστήκαμε με τον Neil Rowe (παλαιότερα γνωστό ως CodersGuide) και δημιουργήσαμε ένα δωρεάν πλήρες μάθημα στο Bootstrap 4. Η Neil δημιούργησε προηγουμένως ένα από τα πιο δημοφιλή μαθήματα Bootstrap 3 στο YouTube, οπότε είμαστε πολύ ευχαριστημένοι που επέλεξε να χρησιμοποιήσει τον Scrimba για την παρακολούθηση μαθημάτων του.

Μπορείτε να παρακολουθήσετε το μάθημα σήμερα. Απλώς κατευθυνθείτε στη σελίδα του μαθήματος και θα γίνετε Master Bootstrap 4 μέσα σε μια ώρα.

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά σε αυτό που θα μάθετε!

# 1 Εισαγωγή μαθήματος

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

# 2 Το σύστημα ανταπόκρισης πλέγματος

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

# 3 Αποκριτικά Navbars

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

# 4 Modals

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

# 5 Έντυπα

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

# 6 Λίστα ομάδων

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

# 7 κάρτες

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

# 8 πίνακες

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

# 9 Ειδοποιήσεις

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

# 10 Επιλογές πλοήγησης

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

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

Η μορφή Scrimba

Τέλος, ας ρίξουμε μια γρήγορη ματιά στην τεχνολογία πίσω από το μάθημα. Είναι κατασκευασμένο χρησιμοποιώντας το Scrimba, ένα διαδραστικό εργαλείο screencast κωδικοποίησης. Ένα "scrim" μοιάζει με κανονικό βίντεο, ωστόσο, είναι πλήρως διαδραστικό. Αυτό σημαίνει ότι μπορείτε να επεξεργαστείτε τον κώδικα μέσα στο screencast.

Εδώ είναι ένα gif που εξηγεί την έννοια:

Παύση της προβολής οθόνης → Επεξεργασία του κώδικα → Εκτέλεση!  → Δείτε τις αλλαγές σας

Παύση της προβολής οθόνης → Επεξεργασία του κώδικα → Εκτέλεση! → Δείτε τις αλλαγές σας

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

Λοιπόν, τι περιμένετε; Προχωρήστε και ακολουθήστε το μάθημα σήμερα!

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per, είμαι ο συνιδρυτής της Scrimba και μου αρέσει να βοηθάω τους ανθρώπους να μάθουν νέες δεξιότητες. Ακολουθήστε με στο Twitter αν θέλετε να λαμβάνετε ειδοποιήσεις για νέα άρθρα και πόρους.

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per Borgen, είμαι ο συνιδρυτής της Scrimba - ο ευκολότερος τρόπος για να μάθεις τον κώδικα. Εάν θέλετε να μάθετε να δημιουργείτε σύγχρονες ιστοσελίδες σε επαγγελματικό επίπεδο, θα πρέπει να ελέγξετε το bootcamp σχεδιασμού ιστοσελίδων που ανταποκρίνεται.