Πίνακας περιεχομένων:
- Τα κουμπιά είναι ένα βασικό στοιχείο σε πολλές ιστοσελίδες, αλλά συνήθως μπορεί να είναι δύσκολο να ρυθμιστούν και να στυλιστούν. Όπως φαίνεται εδώ, τα κουμπιά μπορούν να έχουν διάφορους τύπους και μεγέθη.
- ή το πλήκτρο εργαλείων πλοήγησης σε συμπαγή πλήκτρα
- Ελέγξτε εδώ για τα ονόματα όλων των glyphs Bootstrap.
Βίντεο: Building Dynamic Web Apps with Laravel by Eric Ouyang 2024
Τα παρακάτω παραδείγματα δείχνουν πώς μπορείτε να δημιουργήσετε γρήγορα κοινά στοιχεία ιστού.
Τα κουμπιά είναι ένα βασικό στοιχείο σε πολλές ιστοσελίδες, αλλά συνήθως μπορεί να είναι δύσκολο να ρυθμιστούν και να στυλιστούν. Όπως φαίνεται εδώ, τα κουμπιά μπορούν να έχουν διάφορους τύπους και μεγέθη.
Τύπος κουμπιού
Βασικός τύπος κουμπιού με επίδραση αιωρήματος | Κωδικός εκκίνησης για δημιουργία κουμπιών | |
Κόκκινο κουμπί με επίδραση αιωρήματος |
Μπλε κουμπί
|
Μπλε κουμπί με επίδεσμο
Πράσινο κουμπί με εφέ κίνησης
Μεγάλο κουμπί μέγεθος Μικρό μέγεθος κουμπιού Για να δημιουργήσετε ένα κουμπί, γράψτε την ακόλουθη HTML: |
Ξεκινήστε με το κουμπί |
|
HTML.
Στο κουμπί ανοίγματος << > συμπεριλάβετε το |
type = "button"
- .
Συμπεριλάβετε το χαρακτηριστικό κλάσης με την τιμή χαρακτηριστικού κλάσης
btn - και προσθέστε πρόσθετα πρόθεμα κλάσης με βάση το αποτέλεσμα που θέλετε.
Για να προσθέσετε επιπλέον στυλ, συνεχίστε να προσθέτετε το πρόθεμα
classστο χαρακτηριστικό HTML
- .
Μεγάλο βασικό κουμπί
- Μεγάλο προεπιλεγμένο κουμπί
Προεπιλεγμένο κουμπί επιτυχίας
Προεπιλεγμένο προεπιλεγμένο κουμπίΜικρό κουμπί κινδύνου
Τύποι και μεγέθη κουμπιού Bootstrap.
Ελέγξτε τον πρόσθετο τύπο κουμπιού, το μέγεθος του κουμπιού και άλλες επιλογές κουμπιών.
Πλοήγηση με γραμμές εργαλείων
ιστοσελίδες με πολλές σελίδες ή προβολές έχουν συνήθως μία ή περισσότερες γραμμές εργαλείων για να βοηθήσουν τους χρήστες με πλοήγηση. Ακολουθούν ορισμένες επιλογές γραμμής εργαλείων.
Κωδικός Bootstrap για δημιουργία γραμμών εργαλείων πλοήγησης
Χαρακτηριστικό
Πρόθεμα κλάσης
Τύπος γραμμής εργαλείων
ή το πλήκτρο εργαλείων πλοήγησης σε συμπαγή πλήκτρα
Τύπος κουμπιού γραμμής εργαλείων
μενού αναπτυσσόμενου μενού | Κουμπί ή καρτέλα ως αναπτυσσόμενο μενού | Εικονίδιο αναπτυσσόμενου μενού κάτω βέλους |
Στοιχεία μενού |
Για να δημιουργήσετε μια γραμμή εργαλείων πλοήγησης για χάπια ή συμπαγή κουμπιά, γράψτε την ακόλουθη HTML:
|
ul
. |
Στην ετικέτα ανοίγματος |
, συμπεριλάβετε
|
.
Δημιουργία κουμπιών χρησιμοποιώντας την ετικέτα . Συμπεριλάβετε την ετικέτα |
class = "active"
- σε μια ετικέτα
για να ορίσετε ποια καρτέλα στην κύρια γραμμή εργαλείων πρέπει να εμφανίζεται ως οπτικά επισημασμένη όταν το ποντίκι αιωρείται πάνω από το κουμπί.
Για να δημιουργήσετε ένα αναπτυσσόμενο μενού, τοποθετήστε μια λίστα με ασυνέχεια. Δείτε τον κώδικα δίπλα στο "Περισσότερα" με τα προθέματα τάξης - "dropdown"
"caret"
και - "αναπτυσσόμενο μενού
Μπορείτε να κάνετε σύνδεση με άλλες ιστοσελίδες στο αναπτυσσόμενο μενού χρησιμοποιώντας την ετικέτα
. - Χρονολογική σειρά
Περίπου
ΦωτογραφίεςΦίλοι
ΠερισσότεραΜέρη
ΑθλητισμόςΜουσική < drop-down μενού.
εναλλαγής
Τα εικονίδια χρησιμοποιούνται συχνά με κουμπιά για να βοηθήσουν να μεταδοθεί κάποιος τύπος ενέργειας. Για παράδειγμα, το πρόγραμμα ηλεκτρονικού ταχυδρομείου σας χρησιμοποιεί πιθανώς ένα κουμπί με ένα εικονίδιο κάδου απορριμμάτων για τη διαγραφή μηνυμάτων ηλεκτρονικού ταχυδρομείου. Τα εικονίδια διαβιβάζουν γρήγορα μια προτεινόμενη ενέργεια στους χρήστες χωρίς πολλές εξηγήσεις.
. Ο ακόλουθος κώδικας παραδείγματος δημιουργεί τρία κουμπιά με ένα αστέρι, συνδετήρα χαρτιού και κάδο απορριμμάτων.
Star
Επισύναψη
Κάδος
Κουμπιά Bootstrap με εικονίδια.