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

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 Grids


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 ระบบกริดมีการตอบสนองและคอลัมน์ที่จะจัดอีกครั้งโดยอัตโนมัติทั้งนี้ขึ้นอยู่กับขนาดของหน้าจอ


เรียนกริด

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

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

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


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

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

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

ด้านล่างนี้เราได้เก็บรวบรวมตัวอย่างบางส่วนของพื้นฐาน Bootstrap รูปแบบตาราง


สามคอลัมน์ที่เท่าเทียมกัน

.col-SM-4
.col-SM-4
.col-SM-4

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการที่จะได้รับสามคอลัมน์เท่ากับความกว้างเริ่มต้นที่แท็บเล็ตและปรับตั้งโต๊ะขนาดใหญ่ บนโทรศัพท์มือถือคอลัมน์โดยอัตโนมัติจะสแต็ค:

ตัวอย่าง

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
ลองตัวเอง»

สองคอลัมน์ไม่เท่ากัน

.col-SM-4
.col-SM-8

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการที่จะได้รับสองคอลัมน์ต่าง ๆ ที่มีความกว้างเริ่มต้นที่แท็บเล็ตและปรับตั้งโต๊ะขนาดใหญ่:

ตัวอย่าง

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
ลองตัวเอง»

เคล็ดลับ: คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ Bootstrap กริดในภายหลังในการกวดวิชานี้