Αυτό το άρθρο θα καλύψει τις ακόλουθες προοπτικές για να καταδείξει τη χρήση των σημάτων Bootstrap:
- Πώς να χρησιμοποιήσετε το σήμα Bootstrap για πρόσθετες πληροφορίες;
- Πώς να χρησιμοποιήσετε το σήμα Bootstrap για πληροφορίες με βάση τα συμφραζόμενα;
- Πώς να προσθέσετε προσαρμοσμένα στυλ στο σήμα Bootstrap;
- Πώς να προσθέσετε εικονίδια στο σήμα Bootstrap;
- Πώς να συνδέσετε το σήμα Bootstrap με άλλη πηγή;
- Πώς να κάνετε στρογγυλεμένα σήματα;
- Πώς να χρησιμοποιήσετε το σήμα Bootstrap ως μετρητή;
Τι είναι τα σήματα Bootstrap;
Τα σήματα είναι τα βασικά στοιχεία που χρησιμοποιούνται για την εμφάνιση ενός δείκτη. Για παράδειγμα, μπορούν να χρησιμοποιηθούν ως αριθμητικός μετρητής για να δείξει τον αριθμό των ειδοποιήσεων ή των μηνυμάτων:
Μπορούν επίσης να χρησιμοποιηθούν για την εμφάνιση πρόσθετων πληροφοριών, όπως φαίνεται στη δεδομένη εικόνα:
Πώς να χρησιμοποιήσετε το σήμα Bootstrap για πρόσθετες πληροφορίες;
Τα σήματα Bootstrap μπορούν να προστεθούν μέσα στα στοιχεία HTML για να χρησιμοποιηθούν ως πρόσθετες πληροφορίες. Δείτε το παράδειγμα που αναφέρεται παρακάτω για την επίδειξη.
Παράδειγμα
Για να χρησιμοποιήσετε το σήμα Bootstrap για πληροφορίες προσθήκης, πρώτα:
- Προσθήκη ' ' και ' ” στοιχεία.
- Τοποθετήστε το ' ' στοιχείο με το ' σήμα ' και ' σήμα-* ” τάξεις. Η κλάση 'badge-*' αναφέρεται στο σήμα με το καθορισμένο χρώμα:
< h6 > Υποτροφίες < σπιθαμή τάξη = 'κονκάρδα-δευτεροβάθμια' > Νέος < / σπιθαμή >< / h6 >
Μπορεί να παρατηρηθεί ότι δύο σήματα προστίθενται στις σχετικές επικεφαλίδες:
Πώς να χρησιμοποιήσετε το σήμα Bootstrap για πληροφορίες με βάση τα συμφραζόμενα;
Τα σήματα Bootstrap μπορούν επίσης να χρησιμοποιηθούν για την παροχή πληροφοριών με βάση τα συμφραζόμενα όπως ' σήμα-κίνδυνος ” εμφανίζει το σήμα με κόκκινο χρώμα και μπορεί να χρησιμοποιηθεί για την εμφάνιση ορισμένων αποτυχημένων μηνυμάτων όπως ακύρωση, μη έγκυρη ή άλλα. Ο ' σήμα-επιτυχία ' χρησιμοποιείται όπου θέλουμε να δείξουμε κάποιο μήνυμα επιτυχίας.
Παράδειγμα
Κοιτάξτε τον κώδικα που δίνεται για να κατανοήσετε το σενάριο που συζητήθηκε:
< σπιθαμή τάξη = 'κονκάρδα-κίνδυνος' >Ο λογαριασμός δεν επαληθεύτηκε< / σπιθαμή >< σπιθαμή τάξη = 'Σήμα σήματος-πληροφορίες' >αυτό είναι σήμα< / σπιθαμή >
< σπιθαμή τάξη = 'κονκάρδα-προειδοποίηση' >Λογαριασμός σε εκκρεμότητα Για έγκριση< / σπιθαμή >
< σπιθαμή τάξη = 'κονκάρδα-επιτυχία' >Επαληθεύτηκε ο λογαριασμός< / σπιθαμή >
Παραγωγή
Πώς να προσθέσετε προσαρμοσμένα στυλ στο σήμα Bootstrap;
Μπορείτε επίσης να χρησιμοποιήσετε το CSS για να προσθέσετε κάποιο μοναδικό στυλ στα σήματα Bootstrap. Για καλύτερη κατανόηση, μια τάξη με το όνομα ' έθιμο ' προστίθεται στο ' ' στοιχείο. Στη συνέχεια, εφαρμόζονται οι ακόλουθες ιδιότητες:
< σπιθαμή τάξη = 'Σήμα σήμα-έθιμο κινδύνου' >Ο λογαριασμός δεν επαληθεύτηκε < / σπιθαμή >< σπιθαμή τάξη = 'προσαρμοσμένο σήμα-πληροφορίες σήματος' >Αυτό είναι σήμα< / σπιθαμή >
< σπιθαμή τάξη = 'προσαρμογή προειδοποίησης σήματος σήματος' >Λογαριασμός σε εκκρεμότητα Για έγκριση< / σπιθαμή >
< σπιθαμή τάξη = 'Σήμα σήματος-προσαρμογή επιτυχίας' >Επαληθεύτηκε ο λογαριασμός< / σπιθαμή >
Στυλ «προσαρμοσμένη» τάξη
.έθιμο {μέγεθος γραμματοσειράς : 18 εικονοστοιχεία ;
βάρος γραμματοσειράς : 100 ;
διάστιχο : 1 εικονοστοιχείο ;
υλικό παραγεμίσματος : 8 εικονοστοιχεία 15 εικονοστοιχεία ;
}
Ο ' .έθιμο ' χρησιμοποιείται για πρόσβαση στο ' έθιμο ” τάξη. Οι ακόλουθες ιδιότητες εφαρμόζονται σε αυτό:
- ' μέγεθος γραμματοσειράς ” προσαρμόζει το μέγεθος της γραμματοσειράς.
- ' βάρος γραμματοσειράς ” αναφέρει το πάχος της γραμματοσειράς.
- ' διάστιχο ” προσθέτει κενό μεταξύ των γραμμάτων.
- ' υλικό παραγεμίσματος ” παρέχει χώρο γύρω από το περιεχόμενο του στοιχείου.
Παραγωγή
Πώς να προσθέσετε εικονίδια στο σήμα Bootstrap;
Μπορούμε επίσης να προσθέσουμε διαφορετικά εικονίδια στα σήματα. Για να γίνει αυτό, υπάρχουν πολλές κλάσεις που μπορούν να χρησιμοποιηθούν για αυτόν τον σκοπό. Για περισσότερες πληροφορίες, επισκεφθείτε το Γραμματοσειρά φοβερή δικτυακός τόπος.
Παράδειγμα
Σε HTML, προσθέστε ένα ' ' στοιχείο. Μέσα σε αυτό το στοιχείο, τοποθετήστε το ενσωματωμένο στοιχείο ' ' ή '' για να εισαγάγετε την κλάση εικονιδίων:
< σπιθαμή τάξη = 'Σήμα σήμα-έθιμο κινδύνου' > Ο λογαριασμός δεν επαληθεύτηκε< Εγώ τάξη = 'μακρινός κύκλος' >< / Εγώ >
< / σπιθαμή >
< σπιθαμή τάξη = 'Σήμα σήματος-προσαρμογή επιτυχίας' > Ο λογαριασμός επαληθεύτηκε
< Εγώ τάξη = 'fas fa-user-check' >< / Εγώ >
< / σπιθαμή >
Παραγωγή
Πώς να συνδέσετε το σήμα Bootstrap με άλλη πηγή;
Για να κάνετε κλικ στα σήματα Bootstrap, τοποθετήστε το ' σήμα 'κλάσεις εντός του HTML' ' προσθέστε ετικέτα και δώστε την αναφορά της συνδεδεμένης σελίδας στο ' href ' Χαρακτηριστικό:
< ένα href = '#' τάξη = 'Σήμα σήμα-έθιμο κινδύνου' >Ακύρωση< / ένα >< ένα href = '#' τάξη = 'προσαρμοσμένο σήμα-πληροφορίες σήματος' >Υποβολή< / ένα >
Παραγωγή
Πώς να κάνετε στρογγυλεμένα σήματα;
Για να κάνετε τις άκρες του σήματος πιο στρογγυλεμένες, προσθέστε μια κατηγορία ' σήμα-χάπι '. Αυτή η τάξη υποστηρίζει ένα μεγαλύτερο ' σύνορα-ακτίνα 'και οριζόντια' υλικό παραγεμίσματος ' ιδιότητες:
< σπιθαμή τάξη = 'έμβλημα σήμα-χάπι σήμα-έθιμο κινδύνου' >Ο λογαριασμός δεν επαληθεύτηκε < / σπιθαμή >< σπιθαμή τάξη = 'Σήμα σήμα-χάπι σήμα-προειδοποιητικό έθιμο' >Λογαριασμός σε εκκρεμότητα Για έγκριση< / σπιθαμή >
< σπιθαμή τάξη = 'Σήμα σήμα-χάπι σήμα-προσαρμογή επιτυχίας' >Επαληθεύτηκε ο λογαριασμός < / σπιθαμή >
Παραγωγή
Πώς να χρησιμοποιήσετε το σήμα Bootstrap ως μετρητή;
Για να δημιουργήσετε ένα κουμπί με μετρητή, προσθέστε ένα HTML ' <κουμπί> 'ετικέτα με τύπο' κουμπί ' και αντιστοιχίστε του τις κατηγορίες κουμπιών ' btn ' και ' btn-επιτυχία '. Στη συνέχεια, συμπεριλάβετε το ' ' στοιχείο για να τοποθετήσετε έναν μετρητή:
< κουμπί τύπος = 'κουμπί' τάξη = 'btn btn-επιτυχία' >Ειδοποιήσεις < σπιθαμή τάξη = 'φωτο σήματος σήματος' > 4 < / σπιθαμή >
< / κουμπί >
Παραγωγή
Αυτό αφορούσε τα σήματα Bootstrap και τις σχετικές ετικέτες τους στο Bootstrap.
συμπέρασμα
The Bootstrap» σήμα Η κλάση χρησιμοποιείται για την προσθήκη σημάτων στον ιστότοπο. Για παράδειγμα, τάξεις όπως ' σήμα-κίνδυνος », « σήμα-πληροφορίες ”, και άλλα μπορούν να χρησιμοποιηθούν για την προσθήκη πληροφοριών με βάση τα συμφραζόμενα στα σήματα ως ετικέτα τους. Ορισμένες κλάσεις εφαρμόζονται για την προσθήκη εικονιδίων στα σήματα, όπως ' μακριά φα-καιροί-κύκλος ” για να τοποθετήσετε ένα εγκάρσιο εικονίδιο. Αυτή η ανάρτηση παρέχει έναν ολοκληρωμένο οδηγό για τα σήματα και τις ετικέτες Bootstrap.