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

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


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

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

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

แต่บนอุปกรณ์ที่มีขนาดใหญ่การออกแบบอาจจะดีกว่าเป็น 33%/66% แยก

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

สำหรับอุปกรณ์ที่มีขนาดใหญ่เราจะใช้ .col-lg-* เรียน

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

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

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

ตัวอย่างต่อไปนี้จะมีผลใน 25%/75% แยกบนอุปกรณ์ขนาดเล็ก 50%/50% แยกบนอุปกรณ์ขนาดกลางและ 33%/66% แยกบนอุปกรณ์ขนาดใหญ่:

ตัวอย่าง

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

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


โดยใช้ขนาดใหญ่เท่านั้น

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

ตัวอย่าง

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