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

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 Examples


ด้านล่างนี้เราได้เก็บรวบรวมตัวอย่างบางส่วนของพื้นฐาน 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-3
.col-sm-6
.col-sm-3

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

ตัวอย่าง

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-3">.col-sm-3</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>
ลองตัวเอง»

สองคอลัมน์ที่มีสองคอลัมน์ที่ซ้อนกัน

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

ตัวอย่าง

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

ผสม: มือถือและสก์ท็อป

Bootstrap ระบบกริดมีสี่ชั้นเรียน: xs (โทรศัพท์มือถือ), sm (เม็ด), md (เดสก์ท็) และ lg (เดสก์ท็ขนาดใหญ่) เรียนสามารถรวมกันเพื่อสร้างรูปแบบไดนามิกมากขึ้นและมีความยืดหยุ่น

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

ตัวอย่าง

<div class="row">
  <div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
  <div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>

<div class="row">
  <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
  <div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>

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

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


ผสม: มือถือ, แท็บเล็ตและสก์ท็อป

ตัวอย่าง

<div class="row">
  <div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-8</div>
</div>

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

ล้างลอยตัว

ลอย (แบบใสกับ .clearfix class) ที่จุดพักที่เฉพาะเจาะจงเพื่อป้องกันการตัดแปลกที่มีเนื้อหาที่ไม่สม่ำเสมอ:

ตัวอย่าง

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>
ลองตัวเอง»

คอลัมน์หักล้าง

ย้ายคอลัมน์ไปทางขวาโดยใช้ .col-md-offset-* เรียน ชั้นเรียนเหล่านี้เพิ่มขอบด้านซ้ายของคอลัมน์โดย * คอลัมน์:

ตัวอย่าง

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
  .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
ลองตัวเอง»

ผลักดันและดึง - เปลี่ยนการสั่งซื้อคอลัมน์

เปลี่ยนลำดับของคอลัมน์ตารางที่มี .col-md-push-* และ .col-md-pull-* ชั้นเรียน:

ตัวอย่าง

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