บทความนี้จะยกตัวอย่างวิธีการใช้จุดพักและการค้นหาสื่อในตารางแถวใน Tailwind CSS
จะใช้เบรกพอยต์และการสืบค้นสื่อใน Row Grid ใน Tailwind ได้อย่างไร
หากต้องการใช้เบรกพอยต์และการค้นหาสื่อในตารางแถวใน Tailwind ให้สร้างโปรแกรม HTML จากนั้นกำหนดจำนวนแถวสำหรับหน้าจอขนาดต่างๆ โดยใช้ปุ่ม “ เอสเอ็ม ”, “ นพ ' หรือ ' แอลจี ” จุดพักกับ “ ตารางแถว-
ให้เราสำรวจการใช้งานจริง:
ขั้นตอนที่ 1: ใช้เบรกพอยต์และการสืบค้นสื่อด้วย Row Grid ในโปรแกรม HTML
สร้างโปรแกรม HTML และกำหนดจำนวนแถวสำหรับขนาดหน้าจอต่างๆ ด้วยปุ่ม “ ตารางแถว-
< ร่างกาย >
< แผนก ระดับ = 'กริด grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 1 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 2 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 3 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 4 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 5 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 6 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 7 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 8 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 9 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 10 < / แผนก >
< / แผนก >
< / ร่างกาย >
ที่นี่:
- “ กริด ” class ใช้เพื่อสร้างเค้าโครงกริด
- “ ตารางแถว-2 ” คลาสระบุว่ากริดควรมี 2 แถวที่มีขนาดเท่ากัน
- “ md:กริดแถว-3 ” คลาสเปลี่ยนตารางเป็น 3 แถวขนาดเท่ากันบนหน้าจอขนาดกลาง
- “ lg:ตารางแถว-5 ” คลาสเปลี่ยนตารางเป็น 5 แถวขนาดเท่ากันบนหน้าจอขนาดใหญ่
- “ กริดโฟลว์คอล ” class วางรายการกริดในแนวนอนในคอลัมน์
- “ ช่องว่าง-3 ” คลาสกำหนดระยะห่าง 3 หน่วยระหว่างแต่ละรายการกริด
- “ ม.3 ” คลาสใช้ระยะขอบ 3 หน่วยรอบคอนเทนเนอร์กริด
- “ ศูนย์ข้อความ ” คลาสตั้งค่าข้อความของแต่ละรายการกริดไปที่กึ่งกลาง
- “ bg-น้าน-500 ” class กำหนดสีน้านให้เป็นพื้นหลังของรายการกริด
- “ หน้า-5 ” ชั้นเรียนเพิ่มช่องว่างภายใน 5 หน่วยให้กับเนื้อหาภายในเด็ก
รายการ
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
เพื่อให้แน่ใจว่าเบรกพอยต์และแบบสอบถามสื่อได้ถูกนำไปใช้ในตารางแถว ให้ดูเว็บเพจ HTML โดยเปลี่ยนขนาดหน้าจอ:
จากผลลัพธ์ข้างต้น จะเห็นได้ว่าจำนวนแถวเปลี่ยนไปตามขนาดหน้าจอ สิ่งนี้บ่งชี้ว่ามีการใช้เบรกพอยต์และคิวรีสื่อบนกริดแถวเรียบร้อยแล้ว
บทสรุป
หากต้องการใช้เบรกพอยต์และการค้นหาสื่อในตารางแถวใน Tailwind ให้กำหนดจำนวนแถวสำหรับขนาดหน้าจอต่างๆ โดยใช้ปุ่ม ' เอสเอ็ม ”, “ นพ ' หรือ ' แอลจี ” จุดพักกับ “ ตารางแถว-
” สาธารณูปโภค. จากนั้น ตรวจสอบการเปลี่ยนแปลงบนหน้าเว็บโดยเปลี่ยนขนาดหน้าจอ บทความนี้ได้ยกตัวอย่างวิธีการใช้เบรกพอยต์และคำค้นหาสื่อในตารางแถวใน Tailwind CSS