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

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 Navigation Components


แท็บและยา

ชั้น ลักษณะ ตัวอย่าง
.nav nav-tabs สร้างแท็บนำทาง ลองมัน
.nav nav-pills สร้างเม็ดนำทาง ลองมัน
.nav nav-pills nav-stacked สร้างเม็ดลูกศรแนวตั้ง ลองมัน
.nav-justified ทำให้แท็บนำทาง / ยาความกว้างเท่ากันของพ่อแม่ของพวกเขาที่หน้าจอกว้างกว่า 768px บนหน้าจอขนาดเล็กมูลค่าทรัพย์สินสุทธิของแท็บ / ยาซ้อนกัน ลองมัน
.disabled บ่งชี้ว่ามีคนพิการ (ไม่สามารถคลิก) แท็บ / ยา ลองมัน
แท็บการนำทางด้วยเมนูแบบเลื่อนลง ลองมัน
ยาการนำทางด้วยเมนูแบบเลื่อนลง ลองมัน
.tab-content ร่วมกับ .tab-pane และ data-toggle="tab" (data-toggle="pill" for pills) ก็จะทำให้แท็บ / ยา toggable ลองมัน
.tab-pane ร่วมกับ .tab-content และ data-toggle="tab" (data-toggle="pill" for pills) ก็จะทำให้แท็บ / ยา toggable ลองมัน

แสดงเส้นทางและการแบ่งหน้า

ชั้น ลักษณะ ตัวอย่าง
.breadcrumb ทำให้แสดงเส้นทาง ลองมัน
.pager มีการเชื่อมโยงเลขง่าย (ก่อนหน้า / ถัดไป) ลองมัน
.previous สอดคล้อง .pager ปุ่มก่อนหน้าไปทางซ้าย ลองมัน
.next สอดคล้อง .pager ปุ่มถัดไปทางด้านขวา ลองมัน
.disabled แสดงให้เห็นการเชื่อมโยงไม่สามารถคลิกได้ ลองมัน
.pagination มีการเชื่อมโยงการแบ่งหน้า ลองมัน
.pagination-lg ใช้ร่วมกับ .pagination ชั้นเรียนเพื่อให้การเชื่อมโยงการแบ่งหน้าขนาดใหญ่ ลองมัน
.pagination-sm ใช้ร่วมกับ .pagination ชั้นเรียนเพื่อให้การเชื่อมโยงเลขที่มีขนาดเล็ก ลองมัน
.disabled แสดงให้เห็นการเชื่อมโยงไม่สามารถคลิกได้ ลองมัน
.active บ่งชี้หน้าปัจจุบัน ลองมัน

ป้ายกำกับ

ชั้น ลักษณะ ตัวอย่าง
.label label-default บ่งชี้ว่ามีฉลากสีเทาเริ่มต้น ลองมัน
.label label-primary บ่งชี้ว่ามีฉลากสีฟ้าของประเภท "primary" ลองมัน
.label label-success บ่งชี้ว่ามีฉลากสีเขียวประเภท "success" ลองมัน
.label label-info บ่งชี้ว่ามีฉลากสีฟ้าอ่อนประเภท "info" ลองมัน
.label label-warning บ่งชี้ว่ามีฉลากสีเหลืองชนิด "warning" ลองมัน
.label label-danger บ่งชี้ว่าป้ายแดงจากประเภท "danger" ลองมัน
.badge บ่งชี้ว่ารายการใหม่หรือยังไม่ได้อ่าน ลองมัน
.jumbotron บ่งชี้ว่ากล่องใหญ่สำหรับการเรียกร้องความสนใจเป็นพิเศษกับเนื้อหาที่โดดเด่นหรือข้อมูล ลองมัน
.jumbotron (extra) เพื่อให้ .jumbotron กล่องครอบคลุมเต็มความกว้างและไม่มีมุมโค้งมนวางไว้นอก .container ระดับ ลองมัน