ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Grid System


Bootstrap ระบบกริด

Bootstrap's ระบบกริดช่วยให้ได้ถึง 12 คอลัมน์ทั่วหน้า

หากคุณไม่ต้องการที่จะใช้ทั้งหมด 12 คอลัมน์ทีคุณสามารถจัดกลุ่มคอลัมน์ร่วมกันเพื่อสร้างคอลัมน์กว้าง:

ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1 ช่วงที่ 1
ช่วง 4 ช่วง 4 ช่วง 4
ช่วง 4 ช่วง 8
ช่วง 6 ช่วง 6
ช่วง 12

Bootstrap's ระบบกริดมีการตอบสนองและคอลัมน์ที่จะจัดอีกครั้งขึ้นอยู่กับขนาดหน้าจอ: บนหน้าจอขนาดใหญ่ก็อาจจะดูดีขึ้นกับเนื้อหาที่จัดในคอลัมน์ที่สาม แต่บนหน้าจอเล็ก ๆ มันจะดีกว่าถ้ารายการเนื้อหาที่ถูกซ้อน ด้านบนของแต่ละอื่น ๆ

เคล็ดลับ: โปรดจำไว้ว่าคอลัมน์ตารางควรเพิ่มได้ถึงสิบสองสำหรับแถว ยิ่งไปกว่านั้นคอลัมน์จะสแต็คไม่ว่า viewport


เรียนกริด

Bootstrap ระบบกริดมีสี่ชั้นเรียน:

  • xs (สำหรับโทรศัพท์)
  • sm (สำหรับแท็บเล็ต)
  • md (สำหรับเดสก์ท็)
  • lg (สำหรับเดสก์ท็ขนาดใหญ่)

ชั้นเรียนดังกล่าวข้างต้นสามารถรวมกันเพื่อสร้างรูปแบบไดนามิกมากขึ้นและมีความยืดหยุ่น

เคล็ดลับ: เครื่องชั่งน้ำหนักแต่ละชั้นขึ้นดังนั้นหากคุณต้องการตั้งค่าความกว้างเหมือนกันสำหรับ xs และ sm คุณจะต้องระบุ xs


ตารางกฎระบบ

บาง Bootstrap กฎระบบกริด:

  • แถวจะต้องอยู่ภายใน .container (ความกว้างคงที่) หรือ .container-fluid (เต็มความกว้าง) สำหรับการจัดตำแหน่งที่เหมาะสมและ padding
  • ใช้แถวเพื่อสร้างกลุ่มแนวนอนของคอลัมน์
  • เนื้อหาควรจะวางไว้ในคอลัมน์และคอลัมน์อาจจะเป็นแค่เด็กทันทีแถว
  • ชั้นเรียนที่กำหนดไว้ล่วงหน้าเช่น .row และ .col-sm-4 ที่มีอยู่ได้อย่างรวดเร็วทำให้รูปแบบตาราง
  • คอลัมน์สร้างท่อระบายน้ำ (ช่องว่างระหว่างเนื้อหาคอลัมน์) ผ่านช่องว่างภายใน ช่องว่างที่จะชดเชยในแถวสำหรับคอลัมน์แรกและครั้งสุดท้ายผ่านทางลบต่ออัตรากำไร .rows
  • คอลัมน์ตารางจะถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่ 12 ที่คุณต้องการขยาย ยกตัวอย่างเช่นสามคอลัมน์เท่ากันจะใช้สาม .col-sm-4

โครงสร้างพื้นฐานของ Bootstrap กริด

ต่อไปนี้เป็นโครงสร้างพื้นฐานของ Bootstrap ตาราง:

<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>

ดังนั้นเพื่อสร้างรูปแบบที่คุณต้องการสร้างคอนเทนเนอร์ ( <div class="container"> ) ถัดไปสร้างแถว ( <div class="row"> ) จากนั้นให้เพิ่มจำนวนที่ต้องการของคอลัมน์ (แท็กที่มีความเหมาะสม .col-*-* ชั้นเรียน) โปรดทราบว่าตัวเลขใน .col-*-* ควรเพิ่มขึ้นถึง 12 สำหรับแต่ละแถว


ตัวเลือกกริด

ตารางต่อไปนี้สรุปวิธีการ Bootstrap ระบบตารางการทำงานในหลายอุปกรณ์:

  Extra small devices
Phones (<768px)
Small devices
Tablets (>=768px)
Medium devices
Desktops (>=992px)
Large devices
Desktops (>=1200px)
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Number of columns 12 12 12 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

ตัวอย่าง

บทต่อไปแสดงให้เห็นตัวอย่างของระบบกริดสำหรับอุปกรณ์ที่แตกต่างกัน