Αυτό το άρθρο θα επεξηγήσει τη μέθοδο εφαρμογής σημείων διακοπής και ερωτημάτων πολυμέσων στα 'καθαρά' βοηθητικά προγράμματα στο Tailwind.
Πώς να χρησιμοποιήσετε τα σημεία διακοπής και τα ερωτήματα πολυμέσων στο 'clear' στο Tailwind;
Για να εφαρμόσετε συγκεκριμένα σημεία διακοπής και ερωτήματα πολυμέσων σε «καθαρά» βοηθητικά προγράμματα στο Tailwind, δημιουργήστε μια δομή HTML. Στη συνέχεια, ορίστε την επιθυμητή τιμή στο ' σαφής-<τιμή> ' βοηθητικό πρόγραμμα για διάφορα μεγέθη οθόνης χρησιμοποιώντας το ' md ' ή ' lg ' ορια ΑΝΤΟΧΗΣ. Τέλος, αλλάξτε το μέγεθος οθόνης της ιστοσελίδας για επαλήθευση.
Παράδειγμα
Σε αυτό το παράδειγμα, θα χρησιμοποιήσουμε το ' md 'σημείο διακοπής με το ' ξεκάθαρα-και τα δύο 'χρησιμότητα και' lg 'σημείο διακοπής με το ' σαφές-κανένας ' βοηθητικό πρόγραμμα στο ' ' στοιχείο για αλλαγή της θέσης του σε μεσαίο και μεγάλο μέγεθος οθόνης:
< σώμα >
< div τάξη = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' τάξη = 'float-left p-3 w-28 h-24' τα παντα = 'εικόνα' / >
< img src = 'tailwindcss_img.png' τάξη = 'float-right p-3' τα παντα = 'εικόνα' / >
< Π τάξη = 'text-justify clear-left md:clear-both lg:clear-none' > Το Tailwind CSS παρέχει βοηθητικά προγράμματα 'floats' για τον έλεγχο της περιτύλιξης του περιεχομένου γύρω από ένα στοιχείο.
Αυτό το παράδειγμα θα δείξει πώς να χρησιμοποιείτε σημεία διακοπής και ερωτήματα πολυμέσων με 'καθαρή' χρησιμότητα στο Tailwind. < / Π >
< / div >
< / σώμα >
Εδώ:
- “float-αριστερά” η κλάση επιπλέει τα στοιχεία στην αριστερή πλευρά του κοντέινερ.
- “float-right” η κλάση επιπλέει τα στοιχεία στη δεξιά πλευρά του κοντέινερ.
- «καθαρά αριστερά» Η κλάση μετακινεί το στοιχείο
κάτω από το αριστερό αιωρούμενο στοιχείο στο κοντέινερ.
- “md:clear-both” Η κλάση διαγράφει και τα αριστερά και τα δεξιά float και τοποθετεί το στοιχείο
κάτω από αυτά σε μεσαίο μέγεθος οθόνης.
- “lg:clear-none” Η κλάση απενεργοποιεί κάθε διαγραφή που εφαρμόζεται στο στοιχείο
και επιτρέπει στο στοιχείο να επιπλέει και στις δύο πλευρές του κοντέινερ σε μεγάλο μέγεθος οθόνης.
Παραγωγή
Σύμφωνα με την παραπάνω έξοδο, τα καθορισμένα σημεία διακοπής και τα ερωτήματα πολυμέσων έχουν εφαρμοστεί με επιτυχία στο βοηθητικό πρόγραμμα 'clear'.
συμπέρασμα
Για την εφαρμογή σημείων διακοπής και ερωτημάτων πολυμέσων σε 'καθαρά' βοηθητικά προγράμματα στο Tailwind, ορίστε την επιθυμητή τιμή στο ' σαφής-<τιμή> ' βοηθητικό πρόγραμμα για διάφορα μεγέθη οθόνης χρησιμοποιώντας το ' md ' ή ' lg ' ορια ΑΝΤΟΧΗΣ. Για επαλήθευση, αλλάξτε το μέγεθος οθόνης της ιστοσελίδας και διασφαλίστε τις αλλαγές. Αυτό το άρθρο παρουσίασε το παράδειγμα για την εφαρμογή συγκεκριμένων σημείων διακοπής και ερωτημάτων πολυμέσων στα βοηθητικά προγράμματα 'διαγραφής' στο Tailwind.