Bootstrap จาก Twitter ในภาษาไทย

ปลั๊กอิน Modal ของเรานั้นเพรียวบางเป็นพิเศษสำหรับปลั๊กอิน modal js แบบดั้งเดิม โดยให้การดูแลเป็นพิเศษเพื่อรวมเฉพาะฟังก์ชันการทำงานเปล่าที่เราต้องการที่นี่ที่ twitter

ดาวน์โหลด

ใช้ bootstrap-modal

$ ( '#my-modal' ). โมดอล( ตัวเลือก)

ตัวเลือก

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

มาร์กอัป

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

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > เปิด Modal </a>

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

วิธีการ

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

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

$ ( '#my-modal' ). เป็นกิริยาช่วย({
  closeOnEscape : จริง 
})

.modal('toggle')

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

$ ( '#my-modal' ). โมดอล( 'สลับ' )

.modal('แสดง')

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

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

.modal('ซ่อน')

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

$ ( '#my-modal' ). เป็นกิริยาช่วย( 'ซ่อน' )

.modal(จริง)

ส่งกลับอินสแตนซ์คลาสโมดอลองค์ประกอบ

$ ( '#my-modal' ). โมดอล( จริง)

ข้อสังเกตอีกวิธีหนึ่ง สามารถเรียกข้อมูลนี้ด้วย$().data('modal').

เหตุการณ์

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

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

$ ( '#my-modal' ). ผูก( 'ซ่อน' ฟังก์ชัน( ) {   
  // ทำอะไรสักอย่าง ...
})

การสาธิต

ปลั๊กอินนี้ใช้สำหรับเพิ่มการโต้ตอบของ scrollspy (อัพเดตการนำทางอัตโนมัติ) ให้กับแถบด้านบนบูตสแตรป

ดาวน์โหลด

ใช้ boostrap-scrollspy.js

$ ( '#topbar' ). ดรอปดาวน์()

มาร์กอัป

หากต้องการเพิ่มพฤติกรรม scrollspy ให้กับการนำทางของคุณอย่างง่ายดาย เพียงเพิ่มdata-scrollspyแอตทริบิวต์ลงในไฟล์.topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>

วิธีการ

$().scrollspy()

เปิดใช้งานปุ่มนำทางอัตโนมัติโดยผู้ใช้เลื่อนตำแหน่ง

$ ( 'body > .topbar' ) scrollSpy ()

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

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

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

$ ( 'เนื้อหา' ). scrollspy ( 'รีเฟรช' )

การสาธิต

ชำระเงินการนำทางแถบบนสุดในหน้านี้

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

ดาวน์โหลด

ใช้ boostrap-tabs.js

$ ( '.แท็บ' ) แท็บ()

มาร์กอัป

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

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>

วิธีการ

$().tabs or $().pills

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

<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 = "active" id = "home" > ... </div>  
  <div id = "โปรไฟล์" > ... </div> 
  <div id = "ข้อความ" > ... </div> 
  <div id = "การตั้งค่า" > ... </div> 
</ul>
 
<script>
  $ ( ฟังก์ชัน() {  
    $ ( '.แท็บ' ) แท็บ()
  })
</script>

การสาธิต

ผ้ายีนส์ดิบที่คุณอาจไม่เคยได้ยินชื่อกางเกงยีนส์ออสติน 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.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

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

ดาวน์โหลด

ใช้ bootstrap-twipsy.js

$ ( '#example' ) ทวิปซี่( ตัวเลือก)

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
เคลื่อนไหว	บูลีน	จริง	ใช้การเปลี่ยน css fade กับคำแนะนำเครื่องมือ
ล่าช้าใน	ตัวเลข	0	ล่าช้าก่อนที่จะแสดงคำแนะนำเครื่องมือ (มิลลิวินาที)
ล่าช้าออก	ตัวเลข	0	หน่วงเวลาก่อนที่จะซ่อนคำแนะนำเครื่องมือ (มิลลิวินาที)
รั้งท้าย	สตริง	''	ข้อความที่จะใช้เมื่อไม่มีชื่อคำแนะนำเครื่องมือ
ตำแหน่ง	สตริง	'ข้างบน'	วิธีวางตำแหน่งคำแนะนำเครื่องมือ - ด้านบน \| ด้านล่าง \| ซ้าย \| ขวา
html	บูลีน	เท็จ	อนุญาตเนื้อหา html ภายในคำแนะนำเครื่องมือ
สด	บูลีน	เท็จ	ใช้การมอบหมายเหตุการณ์แทนตัวจัดการเหตุการณ์แต่ละอย่าง
offset	ตัวเลข	0	พิกเซลออฟเซ็ตของคำแนะนำเครื่องมือจากองค์ประกอบเป้าหมาย
ชื่อ	สตริง \| การทำงาน	'ชื่อ'	คุณลักษณะหรือวิธีการดึงข้อความชื่อเรื่อง
สิ่งกระตุ้น	สตริง	'โฮเวอร์'	วิธีการเรียกคำแนะนำเครื่องมือ - โฮเวอร์ \| โฟกัส \| คู่มือ

วิธีการ

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

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

.twipsy('แสดง')

เผยองค์ประกอบที่บิดเบี้ยว

$ ( '#element' ) ทวิปซี่( 'แสดง' )

.twipsy('ซ่อน')

ซ่อนองค์ประกอบที่บิดเบี้ยว

$ ( '#element' ) ทวิปซี( 'ซ่อน' )

.twipsy(จริง)

ส่งคืนองค์ประกอบอินสแตนซ์คลาส twipsy

$ ( '#element' ) ทวิปซี่( จริง)

ข้อสังเกตอีกวิธีหนึ่ง สามารถเรียกข้อมูลนี้ด้วย$().data('twipsy').

การสาธิต

กางเกงรัดรูป ระดับต่อไป keffiyeh คุณอาจไม่เคยได้ยินเกี่ยวกับพวกเขา บูธภาพถ่ายเคราผ้ายีนส์ดิบ letterpress กระเป๋าถือวีแก้น stumptown เครื่องแต่งกายแบบอเมริกันแบบ 8 บิตของ mcsweeney fixie ที่ยั่งยืนจากฟาร์มสู่โต๊ะมีผ้าแชมเบรย์ไวนิลริชาร์ดสันเทอร์รี่ Beard stumptown, เสื้อสเวตเตอร์ถัก banh mi lomo Thundercats เต้าหู้ไบโอดีเซล วิลเลี่ยมส์เบิร์ก มาร์ฟา, แชมเบรย์วีแก้นคลีนส์สี่โลโค แมคสวีนีย์ ช่าง ฝีมือ ที่แดกดันจริงๆ ไม่ว่าจะเป็นคีย์ตาร์ใดก็ตาม ทวิตเตอร์ ของ Austin จากฟาร์มถึงโต๊ะจากฟาร์มถึงโต๊ะจัดการกับไวรัสกาแฟต้นกำเนิดจากแหล่งเดียวของยีนส์ดิบ ฟรีแกน

ปลั๊กอินป๊อปโอเวอร์มีอินเทอร์เฟซที่เรียบง่ายสำหรับการเพิ่มป๊อปอัปในแอปพลิเคชันของคุณ มันขยาย ปลั๊กอิน boostrap-twipsy.jsดังนั้นอย่าลืมคว้าไฟล์นั้นด้วยเมื่อรวม popovers ไว้ในโปรเจ็กต์ของคุณ!

ดาวน์โหลด

ใช้ boostrap-popover.js

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

ตัวเลือก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
เคลื่อนไหว	บูลีน	จริง	ใช้การเปลี่ยน css fade กับคำแนะนำเครื่องมือ
ล่าช้าใน	ตัวเลข	0	ล่าช้าก่อนที่จะแสดงคำแนะนำเครื่องมือ (มิลลิวินาที)
ล่าช้าออก	ตัวเลข	0	หน่วงเวลาก่อนที่จะซ่อนคำแนะนำเครื่องมือ (มิลลิวินาที)
รั้งท้าย	สตริง	''	ข้อความที่จะใช้เมื่อไม่มีชื่อคำแนะนำเครื่องมือ
ตำแหน่ง	สตริง	'ขวา'	วิธีวางตำแหน่งคำแนะนำเครื่องมือ - ด้านบน \| ด้านล่าง \| ซ้าย \| ขวา
html	บูลีน	เท็จ	อนุญาตเนื้อหา html ภายในคำแนะนำเครื่องมือ
สด	บูลีน	เท็จ	ใช้การมอบหมายเหตุการณ์แทนตัวจัดการเหตุการณ์แต่ละอย่าง
offset	ตัวเลข	0	พิกเซลออฟเซ็ตของคำแนะนำเครื่องมือจากองค์ประกอบเป้าหมาย
ชื่อ	สตริง \| การทำงาน	'ชื่อ'	คุณลักษณะหรือวิธีการดึงข้อความชื่อเรื่อง
เนื้อหา	สตริง \| การทำงาน	'ข้อมูล-เนื้อหา'	แอตทริบิวต์หรือวิธีการดึงข้อความเนื้อหา
สิ่งกระตุ้น	สตริง	'โฮเวอร์'	วิธีการเรียกคำแนะนำเครื่องมือ - โฮเวอร์ \| โฟกัส \| คู่มือ

วิธีการ

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

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

.popover('แสดง')

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

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

.popover('ซ่อน')

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

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

การสาธิต

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

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

ดาวน์โหลด

ใช้ bootstrap-alerts.js

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

มาร์กอัป

เพียงเพิ่มdata-alertแอตทริบิวต์ในข้อความแจ้งเตือนเพื่อให้ปิดการทำงานโดยอัตโนมัติ

วิธีการ

$().alert()

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

.alert('ปิด')

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

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

การสาธิต

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

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

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

Bootstrap JS

Javascript สำหรับ Bootstrap

ชื่อโครงการ

ScrollSpy bootstrap-scrollspy.js

ใช้ boostrap-scrollspy.js

มาร์กอัป

วิธีการ

$().scrollspy()

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

การสาธิต

แท็บbootstrap-tabs.js

ใช้ boostrap-tabs.js

มาร์กอัป

วิธีการ

$().tabs or $().pills

การสาธิต

Twipsy bootstrap-twipsy.js

ใช้ bootstrap-twipsy.js

ตัวเลือก

วิธีการ

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

.twipsy('แสดง')

.twipsy('ซ่อน')

.twipsy(จริง)

การสาธิต

Popovers bootstrap-popover.js

ใช้ boostrap-popover.js

ตัวเลือก

วิธีการ

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

.popover('แสดง')

.popover('ซ่อน')

การสาธิต

การ แจ้งเตือนbootstrap-alerts.js

ใช้ bootstrap-alerts.js

มาร์กอัป

วิธีการ

$().alert()

.alert('ปิด')

การสาธิต

Bootstrap JS

Modals bootstrap-modal.js

ใช้ bootstrap-modal

ตัวเลือก

มาร์กอัป

วิธีการ

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

.modal('toggle')

.modal('แสดง')

.modal('ซ่อน')

.modal(จริง)

เหตุการณ์

การสาธิต

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

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

ใช้ boostrap-dropdown.js

มาร์กอัป

วิธีการ

$().dropdown()

การสาธิต

ชื่อโครงการ

ScrollSpy bootstrap-scrollspy.js

ใช้ boostrap-scrollspy.js

มาร์กอัป

วิธีการ

$().scrollspy()

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

การสาธิต

แท็บbootstrap-tabs.js

ใช้ boostrap-tabs.js

มาร์กอัป

วิธีการ

$().tabs or $().pills

การสาธิต

Twipsy bootstrap-twipsy.js

ใช้ bootstrap-twipsy.js

ตัวเลือก

วิธีการ

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

.twipsy('แสดง')

.twipsy('ซ่อน')

.twipsy(จริง)

การสาธิต

Popovers bootstrap-popover.js

ใช้ boostrap-popover.js

ตัวเลือก

วิธีการ

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

.popover('แสดง')

.popover('ซ่อน')

การสาธิต

การ แจ้งเตือนbootstrap-alerts.js

ใช้ bootstrap-alerts.js

มาร์กอัป

วิธีการ

$().alert()

.alert('ปิด')

การสาธิต