Αυτό το άρθρο θα σας καθοδηγήσει:
- Πώς να φτιάξετε κουμπιά στο Bootstrap;
- Πώς να δημιουργήσετε κουμπιά περίγραμμα στο Bootstrap;
- Πώς να προσαρμόσετε τα μεγέθη των κουμπιών Bootstrap;
- Πώς να δημιουργήσετε ένα κουμπί σε επίπεδο μπλοκ στο Bootstrap;
- Πώς να δημιουργήσετε κουμπιά ενεργών καταστάσεων στο Bootstrap;
- Πώς να δημιουργήσετε κουμπιά κατάστασης απενεργοποιημένης στο Bootstrap;
Πώς να φτιάξετε κουμπιά στο Bootstrap;
The Bootstrap» btn Η κλάση χρησιμοποιείται για τη δημιουργία κουμπιών. Για να προσθέσετε κουμπιά με στυλ, μπορείτε να χρησιμοποιήσετε το ' btn ' τάξη με την κατηγορία χρωμάτων, όπως ' btn-επιτυχία ” για να δημιουργήσετε ένα πράσινο κουμπί.
Σε HTML, το ' <κουμπί> », « ', και ' <εισαγωγή> 'ετικέτες με τον τύπο' κουμπί ” χρησιμοποιούνται για τη δημιουργία κουμπιών. Ο ' btn Η τάξη έχει προκαθορισμένο στυλ που προσθέτει βασικό στυλ στα στοιχεία των κουμπιών.
Για μια σαφή ιδέα, δείτε το παρακάτω παράδειγμα.
Παράδειγμα
Στο αρχείο HTML, ακολουθήστε τα βήματα για να δημιουργήσετε κουμπιά χρησιμοποιώντας διαφορετικές ετικέτες:
- Προσθήκη ' <κουμπί> ' και ' «στοιχεία και αντιστοίχιση τους» btn ' και ' btn-primary ” τάξεις.
- Στη συνέχεια, προσθέστε ένα ' <εισαγωγή> 'Ετικέτα με τον τύπο' κουμπί '. Αναθέστε του το « btn ' και ' btn-επιτυχία ” για το στυλ ως δύο πρώτα κουμπιά ως μπλε και το τρίτο ως πράσινο:
< ένα τάξη = 'btn btn-primary' href = '#' > Ανοιξε < / ένα >
< εισαγωγή τύπος = 'κουμπί' τάξη = 'btn btn-επιτυχία' αξία = 'Αναζήτηση' >
Παραγωγή
Πώς να δημιουργήσετε κουμπιά περίγραμμα στο Bootstrap;
Για να προσθέσετε περιγράμματα κουμπιών, το Bootstrap ' btn-outline-* Χρησιμοποιείται η τάξη. Στη σύνταξή του,' * ' εδώ αντιπροσωπεύει το χρώμα του περιγράμματος. Για παράδειγμα, ' btn-περίγραμμα-κίνδυνος ' τοποθετεί το κόκκινο περίγραμμα, ' btn-outline-primary ” θέτει το μπλε περίγραμμα και πολλά άλλα.
Αναλύστε τον κώδικα που δίνεται παρακάτω:
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-outline-primary' >Επόμενο< / κουμπί >< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-outline-danger' >Ακύρωση< / κουμπί >
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-outline-success' >Επιτυχία< / κουμπί >
Μπορεί να παρατηρηθεί ότι το « Επόμενο Το κουμπί ' έχει ένα μπλε περίγραμμα, το ' Ματαίωση κουμπί ' με κόκκινο περίγραμμα και το ' Επιτυχία Το κουμπί ” έχει διαμορφωθεί με πράσινο περίγραμμα:
Πώς να προσαρμόσετε τα μεγέθη των κουμπιών Bootstrap;
Ορισμένες κατηγορίες Bootstrap εφαρμόζονται για την προσαρμογή των μεγεθών των κουμπιών, όπως:
- ' btn-lg Η κλάση ' εφαρμόζεται για τη δημιουργία ενός μεγάλου κουμπιού. Αυτή η κλάση μπορεί να αυξήσει το μέγεθος γραμματοσειράς και το padding.
- ' btn-md ” δημιουργεί ένα κουμπί μεσαίου μεγέθους.
- ' btn-sm ” δημιουργεί ένα μικρό κουμπί.
Παράδειγμα
Τώρα, θα δημιουργήσουμε τρία κουμπιά με διαφορετικά μεγέθη και αυτονόητα ονόματα:
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-secondary btn-lg' >Μεγάλο< / κουμπί >< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-warning btn-md' >μέτρια< / κουμπί >
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-κίνδυνος btn-sm' >Μικρό< / κουμπί >
Παραγωγή
Πώς να δημιουργήσετε ένα κουμπί σε επίπεδο μπλοκ στο Bootstrap;
Τα κουμπιά σε επίπεδο μπλοκ είναι αυτά που κρατούν το μέγεθος πλήρους πλάτους. Για να δημιουργήσετε τα κουμπιά σε επίπεδο μπλοκ, το ' btn-block ” η τάξη χρησιμοποιείται ως εξής
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-warning btn-block' > κουμπί< / κουμπί >< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-secondary btn-block' >κουμπί< / κουμπί >
Παραγωγή
Πώς να δημιουργήσετε κουμπιά ενεργών καταστάσεων στο Bootstrap;
Τα κουμπιά ενεργής κατάστασης αναφέρονται στα κουμπιά που είναι ενεργά αυτήν τη στιγμή. Αυτά τα κουμπιά είναι ελαφρώς πιο σκούρα από το κανονικό. Για να δημιουργήσετε τέτοια κουμπιά, το Bootstrap ' ενεργός ” η τάξη χρησιμοποιείται.
Παράδειγμα
Ο παρακάτω κώδικας δημιουργεί δύο κουμπιά. Το πρώτο είναι σε κανονική κατάσταση ενώ το άλλο εφαρμόζεται με το ' ενεργός ” τάξη:
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-επιτυχία' >Επιτυχία< / κουμπί >< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-success ενεργό' >Επιτυχία< / κουμπί >
Παραγωγή
Πώς να δημιουργήσετε κουμπιά κατάστασης απενεργοποιημένης στο Bootstrap;
Τα κουμπιά απενεργοποιημένης κατάστασης αναφέρονται στα κουμπιά που δεν μπορούν να κάνουν κλικ και δεν μπορούν να χρησιμοποιηθούν. Στο Bootstrap, το ' άτομα με ειδικές ανάγκες Η κλάση χρησιμοποιείται για τη δημιουργία ενός κουμπιού απενεργοποιημένης κατάστασης. Ο ' άτομα με ειδικές ανάγκες Το χαρακτηριστικό ” μπορεί επίσης να χρησιμοποιηθεί για αυτό το σκοπό.
Παράδειγμα
Δείτε το παράδειγμα που παρέχεται παρακάτω:
- Το πρώτο κουμπί δεν είναι σε κατάσταση απενεργοποίησης.
- Το δεύτερο χρησιμοποιεί το ' άτομα με ειδικές ανάγκες ” τάξη για να δημιουργήσετε ένα κουμπί απενεργοποιημένης κατάστασης.
- Το τρίτο χρησιμοποιεί το ' άτομα με ειδικές ανάγκες ' Χαρακτηριστικό:
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-επιτυχία απενεργοποιημένη' >Επιτυχία< / κουμπί >
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-επιτυχία' disabled>Επιτυχία< / κουμπί >
Παραγωγή
Καλύψαμε διάφορες πτυχές που σχετίζονται με τα κουμπιά Bootstrap και το στυλ τους στο CSS.
συμπέρασμα
Ο ' btn Η κλάση χρησιμοποιείται για τη δημιουργία κουμπιών Bootstrap με απλό σχεδιασμό. Για να δημιουργήσετε έγχρωμα και περιγράμματα κουμπιά, το ' btn-* ' και ' btn-outline-* 'Οι τάξεις χρησιμοποιούνται όπου το ' * ” συμβολίζει κάθε κατηγορία χρώματος. Για παράδειγμα, ' btn-προειδοποίηση 'Δημιουργεί ένα κίτρινο κουμπί', btn-outline-warning ” δημιουργεί ένα κουμπί με κίτρινο περίγραμμα και πολλά άλλα. Για να ενεργοποιήσετε ή να απενεργοποιήσετε τα κουμπιά, εφαρμόζονται οι κλάσεις 'ενεργό' και 'απενεργοποιημένο', αντίστοιχα. Αυτή η ανάρτηση παρέχει έναν ολοκληρωμένο οδηγό για τα κουμπιά Bootstrap.