Πώς να κωδικοποιήσει βασικά στοιχεία της ιστοσελίδας με Bootstrap - dummies

Βίντεο: Building Dynamic Web Apps with Laravel by Eric Ouyang 2024

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

Τα παρακάτω παραδείγματα δείχνουν πώς μπορείτε να δημιουργήσετε γρήγορα κοινά στοιχεία ιστού.

Κουμπιά σχεδίασης

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

Τύπος κουμπιού

btn-defaultbtn-primarybtn-successbtn-danger

Βασικός τύπος κουμπιού με επίδραση αιωρήματος Κωδικός εκκίνησης για δημιουργία κουμπιών

Κόκκινο κουμπί με επίδραση αιωρήματος


Μπλε κουμπί

Μπλε κουμπί με επίδεσμο

Πράσινο κουμπί με εφέ κίνησης

Μεγάλο κουμπί μέγεθος

Μικρό μέγεθος κουμπιού

Για να δημιουργήσετε ένα κουμπί, γράψτε την ακόλουθη HTML:

Ξεκινήστε με το κουμπί

HTML.

Στο κουμπί ανοίγματος << >

συμπεριλάβετε το

type = "button"

. Συμπεριλάβετε το χαρακτηριστικό κλάσης με την τιμή χαρακτηριστικού κλάσης btn
και προσθέστε πρόσθετα πρόθεμα κλάσης με βάση το αποτέλεσμα που θέλετε. Για να προσθέσετε επιπλέον στυλ, συνεχίστε να προσθέτετε το πρόθεμα class στο χαρακτηριστικό HTML
. Μεγάλο βασικό κουμπί


Μεγάλο προεπιλεγμένο κουμπί

Προεπιλεγμένο κουμπί επιτυχίας

Προεπιλεγμένο προεπιλεγμένο κουμπί

Μικρό κουμπί κινδύνου


Μικρό προεπιλεγμένο κουμπί
Τύποι και μεγέθη κουμπιού Bootstrap.



Ελέγξτε τον πρόσθετο τύπο κουμπιού, το μέγεθος του κουμπιού και άλλες επιλογές κουμπιών.




Πλοήγηση με γραμμές εργαλείων








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


Κωδικός Bootstrap για δημιουργία γραμμών εργαλείων πλοήγησης






Χαρακτηριστικό




Πρόθεμα κλάσης






Περιγραφή
Τύπος γραμμής εργαλείων

ή το πλήκτρο εργαλείων πλοήγησης σε συμπαγή πλήκτρα
Τύπος κουμπιού γραμμής εργαλείων
 αναπτυσσόμενο μενού

 μενού αναπτυσσόμενου μενού 
 Κουμπί ή καρτέλα ως αναπτυσσόμενο μενού 
 Εικονίδιο αναπτυσσόμενου μενού κάτω βέλους 



 Στοιχεία μενού 


Για να δημιουργήσετε μια γραμμή εργαλείων πλοήγησης για χάπια ή συμπαγή κουμπιά, γράψτε την ακόλουθη HTML:


Ξεκινήστε μια μη ταξινομημένη λίστα χρησιμοποιώντας το στοιχείο


 ul
.


 Στην ετικέτα ανοίγματος 


, συμπεριλάβετε


class = "nav nav-pills"


.
Δημιουργία κουμπιών χρησιμοποιώντας την ετικέτα
. Συμπεριλάβετε την ετικέτα 



class = "active"

σε μια ετικέτα

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

Για να δημιουργήσετε ένα αναπτυσσόμενο μενού, τοποθετήστε μια λίστα με ασυνέχεια. Δείτε τον κώδικα δίπλα στο "Περισσότερα" με τα προθέματα τάξης
"dropdown"



,

"caret"

και
"αναπτυσσόμενο μενού



.

Μπορείτε να κάνετε σύνδεση με άλλες ιστοσελίδες στο αναπτυσσόμενο μενού χρησιμοποιώντας την ετικέτα

.



Ο παρακάτω κώδικας δημιουργεί μια γραμμή εργαλείων χρησιμοποιώντας το Bootstrap:
Χρονολογική σειρά

Περίπου

Φωτογραφίες

Φίλοι

Περισσότερα

Μέρη

Αθλητισμός
Μουσική < drop-down μενού.


Η τάξη

εναλλαγής




και το χαρακτηριστικό και η τιμή



data-toggle = "dropdown"



λειτουργούν μαζί για να προσθέσουν αναπτυσσόμενα μενού σε στοιχεία όπως συνδέσμους. Ελέγξτε τις πρόσθετες επιλογές της γραμμής εργαλείων.



Προσθήκη εικονιδίων






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









Αυτά τα εικονίδια ονομάζονται



glyphs,



και τα εικονίδια Glyph παρέχουν τα glyphs που χρησιμοποιούνται στο Bootstrap.












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

Star

Επισύναψη

Κάδος

Κουμπιά Bootstrap με εικονίδια.

Ελέγξτε εδώ για τα ονόματα όλων των glyphs Bootstrap.