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

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


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

ในบทก่อนหน้านี้เรานำเสนอตัวอย่างเช่นตารางเรียนสำหรับอุปกรณ์ขนาดเล็ก เราใช้สอง divs (คอลัมน์) และเราให้พวกเขา 25%/75% แยก:

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

แต่บนอุปกรณ์สื่อการออกแบบอาจจะดีกว่าเป็น 50%/50% แยก

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

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

ตอนนี้เราจะเพิ่มความกว้างของคอลัมน์สำหรับอุปกรณ์ขนาดกลาง:

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

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

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

ตัวอย่าง

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

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

โดยใช้สื่อเท่านั้น

ในตัวอย่างด้านล่างเราจะระบุ .col-md-6 ระดับ (ไม่ .col-sm-* ) ซึ่งหมายความว่าอุปกรณ์กลางและขนาดใหญ่จะแบ่ง 50%/50% - เพราะชั้นขึ้นตาชั่ง อย่างไรก็ตามสำหรับอุปกรณ์ขนาดเล็กก็จะสแต็คในแนวตั้ง (กว้าง 100%):

ตัวอย่าง

<div class="row">
  <div class="col-md-6" style="background-color:yellow;">
    <p>Lorem ipsum...</p>
  </div>
  <div class="col-md-6" style="background-color:pink;">
    <p>Sed ut perspiciatis...</p>
  </div>
</div>
ลองตัวเอง»

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