Αυτό το άρθρο θα δείξει τη μέθοδο χρήσης του 'break-after' με σημεία διακοπής και ερωτήματα πολυμέσων στο Tailwind CSS.
Πώς να χρησιμοποιήσετε το 'break-after' με σημεία διακοπής και ερωτήματα πολυμέσων στο Tailwind;
Για να χρησιμοποιήσετε ένα 'break-after' με σημεία διακοπής και ερωτήματα πολυμέσων, ορίστε διαφορετικές τιμές και στυλ για διαφορετικά μεγέθη οθόνης με το βοηθητικό πρόγραμμα 'break-after' στο πρόγραμμα HTML. Στη συνέχεια, επαληθεύστε την έξοδο προβάλλοντας την ιστοσελίδα HTML.
Ας διερευνήσουμε την πρακτική εφαρμογή:
Βήμα 1: Χρησιμοποιήστε τα σημεία διακοπής και τα ερωτήματα πολυμέσων με το βοηθητικό πρόγραμμα 'break-after'.
Δημιουργήστε ένα πρόγραμμα HTML και καθορίστε διαφορετικές τιμές και στυλ για διαφορετικά μεγέθη οθόνης με το βοηθητικό πρόγραμμα 'break-after'. Για παράδειγμα, χρησιμοποιήσαμε το « md 'σημείο διακοπής με το ' διάλειμμα μετά τη στήλη ' βοηθητικό πρόγραμμα και το ' lg 'σημείο διακοπής με το ' διάλειμμα-μετά-αποφυγή ” βοηθητικό πρόγραμμα:
< σώμα >
< div τάξη = 'στήλες-2 bg-teal-400' >
< Π τάξη = 'md:break-after-column lg:break-after-avoid' > Γειά σου... < / Π >
< Π > Καλως ήρθατε εδώ... < / Π >
< Π > Μάθετε για το Tailwind CSS... < / Π >
< Π > Είναι ένα πλαίσιο CSS... < / Π >
< Π > Αντίο... < / Π >
< / div >
< / σώμα >
Εδώ:
- Ο ' md:break-after-column Η κλάση ' υποδεικνύει ότι θα πρέπει να συμβεί μια αλλαγή στήλης μετά από αυτό το συγκεκριμένο στοιχείο
στο ' md Σημείο διακοπής (μεσαίο μέγεθος οθόνης).
- Ο ' lg:break-after-avoid Η τάξη προτείνει ότι το στοιχείο πρέπει να αποφεύγει το break-after στο lg Σημείο διακοπής (μεγάλο μέγεθος οθόνης).
Βήμα 2: Επαλήθευση εξόδου
Επαληθεύστε εάν τα σημεία διακοπής και τα ερωτήματα πολυμέσων έχουν εφαρμοστεί προβάλλοντας την ιστοσελίδα HTML:
Στην παραπάνω ιστοσελίδα, η αλλαγή στήλης έχει συμβεί στο καθορισμένο στοιχείο στη μεσαία οθόνη και η αλλαγή μετά έχει αποφευχθεί στη μεγάλη οθόνη.
συμπέρασμα
Για να χρησιμοποιήσετε το 'break-after' με σημεία διακοπής και ερωτήματα πολυμέσων στο Tailwind, πρώτα δημιουργήστε ένα αρχείο HTML. Στη συνέχεια, χρησιμοποιήστε τα σημεία διακοπής και τα ερωτήματα πολυμέσων με το βοηθητικό πρόγραμμα 'break-after' καθορίζοντας διαφορετικές τιμές και στυλ για διαφορετικά μεγέθη οθόνης. Για επαλήθευση, εκτελέστε το πρόγραμμα HTML και προβάλετε την ιστοσελίδα. Αυτό το άρθρο έχει δείξει τη μέθοδο χρήσης του 'break-after' με σημεία διακοπής και ερωτήματα πολυμέσων στο Tailwind CSS.