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

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 Pagination


พื้นฐานการแบ่งหน้า

หากคุณมีเว็บไซต์ที่มีจำนวนมากของหน้าเว็บที่คุณอาจต้องการที่จะเพิ่มการจัดเรียงของบางอย่างที่จะแบ่งหน้าแต่ละหน้า

เลขขั้นพื้นฐานใน Bootstrap ลักษณะเช่นนี้:

เพื่อสร้างเลขพื้นฐานเพิ่ม .pagination ระดับไปยัง <ul> องค์ประกอบ:

ตัวอย่าง

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
ลองตัวเอง»

สภาพที่ใช้งาน

สถานะการทำงานแสดงให้เห็นถึงสิ่งที่เป็นหน้าปัจจุบัน:

เพิ่มระดับ .active เพื่อให้ผู้ใช้ทราบว่าหน้าเขา / เธออยู่บน:

ตัวอย่าง

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
ลองตัวเอง»

Disabled State

การเชื่อมโยงคนพิการไม่สามารถคลิก:

เพิ่มระดับ .disabled ถ้ามีการเชื่อมโยงด้วยเหตุผลบางอย่างถูกปิดใช้งาน:

ตัวอย่าง

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
ลองตัวเอง»

Pagination Sizing

บล็อกเลขหน้านอกจากนี้ยังสามารถปรับขนาดให้มีขนาดใหญ่ขึ้นหรือมีขนาดเล็ก:

เพิ่มระดับ .pagination-lg บล็อกขนาดใหญ่หรือ .pagination-sm บล็อกขนาดเล็ก:

ตัวอย่าง

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
ลองตัวเอง»

สวดมนต์

สำหรับรูปแบบการแบ่งหน้าอีกคือสวดมนต์:

.breadcrumb ระดับบ่งชี้ตำแหน่งที่ตั้งหน้าปัจจุบันภายในลำดับชั้นของการเดินเรือ:

ตัวอย่าง

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »


กรอก Bootstrap นำร่องอ้างอิง

สำหรับอ้างอิงที่สมบูรณ์ของการเรียนนำทางให้ไปที่เราสมบูรณ์ Bootstrap นำร่องอ้างอิง