ใน Tailwind CSS คำว่า “ กล่อง-ตกแต่ง-แบ่ง คุณสมบัติ ” กำหนดการแสดงพื้นหลัง เส้นขอบ และช่องว่างภายในขององค์ประกอบเมื่อขยายหลายบรรทัดหรือหลายคอลัมน์ มันมีสองคลาสคือ “ ชิ้น ' และ ' โคลน '. ผู้ใช้สามารถใช้คุณสมบัติ 'box-decorative-break' กับเบรกพอยต์และคิวรีสื่อเพื่อกำหนดว่ารูปแบบและลักษณะขององค์ประกอบจะเปลี่ยนไปอย่างไรขึ้นอยู่กับความกว้างของอุปกรณ์ และใช้สไตล์ที่แตกต่างกันตามเบรกพอยต์
บทความนี้จะสาธิตวิธีการใช้ตัวแบ่งการตกแต่งกล่องด้วยจุดพักและแบบสอบถามสื่อ
จะใช้การแบ่งการตกแต่งกล่องด้วยเบรกพอยต์และการสืบค้นสื่อใน Tailwind ได้อย่างไร
ในการใช้ตัวแบ่งการตกแต่งกล่องกับเบรกพอยต์และการสืบค้นสื่อ จำเป็นต้องกำหนดค่าและสไตล์ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกันในโปรแกรม HTML จากนั้น ดูหน้าเว็บโดยเรียกใช้โปรแกรม HTML เพื่อการตรวจสอบ
เพื่อความเข้าใจที่ดีขึ้น โปรดดูขั้นตอนด้านล่าง:
ขั้นตอนที่ 1: ใช้เบรกพอยต์และแบบสอบถามสื่อด้วยตัวแบ่งการตกแต่งกล่อง
สร้างโปรแกรม HTML และระบุค่าและสไตล์ที่แตกต่างกันสำหรับขนาดหน้าจอต่างๆ ตัวอย่างเช่น เราได้กำหนด “ นพ ' และ ' แอลจี ” เบรกพอยต์พร้อมสไตล์:
< ร่างกาย >< ช่วง ระดับ = 'bg-teal-600 box-decoration-clone md:bg-yellow-500 lg:box-decoration-slice text-white text-3xl px-2' >
สวัสดี < br />
ลีนุกซ์ < br />
คำใบ้
ช่วง >
ร่างกาย >
ที่นี่:
- “ bg-น้าน-600 ” กำหนดสีน้านให้เป็นพื้นหลัง
- “ กล่องตกแต่งโคลน ” เป็นคลาสแบบกำหนดเองที่ใช้สำหรับตกแต่งกล่องโคลนนิ่ง
- “ md:bg-สีเหลือง-500 ” ใช้สีพื้นหลังสีเหลืองกับองค์ประกอบ สำหรับ “ นพ ” จุดพัก (หน้าจอขนาดกลาง)
- “ lg:box-decorative-slice ” ตั้งค่าเอฟเฟกต์การแบ่งส่วนของการตกแต่งกล่องสำหรับ “ แอลจี ” เบรกพอยต์ (หน้าจอขนาดใหญ่)
- “ ข้อความสีขาว ” กำหนดสีขาวให้กับข้อความ
- “ ข้อความ-3xl ” กำหนดขนาดตัวอักษรเป็น 3xl
- “ พิกเซล-2 ” เพิ่มช่องว่างภายในแนวนอน 2 พิกเซลให้กับองค์ประกอบ
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
เพื่อให้แน่ใจว่าเบรกพอยต์และแบบสอบถามสื่อได้ถูกนำไปใช้เรียบร้อยแล้ว ให้รันโปรแกรม HTML และดูหน้าเว็บ:
จะเห็นได้ว่าหน้าเว็บมีการเปลี่ยนแปลงตามที่กำหนดจุดพักและแบบสอบถามสื่อ
บทสรุป
หากต้องการใช้ตัวแบ่งการตกแต่งกล่องกับเบรกพอยต์และข้อความค้นหาสื่อใน Tailwind ก่อนอื่นให้สร้างไฟล์ HTML จากนั้น ใช้เบรกพอยต์และแบบสอบถามสื่อในโปรแกรม HTML โดยระบุค่าและสไตล์ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกัน สำหรับการยืนยัน ให้เรียกใช้โปรแกรม HTML และดูหน้าเว็บ บทความนี้ได้สาธิตวิธีการใช้ตัวแบ่งการตกแต่งกล่องด้วยจุดพักและแบบสอบถามสื่อ