บุคคลหรือรวบรวม

ปลั๊กอินสามารถรวมเป็นรายบุคคลได้ (แม้ว่าบางปลั๊กอินจำเป็นต้องมีการพึ่งพา) หรือทั้งหมดในคราวเดียว ทั้งbootstrap.jsและbootstrap.min.jsมีปลั๊กอินทั้งหมดในไฟล์เดียว

แอตทริบิวต์ข้อมูล

คุณสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน Markup API ได้โดยไม่ต้องเขียน JavaScript แม้แต่บรรทัดเดียว นี่คือ API ระดับเฟิร์สคลาสของ Bootstrap และควรพิจารณาเป็นอันดับแรกเมื่อใช้ปลั๊กอิน

ที่กล่าวว่า ในบางสถานการณ์ อาจเป็นการดีที่จะปิดฟังก์ชันนี้ ดังนั้นเราจึงให้ความสามารถในการปิดใช้งาน API ของแอตทริบิวต์ข้อมูลโดยยกเลิกการเชื่อมโยงเหตุการณ์ทั้งหมดบนเนมสเปซเนื้อหาที่มี `'data-api'' ดูเหมือนว่านี้:

$ ( 'เนื้อหา' ). ปิด( '.data-api' )

อีกวิธีหนึ่งในการกำหนดเป้าหมายปลั๊กอินเฉพาะ ให้รวมชื่อของปลั๊กอินเป็นเนมสเปซพร้อมกับเนมสเปซ data-api ดังนี้:

$ ( 'เนื้อหา' ). ปิด( '.alert.data-api' )

API แบบเป็นโปรแกรม

เรายังเชื่อว่าคุณควรจะสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน JavaScript API ได้อย่างหมดจด API สาธารณะทั้งหมดเป็นเมธอดเดียวที่เชื่อมต่อได้ และส่งคืนคอลเล็กชันที่ดำเนินการ

$ ( ".btn .อันตราย") ปุ่ม( "สลับ" ) addClass ( "อ้วน" )

เมธอดทั้งหมดควรยอมรับอ็อบเจ็กต์ตัวเลือกที่เป็นตัวเลือก สตริงที่กำหนดเป้าหมายเมธอดเฉพาะ หรือไม่มีเลย (ซึ่งเริ่มต้นปลั๊กอินด้วยการทำงานเริ่มต้น):

$ ( "#myModal" ). modal () // เริ่มต้นด้วย defaults                       
$ ( "#myModal" ). โมดอล({ แป้นพิมพ์: เท็จ}) // เริ่มต้นโดยไม่มีแป้นพิมพ์     
$ ( "#myModal" ). modal ( 'show' ) // เริ่มต้นและเรียกใช้ show ทันที                

ปลั๊กอินแต่ละตัวยังเปิดเผยคอนสตรัคเตอร์ดิบในคุณสมบัติ 'ตัวสร้าง' $.fn.popover.Constructor: หากคุณต้องการรับอินสแตนซ์ของปลั๊กอินบางตัว ให้ดึงข้อมูลโดยตรงจากองค์ประกอบ$('[rel=popover]').data('popover'):

ไม่มีความขัดแย้ง

บางครั้ง จำเป็นต้องใช้ปลั๊กอิน Bootstrap กับเฟรมเวิร์ก UI อื่นๆ ในสถานการณ์เหล่านี้ การชนกันของเนมสเปซอาจเกิดขึ้นในบางครั้ง หากเกิดเหตุการณ์นี้ขึ้น คุณสามารถเรียก.noConflictใช้ปลั๊กอินที่คุณต้องการคืนค่า

var bootstrapButton = $ _ ฟน. ปุ่ม. noConflict () // คืนค่า $.fn.button เป็นค่าที่กำหนดก่อนหน้านี้ 
$ . ฟน. bootstrapBtn = bootstrapButton             // ให้ $().bootstrapBtn ฟังก์ชัน bootstrap

เหตุการณ์

Bootstrap จัดเตรียมเหตุการณ์ที่กำหนดเองสำหรับการกระทำเฉพาะของปลั๊กอินส่วนใหญ่ โดยทั่วไป สิ่งเหล่านี้มาในรูปแบบกริยาแบบ infinitive และ past participle โดยที่ infinitive (เช่นshow) ถูกทริกเกอร์เมื่อเริ่มต้นเหตุการณ์ และรูปแบบกริยาที่ผ่านมา (ex. shown) จะถูกทริกเกอร์เมื่อการดำเนินการเสร็จสิ้น

เหตุการณ์ infinitive ทั้งหมดมีฟังก์ชันป้องกันdefault สิ่งนี้ทำให้สามารถหยุดการดำเนินการก่อนที่จะเริ่ม

$ ( '#myModal' ) เปิด( 'แสดง' , ฟังก์ชัน( จ) {   
    ถ้า(! data ) ส่งกลับe ป้องกันค่า เริ่มต้น () // หยุดการแสดงกิริยา   
})

เกี่ยวกับการเปลี่ยนภาพ

สำหรับเอฟเฟกต์การเปลี่ยนอย่างง่าย ให้รวมbootstrap-transition.jsไว้ข้างไฟล์ JS อื่นๆ หากคุณกำลังใช้bootstrap.js ที่คอมไพล์แล้ว (หรือย่อขนาดให้เล็กสุด) คุณไม่จำเป็นต้องรวมข้อมูลนี้ เพราะมันมีอยู่แล้ว

กรณีการใช้งาน

ตัวอย่างบางส่วนของปลั๊กอินการเปลี่ยนแปลง:

• เลื่อนหรือซีดจางเป็นกิริยาช่วย
• จางหายไปแท็บ
• จางหายไปการแจ้งเตือน
• บานเลื่อนม้าหมุน

ตัวอย่าง

Modals มีความคล่องตัว แต่มีความยืดหยุ่น พร้อมข้อความโต้ตอบพร้อมฟังก์ชันขั้นต่ำที่จำเป็นและค่าเริ่มต้นที่ชาญฉลาด

ตัวอย่างคงที่

โมดอลที่แสดงผลพร้อมส่วนหัว เนื้อหา และชุดของการดำเนินการในส่วนท้าย

<div class = "modal ซ่อนเฟด" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > &ครั้ง; </button>    
    <h3> ส่วนหัวของโมดอล</h3>
  </div>
  <div class = "modal-body" > 
    <p> หุ่นดี… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > ปิด</a>  
    <a href = "#" class = "btn btn-primary" > บันทึกการเปลี่ยนแปลง</a>  
  </div>
</div>

สาธิตสด

สลับโมดอลผ่าน JavaScript โดยคลิกที่ปุ่มด้านล่าง มันจะเลื่อนลงและจางลงจากด้านบนของหน้า

<!-- ปุ่มเพื่อเรียกใช้ modal -->
<a href = "#myModal" บทบาท= "ปุ่ม" class = "btn" data-toggle = "modal" > เปิดใช้โมดอลสาธิต</a>    
 
<!-- โมดอล -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    < ประเภท ปุ่ม = "ปุ่ม" คลาส= "ปิด" data-dismiss = "modal" aria-hidden = "จริง" > × </button>    
    <h3 id = "myModalLabel" > ส่วนหัว Modal </h3> 
  </div>
  <div class = "modal-body" > 
    <p> หุ่นดี… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > ปิด</button>   
    <button class = "btn btn-primary" > บันทึกการเปลี่ยนแปลง</button> 
  </div>
</div>

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

เปิดใช้งาน modal โดยไม่ต้องเขียน JavaScript ตั้งค่าdata-toggle="modal"บนองค์ประกอบตัวควบคุม เช่น ปุ่ม พร้อมกับ a data-target="#foo"หรือhref="#foo"เพื่อกำหนดเป้าหมายเป็นโมดอลเฉพาะเพื่อสลับ

<button type = "button" data-toggle = "modal" data-target = "#myModal" > เปิดโมดอล</button>   

ผ่านจาวาสคริปต์

เรียก modal ด้วย id myModalด้วย JavaScript บรรทัดเดียว:

$ ( '#myModal' ) โมดอล( ตัวเลือก)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

วิธีการ

.modal (ตัวเลือก)

เปิดใช้งานเนื้อหาของคุณเป็นกิริยาช่วย ยอมรับตัวเลือกobjectเสริม

$ ( '#myModal' ) เป็นกิริยาช่วย({
  คีย์บอร์ด: false 
})

.modal('toggle')

สลับโมดอลด้วยตนเอง

$ ( '#myModal' ) โมดอล( 'สลับ' )

.modal('แสดง')

เปิดโมดอลด้วยตนเอง

$ ( '#myModal' ) เป็นกิริยาช่วย( 'แสดง' )

.modal('ซ่อน')

ซ่อนโมดอลด้วยตนเอง

$ ( '#myModal' ) เป็นกิริยาช่วย( 'ซ่อน' )

เหตุการณ์

โมดอลคลาสของ Bootstrap เปิดเผยเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันโมดอล

$ ( '#myModal' ) เปิด( 'ซ่อน' , ฟังก์ชั่น() {   
  // ทำอะไรสักอย่าง…
})

ตัวอย่าง

เพิ่มเมนูแบบเลื่อนลงได้เกือบทุกอย่างด้วยปลั๊กอินง่ายๆ นี้ รวมถึงแถบนำทาง แท็บ และยาเม็ด

ภายในแถบนำทาง

ภายในแท็บ

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

เพิ่มdata-toggle="dropdown"ในลิงก์หรือปุ่มเพื่อสลับรายการแบบเลื่อนลง

< คลาสdiv = "ดรอปดาวน์" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > ทริกเกอร์แบบเลื่อนลง</a>   
  <ul class = "dropdown-menu" บทบาท= "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

หากต้องการคง URL ไว้ ให้ใช้data-targetแอตทริบิวต์แทนhref="#".

< คลาสdiv = "ดรอปดาวน์" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    หล่นลง
    <b class = "คาเร็ต" ></b> 
  </a>
  <ul class = "dropdown-menu" บทบาท= "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

ผ่านจาวาสคริปต์

เรียกดรอปดาวน์ผ่าน JavaScript:

$ ( '.dropdown-toggle' ) ดรอปดาวน์()

ตัวเลือก

ไม่มี

วิธีการ

$().dropdown('toggle')

API แบบเป็นโปรแกรมสำหรับการสลับเมนูสำหรับแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ

ตัวอย่างในแถบนำทาง

ปลั๊กอิน ScrollSpy ใช้สำหรับอัปเดตเป้าหมายการนำทางโดยอัตโนมัติตามตำแหน่งการเลื่อน เลื่อนพื้นที่ด้านล่างแถบนำทางและดูการเปลี่ยนแปลงชั้นเรียนที่ใช้งานอยู่ รายการย่อยแบบเลื่อนลงจะถูกเน้นด้วย

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

หากต้องการเพิ่มลักษณะการทำงานของ scrollspy ให้กับการนำทางบนแถบด้านบนของคุณอย่างง่ายดาย เพียงเพิ่มdata-spy="scroll"องค์ประกอบที่คุณต้องการสอดแนม (โดยทั่วไปแล้วจะเป็นเนื้อหา) และdata-target=".navbar"เลือกว่าจะใช้การนำทางใด คุณจะต้องใช้ scrollspy กับ.navส่วนประกอบ

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

ผ่านจาวาสคริปต์

เรียก scrollspy ผ่าน JavaScript:

$ ( '#navbar' ). scrollspy ()

วิธีการ

.scrollspy('รีเฟรช')

เมื่อใช้ scrollspy ร่วมกับการเพิ่มหรือลบองค์ประกอบออกจาก DOM คุณจะต้องเรียกวิธีการรีเฟรชดังนี้:

$ ( '[data-spy="scroll"]' ) แต่ละ( ฟังก์ชัน() {  
  var $spy = $ ( นี่) scrollspy ( 'รีเฟรช' )
});

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-offset="".

เหตุการณ์

แท็บตัวอย่าง

เพิ่มฟังก์ชันแท็บแบบไดนามิกที่รวดเร็วเพื่อเปลี่ยนผ่านบานหน้าต่างเนื้อหาในเครื่อง แม้กระทั่งผ่านเมนูแบบเลื่อนลง

การใช้งาน

เปิดใช้งานแท็บแบบแท็บได้ผ่าน JavaScript (ต้องเปิดใช้งานแต่ละแท็บแยกกัน):

$ ( '#myTab a' ). คลิก( ฟังก์ชัน( จ) {  
  อี_ ป้องกันค่าเริ่มต้น ();
  $ ( นี่). แท็บ( 'แสดง' );
})

คุณสามารถเปิดใช้งานแต่ละแท็บได้หลายวิธี:

$ ( '#myTab a[href="#profile"]' ) แท็บ( 'แสดง' ); // เลือกแท็บตามชื่อ 
$ ( '#myTab a:first' ) แท็บ( 'แสดง' ); // เลือกแท็บแรก 
$ ( '#myTab a:last' ) แท็บ( 'แสดง' ); // เลือกแท็บสุดท้าย 
$ ( '#myTab li:eq(2) a' ) แท็บ( 'แสดง' ); // เลือกแท็บที่สาม (ดัชนี 0) 

มาร์กอัป

คุณสามารถเปิดใช้งานการนำทางแท็บหรือยาเม็ดโดยไม่ต้องเขียน JavaScript ใด ๆ โดยเพียงแค่ระบุdata-toggle="tab"หรือdata-toggle="pill"บนองค์ประกอบ การเพิ่มnavและnav-tabsคลาสในแท็บulจะเป็นการนำสไตล์แท็บ Bootstrap ไปใช้

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > หน้าแรก</a></li>  
  <li><a href = "#profile" data-toggle = "tab" > โปรไฟล์</a></li>  
  <li><a href = "#ข้อความ" data-toggle = "แท็บ" > ข้อความ</a></li>  
  <li><a href = "#settings" data-toggle = "tab" > การตั้งค่า</a></li>  
</ul>

วิธีการ

$().tab

เปิดใช้งานองค์ประกอบแท็บและคอนเทนเนอร์เนื้อหา แท็บควรมี a data-targetหรือ การhrefกำหนดเป้าหมายโหนดคอนเทนเนอร์ใน DOM

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > หน้าแรก</a></li>  
  <li><a href = "#โปรไฟล์" > โปรไฟล์</a></li> 
  <li><a href = "#ข้อความ" > ข้อความ</a></li> 
  <li><a href = "#settings" > การตั้งค่า</a></li> 
</ul>
 
<div class = "เนื้อหาแท็บ" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( ฟังก์ชัน() {  
    $ ( '#myTab a:last' ) แท็บ( 'แสดง' );
  })
</script>

เหตุการณ์

$ ( 'a[data-toggle="tab"]' ) เปิด( 'แสดง' ฟังก์ชัน( จ) {   
  อี_ เป้าหมาย// เปิดใช้งานแท็บ
  อี_ relatedTarget // แท็บก่อนหน้า
})

ตัวอย่าง

แรงบันดาลใจจากปลั๊กอิน jQuery.tipsy ที่ยอดเยี่ยมที่เขียนโดย Jason Frame; คำแนะนำเครื่องมือเป็นเวอร์ชันที่อัปเดตซึ่งไม่ต้องใช้รูปภาพ ใช้ CSS3 สำหรับภาพเคลื่อนไหว และแอตทริบิวต์ข้อมูลสำหรับพื้นที่จัดเก็บชื่อในเครื่อง

ด้วยเหตุผลด้านประสิทธิภาพ Tooltip และ popover data-apis จะถูกเลือกใช้ ซึ่งหมายความว่าคุณต้องเริ่มต้นด้วยตนเอง

วางเมาส์เหนือลิงก์ด้านล่างเพื่อดูคำแนะนำเครื่องมือ:

สี่ทิศ

คำแนะนำเครื่องมือในกลุ่มอินพุต

เมื่อใช้คำแนะนำเครื่องมือและป๊อปโอเวอร์กับกลุ่มอินพุต Bootstrap คุณจะต้องตั้งค่าcontainerตัวเลือก (ตามเอกสารด้านล่าง) เพื่อหลีกเลี่ยงผลข้างเคียงที่ไม่ต้องการ

การใช้งาน

ทริกเกอร์คำแนะนำเครื่องมือผ่าน JavaScript:

$ ( '#example' ) เคล็ดลับเครื่องมือ( ตัวเลือก)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-animation="".

มาร์กอัป

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > วางเมาส์เหนือฉัน</a>   

วิธีการ

$().คำแนะนำเครื่องมือ(ตัวเลือก)

แนบตัวจัดการคำแนะนำเครื่องมือกับคอลเล็กชันองค์ประกอบ

.tooltip('แสดง')

แสดงคำแนะนำเครื่องมือขององค์ประกอบ

$ ( '#element' ) เคล็ดลับเครื่องมือ( 'แสดง' )

.tooltip('ซ่อน')

ซ่อนคำแนะนำเครื่องมือขององค์ประกอบ

$ ( '#element' ) เคล็ดลับเครื่องมือ( 'ซ่อน' )

.tooltip('toggle')

สลับคำแนะนำเครื่องมือขององค์ประกอบ

$ ( '#element' ) เคล็ดลับเครื่องมือ( 'toggle' )

.tooltip('ทำลาย')

ซ่อนและทำลายคำแนะนำขององค์ประกอบ

$ ( '#element' ) คำแนะนำเครื่องมือ( 'ทำลาย' )

ตัวอย่าง

เพิ่มเนื้อหาซ้อนทับขนาดเล็ก เช่น บน iPad ลงในองค์ประกอบใดๆ เพื่อใช้เป็นข้อมูลรอง วางเมาส์เหนือปุ่มเพื่อเรียกป๊อปโอเวอร์ ต้องรวมคำแนะนำ เครื่องมือ

ป๊อปโอเวอร์แบบคงที่

มีสี่ตัวเลือก: จัดตำแหน่งบน ขวา ล่าง และซ้าย

ไม่มีมาร์กอัปที่แสดงเป็นป๊อปอัปที่สร้างขึ้นจาก JavaScript และเนื้อหาภายในdataแอตทริบิวต์

สาธิตสด

สี่ทิศ

การใช้งาน

เปิดใช้งานป๊อปอัปผ่าน JavaScript:

$ ( '#example' ) ป๊อปโอเวอร์( ตัวเลือก)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-animation="".

มาร์กอัป

ด้วยเหตุผลด้านประสิทธิภาพ Tooltip และ Popover data-apis จะถูกเลือกใช้ หากคุณต้องการใช้ เพียงระบุตัวเลือกตัวเลือก

วิธีการ

$().popover(ตัวเลือก)

เริ่มต้น popovers สำหรับคอลเล็กชันองค์ประกอบ

.popover('แสดง')

เผยองค์ประกอบป๊อปโอเวอร์

$ ( '#element' ) ป๊อปโอเวอร์( 'แสดง' )

.popover('ซ่อน')

ซ่อนองค์ประกอบป๊อปโอเวอร์

$ ( '#element' ) ป๊อปโอเวอร์( 'ซ่อน' )

.popover('toggle')

สลับองค์ประกอบป๊อปโอเวอร์

$ ( '#element' ) ป๊อปโอเวอร์( 'สลับ' )

.popover('ทำลาย')

ซ่อนและทำลายป๊อปโอเวอร์ขององค์ประกอบ

$ ( '#element' ) ป๊อปโอเวอร์( 'ทำลาย' )

ตัวอย่างการแจ้งเตือน

เพิ่มฟังก์ชันการยกเลิกให้กับข้อความแจ้งเตือนทั้งหมดด้วยปลั๊กอินนี้

การใช้งาน

เปิดใช้งานการยกเลิกการแจ้งเตือนผ่าน JavaScript:

$ ( ".alert" ) แจ้งเตือน()

มาร์กอัป

เพียงเพิ่มdata-dismiss="alert"ปุ่มปิดเพื่อให้ฟังก์ชันปิดการแจ้งเตือนโดยอัตโนมัติ

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

วิธีการ

$().alert()

ปิดการแจ้งเตือนทั้งหมดด้วยฟังก์ชันปิด หากต้องการให้การแจ้งเตือนของคุณเคลื่อนไหวเมื่อปิด ตรวจสอบให้แน่ใจว่าได้ใช้ คลาส .fadeและ.inคลาสกับพวกเขาแล้ว

.alert('ปิด')

ปิดการแจ้งเตือน

$ ( ".alert" ) แจ้งเตือน( 'ปิด' )

เหตุการณ์

คลาสการแจ้งเตือนของ Bootstrap เปิดเผยเหตุการณ์บางอย่างสำหรับการเชื่อมต่อกับฟังก์ชันการแจ้งเตือน

$ ( '#my-alert' ) ผูก( 'ปิด' ฟังก์ชัน( ) {   
  // ทำอะไรสักอย่าง…
})

ตัวอย่างการใช้งาน

ทำสิ่งต่างๆ ได้มากขึ้นด้วยปุ่มต่างๆ สถานะปุ่มควบคุมหรือสร้างกลุ่มปุ่มสำหรับส่วนประกอบเพิ่มเติม เช่น แถบเครื่องมือ

Stateful

เพิ่มdata-loading-text="Loading..."เพื่อใช้สถานะการโหลดบนปุ่ม

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > กำลังโหลดสถานะ</button>   

สลับเดี่ยว

เพิ่มdata-toggle="button"เพื่อเปิดใช้งานการสลับบนปุ่มเดียว

<button type = "button" class = "btn btn-primary" data-toggle = "button" > สลับเดี่ยว</button>   

ช่องทำเครื่องหมาย

เพิ่มdata-toggle="buttons-checkbox"สำหรับการสลับสไตล์ช่องทำเครื่องหมายบน btn-group

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > ซ้าย</button>  
  <button type = "button" class = "btn btn-primary" > กลาง</button>  
  <button type = "button" class = "btn btn-primary" > ขวา</button>  
</div>

วิทยุ

เพิ่มdata-toggle="buttons-radio"สำหรับการสลับรูปแบบวิทยุใน btn-group

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > ซ้าย</button>  
  <button type = "button" class = "btn btn-primary" > กลาง</button>  
  <button type = "button" class = "btn btn-primary" > ขวา</button>  
</div>

การใช้งาน

เปิดใช้งานปุ่มผ่าน JavaScript:

$ ( '.nav-แท็บ' ) ปุ่ม()

มาร์กอัป

แอตทริบิวต์ข้อมูลเป็นส่วนสำคัญของปลั๊กอินปุ่ม ตรวจสอบโค้ดตัวอย่างด้านล่างสำหรับมาร์กอัปประเภทต่างๆ

ตัวเลือก

ไม่มี

วิธีการ

$().button('สลับ')

สลับสถานะการกด ให้ปุ่มมีลักษณะที่เปิดใช้งาน

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().button('กำลังโหลด')

ตั้งค่าสถานะปุ่มเป็นการโหลด - ปิดใช้งานปุ่มและสลับข้อความเป็นข้อความโหลด การโหลดข้อความควรกำหนดไว้ที่องค์ประกอบปุ่มโดยใช้แอตทริบิวต์data-loading-textdata

<button type = "button" class = "btn" data-loading-text = "กำลังโหลดสิ่งของ..." > ... </button>    

$().button('รีเซ็ต')

รีเซ็ตสถานะปุ่ม - สลับข้อความเป็นข้อความต้นฉบับ

$().button(สตริง)

รีเซ็ตสถานะปุ่ม - สลับข้อความเป็นสถานะข้อความที่กำหนดไว้ของข้อมูล

<button type = "button" class = "btn" data-complete-text = "เสร็จสิ้น!" > ... </button>    
<script>
  $ ( '.btn' ). ปุ่ม( 'สมบูรณ์' )
</script>

เกี่ยวกับ

รับรูปแบบพื้นฐานและการสนับสนุนที่ยืดหยุ่นสำหรับส่วนประกอบที่ยุบได้ เช่น หีบเพลงและการนำทาง

*ต้องมีปลั๊กอิน Transitions รวมอยู่ด้วย

ตัวอย่างหีบเพลง

เมื่อใช้ปลั๊กอินยุบ เราได้สร้างวิดเจ็ตสไตล์หีบเพลงอย่างง่าย:

< คลาสdiv = "accordion" id = "accordion2" >  
  <div class = "กลุ่มหีบเพลง" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "ยุบ" data-parent = "#accordion2" href = "#collapseOne" >    
        สินค้ากลุ่มพับได้ #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-bodyยุบใน" >  
      <div class = "accordion-inner" > 
        แอนิม ปาริตูร์ คลีเช่...
      </div>
    </div>
  </div>
  <div class = "กลุ่มหีบเพลง" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "ยุบ" data-parent = "#accordion2" href = "#collapseTwo" >    
        รายการกลุ่มพับ #2
      </a>
    </div>
    <div id = "collapseTwo" class = "หีบเพลงยุบตัว" >  
      <div class = "accordion-inner" > 
        แอนิม ปาริตูร์ คลีเช่...
      </div>
    </div>
  </div>
</div>
...

คุณยังสามารถใช้ปลั๊กอินได้โดยไม่ต้องใช้มาร์กอัปหีบเพลง สร้างปุ่มสลับการขยายและยุบองค์ประกอบอื่น

<button type = "button" class = "btn btn-danger" data-toggle = "ยุบ" data-target = "#demo" >    
  พับง่าย
</button>
 
<div id = "demo" class = "ยุบใน" > … </div>  

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

เพียงเพิ่มdata-toggle="collapse"และdata-targetไปยังองค์ประกอบเพื่อกำหนดการควบคุมองค์ประกอบที่ยุบได้โดยอัตโนมัติ แอตทริบิวต์data-targetยอมรับตัวเลือก css เพื่อปรับใช้การยุบ อย่าลืมเพิ่มคลาสcollapseลงในองค์ประกอบที่ยุบได้ หากคุณต้องการให้เปิดโดยค่าเริ่มต้น ให้เพิ่มคลาสinเพิ่มเติม

หากต้องการเพิ่มการจัดการกลุ่มแบบหีบเพลงให้กับตัวควบคุมที่ยุบได้ ให้เพิ่มแอตทริบิวต์data-parent="#selector"ข้อมูล อ้างถึงการสาธิตเพื่อดูการดำเนินการนี้

ผ่านจาวาสคริปต์

เปิดใช้งานด้วยตนเองด้วย:

$ ( ".ยุบ" ) ยุบ()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-parent="".

วิธีการ

.ยุบ (ตัวเลือก)

เปิดใช้งานเนื้อหาของคุณเป็นองค์ประกอบที่ยุบได้ ยอมรับตัวเลือกobjectเสริม

$ ( '#myCollapsible' ) ยุบ({
  สลับ: เท็จ 
})

.collapse('toggle')

สลับองค์ประกอบที่ยุบได้เพื่อแสดงหรือซ่อน

.collapse('แสดง')

แสดงองค์ประกอบที่ยุบได้

.collapse('ซ่อน')

ซ่อนองค์ประกอบที่ยุบได้

เหตุการณ์

คลาสการยุบของ Bootstrap แสดงเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันการยุบ

$ ( '#myCollapsible' ) เปิด( 'ซ่อน' , ฟังก์ชั่น() {   
  // ทำอะไรสักอย่าง…
})

ตัวอย่างม้าหมุน

สไลด์โชว์ด้านล่างแสดงปลั๊กอินและส่วนประกอบทั่วไปสำหรับการวนผ่านองค์ประกอบต่างๆ เช่น ภาพหมุน

ป้ายรูปขนาดย่อแรก

Cras justo odio, dapibus ac facilisis ใน, egestas eget quam Donec id elit non mi porta gravida ที่ eget metus Nullam id dolor id nibh ultricies vehicula ut id elit

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" class = "สไลด์แบบหมุน" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "ใช้งานอยู่" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- รายการม้าหมุน -->
  <div class = "carousel-inner" > 
    <div class = "รายการที่ใช้งานอยู่" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- การนำทางแบบหมุน -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

ใช้แอตทริบิวต์ข้อมูลเพื่อควบคุมตำแหน่งของวงล้อได้อย่างง่ายดาย data-slideยอมรับคำหลักprevหรือnextซึ่งจะเปลี่ยนตำแหน่งสไลด์โดยสัมพันธ์กับตำแหน่งปัจจุบัน อีกวิธีหนึ่ง ใช้data-slide-toเพื่อส่งดัชนีสไลด์ดิบไปยังภาพหมุนdata-slide-to="2"ซึ่งจะข้ามตำแหน่งสไลด์ไปยังดัชนีเฉพาะที่ขึ้นต้น0ด้วย

ผ่านจาวาสคริปต์

โทรแบบหมุนด้วยตนเองด้วย:

$ ( '.carousel' ) ม้าหมุน()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScriptz สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-interval="".

วิธีการ

.carousel (ตัวเลือก)

เริ่มต้นวงล้อด้วยตัวเลือกเสริมobjectและเริ่มวนรอบรายการต่างๆ

$ ( '.carousel' ) ม้าหมุน({
  ช่วงเวลา: 2000 
})

.carousel('วงจร')

หมุนเวียนผ่านรายการแบบหมุนจากซ้ายไปขวา

.carousel('หยุดชั่วคราว')

หยุดม้าหมุนจากการปั่นจักรยานผ่านรายการ

.carousel(หมายเลข)

หมุนวงล้อไปที่เฟรมใดเฟรมหนึ่ง (อิงตาม 0 คล้ายกับอาร์เรย์)

.carousel('ก่อนหน้า')

วนไปยังรายการก่อนหน้า

.carousel('ถัดไป')

วนไปยังรายการถัดไป

เหตุการณ์

คลาสม้าหมุนของ Bootstrap เปิดเผยสองเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันหมุน

ตัวอย่าง

ปลั๊กอินพื้นฐานที่ขยายได้ง่ายสำหรับการสร้างหัวพิมพ์ที่สวยงามอย่างรวดเร็วด้วยการป้อนข้อความในแบบฟอร์มใดๆ

<input type = "text" data-provide = "typeahead" >  

คุณจะต้องตั้งค่าautocomplete="off"ให้ป้องกันไม่ให้เมนูเบราว์เซอร์เริ่มต้นปรากฏขึ้นเหนือเมนูแบบเลื่อนลง Bootstrap typeahead

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

เพิ่มแอตทริบิวต์ข้อมูลเพื่อลงทะเบียนองค์ประกอบด้วยฟังก์ชันการพิมพ์ล่วงหน้าตามที่แสดงในตัวอย่างด้านบน

ผ่านจาวาสคริปต์

โทรพิมพ์ดีดด้วยตนเองด้วย:

$ ( '.typeahead' ) พิมพ์ล่วงหน้า()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-source="".

วิธีการ

.typeahead (ตัวเลือก)

เริ่มต้นการป้อนข้อมูลด้วยการพิมพ์ล่วงหน้า

ตัวอย่าง

การนำทางย่อยทางด้านซ้ายเป็นการสาธิตสดของปลั๊กอินเสริม

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

หากต้องการเพิ่มพฤติกรรมการติดไปยังองค์ประกอบใดๆ อย่างง่ายดาย เพียงเพิ่มdata-spy="affix"องค์ประกอบที่คุณต้องการสอดแนม จากนั้นใช้ออฟเซ็ตเพื่อกำหนดว่าเมื่อใดควรสลับการเปิดและปิดการตรึงองค์ประกอบ

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

ผ่านจาวาสคริปต์

เรียกปลั๊กอินเสริมผ่าน JavaScript:

$ ( '#navbar' ). ติด()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-offset-top="200".