Javascript สำหรับ Bootstrap

ทำให้ส่วนประกอบของ Bootstrap มีชีวิต—ตอนนี้ด้วยปลั๊กอินjQuery แบบกำหนดเอง 12 ตัว

Modals

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

ดรอปดาวน์

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

Scrollspy

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

แท็บสลับได้

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

เคล็ดลับเครื่องมือ

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

ป๊อปโอเวอร์ *

เพิ่มเนื้อหาซ้อนทับขนาดเล็ก เช่น บน iPad ลงในองค์ประกอบใดๆ เพื่อใช้เป็นข้อมูลรอง

*ต้องรวมคำแนะนำเครื่องมือ

ข้อความแจ้งเตือน

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

ปุ่ม

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

ทรุด

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

ม้าหมุน

สร้างความสนุกสนานให้กับเนื้อหาใดๆ ที่คุณต้องการนำเสนอสไลด์โชว์เนื้อหาแบบโต้ตอบ

พิมพ์ล่วงหน้า

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

การเปลี่ยน*

สำหรับเอฟเฟกต์การเปลี่ยนอย่างง่าย ให้ใส่ bootstrap-transition.js หนึ่งครั้งเพื่อเลื่อนเป็นโมดอลหรือลบการแจ้งเตือน

*จำเป็นสำหรับแอนิเมชั่นในปลั๊กอิน

หัวขึ้น! ปลั๊กอินจาวาสคริปต์ทั้งหมดต้องการ jQuery เวอร์ชันล่าสุด

เกี่ยวกับ modals

ดาวน์โหลดไฟล์

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

ด้านล่างนี้เป็นโมดอลที่แสดงผลแบบคงที่

สาธิตสด

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

เปิดตัวโมดอลสาธิต

ใช้ bootstrap-modal

เรียก modal ผ่าน javascript:

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

ตัวเลือก

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

มาร์กอัป

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > เปิด Modal </a>

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

หัวขึ้น! หากคุณต้องการให้โมดอลของคุณเคลื่อนไหวเข้าและออก เพียงเพิ่ม .fadeคลาสให้กับ .modalองค์ประกอบ (ดูการสาธิตเพื่อดูการทำงานจริง) และรวม bootstrap-transition.js

วิธีการ

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

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

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

.modal('toggle')

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

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

.modal('แสดง')

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

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

.modal('ซ่อน')

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

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

เหตุการณ์

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

เหตุการณ์	คำอธิบาย
แสดง	เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมี`show`การเรียกเมธอดของอินสแตนซ์
แสดง	เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นโมดอลได้ (จะรอให้การเปลี่ยน css เสร็จสิ้น)
ซ่อน	เหตุการณ์นี้เริ่มทำงานทันทีเมื่อ`hide`มีการเรียกเมธอดของอินสแตนซ์
ที่ซ่อนอยู่	เหตุการณ์นี้เริ่มทำงานเมื่อ modal ถูกซ่อนจากผู้ใช้เสร็จสิ้น (จะรอให้การเปลี่ยน css เสร็จสิ้น)

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

เกี่ยวกับดรอปดาวน์

ดาวน์โหลดไฟล์

ตัวอย่าง

คลิกลิงก์การนำทางแบบเลื่อนลงในแถบนำทางและยาเม็ดด้านล่างเพื่อทดสอบรายการแบบเลื่อนลง

ใช้ bootstrap-dropdown.js

เรียกดรอปดาวน์ผ่านจาวาสคริปต์:

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

มาร์กอัป

หากต้องการเพิ่มฟังก์ชันดรอปดาวน์ให้กับองค์ประกอบใดๆ อย่างรวดเร็ว เพียงเพิ่มdata-toggle="dropdown"และรายการดรอปดาวน์ของบูตสแตรปที่ถูกต้องจะเปิดใช้งานโดยอัตโนมัติ

หัวขึ้น! คุณอาจเลือกกำหนดเป้าหมายรายการแบบเลื่อนลงเฉพาะโดย ใช้ data-target="#fat"หรือ href="#fat"

<ul class = "ยานำทาง" > 
  <li class = "active" ><a href = "#" > ลิงก์ปกติ</a></li>  
  <li class = "ดรอปดาวน์" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      หล่นลง
      <b class = "คาเร็ต" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > การกระทำ</a></li> 
      <li><a href = "#" > การดำเนินการอื่น</a></li> 
      <li><a href = "#" > อย่างอื่นที่นี่</a></li> 
      <li class = "ตัวแบ่ง" ></li> 
      <li><a href = "#" > ลิงก์แยก</a></li> 
    </ul>
  </li>
  ...
</ul>

วิธีการ

$().dropdown()

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

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

ดาวน์โหลดไฟล์

ตัวอย่างแถบนำทางที่มี scrollspy

เลื่อนพื้นที่ด้านล่างและดูการอัปเดตการนำทาง รายการย่อยแบบเลื่อนลงจะถูกเน้นด้วย ลองมัน!

@อ้วน

โฆษณากางเกงเลคกิ้ง, บรันช์ id art ปาร์ตี้สุดเหวี่ยง Pitchfork yr enim lo-fi ก่อนที่พวกเขาจะขายหมด qui Tumblr จักรยานจากฟาร์มสู่โต๊ะมีสิทธิ์อะไรก็ตาม เสื้อคาร์ดิแกน Anim keffiyeh บูธภาพถ่ายของ Velit seitan mcsweeney 3 wolf moon irure เสื้อกันหนาว Cosby กางเกงยีนส์ขาสั้น เสื้อกันหนาวมีฮู้ด williamsburg ที่คุณอาจไม่เคยได้ยินชื่อมาก่อน และกองทุนคาร์ดิแกน trust fund culpa biodiesel wes anderson aesthetic. Nihil สักข้อกล่าวหา, เครดิตประชดไบโอดีเซล keffiyeh ช่างฝีมือ ullamco ผลสืบเนื่อง.

@mdo

สเก็ตบอร์ดหนวด Veniam marfa, หนวดเครา adipisicing fugiat velit ฟรีแกนเครา aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. รถบรรทุกอาหารเสื้อสเวตเตอร์ลายสัก cosby, mcsweeney's quis non freegan vinyl Lo-fi เวส แอนเดอร์สัน +1 sartorial คาร์ลส์ไม่ใช่การออกกำลังกายเพื่อความงาม บรู๊คลิน adipisicing เบียร์ฝีมือรอง keytar deserunt.

หนึ่ง

Occaecat commodo aliqua delectus. Fap craft beer deserunt สเก็ตบอร์ด ea. สิทธิจักรยาน Lomo adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. ไวนิล ID ชีวิตสูง echo park consequat quis aliquip banh mi pitchfork Vero VHS ดีที่สุดแล้ว Consectetur nisi DIY กระเป๋าสะพายข้าง minim Cred ex in แพ็ก iphone ที่ยั่งยืน deelectus consectetur

สอง

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

บล็อก Keytar twee, culpa messenger bag marfa ไม่ว่าจะรถบรรทุกอาหารอะไรก็ตาม Sapiente synth id สมมติ Locavore sed helvetica cliche ประชดประชัน, Thundercats ที่คุณอาจไม่เคยได้ยินเกี่ยวกับพวกเขาเป็นผลจาก hoodie ที่ปราศจากกลูเตน lo-fi fap aliquip ลองใช้สถานที่ก่อนที่พวกเขาจะขายหมด เทอร์รี่ ริชาร์ดสัน บรันช์ที่เชี่ยวชาญในบรันช์ nesciunt quis cosby เสื้อกันหนาว pariatur keffiyeh ut helvetica ช่างฝีมือ คาร์ดิแกน คราฟท์เบียร์ seitan ผ้ากำมะหยี่สำเร็จรูป VHS แชมเบรย์ ลาบอริส เทมปอร์ เวเนียม แอนิม มอลลิต มินิม คอมโมโด อุลแลมโก้ ธันเดอร์แคทส์

ใช้ bootstrap-scrollspy.js

เรียก scrollspy ผ่านจาวาสคริปต์:

$ ( '#navbar' ). scrollspy ()

มาร์กอัป

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

<body data-spy = "เลื่อน" > ... </body>

หัวขึ้น! ลิงก์ Navbar ต้องมีเป้าหมาย ID ที่แก้ไขได้ ตัวอย่างเช่น a <a href="#home">home</a>must สอดคล้องกับบางสิ่งบางอย่างใน dom like <div id="home"></div>.

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
offset	ตัวเลข	10	พิกเซลจะชดเชยจากด้านบนเมื่อคำนวณตำแหน่งของการเลื่อน

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

ดาวน์โหลดไฟล์

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

คลิกแท็บด้านล่างเพื่อสลับระหว่างบานหน้าต่างที่ซ่อนอยู่ แม้จะผ่านเมนูแบบเลื่อนลง

ผ้ายีนส์ดิบที่คุณอาจไม่เคยได้ยินชื่อกางเกงยีนส์ออสติน Nesciunt Tofu stumptown aliqua, น้ำยาทำความสะอาดซินธ์มาสเตอร์แบบย้อนยุค หนวด cliche ชั่วคราว วิลเลียมส์เบิร์ก คาร์ล วีแกน เฮลเวติกา Reprehenderit คนขายเนื้อ retro keffiyeh dreamcatcher synth เสื้อกันหนาว Cosby eu banh mi, qui irure terry richardson ex squid Aliquip placeat ซัลเวีย cillum iphone. Seitan aliquip quis คาร์ดิแกน American apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

เชื่อถือกองทุน seitan letterpress, keytar raw denim keffiyeh etsy art party ก่อนที่พวกเขาจะขายหมด แฟนนี่แพ็คพอร์ตแลนด์ seitan DIY ปาร์ตี้ศิลปะ locavore หมาป่า cliche ชีวิตสูง echo park ออสติน Cred vinyl keffiyeh DIY salvia PBR, banh mi ก่อนที่พวกเขาจะขายเสื้อ VHS viral locavore cosby จากฟาร์มสู่โต๊ะ Lomo wolf viral, หนวดพร้อมแล้ว Thundercats keffiyeh คราฟต์เบียร์ Marfa จริยธรรม Wolf salvia freegan, เครื่องแต่งกายชาย keffiyeh echo park มังสวิรัติ

ใช้ bootstrap-tab.js

เปิดใช้งานแท็บแท็บได้ผ่านจาวาสคริปต์:

$ ( '#myTab' ). แท็บ( 'แสดง' )

มาร์กอัป

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

<ul class = "แท็บ" > 
  <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 = "#ettings" data-toggle = "tab" > การตั้งค่า</a></li>  
</ul>

วิธีการ

$().tab

เปิดใช้งานองค์ประกอบแท็บและคอนเทนเนอร์เนื้อหา แท็บควรมี "เป้าหมายข้อมูล" หรือ "href" ที่กำหนดเป้าหมายไปยังโหนดคอนเทนเนอร์ใน dom

<ul class = "แท็บ" > 
  <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>
  $ ( ฟังก์ชัน() {  
    $ ( '.tabs a:last' ) แท็บ( 'แสดง' )
  })
</script>

เหตุการณ์

เหตุการณ์	คำอธิบาย
แสดง	เหตุการณ์นี้เริ่มทำงานในการแสดงแท็บ แต่ก่อนที่จะมีการแสดงแท็บใหม่ ใช้`event.target`และ`event.relatedTarget`เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ
แสดง	เหตุการณ์นี้เริ่มทำงานในการแสดงแท็บหลังจากแสดงแท็บแล้ว ใช้`event.target`และ`event.relatedTarget`เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ

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

เกี่ยวกับคำแนะนำเครื่องมือ

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

ดาวน์โหลดไฟล์

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

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

ใช้ bootstrap-tooltip.js

ทริกเกอร์คำแนะนำเครื่องมือผ่านจาวาสคริปต์:

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

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
แอนิเมชั่น	บูลีน	จริง	ใช้การเปลี่ยน css fade กับคำแนะนำเครื่องมือ
ตำแหน่ง	สตริง	'สูงสุด'	วิธีการวางตำแหน่งคำแนะนำเครื่องมือ - ด้านบน \| ด้านล่าง \| ซ้าย \| ขวา
ตัวเลือก	สตริง	เท็จ	หากมีตัวเลือก อ็อบเจ็กต์คำแนะนำเครื่องมือจะถูกส่งไปยังเป้าหมายที่ระบุ
ชื่อ	สตริง \| การทำงาน	''	ค่าเริ่มต้นของชื่อหากไม่มีแท็ก `title`
สิ่งกระตุ้น	สตริง	'โฮเวอร์'	วิธีการเรียกคำแนะนำเครื่องมือ - โฮเวอร์ \| โฟกัส \| คู่มือ
ล่าช้า	หมายเลข \| วัตถุ	0	ความล่าช้าในการแสดงและซ่อนคำแนะนำเครื่องมือ (มิลลิวินาที) หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง โครงสร้างวัตถุคือ:`delay: { show: 500, hide: 100 }`

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

มาร์กอัป

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

วิธีการ

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

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

.tooltip('แสดง')

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

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

.tooltip('ซ่อน')

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

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

.tooltip('toggle')

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

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

เกี่ยวกับป๊อปโอเวอร์

*ต้องรวม คำแนะนำ เครื่องมือ

ดาวน์โหลดไฟล์

ตัวอย่างโฮเวอร์ป๊อปโอเวอร์

วางเมาส์เหนือปุ่มเพื่อเรียกป๊อปโอเวอร์

โฮเวอร์สำหรับป๊อปโอเวอร์

ใช้ bootstrap-popover.js

เปิดใช้งานป๊อปโอเวอร์ผ่านจาวาสคริปต์:

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

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
แอนิเมชั่น	บูลีน	จริง	ใช้การเปลี่ยน css fade กับคำแนะนำเครื่องมือ
ตำแหน่ง	สตริง	'ขวา'	วิธีวางตำแหน่งป๊อปโอเวอร์ - ด้านบน \| ด้านล่าง \| ซ้าย \| ขวา
ตัวเลือก	สตริง	เท็จ	หากมีตัวเลือก อ็อบเจ็กต์คำแนะนำเครื่องมือจะถูกส่งไปยังเป้าหมายที่ระบุ
สิ่งกระตุ้น	สตริง	'โฮเวอร์'	วิธีการเรียกคำแนะนำเครื่องมือ - โฮเวอร์ \| โฟกัส \| คู่มือ
ชื่อ	สตริง \| การทำงาน	''	ค่าเริ่มต้นของชื่อหากไม่มีแอตทริบิวต์ "ชื่อ"
เนื้อหา	สตริง \| การทำงาน	''	ค่าเนื้อหาเริ่มต้นหากไม่มีแอตทริบิวต์ "ข้อมูลเนื้อหา"
ล่าช้า	หมายเลข \| วัตถุ	0	ล่าช้าในการแสดงและซ่อนป๊อปโอเวอร์ (มิลลิวินาที) หากมีการระบุตัวเลข การหน่วงเวลาจะใช้กับทั้งซ่อน/แสดง โครงสร้างวัตถุคือ:`delay: { show: 500, hide: 100 }`

หัวขึ้น! ตัวเลือกสำหรับป๊อปอัปแต่ละรายการสามารถระบุได้โดยใช้แอตทริบิวต์ข้อมูล

มาร์กอัป

วิธีการ

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

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

.popover('แสดง')

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

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

.popover('ซ่อน')

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

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

.popover('toggle')

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

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

เกี่ยวกับ alerts

ดาวน์โหลด

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

ปลั๊กอินการแจ้งเตือนทำงานบนข้อความเตือนปกติและบล็อกข้อความ

× กัวคาโมเล่ศักดิ์สิทธิ์! เช็คตัวเองให้ดีที่สุด คุณไม่ได้ดูดีเกินไป

อื้อหือ! คุณมีข้อผิดพลาด!

เปลี่ยนสิ่งนี้และสิ่งนั้นแล้วลองอีกครั้ง Duis mollis, est ไม่ใช่ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Cras mattis consectetur purus นั่ง amet fermentum.

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้

ใช้ bootstrap-alerts.js

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

$ ( ".alert-ข้อความ" ) แจ้งเตือน()

มาร์กอัป

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

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

วิธีการ

$().alert()

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

.alert('ปิด')

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

$ ( ".alert-ข้อความ" ) แจ้งเตือน( 'ปิด' )

เหตุการณ์

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

เหตุการณ์	คำอธิบาย
ปิด	เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมี`close`การเรียกเมธอดของอินสแตนซ์
ปิด	เหตุการณ์นี้เริ่มทำงานเมื่อมีการปิดการแจ้งเตือน (จะรอให้การเปลี่ยน css เสร็จสมบูรณ์)

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

เกี่ยวกับ

ดาวน์โหลดไฟล์

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

ใช้ปลั๊กอินปุ่มสำหรับสถานะและการสลับ

Stateful
สลับเดี่ยว
ช่องทำเครื่องหมาย
วิทยุ

ใช้ bootstrap-button.js

เปิดใช้งานปุ่มผ่านจาวาสคริปต์:

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

มาร์กอัป

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

<!-- เพิ่ม data-toggle="button" เพื่อเปิดใช้งานการสลับบนปุ่มเดียว -->
<button class = "btn" data-toggle = "button" > สลับเดี่ยว</button>  
 
<!-- เพิ่ม data-toggle="buttons-checkbox" สำหรับการสลับรูปแบบช่องทำเครื่องหมายบน btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > ซ้าย</button> 
  <button class = "btn" > กลาง</button> 
  <button class = "btn" > ขวา</button> 
</div>
 
<!-- เพิ่ม data-toggle="buttons-radio" สำหรับการสลับรูปแบบวิทยุใน btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ซ้าย</button> 
  <button class = "btn" > กลาง</button> 
  <button class = "btn" > ขวา</button> 
</div>

วิธีการ

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

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

หัวขึ้น! คุณสามารถเปิดใช้งานการสลับปุ่มอัตโนมัติโดยใช้ data-toggleแอตทริบิวต์

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

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

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

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

หัวขึ้น! Firefox ยังคงมีสถานะปิดใช้งานในการโหลดหน้าเว็บ วิธีแก้ปัญหาสำหรับสิ่งนี้คือการใช้ autocomplete="off".

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

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

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

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

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

เกี่ยวกับ

ดาวน์โหลดไฟล์

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

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

สินค้ากลุ่มพับได้ #1

Anim pariatur cliche reprehenderit, enim eiusmod high life อัลบัมมัสเทอร์รี่ริชาร์ดสันโฆษณาปลาหมึก 3 wolf moon officia aute, non cupidat สเก็ตบอร์ด dolor บรันช์ รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod. บรันช์ 3 หมาป่า มูน เทมพอร์ ซันท์ อะลิควา วางนกบนนั้น ปลาหมึก กาแฟต้นกำเนิดเดียว Nihil anim keffiyeh helvetica, เบียร์ฝีมือแรงงาน wes anderson cred nesciunt sapiente ea proident โฆษณา วีแกน ยกเว้น คนขายเนื้อ รอง lomo เลกกิ้ง occaecat คราฟท์เบียร์จากฟาร์มสู่โต๊ะ, ยีนส์สังเคราะห์ความงามแบบดิบๆ ที่คุณอาจไม่เคยได้ยินมาก่อนเกี่ยวกับการใช้ VHS ที่ยั่งยืน

รายการกลุ่มพับ #2

กลุ่มสินค้าพับได้ #3

ใช้ bootstrap-collapse.js

เปิดใช้งานผ่านจาวาสคริปต์:

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

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
พ่อแม่	ตัวเลือก	เท็จ	หากตัวเลือก องค์ประกอบที่ยุบได้ทั้งหมดภายใต้พาเรนต์ที่ระบุจะถูกปิดเมื่อแสดงรายการที่ยุบได้นี้ (คล้ายกับพฤติกรรมหีบเพลงแบบดั้งเดิม)
สลับ	บูลีน	จริง	สลับองค์ประกอบที่ยุบได้ในการเรียกใช้

มาร์กอัป

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

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

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

วิธีการ

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

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

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

.collapse('toggle')

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

.collapse('แสดง')

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

.collapse('ซ่อน')

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

เหตุการณ์

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

เหตุการณ์	คำอธิบาย
แสดง	เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมี`show`การเรียกเมธอดของอินสแตนซ์
แสดง	เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นองค์ประกอบการยุบ (จะรอให้การเปลี่ยน css เสร็จสิ้น)
ซ่อน	เหตุการณ์นี้เริ่มทำงานทันทีเมื่อ`hide`มีการเรียกเมธอด
ที่ซ่อนอยู่	เหตุการณ์นี้เริ่มทำงานเมื่อองค์ประกอบการยุบถูกซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน css เสร็จสิ้น)

$ ( '#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

ป้ายรูปขนาดย่อที่สอง

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

ป้ายชื่อย่อที่สาม

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

‹ ›

หัวขึ้น! เมื่อใช้งานภาพหมุนนี้ ให้ลบภาพที่เราให้ไว้และแทนที่ด้วยภาพของคุณเอง

ใช้ bootstrap-carousel.js

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

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

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ช่วงเวลา	ตัวเลข	5000	ระยะเวลาที่จะหน่วงเวลาระหว่างการปั่นจักรยานรายการโดยอัตโนมัติ

มาร์กอัป

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

< คลาสdiv = "ม้าหมุน" > 
  <!-- รายการม้าหมุน -->
  <div class = "carousel-inner" > 
    ...
  </div>
  <!-- การนำทางแบบหมุน -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

วิธีการ

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

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

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

.carousel('วงจร')

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

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

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

.carousel(หมายเลข)

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

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

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

.carousel('ถัดไป')

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

เหตุการณ์

เหตุการณ์	คำอธิบาย
สไลด์	เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมี`slide`การเรียกใช้เมธอดของอินสแตนซ์
เลื่อน	เหตุการณ์นี้เริ่มทำงานเมื่อภาพหมุนเสร็จสิ้นเป็นการเปลี่ยนสไลด์

เกี่ยวกับ

ดาวน์โหลดไฟล์

ตัวอย่าง

เริ่มพิมพ์ในฟิลด์ด้านล่างเพื่อแสดงผลการพิมพ์ล่วงหน้า

ใช้ bootstrap-typeahead.js

โทรพิมพ์ล่วงหน้าผ่านจาวาสคริปต์:

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

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
แหล่งที่มา	อาร์เรย์	[ ]	แหล่งข้อมูลที่จะสอบถาม
รายการ	ตัวเลข	8	จำนวนรายการที่จะแสดงในรายการดรอปดาวน์สูงสุด
จับคู่	การทำงาน	ตัวพิมพ์เล็กและตัวพิมพ์ใหญ่	เมธอดที่ใช้ในการพิจารณาว่าคิวรีตรงกับรายการหรือไม่ ยอมรับอาร์กิวเมนต์เดียว`item`ซึ่งจะใช้ทดสอบการสืบค้น เข้าถึงแบบสอบถามปัจจุบันด้วย`this.query`. ส่งคืนบูลีน`true`หากข้อความค้นหาตรงกัน
เครื่องคัดแยก	การทำงาน	ตรงกันทุก ประการ, คำนึง ถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่	วิธีที่ใช้ในการจัดเรียงผลลัพธ์การเติมข้อความอัตโนมัติ ยอมรับอาร์กิวเมนต์เดียว`items`และมีขอบเขตของอินสแตนซ์แบบตัวพิมพ์ อ้างอิงการสืบค้นปัจจุบันด้วย`this.query`.
ปากกาเน้นข้อความ	การทำงาน	ไฮไลท์การแข่งขันเริ่มต้นทั้งหมด	วิธีที่ใช้เพื่อเน้นผลลัพธ์การเติมข้อความอัตโนมัติ ยอมรับอาร์กิวเมนต์เดียว`item`และมีขอบเขตของอินสแตนซ์แบบตัวพิมพ์ ควรส่งคืน html.

มาร์กอัป

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

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

วิธีการ

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

เริ่มต้นอินพุตด้วยตัวพิมพ์ดีด

ปลั๊กอิน jQuery ปลั๊กอินBootstrap โหลเพื่อให้คุณเริ่มต้น

ป๊อปโอเวอร์ *

การเปลี่ยน*

Modals bootstrap-modal.js

เกี่ยวกับ modals

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

ส่วนหัวของโมดอล

สาธิตสด

หัวเรื่องโมดอล

ข้อความในโมดอล

Popover ในกิริยาช่วย

เคล็ดลับเครื่องมือในโมดอล

ใช้ bootstrap-modal

ตัวเลือก

มาร์กอัป

วิธีการ

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

.modal('toggle')

.modal('แสดง')

.modal('ซ่อน')

เหตุการณ์

ดร็อป ดาวน์bootstrap-dropdown.js

เกี่ยวกับดรอปดาวน์

ตัวอย่าง

ใช้ bootstrap-dropdown.js

มาร์กอัป

วิธีการ

$().dropdown()

ScrollSpy bootstrap-scrollspy.js

ตัวอย่างแถบนำทางที่มี scrollspy

@อ้วน

@mdo

หนึ่ง

สอง

three

ใช้ bootstrap-scrollspy.js

มาร์กอัป

ตัวเลือก

แท็บสลับได้bootstrap-tab.js

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

ใช้ bootstrap-tab.js

มาร์กอัป

วิธีการ

$().tab

เหตุการณ์

คำแนะนำเครื่องมือ bootstrap- tooltip.js

เกี่ยวกับคำแนะนำเครื่องมือ

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

ใช้ bootstrap-tooltip.js

ตัวเลือก

มาร์กอัป

วิธีการ

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

.tooltip('แสดง')

.tooltip('ซ่อน')

.tooltip('toggle')

Popovers bootstrap-popover.js

เกี่ยวกับป๊อปโอเวอร์

ตัวอย่างโฮเวอร์ป๊อปโอเวอร์

ใช้ bootstrap-popover.js

ตัวเลือก

มาร์กอัป

วิธีการ

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

.popover('แสดง')

.popover('ซ่อน')

.popover('toggle')

ข้อความแจ้งเตือนbootstrap-alert.js

เกี่ยวกับ alerts

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

อื้อหือ! คุณมีข้อผิดพลาด!

ใช้ bootstrap-alerts.js

มาร์กอัป

วิธีการ

$().alert()

.alert('ปิด')

เหตุการณ์

ปุ่มbootstrap-button.js

เกี่ยวกับ

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