Μάθετε το Bulma CSS σε 5 λεπτά - Ένα σεμινάριο για αρχάριους

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

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

Δημιουργήσαμε επίσης ένα δωρεάν μάθημα Bulma. Κάντε κλικ εδώ για να το δείτε!

Μπορείτε να κάνετε κλικ στην εικόνα για να φτάσετε στο μάθημα

Η εγκατάσταση

Η εγκατάσταση του Bulma είναι εξαιρετικά εύκολη και μπορείτε να το κάνετε με διάφορους τρόπους, είτε προτιμάτε το NPM, είτε το κατεβάζετε απευθείας από τα έγγραφα είτε χρησιμοποιώντας ένα CDN. Απλώς πρόκειται να συνδεθούμε με ένα CDN από το αρχείο HTML, όπως αυτό:

Αυτό θα μας δώσει πρόσβαση στα μαθήματα Bulma. Και αυτό είναι όλο το Bulma - μια συλλογή μαθημάτων.

Τροποποιητές

Το πρώτο πράγμα που πρέπει να μάθετε για το Bulma είναι οι τάξεις τροποποιητών. Αυτά σας επιτρέπουν να ορίσετε εναλλακτικά στυλ σε όλα σχεδόν τα στοιχεία της Bulma. Όλα ξεκινούν με is-*ή has-*, και στη συνέχεια αντικαθιστάτε το *με το στυλ που θέλετε.

Για να κατανοήσουμε σωστά αυτήν την ιδέα, ας ξεκινήσουμε κοιτάζοντας τα κουμπιά.

Κουμπιά

Για να μετατρέψετε ένα κανονικό κουμπί σε ένα κουμπί Bulma, απλώς θα του δώσουμε την τάξη button.

Click here 

Που οδηγεί στο ακόλουθο στυλ:

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

Click here 

Αυτό το αποτέλεσμα είναι ένα ευχάριστο κουμπί:

Μπορείτε επίσης να χρησιμοποιήσετε τροποποιητές για τον έλεγχο της κατάστασης των κουμπιών. Για παράδειγμα, ας προσθέσουμε την τάξη is-focused, η οποία προσθέτει ένα περίγραμμα γύρω της:

Τέλος, ας χρησιμοποιήσουμε επίσης έναν από τους has-*τροποποιητές. Αυτά συνήθως ελέγχουν τι υπάρχει μέσα στο στοιχείο. Στην περίπτωσή μας, το κείμενο. Ας προσθέσουμε has-text-weight-bold.

Εδώ είναι το αποτέλεσμα:

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

Στήλες

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

 First column Second column Third column Fourth column 

Πρώτα, δημιουργούμε ένα κοντέινερ με μια κατηγορία columns, και μετά δίνουμε σε κάθε ένα από τα παιδιά μια κατηγορία column. Καταλήγει στα ακόλουθα:

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

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

Σημειώστε ότι μπορείτε να προσθέσετε όσες στήλες θέλετε. Το Flexbox φροντίζει να κατανείμει το χώρο ισότιμα ​​μεταξύ τους.

Για να δώσουμε χρώματα στις στήλες, μπορούμε να αντικαταστήσουμε το κείμενο μέσα τους με ένα

και δώστε την notificationτάξη και έναν is-*τροποποιητή. Όπως για παράδειγμα:

Πρώτη στήλη

Ας κάνουμε αυτό χρησιμοποιώντας το is-info, is-success, is-warningκαι is-dangerτροποποιητές, η οποία έχει ως αποτέλεσμα τα ακόλουθα:

Το notificationμάθημα προορίζεται για την προειδοποίηση των χρηστών για κάτι, καθώς σας επιτρέπει να γεμίσετε το φόντο με ένα χρώμα χρησιμοποιώντας τους is-*τροποποιητές. Εδώ λειτουργεί καλά για το διαχωρισμό των στηλών.

Μπορούμε επίσης να ελέγξουμε εύκολα το πλάτος μιας στήλης. Ας προσθέσουμε τον is-halfτροποποιητή στην πράσινη στήλη.

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

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

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

Ήρωας

Τέλος, ας μάθουμε επίσης πώς να δημιουργήσουμε έναν ήρωα στη Bulma. Θα χρησιμοποιήσουμε το σημασιολογικό , και θα του δώσουμε μια τάξη heroκαι is-infoθα του δώσουμε κάποιο χρώμα. Πρέπει επίσης να προσθέσουμε ένα παιδί στην τάξη hero-body.

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

Primary title

Primary subtitle

Τώρα αρχίζει να φαίνεται καλό! Εάν θέλουμε να είναι μεγαλύτερο, μπορούμε απλά να προσθέσουμε is-mediumστην ίδια την ετικέτα.

 ... 

Και αυτό είναι!

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

Φροντίστε να δείτε το δωρεάν μάθημα Bulma στο Scrimba εάν θέλετε να μάθετε περισσότερα!

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