Ξεκινήστε με τη Bulma

Θέλετε να ξεκινήσετε τη χρήση του Bulma; Είστε στο σωστό μέρος. Το Bulma είναι ένα δημοφιλές πλαίσιο CSS με ένα απλό σύστημα πλέγματος FlexBox. Διαφέρει από άλλα πλαίσια, λαμβάνοντας μια ελαφρύτερη προσέγγιση και χωρίς να συμπεριλαμβάνω τυχόν javascript - αφήνοντας την απόφαση αυτή εξ ολοκλήρου από τον προγραμματιστή (για να εξερευνήσετε άλλες επιλογές, δείτε την επιλογή μας Καλύτερα πλαίσια CSS ).

Σε αυτό το σεμινάριο, θα επιδείξουμε τον τρόπο εγκατάστασης της Bulma και να οικοδομήσουμε έναν ιστότοπο με τις διάφορες τάξεις της. Για να αποδείξετε πόσο ευέλικτο οι τάξεις βρίσκονται στη Bulma, ολόκληρη η σελίδα σεμινάριο έχει κατασκευαστεί χωρίς να γράφει μία μόνο γραμμή CSS. Θέλετε άλλες επιλογές; Δοκιμάστε ένα εξαιρετικό οικοδόμος ιστότοπου . Και να βεβαιωθείτε ότι ο ιστότοπός σας τρέχει στο καλύτερο δυνατό, επιλέξτε το σωστό web hosting υπηρεσία.

• Κάντε κλικ για να κάνετε λήψη των αρχείων φροντιστηρίων

Δημιουργία CSS είναι το πιο hot web event στην πόλη. Από τις 20-22 Σεπτεμβρίου μπορείτε να πάρετε ένα εισιτήριο για μισή τιμή χρησιμοποιώντας τον κώδικα Flashsale5. Κάντε κλικ στην εικόνα για να μάθετε περισσότερα.

01. Ξεκινήστε

Δημιουργήστε έναν νέο κατάλογο και μέσα σε αυτό, δημιουργήστε ένα index.html αρχείο. Ανοίξτε αυτό το αρχείο σε έναν επεξεργαστή κώδικα και δημιουργήστε ένα απλό έγγραφο HTML Starter, με ένα HTML DOCTYPE και μια ευαίσθητη ετικέτα προβολής.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; κεφάλι & gt;
& lt; meta όνομα = "viewport" περιεχόμενο =
"Πλάτος = πλάτος συσκευής, αρχική κλίμακα = 1" & gt;
& lt; τίτλος & gt; σελίδα τίτλου & lt; / τίτλος & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; / Body & GT;
& lt; / html & gt; 

02. Εγκαταστήστε τη Bulma

Χρησιμοποιώντας το Bulma out Το κουτί είναι τόσο γρήγορο όσο προσθέτοντας ένα μόνο αρχείο CSS. Χρησιμοποιώντας το CDN προσθέστε ένα σύνδεσμο στο HTML. Εάν είναι απαραίτητο να αλλάξετε μεταβλητές και να έχετε περισσότερο έλεγχο στο πλαίσιο, npm εγκαθιστά τη βόλτα μπορεί να χρησιμοποιηθεί (δείτε το Πλήρης τεκμηρίωση ). Για την πλήρη εμπειρία, πρέπει επίσης να συμπεριληφθεί η γραμματοσειρά Awesome 5.

 & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; script defer src = "https://use.fontawesome.com/reless/v5.3.1/js/all.js" & gt; / script & gt; 

03. Δημιουργήστε μια σελίδα

Μέσα στην ετικέτα του σώματος, δημιουργήστε ένα στοιχείο τμήματος και ένα div με την τάξη δοχείο . Μέσα στο δοχείο, δημιουργήστε ένα H1 με την τάξη τίτλος Στη συνέχεια, μια παράγραφο με την τάξη υπότιτλος . Προς το παρόν, εισάγονται 'Hello World' στον τίτλο και κάποιο κείμενο στην παράγραφο. Τώρα έχουμε το βασικό πρότυπο εκκίνησης για τη Bulma.

 & lt; Τμήμα κλάσης = "Τμήμα" & GT;
& lt; div class = "container" & gt;
& lt; h1 class = "τίτλος" & gt;
Γειά σου Κόσμε
& lt; / h1 & gt;
& lt; p τάξη = "subtitle" & gt;
Αυτός είναι ο βασικός εκκινητής
Πρότυπο για τη βολή
& lt; / p & gt;
& lt; / div & gt;
& lt; / τμήμα & gt; 

04. Δημιουργήστε ένα κορυφαίο μπαρ ήρωας

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

 & LT; Τμήμα Class = "Ήρωας" & GT;
& lt; div class = "ήρωα-σώμα" & gt;
& lt; div class = "εμπορευματοκιβώτιο" & gt; ... / div & gt;
& lt; / div & gt;
& lt; / div & gt; 

05. Προσθήκη τίτλου και υπότιτλους

Μέσα στο δοχείο Div, προσθέστε ετικέτα H1 και H2 με τις τάξεις τίτλος και υπότιτλος . Αυτές είναι οι τάξεις τυπογραφίας που θα αυξήσουν το μέγεθος του περιεχομένου τους. Το Bulma είναι έξυπνο να γνωρίζει πότε συνδυάζονται ένας τίτλος και ένας υπότιτλος και θα τους φέρει πιο κοντά.

06. Προσθέστε μια splash του χρώματος

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

 & LT; Τμήμα Class = "Ηρώων είναι-πρωταρχική" & GT; 

07. Διαχωρίστε το περιεχόμενο σε στήλες

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

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

 & lt; Τμήμα κλάσης = "Τμήμα" & GT;
& lt; div class = "container" & gt;
& lt; div class = "στήλες είναι-vencedered" & gt;
& lt; div class = "στήλη" & gt;
...
& lt; / div & gt;
& lt; div class = "στήλη" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / τμήμα & gt; 

08. Δημιουργήστε απαντήσεις εικόνων

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

 & lt; div class = "στήλη" & gt;
& lt; figure class = "image IS-16BY9" & GT;
& lt; img src = "img / dog.jpg" & gt;
& lt; / Εικόνα & GT;
& lt; / div & gt; 

09. Προτείνετε δράση με κουμπιά

Η κλάση του κουμπιού δημιουργεί πολύχρωμα κουμπιά και μπορεί να εφαρμοστεί & lt; a & gt; στοιχεία ή & lt; button & gt; Στοιχεία σε Forms.Add δύο κουμπιά στην πρώτη στήλη και εφαρμόστε τους τροποποιητές χρώματος σε αυτά. Εάν χρησιμοποιείτε περισσότερα από ένα κουμπιά, τυλίξτε τα σε ένα div με την τάξη κουμπιά , η οποία διορθώνει το κενό και επιτρέπει την εφαρμογή των κλάσεων ως ομάδα.

 & lt; div class = "κουμπιά" & gt;
& lt; ένα κουμπί class = "is-info" & gt;
Μάθετε περισσότερα & LT; / A & GT;
& lt; ένα κουμπί class = "is-κίνδυνος περιγράφεται" & gt;
Αγοράστε τώρα & LT; / A & GT;
& lt; / div & gt; 

10. Δημιουργία περιεχομένου πλαισίου

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

 & lt; div class = "στήλη" & gt;
& lt; div class = "box" & gt;
Δοκιμή
& lt; / div & gt;
& lt; / div & gt; 

11. Χρησιμοποιήστε εικονικά κουτιά

Το Bulma ενσωματώνεται με τη γραμματοσειρά Awesome 5, αλλά είναι συμβατό με όλες τις βιβλιοθήκες γραμματοσειρών και έχει μαθήματα για να καλέσετε τα περισσότερα διαθέσιμα εικονίδια. Μέσα σε κάθε κουτί, προσθέστε ένα δοχείο περιεχομένου, ακολουθούμενο από ένα στοιχείο Span με την τάξη εικόνισμα . Μέσα στο άνοιγμα, χρησιμοποιήστε ένα & lt; i & gt; στοιχείο για να καλέσετε τις απαιτούμενες κατηγορίες για το επιθυμητό εικονίδιο. Τα εικονίδια χρωματίζονται με τον ίδιο τρόπο όπως το κείμενο.

 & lt; div class = "περιεχόμενο" & gt;
& lt; span class = "icon" & gt;
& lt; i class = "fas fa-lg fa-home
has-text-success "& gt; / i & gt;
& lt; / span & gt;
& lt; div class = "τίτλος είναι-μέγεθος-6" & gt; ... / lt; / div & gt;
& lt; div class = "subtitle IS-size-6" & gt; / div & gt;
& lt; / div & gt;

12. Να είστε τολμηροί

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

13. Αλλάξτε τα επίπεδα

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

& lt; div class = "επίπεδο" & gt;
& lt; div class = "επίπεδο-στοιχείο έχει κείμενο-κείμενο" & gt;
...
& lt; / div & gt;
& lt; div class = "επίπεδο-στοιχείο έχει κείμενο-κείμενο" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Προσθήκη και φόρμες ελέγχου

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

 & lt; div class = "field" & gt;
& lt; div class = "Έλεγχος έχει-εικονίδια-αριστερά
Έχει-εικονίδια-δεξιά "& gt;
& lt; κλάση εισόδου = "είσοδος" τύπου = "email"
placeholder = "Το email σας" & gt;
& lt; span class = "Το εικονίδιο είναι-μικρό
είναι αριστερά "& gt;
& lt; i κλάση = "fas fa-φάκελο" & gt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt; 

15. Δώστε στους χρήστες ανατροφοδότηση

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

 & lt; άρθρο class = "μήνυμα IS-INFO" & GT;
& lt; div class = "message-header" & gt;
& lt; p & gt; ευχαριστώ! & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "μήνυμα-σώμα" & gt;
... & lt; / div & gt;
& lt; / άρθρο & gt; 

16. Προσθέστε ένα υποσέλιδο

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

 & LT; Footer Class = "Footer" & GT;
& lt; div class = "περιεχόμενο έχει-κείμενο-επικεντρωμένο" & gt;
& lt; p & gt; ... / p & gt;
& lt; / div & gt;
& lt; / footer & gt; 

17. Προσαρμογή των μεταβλητών

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

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

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

Διαβάστε περισσότερα:

• 5 Εμπνευσμένες μελέτες περιπτώσεων σχεδιασμού ιστοσελίδων
• Τα καλύτερα εργαλεία σχεδιασμού UI
• Master Minimalist Website Design