บทช่วยสอน อิออนกริด (ตาราง) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ Portrait Snap ไปยังตาราง,ตารางที่ตอบสนองต่อ,
อิออนกริด (กริด) และกรอบอื่น ๆ ส่วนใหญ่จะแตกต่างกันจะใช้กล่องแบบยืดหยุ่น (กล่องที่มีความยืดหยุ่น Model) และในสถานีเคลื่อนที่โดยทั่วไปโทรศัพท์ได้รับการสนับสนุน สไตล์แถวแถวที่ระบุคอลัมน์สไตล์ Col ระบุ
ในแถวที่มีองค์ประกอบของรูปแบบในสไตล์ถ้าคุณ ได้แก่ Col ที่ Col จะถูกกำหนดให้มีขนาดเท่ากัน
ต่อไปนี้เป็นตัวอย่างรูปแบบแถวมี 5 รูปแบบ Col แต่ละกว้าง Col 20%
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>
คุณสามารถกำหนดขนาดตัวอย่างสำหรับแต่ละคอลัมน์ในแถว โดยค่าเริ่มต้นคอลัมน์จะถูกแบ่งออกเป็นขนาดเท่ากัน แต่คุณยังสามารถกำหนดให้เป็นเปอร์เซ็นต์ของความกว้างของคอลัมน์ (พฤติกรรมที่ 12 ตาข่าย) ที่
<div class="row"> <div class="col col-50">.col.col-50</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-75">.col.col-75</div> <div class="col">.col</div> </div> <div class="row"> <div class="col">.col</div> <div class="col col-75">.col.col-75</div> </div> <div class="row"> <div class="col">.col</div> <div class="col">.col</div> </div>
หมายเหตุ: ตัวอย่างของแต่ละรูปแบบจะถูกเพิ่มโดยอัตโนมัติกับ Col ชายแดนและพื้นหลังสีเทา
ข้างล่างนี้เป็นบางส่วนของชื่อลักษณะเปอร์เซ็นต์ความกว้างคอลัมน์ที่ระบุ:
.col-10 | 10% |
.col-20 | 20% |
.col-25 | 25% |
.col-33 | 33.3333% |
.col-50 | 50% |
.col-67 | 66.6666% |
.col-75 | 75% |
.col-80 | 80% |
.col-90 | 90% |
คุณสามารถตั้งค่าคอลัมน์ด้านซ้ายชดเชยตัวอย่างดังต่อไปนี้:
<div class="row"> <div class="col col-33 col-offset-33">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col col-33">.col</div> <div class="col col-33 col-offset-33">.col</div> </div> <div class="row"> <div class="col col-33 col-offset-67">.col</div> </div>
นี่คือบางส่วนร้อยละชดเชยชื่อลักษณะ:
.col ชดเชย-10 | 10% |
.col ชดเชย-20 | 20% |
.col ชดเชย-25 | 25% |
.col ชดเชย-33 | 33.3333% |
.col ชดเชย-50 | 50% |
.col ชดเชย-67 | 66.6666% |
.col ชดเชย-75 | 75% |
.col ชดเชย-80 | 80% |
.col ชดเชย-90 | 90% |
รูปแบบกล่องที่มีความยืดหยุ่นสามารถตั้งคอลัมน์ชิดยาว ประกอบไปด้านบนชิดยาว, ส่วนตรงกลางของด้านล่างก็สามารถนำไปใช้กับแถวของคอลัมน์แต่ละหรือคอลัมน์ที่ระบุ
ตัวอย่างเช่นคนสุดท้ายตั้งค่าเนื้อหาสาธิตสำหรับตารางการจัดแนวยาวที่ดีกว่า
<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row"> <div class="col col-top">.col</div> <div class="col col-center">.col</div> <div class="col col-bottom">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-top"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-center"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div> <div class="row row-bottom"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">1<br>2<br>3<br>4</div> </div>
หน้าจอมือถือเมื่อคุณสลับตัวอย่างเช่นหน้าจอแนวนอนแนวตั้งหน้าจอและอื่น ๆ เราจำเป็นต้องกำหนดตารางแต่ละแถวสามารถดำเนินการได้ทั้งนี้ขึ้นอยู่กับความกว้างของขนาดการปรับตัว
อุปกรณ์ที่แตกต่างรูปแบบที่ตอบสนองต่อการเรียนดังนี้
ระดับการตอบสนอง | ลักษณะ |
.responsive-SM | มีขนาดเล็กกว่าโทรศัพท์มือถือข้ามหน้าจอ |
.responsive-MD | น้อยกว่าหน้าจอแนวตั้งแบน |
.responsive-LG | น้อยกว่าหน้าจอแนวนอนแบน |
<div class="row responsive-sm"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>