Μάθετε το Bootstrap 4 σε 30 λεπτά δημιουργώντας έναν ιστότοπο προορισμού

από το templatetoaster

Οδηγός για αρχάριους

"Bootstrap είναι μια ελεύθερη βιβλιοθήκη front-end ανοικτού κώδικα για το σχεδιασμό ιστοσελίδων και εφαρμογών web. Περιέχει πρότυπα σχεδίασης HTML και CSS για όλα από τυπογραφία, φόρμες, κουμπιά, πλοήγηση και άλλα στοιχεία διεπαφής καθώς και επεκτάσεις JavaScript. Σε αντίθεση με πολλά άλλα πλαίσια ιστού, το Bootstrap ασχολείται αποκλειστικά με την ανάπτυξη του front-end. "- Wikipedia
Γεια σας, προτού ξεκινήσετε να ελέγχετε την πλήρη τάξη μου για να μάθετε το Bootstrap 4, όπου θα μάθετε νέα χαρακτηριστικά της bootstrap και πώς να τα χρησιμοποιήσετε για να δημιουργήσετε καλύτερες εμπειρίες χρήστη.

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

Προϋποθέσεις

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

  • Βασικές αρχές HTML
  • βασικές γνώσεις του CSS
  • και μερικά βασικά JQuery

Πίνακας περιεχομένων

Θα καλύψουμε τα παρακάτω θέματα κατά την οικοδόμηση του ιστότοπου:

  • Λήψη και εγκατάσταση Bootstrap 4
  • Τα νέα χαρακτηριστικά του Bootstrap 4
  • Σύστημα πλέγματος Bootstrap
  • Navbar
  • Επί κεφαλής
  • Κουμπιά
  • Σχετικά με το τμήμα
  • Τμήμα Χαρτοφυλακίου
  • Τμήμα Blog
  • Καρτέλλες
  • Τμήμα ομάδας
  • Φόρμα Επικοινωνίας
  • Γραμματοσειρές
  • Εφέ μετακίνησης
  • Συμπλήρωση και συμπέρασμα

Λήψη και εγκατάσταση Bootstrap 4

Υπάρχουν τρεις τρόποι για να εγκαταστήσετε και να συμπεριλάβετε το Bootstrap 4 για το έργο σας:

  1. Χρησιμοποιήστε npm

Μπορείτε να εγκαταστήσετε το Bootstrap 4 εκτελώντας αυτή την εντολή npm install bootstrap

2. Χρησιμοποιήστε ένα δίκτυο παροχής περιεχομένου (CDN)

Συμπεριλαμβάνοντας αυτό το σύνδεσμο στο έργο σας ανάμεσα σε επικεφαλίδες:

3. Κάντε λήψη της βιβλιοθήκης Bootstrap 4 και χρησιμοποιήστε την τοπικά.

Η δομή του έργου μας θα πρέπει να έχει ως εξής:

Τα νέα χαρακτηριστικά του Bootstrap 4

Τι νέο υπάρχει στο Bootstrap 4; Και τι είναι διαφορετικό μεταξύ του Bootstrap 3 και του 4;

Το Bootstrap 4 έρχεται τώρα με μερικά απίστευτα χαρακτηριστικά που δεν υπήρχαν στην τελευταία έκδοση:

  • Το Bootstrap 4 γράφεται χρησιμοποιώντας το Flexbox Grid, ενώ το Bootstrap 3 γράφτηκε με τη μέθοδο float.
    Εάν είστε νέοι στο Flexbox τότε δείτε αυτό το σεμινάριο.
  • Το Bootstrap 4 χρησιμοποιεί μονάδες CSS rem, ενώ το Bootstrap 3 χρησιμοποιεί px.
    Δείτε πώς αυτές οι δύο μονάδες διαφέρουν.
  • Τα πάνελ, οι μικρογραφίες και τα πηγάδια έχουν πέσει εντελώς.
    Μπορείτε να διαβάσετε λεπτομερώς περισσότερα σχετικά με τις συνολικές αλλαγές και τις λειτουργίες που αφαιρέθηκαν από το Bootstrap 4 εδώ.

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

Το σύστημα πλέγματος Bootstrap

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

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

Για να χρησιμοποιήσετε το σύστημα πλέγματος θα πρέπει να προσθέσετε μια κλάση .row στο main div.

col-lg-2 // class που χρησιμοποιείται για μεγάλες συσκευές όπως φορητούς υπολογιστές
col-md-2 // που χρησιμοποιείται για μεσαίες συσκευές όπως τα δισκία
col-sm-2 // που χρησιμοποιείται για μικρές συσκευές όπως τα κινητά τηλέφωνα

Navbar

Το Navbar wrapper είναι αρκετά δροσερό στο Bootstrap 4. Είναι τόσο χρήσιμο όταν πρόκειται για την οικοδόμηση ενός ανταποκριτικού navbar.

Για να το πάρετε, θα προσθέσουμε την κλάση navbar στο αρχείο index.html:


 

Δημιουργήστε και συμπεριλάβετε ένα αρχείο main.css ώστε να μπορείτε να προσαρμόσετε το στυλ CSS.

Τοποθετήστε το στην ετικέτα head in index.html:

Ας προσθέσουμε μερικά χρώματα στο navbar μας:

.navbar {background: # F97300;}
.nav-link, .navbar-μάρκα {χρώμα: # f4f4f4; δρομέας: δείκτης ·}
.nav-link {margin-right: 1em! important}}
.nav-link: hover {φόντο: # f4f4f4; χρώμα: # f97300; }}
.navbar-collapse {justify-content: flex-end}
.navbar-toggler {background: #fff! important;}

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

.navbar-collapse {
 justify-content: flex-end;
}}

Προσθέστε την κλάση .fixed-top στη γραμμή Navbar για να την δώσετε σε μια σταθερή θέση.

Για να φτιάξετε το φως χρώματος φόντου Navbar, προσθέστε .bg-light. Για σκούρο φόντο, προσθέστε το .bg-dark, και για ανοιχτό μπλε φόντο, προσθέστε
.bg-primary.

Δείτε πώς πρέπει να φαίνεται αυτό:

.bg-σκοτάδι {
χρώμα φόντου: # 343a40! σημαντικό
}}
.bg-primary {
χρώμα φόντου: # 007bff! σημαντικό
}}

Επί κεφαλής

  

Ας προσπαθήσουμε να δημιουργήσουμε μια διάταξη για την κεφαλίδα.

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

Αρχικά, δημιουργήστε ένα αρχείο με όνομα main.js και συμπεριλάβετε το στο αρχείο index.html πριν από την ετικέτα κλεισίματος: