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

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 - Small Devices


Bootstrap ตัวอย่างตาราง: อุปกรณ์ขนาดเล็ก

สมมติว่าเรามีรูปแบบที่เรียบง่ายด้วยสองคอลัมน์ เราต้องการคอลัมน์ที่จะแบ่ง 25%/75% สำหรับอุปกรณ์ขนาดเล็ก

เคล็ดลับ: อุปกรณ์ขนาดเล็กที่มีการกำหนดไว้ว่ามีความกว้างหน้าจอจาก 768 พิกเซล 991 พิกเซล

สำหรับอุปกรณ์ขนาดเล็กเราจะใช้ .col-sm-* เรียน

เราจะเพิ่มการเรียนต่อไปนี้เพื่อสองคอลัมน์ของเรา:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

ตอนนี้ Bootstrap จะไปพูด "ที่มีขนาดเล็กให้มองหาชั้นเรียนที่มี -sm- ในพวกเขาและใช้เหล่านั้น"

ตัวอย่างต่อไปนี้จะมีผลใน 25%/75% แยกขนาดเล็ก (และขนาดกลางและขนาดใหญ่) อุปกรณ์ บนอุปกรณ์ขนาดเล็กเป็นพิเศษก็จะสแต็ค (100%):

Col-SM-3
Col-SM-9

ตัวอย่าง

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-3" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
ลองตัวเอง»

หมายเหตุ: ตรวจสอบให้แน่ใจว่าผลรวมเสมอเพิ่มขึ้นถึง 12

สำหรับ / 66.6% 33.3% แยกคุณจะใช้ .col-sm-4 และ .col-sm-8 :

Col-SM-4
Col-SM-8

ตัวอย่าง

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-8" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>
ลองตัวเอง»

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