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 ระดับ | ลองมัน |