อิออนกริด (ตาราง)
อิออนกริด (กริด) และกรอบอื่น ๆ ส่วนใหญ่จะแตกต่างกันจะใช้กล่องแบบยืดหยุ่น (กล่องที่มีความยืดหยุ่น 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% |
Portrait Snap ไปยังตาราง
รูปแบบกล่องที่มีความยืดหยุ่นสามารถตั้งคอลัมน์ชิดยาว ประกอบไปด้านบนชิดยาว, ส่วนตรงกลางของด้านล่างก็สามารถนำไปใช้กับแถวของคอลัมน์แต่ละหรือคอลัมน์ที่ระบุ
ตัวอย่างเช่นคนสุดท้ายตั้งค่าเนื้อหาสาธิตสำหรับตารางการจัดแนวยาวที่ดีกว่า
<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>