ปลั๊กอิน bootstrap
1. ปลั๊กอินการเปลี่ยนผ่าน bootstrap
ปลั๊กอินการเปลี่ยนแปลงให้เอฟเฟกต์การเปลี่ยนแปลงอย่างง่าย หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินเป็นรายบุคคลคุณจะต้องอ้างอิงการเปลี่ยนแปลง. js นอกเหนือจากไฟล์ JS อื่น ๆ หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
Transition.js เป็นคลาส Helper ขั้นพื้นฐานสำหรับเหตุการณ์การเปลี่ยนผ่านและ CSS Transition Effect Simulator มันถูกใช้โดยปลั๊กอินอื่น ๆ เพื่อตรวจสอบการสนับสนุนเอฟเฟกต์การเปลี่ยนแปลง CSS และเพื่อให้ได้เอฟเฟกต์การเปลี่ยนแปลง
ใช้เคส
เคสใช้ปลั๊กอินเปลี่ยนผ่าน:
(1) กล่องโต้ตอบโมดอลที่มีสไลด์หรือเอฟเฟกต์จางหายไป สำหรับตัวอย่างเฉพาะโปรดดูปลั๊กอิน Bootstrap Modal Box (Modal)
(2) หน้าแท็กที่มีเอฟเฟกต์ซีดจาง สำหรับตัวอย่างเฉพาะโปรดดูที่ปลั๊กอินแท็บ Bootstrap (TAB) ปลั๊กอิน
(3) กล่องคำเตือนที่มีเอฟเฟกต์ซีดจาง สำหรับตัวอย่างเฉพาะโปรดดูปลั๊กอิน Bootstrap Warning Box (Alert)
(4) บอร์ดม้าหมุนที่มีเอฟเฟกต์สไลด์ สำหรับตัวอย่างเฉพาะดูปลั๊กอิน Bootstrap Carousel
2. ปลั๊กอิน Bootstrap Modal (Modal)
กล่องโมดอล (โมดอล) เป็นรูปแบบเด็กที่ซ้อนทับในรูปแบบแม่ โดยทั่วไปวัตถุประสงค์คือการแสดงเนื้อหาจากแหล่งแยกต่างหากซึ่งสามารถมีปฏิสัมพันธ์บางอย่างโดยไม่ต้องออกจากแบบฟอร์มหลัก รูปแบบย่อยสามารถให้ข้อมูลการโต้ตอบ ฯลฯ
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง modal.js หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
(1) การใช้งาน
คุณสามารถสลับเนื้อหาที่ซ่อนอยู่ของปลั๊กอิน Modal Box (Modal):
A. ผ่านแอตทริบิวต์ข้อมูล: ตั้งค่าแอตทริบิวต์ data-toggle = "modal" บนองค์ประกอบคอนโทรลเลอร์ (เช่นปุ่มหรือลิงก์) และตั้งค่า data-target = "#identifier" หรือ href = "#identifier" เพื่อระบุกล่องโมดอลเฉพาะเพื่อสลับ (ด้วย id = "ตัวระบุ")
B. ผ่าน JavaScript: การใช้เทคนิคนี้คุณสามารถเรียกกล่องโมดอลด้วย id = "ตัวระบุ" ผ่านสาย JavaScript ง่ายๆ:
$ ('#identifier'). modal (ตัวเลือก)
<H2> สร้างกล่องโมดอล (โมดอล) </h2> <!-ปุ่มทริกเกอร์กล่องโมดอล-> <ปุ่ม data-toggle = "modal" data-target = "#mymodal"> เริ่มแสดงกล่องโมดอล </button> <! Aria-hidden = "true"> <div> <div> <div> <button type = "ปุ่ม" data-dismiss = "modal" aria-hidden = "true"> × </button> <h4 id = "modallabel"> modal "modal" modal " type = "ปุ่ม"> ส่งการเปลี่ยนแปลง </button> </div> </div> </div> <!-/.modal-content-> </div> <!-/.modal-> </div>
รหัสคำอธิบาย:
A. การใช้ Windows โมดอลคุณต้องมีทริกเกอร์บางชนิด คุณสามารถใช้ปุ่มหรือลิงก์ ที่นี่เรากำลังใช้ปุ่ม
B. หากคุณดูรหัสด้านบนอย่างระมัดระวังคุณจะพบว่าในแท็ก <button> data-target = "#mymodal" เป็นเป้าหมายของกล่องโมดอลที่คุณต้องการโหลดบนหน้า คุณสามารถสร้างกล่องโมดอลหลายกล่องบนหน้าแล้วสร้างทริกเกอร์ที่แตกต่างกันสำหรับแต่ละกล่องโมดอล ตอนนี้เห็นได้ชัดว่าคุณไม่สามารถโหลดหลายโมดูลในเวลาเดียวกัน แต่คุณสามารถสร้างหลาย ๆ บนหน้าเพื่อโหลดในเวลาที่ต่างกัน
C. สองจุดที่จะสังเกตในกล่องโมดอล:
ครั้งแรกคือ. modal ซึ่งใช้ในการจดจำเนื้อหาของ <div> เป็นกล่องโมดอล
อย่างที่สองคือคลาส. เฟด เมื่อสวิตช์กล่องโมดอลจะทำให้เนื้อหาจางหายไป
D. Aria-Labelledby = "MyModallabel" คุณสมบัตินี้หมายถึงชื่อของกล่องโมดอล
E. คุณสมบัติ aria-hidden = "true" ใช้เพื่อให้หน้าต่างโมดอลมองไม่เห็นจนกว่าทริกเกอร์จะถูกทริกเกอร์ (เช่นคลิกที่ปุ่มที่เกี่ยวข้อง)
F, <div>, Modal-Header เป็นคลาสที่กำหนดสไตล์สำหรับหัวของหน้าต่างโมดอล
G, class = "Close", Close เป็นคลาส CSS ที่ใช้ในการจัดสไตล์ปุ่มปิดของหน้าต่างโมดอล
H, data-dismiss = "modal" เป็นแอตทริบิวต์ข้อมูล HTML5 ที่กำหนดเอง ที่นี่มันถูกใช้เพื่อปิดหน้าต่างโมดัล
i, class = "modal-body" เป็นคลาส CSS ของ bootstrap CSS ใช้ในการจัดรูปแบบร่างกายของหน้าต่างโมดอล
J, class = "Modal-Footer" เป็นคลาส CSS ของ Bootstrap CSS ที่ใช้ในการจัดสไตล์ด้านล่างของหน้าต่างโมดัล
K, data-toggle = "Modal", HTML5 Data Data Data-Toggle ใช้เพื่อเปิดหน้าต่างโมดัล
(2) ตัวเลือก
มีตัวเลือกในการปรับแต่งลักษณะและความรู้สึกของหน้าต่างโมดอลซึ่งผ่านคุณสมบัติข้อมูลหรือจาวาสคริปต์ ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
(3) วิธีการ
นี่คือวิธีการที่มีประโยชน์บางอย่างที่สามารถใช้กับ Modal ()
(4) เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในกล่องโมดอล เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
3. ปลั๊กอินแบบดรอปดาวน์ Bootstrap (ดรอปดาวน์) ปลั๊กอิน
บทเมนูแบบดรอปดาวน์ Bootstrap อธิบายเมนูแบบเลื่อนลง แต่ไม่เกี่ยวข้องกับส่วนการโต้ตอบ บทนี้จะอธิบายการโต้ตอบของเมนูแบบเลื่อนลงอย่างละเอียด การใช้ปลั๊กอินแบบเลื่อนลงคุณสามารถเพิ่มเมนูดรอปดาวน์ลงในส่วนประกอบใด ๆ (เช่นแถบการนำทางแท็บเมนูนำทางแคปซูลปุ่ม ฯลฯ )
หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง Dropdown.js หรือตามที่กล่าวไว้ในบทภาพรวมปลั๊กอิน Bootstrap คุณสามารถอ้างถึง bootstrap.js หรือรุ่นบีบอัดของ bootstrap.min.js
(1) การใช้งาน
คุณสามารถสลับเนื้อหาที่ซ่อนอยู่ของปลั๊กอินเมนูแบบเลื่อนลง (ดรอปดาวน์):
สลับเมนูแบบเลื่อนลงผ่านแอตทริบิวต์ข้อมูล: เพิ่ม data-toggle = "ดรอปดาวน์" ไปยังลิงค์หรือปุ่ม
A. ใช้แอตทริบิวต์ข้อมูล: เพิ่ม data-toggle = "ดรอปดาวน์" ไปยังลิงค์หรือปุ่มเพื่อสลับเมนูแบบเลื่อนลงดังที่แสดงด้านล่าง:
<div> <a data-toggle = "dropdown" href = "#"> ทริกเกอร์แบบเลื่อนลง </a> <ul role = "เมนู" aria-labelledby = "dlabel"> </ul> </div>
B. หากคุณต้องการให้ลิงก์ยังคงอยู่ (มีประโยชน์เมื่อเบราว์เซอร์ไม่เปิดใช้งาน JavaScript) ให้ใช้คุณสมบัติข้อมูลเป้าหมายแทน HREF = "#":
<div> <a id = "dlabel" role = "ปุ่ม" data-toggle = "dropdown" data-target = "#" href = "/page.html"> เมนูแบบเลื่อนลง (แบบเลื่อนลง) <span> </span> </a>
C. ผ่าน JavaScript: เรียกเมนูแบบเลื่อนลงผ่าน JavaScript โปรดใช้วิธีการต่อไปนี้: $ ('. Dropdown-Toggle'). Dropdown ()
(2) วิธีการ
มีวิธีง่ายๆในการแสดงหรือซ่อนเมนูแบบเลื่อนลง $ (). ดรอปดาวน์ ('สลับ')
4. ปลั๊กอิน bootstrap scrollspy
ปลั๊กอิน Scroll Monitoring (ScrollSpy) นั่นคือการอัปเดตอัตโนมัติของปลั๊กอินนำทางจะอัปเดตเป้าหมายการนำทางที่สอดคล้องกันโดยอัตโนมัติตามตำแหน่งของแถบเลื่อน การใช้งานพื้นฐานคือการเพิ่มคลาสที่ใช้งานลงในแถบการนำทางตามตำแหน่งแถบเลื่อนขณะที่คุณเลื่อน
(1) การใช้งาน
คุณสามารถเพิ่มพฤติกรรมการฟังแบบเลื่อนไปยังการนำทางด้านบน:
A. ผ่านแอตทริบิวต์ข้อมูล: เพิ่ม data-spy = "scroll" ในองค์ประกอบที่คุณต้องการฟัง (โดยปกติแล้วร่างกาย) จากนั้นเพิ่มเป้าหมายข้อมูลแอตทริบิวต์ด้วย ID ขององค์ประกอบหลักของส่วนประกอบ bootstrap .NAV หรือคุณสมบัติของคลาส เพื่อให้ทำงานได้อย่างถูกต้องคุณต้องตรวจสอบให้แน่ใจว่ามีองค์ประกอบในร่างกายของหน้าเว็บที่ตรงกับ ID ของลิงค์ที่คุณต้องการฟัง
<body data-spy = "scroll" data-target = ". navbar- ตัวอย่าง"> ... <div> <ul> ... </ul> </div> ... </body>
B. ผ่าน JavaScript: คุณสามารถเรียกการตรวจสอบสกรอลผ่าน JavaScript เลือกองค์ประกอบที่จะฟังจากนั้นเรียกฟังก์ชัน. scrollspy ():
$ ('body'). scrollspy ({เป้าหมาย: '.navbar- ตัวอย่าง'})
(2) ตัวเลือก
ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
(3) วิธีการ
.ScrollSpy ('Refresh'): เมื่อเรียกใช้วิธี ScrollSpy ผ่าน JavaScript คุณต้องเรียกใช้วิธี. REFRESH เพื่ออัปเดต DOM สิ่งนี้มีประโยชน์เมื่อองค์ประกอบใด ๆ ของ DOM มีการเปลี่ยนแปลง (เช่นคุณเพิ่มหรือลบองค์ประกอบบางอย่าง) นี่คือไวยากรณ์สำหรับการใช้วิธีนี้
$ ('[data-spy = "scroll"]'). แต่ละ (ฟังก์ชั่น () {var $ spy = $ (นี่) .scrollspy ('รีเฟรช')})(4) เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในการเลื่อนการฟัง เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
5. ปลั๊กอินแท็บ bootstrap (แท็บ)
แท็บ (แท็บ) ถูกนำมาใช้ในบทองค์ประกอบการนำทาง bootstrap ด้วยการรวมคุณสมบัติข้อมูลบางอย่างคุณสามารถสร้างอินเทอร์เฟซแท็บได้อย่างง่ายดาย ด้วยปลั๊กอินนี้คุณสามารถวางเนื้อหาในหน้าแท็บหรือหน้าแท็บแคปซูลหรือแม้แต่หน้าแท็บเมนูแบบเลื่อนลง
(1) การใช้งาน
คุณสามารถเปิดใช้งานหน้าแท็บได้สองวิธี:
A. ผ่านแอตทริบิวต์ข้อมูล: คุณต้องเพิ่ม data-toggle = "tab" หรือ data-toggle = "Pill" ไปยังลิงค์ข้อความ Anchor การเพิ่มคลาส NAV และ NAV-TABS ลงใน UL จะใช้สไตล์แท็ก bootstrap การเพิ่มคลาส NAV และ NAV-PILLS ลงใน UL จะใช้สไตล์ Capsule Bootstrap
<ul>
<li> <a href = "#identifier" data-toggle = "tab"> home </a> </li>
-
</ul>
B. ผ่าน JavaScript: คุณสามารถใช้ JavaScript เพื่อเปิดใช้งานหน้าแท็บดังที่แสดงด้านล่าง:
$ ('#mytab a') คลิก (ฟังก์ชั่น (e) {e.preventdefault () $ (นี่) .tab ('show')})ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการเปิดใช้งานแต่ละแท็บในรูปแบบที่แตกต่างกัน:
// เลือกหน้าแท็บ $ ('#mytab a [href = "#profile"]') แท็บ ('show') // เลือกหน้าแท็บแรก $ ('#mytab a: แรก') แท็บ ('แสดง') // เลือกหน้าแท็บสุดท้าย $ ('#mytab a: สุดท้าย) A '). แท็บ (' แสดง ')(2) ผลกระทบจางหายไป
หากคุณต้องการตั้งค่าเอฟเฟกต์จางสำหรับแท็บให้เพิ่ม. fade ลงในแต่ละ. tab-pane แท็บแรกจะต้องเพิ่มด้วยคลาส. อินที่จะจางหายไปเพื่อแสดงเนื้อหาเริ่มต้นดังที่แสดงในตัวอย่างต่อไปนี้:
<div> <div id = "home"> ... </div> <div id = "svn"> ... </div> </div>
(3) วิธีการ
. $ (). แท็บ: วิธีนี้เปิดใช้งานองค์ประกอบแท็บและคอนเทนเนอร์เนื้อหา หน้าแท็บต้องใช้เป้าหมายข้อมูลหรือ HREF ที่ชี้ไปที่โหนดคอนเทนเนอร์ใน DOM
<ul id = "mytab"> <li> <a href = "#ตัวระบุ" data-toggle = "tab"> home </a> </li> ..... </ul> </ul> <div> <div id = "home"> ... </div> ....
(4) เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอินแท็บ (แท็บ) เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
6. ปลั๊กอินเครื่องมือพรอมต์ Bootstrap (คำแนะนำเครื่องมือ)
คำแนะนำเครื่องมือมีประโยชน์มากเมื่อคุณต้องการอธิบายลิงก์ ปลั๊กอิน Tooltip ได้รับแรงบันดาลใจจาก jQuery.tipsy เขียนโดย Jason Frame ปลั๊กอิน Tooltip ได้ทำการปรับปรุงมากมายเช่นไม่ต้องพึ่งพาภาพ แต่ใช้ CSS เพื่อให้ได้เอฟเฟกต์ภาพเคลื่อนไหวและใช้คุณลักษณะข้อมูลเพื่อจัดเก็บข้อมูลชื่อเรื่อง
(1) การใช้งาน
ปลั๊กอินเครื่องมือสร้างเนื้อหาและแท็กตามความต้องการ โดยค่าเริ่มต้นคำแนะนำเครื่องมือจะถูกวางไว้ด้านหลังองค์ประกอบทริกเกอร์ มีสองวิธีที่คุณสามารถเพิ่มเครื่องมือที่รวดเร็ว (คำแนะนำเครื่องมือ):
A. ผ่านแอตทริบิวต์ข้อมูล: หากคุณต้องการเพิ่มเครื่องมือที่พร้อมใช้งาน (คำแนะนำเครื่องมือ) เพียงเพิ่ม data-toggle = "Tooltip" ลงในแท็กจุดยึด ชื่อของสมอคือข้อความของเครื่องมือพรอมต์ (คำแนะนำเครื่องมือ) โดยค่าเริ่มต้นปลั๊กอินจะตั้งค่าคำแนะนำเครื่องมือที่ด้านบน
<a href = "#" data-toggle = "tooltip" title = "ตัวอย่างเครื่องมือ"> โปรดวางเมาส์เหนือ </a> ของฉัน
A. ผ่าน JavaScript: ทริกเกอร์เครื่องมือพรอมต์ (คำแนะนำเครื่องมือ) ผ่าน JavaScript: $ ('#ตัวระบุ') Tooltip (ตัวเลือก)
ปลั๊กอินคำแนะนำเครื่องมือไม่เหมือนเมนูแบบเลื่อนลงและปลั๊กอินอื่น ๆ ที่กล่าวถึงก่อนหน้านี้ไม่ใช่ปลั๊กอิน CSS บริสุทธิ์ ในการใช้ปลั๊กอินคุณต้องเปิดใช้งานโดยใช้ jQuery (อ่าน JavaScript) ใช้สคริปต์ต่อไปนี้เพื่อเปิดใช้งานเครื่องมือพรอมต์ทั้งหมด (คำแนะนำเครื่องมือ) ในหน้า:
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip ();});
<a href = "#" data-toggle = "tooltip" data-placement = "left"> คำแนะนำเครื่องมือทางด้านซ้าย </a> <a href = "#" data-toggle = "tooltip" data-placement = "top"> คำแนะนำเครื่องมือที่ด้านบน </a>. <button type = "ปุ่ม" data-toggle = "Tooltip" data-placement = "bottom" title = "tooltip"
(2) ตัวเลือก
มีตัวเลือกบางอย่างที่เพิ่มผ่าน Bootstrap Data API (Bootstrap Data API) หรือเรียกผ่าน JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
(3) วิธีการ
นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินคำแนะนำเครื่องมือ:
(4) เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอินคำแนะนำเครื่องมือ เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
7. ปลั๊กอิน bootstrap popover
popover นั้นคล้ายกับคำแนะนำเครื่องมือให้มุมมองเพิ่มเติม ในการเปิดใช้งานกล่องป๊อปอัพผู้ใช้เพียงแค่ต้องเลื่อนเมาส์เหนือองค์ประกอบ เนื้อหาของกล่องป๊อปอัพสามารถเติมเต็มได้โดยใช้ Bootstrap Data API (Bootstrap Data API) วิธีนี้ขึ้นอยู่กับคำแนะนำเครื่องมือ หากคุณต้องการอ้างอิงฟังก์ชั่นของปลั๊กอินแยกกันคุณต้องอ้างอิง popover.js ซึ่งขึ้นอยู่กับปลั๊กอินคำแนะนำเครื่องมือ
(1) การใช้งาน
ปลั๊กอิน Popover สร้างเนื้อหาและแท็กตามความต้องการ โดยค่าเริ่มต้น popovers จะถูกวางไว้ด้านหลังองค์ประกอบทริกเกอร์ คุณสามารถเพิ่ม popovers ได้สองวิธี:
A. ผ่านแอตทริบิวต์ข้อมูล: หากคุณต้องการเพิ่ม popover เพียงเพิ่ม data-toggle = "popover" ลงในฉลาก Anchor/ปุ่ม ชื่อของสมอคือข้อความของป๊อปโอเวอร์ โดยค่าเริ่มต้นปลั๊กอินตั้งค่าป๊อปโอเวอร์ที่ด้านบน
<a href = "#" data-toggle = "popover" title = "ตัวอย่าง popover">
โปรดโฮเวอร์เหนือฉัน
</a>
B. ผ่าน JavaScript: เปิดใช้งาน popover (popover) ผ่าน JavaScript: $ ('#identifier'). popover (ตัวเลือก)
ปลั๊กอินป๊อปโอเวอร์ไม่เหมือนเมนูแบบเลื่อนลงและปลั๊กอินอื่น ๆ ที่กล่าวถึงก่อนหน้านี้ไม่ใช่ปลั๊กอิน CSS บริสุทธิ์ ในการใช้ปลั๊กอินคุณต้องเปิดใช้งานโดยใช้ jQuery (อ่าน JavaScript) ใช้สคริปต์ต่อไปนี้เพื่อเปิดใช้งาน popovers ทั้งหมดในหน้า:
$ (function () {$ ("[data-toggle = 'popover']"). popover ();});
<button type = "ปุ่ม"
data-container = "body" data-toggle = "popover" data-placement = "left" data-content = "เนื้อหาบางส่วนใน popover ทางด้านซ้าย" > popover ทางด้านซ้าย
</kout>
(2) ตัวเลือก
มีตัวเลือกบางอย่างที่เพิ่มผ่าน Bootstrap Data API (Bootstrap Data API) หรือเรียกผ่าน JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
(3) วิธีการ
นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินป๊อปโอเวอร์:
(4) เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอินป๊อปอัพ (ป๊อปโอเวอร์) เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
8. ปลั๊กอิน Bootstrap Warning (Alert) ปลั๊กอิน
ข้อความแจ้งเตือนส่วนใหญ่จะใช้เพื่อให้ผู้ใช้ปลายทางแสดงข้อมูลเช่นข้อความเตือนหรือข้อความยืนยัน การใช้ปลั๊กอินการแจ้งเตือนคุณสามารถเพิ่มคุณสมบัติที่ยกเลิกได้ในข้อความเตือนทั้งหมด
(1) การใช้งาน
คุณสามารถเปิดใช้งานฟังก์ชั่นการเลิกจ้างของกล่องคำเตือนได้สองวิธีต่อไปนี้:
A. ผ่านคุณลักษณะข้อมูล: เพิ่มฟังก์ชั่นที่ยกเลิกได้ผ่าน Data API (Data API) เพียงเพิ่ม data-dismiss = "การแจ้งเตือน" ลงในปุ่มปิดและฟังก์ชั่นปิดจะถูกเพิ่มลงในกล่องคำเตือนโดยอัตโนมัติ
<a data-dismiss = "Alert" href = "#" aria-hidden = "true">
</a>
B. ผ่าน JavaScript: เพิ่มฟังก์ชั่นที่ถูกยกเลิกผ่าน JavaScript: $ (". Alert"). การแจ้งเตือน ()
<div> <a href = "#" data-dismiss = "Alert"> × </a> <strong> คำเตือน! </strong> การเชื่อมต่อเครือข่ายของคุณมีปัญหา </div>
(2) วิธีการ
นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินการแจ้งเตือน:
(3) เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอินการแจ้งเตือน เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
9. ปลั๊กอินปุ่ม bootstrap
ด้วยปลั๊กอินปุ่มคุณสามารถเพิ่มการโต้ตอบบางอย่างเช่นการควบคุมสถานะปุ่มหรือการสร้างกลุ่มปุ่มสำหรับส่วนประกอบอื่น ๆ เช่นแถบเครื่องมือ
(1) สถานะการโหลด
ในการเพิ่มสถานะการโหลดลงในปุ่มเพียงเพิ่มข้อมูลการโหลดข้อมูล = "การโหลด ... " ลงในองค์ประกอบปุ่มเป็นแอตทริบิวต์
<button id = "fat-btn" data-loading-text = "การโหลด ... " type = "ปุ่ม"> สถานะการโหลด </button> <script> $ (ฟังก์ชัน () {$ (". btn") คลิก (ฟังก์ชั่น () {$ (นี้).(2) สวิตช์เดี่ยว
ในการเปิดใช้งานสวิตช์ของปุ่มเดียว (เช่นเพื่อเปลี่ยนสถานะปกติของปุ่มเป็นสถานะการกดและในทางกลับกัน) เพียงเพิ่ม data-toggle = "ปุ่ม" ไปยังองค์ประกอบปุ่มเป็นแอตทริบิวต์
<button type = "button" data-toggle = "ปุ่ม"> สวิตช์เดี่ยว </button>
(3) ช่องทำเครื่องหมาย
คุณสามารถสร้างกลุ่มช่องทำเครื่องหมายและเพิ่มสลับไปยังกลุ่มช่องทำเครื่องหมายได้โดยการเพิ่มแอตทริบิวต์ข้อมูล data-toggle = "ปุ่ม" ลงในกลุ่ม BTN
<divData-toggle = "ปุ่ม"> <label> <อินพุต type = "ช่องทำเครื่องหมาย"> ตัวเลือก 1 </label> <label> <อินพุต type = "ช่องทำเครื่องหมาย"> ตัวเลือก 3 </label> </div>
(4) ปุ่มตัวเลือก (วิทยุ)
ในทำนองเดียวกันคุณสามารถสร้างกลุ่มปุ่มตัวเลือกและเพิ่มสลับสำหรับกลุ่มปุ่มตัวเลือกโดยการเพิ่มแอตทริบิวต์ข้อมูล data-toggle = "ปุ่ม" ลงในกลุ่ม BTN
(5) วิธีการ
นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินปุ่ม:
10. ปลั๊กอินการยุบ bootstrap
ปลั๊กอินยุบทำให้ง่ายต่อการพับพื้นที่หน้า ไม่ว่าคุณจะใช้มันเพื่อสร้างการนำทางที่ยุบหรือแผงเนื้อหาจะช่วยให้มีตัวเลือกเนื้อหาจำนวนมาก
(1) สร้างการจัดกลุ่มหรือแผงพับพับได้ดังที่แสดงด้านล่าง:
<div id = "หีบเพลง"> <div> <div> <h4> <a data-toggle = "ยุบ" data-parent = "#accordion" href = "#clolapseone"> คลิกฉันเพื่อขยายให้คลิกฉันเพื่อยุบอีกครั้ง ส่วนที่ 1 </a> </h4> </div> <div id = "clolapseone"> <div> nihil anim keffiyeh helvetica งานฝีมืองานฝีมือเบียร์ Wes Anderson ให้เครดิต Nesciunt Sapiente ea proident โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo </div> </div> </div> </div>
A. data-toggle = "ยุบ" เพิ่มไปยังลิงก์ของส่วนประกอบที่คุณต้องการขยายหรือยุบ
คุณสมบัติ B, HREF หรือ Data-Darget ถูกเพิ่มลงในส่วนประกอบหลักและค่าของมันคือ ID ขององค์ประกอบลูก
C. คุณสมบัติของผู้ปกครองข้อมูลเพิ่ม ID ของแผงที่พับได้ไปยังลิงก์ของส่วนประกอบที่จะขยายหรือยุบ
(2) สร้างส่วนประกอบที่สามารถยุบได้อย่างง่ายโดยไม่มีแท็กหีบเพลงดังที่แสดงด้านล่าง:
<button type = "button" data-toggle = "Collapse" data-target = "#demo"> ส่วนประกอบที่พับเก็บได้ง่าย </button> <div id = "demo"> nihil anim keffiyeh helvetica งานฝีมือเบียร์ โฆษณามังสวิรัติยกเว้น Butcher Vice Lomo. </div>
(3) การใช้งาน
ตารางต่อไปนี้แสดงรายการปลั๊กอินยุบสำหรับการจัดการการปรับขนาดหนัก:
คุณสามารถใช้ปลั๊กอินยุบได้สองวิธี:
A. ผ่านแอตทริบิวต์ข้อมูล: เพิ่ม data-toggle = "การล่มสลาย" และเป้าหมายข้อมูลไปยังองค์ประกอบเพื่อกำหนดตัวควบคุมให้กับองค์ประกอบที่พับเก็บได้โดยอัตโนมัติ คุณสมบัติเป้าหมายข้อมูลยอมรับตัวเลือก CSS และใช้เอฟเฟกต์การยุบกับมัน ตรวจสอบให้แน่ใจว่าได้เพิ่มคลาส. collapse ลงในองค์ประกอบที่พับได้ หากคุณต้องการให้เป็นค่าเริ่มต้นให้เพิ่มคลาสพิเศษใน.
ในการเพิ่มการจัดการการจัดกลุ่มแบบพับได้แบบพับได้ให้กับตัวควบคุมแบบพับได้ให้เพิ่มคุณสมบัติข้อมูล Data-Parent = "#selector"
B. ผ่าน JavaScript: วิธีการยุบสามารถเปิดใช้งานผ่าน JavaScript ดังที่แสดงด้านล่าง: $ ('. การล่มสลาย'). การล่มสลาย ()
11. ปลั๊กอิน Bootstrap Carousel
ปลั๊กอิน Bootstrap Carousel เป็นวิธีที่ยืดหยุ่นและตอบสนองได้ในการเพิ่มแถบเลื่อนลงในไซต์ นอกจากนั้นเนื้อหามีความยืดหยุ่นพอที่จะเป็นภาพเฟรมที่ฝังตัววิดีโอหรือเนื้อหาประเภทอื่น ๆ ที่คุณต้องการวาง
<div id = "mycarousel"> <!-ตัวบ่งชี้ Carousel-> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> <!-โครงการ Carousel-> <div> <img src = "/wp-content/uploads/2014/07/slide1.png"> <div> ชื่อเรื่อง 1 </div> </div> <div> <img src = "/wp-content/uploads/2014/07/07/07/07/07/07/07/07 src = "/wp-content/uploads/2014/07/slide3.png"> <div> ชื่อเรื่อง 3 </div> </div> </div> <!-การนำทาง Carousel-> <a href = "#mycarousel" data-slide = "prev">
(1) การใช้งาน
A. ผ่านแอตทริบิวต์ข้อมูล: การใช้แอตทริบิวต์ข้อมูลเป็นเรื่องง่ายที่จะควบคุมตำแหน่งของม้าหมุน
สไลด์ข้อมูลคุณสมบัติยอมรับคำหลัก PREV หรือถัดไปเพื่อเปลี่ยนตำแหน่งของสไลด์ที่สัมพันธ์กับตำแหน่งปัจจุบัน
ใช้สไลด์ข้อมูลเพื่อดัชนีเลื่อนดิบที่ด้านล่างของเตียงหมุน data-slide-to = "2" จะย้ายตัวเลื่อนไปยังดัชนีเฉพาะและดัชนีนับตั้งแต่ 0
คุณสมบัติ Data-Ride = "Carousel" ใช้เพื่อทำเครื่องหมายม้าหมุนที่เริ่มเล่นแอนิเมชั่นเมื่อโหลดหน้าเว็บ
B. ผ่าน JavaScript: Carousel สามารถเรียกได้ด้วยตนเองผ่าน JavaScript ดังที่แสดงด้านล่าง: $ ('. Carousel'). Carousel ()
(2) ตัวเลือก
มีตัวเลือกบางอย่างที่ผ่านคุณสมบัติข้อมูลหรือ JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
(3) วิธีการ
นี่คือวิธีการที่มีประโยชน์ในปลั๊กอินม้าหมุน:
(4) เหตุการณ์
ตารางต่อไปนี้แสดงรายการเหตุการณ์ที่จะใช้ในปลั๊กอิน Carousel เหตุการณ์เหล่านี้สามารถใช้เป็นตะขอในฟังก์ชั่น
12. ปลั๊กอินนำทางเพิ่มเติม (Affix)
ปลั๊กอินนำทางเพิ่มเติม (Affix) ช่วยให้สามารถตรึง <div> ไว้ที่ไหนสักแห่งในหน้า นอกจากนี้คุณยังสามารถสลับระหว่างการเปิดหรือปิดโดยใช้ปลั๊กอิน ตัวอย่างทั่วไปคือไอคอนสังคม พวกเขาจะเริ่มต้นที่ไหนสักแห่ง แต่เมื่อหน้าคลิกบนเครื่องหมาย <div> จะล็อคอยู่ที่ไหนสักแห่งและจะไม่เลื่อนไปพร้อมกับส่วนที่เหลือของหน้า
(1) การใช้งาน
คุณสามารถใช้ปลั๊กอินนำทาง (Affix) ที่แนบมาผ่านคุณสมบัติข้อมูลหรือผ่าน JavaScript
ผ่านแอตทริบิวต์ข้อมูล: หากคุณต้องการเพิ่มพฤติกรรมการนำทาง (Affix) เพิ่มเติมให้กับองค์ประกอบคุณจะต้องเพิ่ม data-spy = "affix" ในองค์ประกอบที่คุณต้องฟัง ใช้ออฟเซ็ตเพื่อกำหนดเมื่อสลับการล็อคและการเคลื่อนไหวขององค์ประกอบ
(2) ผ่าน JavaScript: คุณสามารถเพิ่มการนำทางเพิ่มเติม (affix) ด้วยตนเองในองค์ประกอบผ่าน JavaScript ดังที่แสดงด้านล่าง:
$ ('#myaffix'). affix ({ออฟเซ็ต: {top: 100, ด้านล่าง: function () {return (this.bottom = $ ('. bs-footer'). outerheight (จริง))}}}))(3) การวางตำแหน่งผ่าน CSS
ในทั้งสองวิธีข้างต้นใช้ปลั๊กอิน Affix คุณต้องค้นหาเนื้อหาผ่าน CSS สวิตช์ปลั๊กอินนำทางเพิ่มเติม (Affix) ระหว่างสามคลาสแต่ละคลาสแสดงสถานะเฉพาะ: .affix, .affix-top และ. affix-bottom โปรดทำตามขั้นตอนด้านล่างเพื่อตั้งค่า CSS ของคุณเองสำหรับทั้งสามรัฐ (ไม่ต้องพึ่งพาปลั๊กอินนี้)
A. ในตอนต้นปลั๊กอินจะเพิ่ม. affix-top เพื่อระบุองค์ประกอบที่ตำแหน่งสูงสุด ไม่จำเป็นต้องกำหนดตำแหน่ง CSS ในเวลานี้
B. เมื่อเลื่อนผ่านองค์ประกอบที่เพิ่มการนำทางเพิ่มเติม (Affix) ควรถูกเรียกใช้ ในเวลานี้ .Affix จะแทนที่. affix-top และตั้งตำแหน่ง: แก้ไข; (จัดทำโดยรหัส CSS ของ Bootstrap)
C. หากมีการกำหนดค่าชดเชยด้านล่างเมื่อสกรอลล์มาถึงตำแหน่งนี้ให้แทนที่. affix ด้วย. affix-bottom เนื่องจากออฟเซ็ตเป็นตัวเลือกหากตั้งค่าออฟเซ็ตจึงจำเป็นต้องตั้งค่า CSS ที่เหมาะสมในเวลาเดียวกัน ในกรณีนี้เพิ่มตำแหน่ง: สัมบูรณ์; หากจำเป็น
(4) ตัวเลือก
มีตัวเลือกบางอย่างที่ผ่านคุณสมบัติข้อมูลหรือ JavaScript ตารางต่อไปนี้แสดงรายการตัวเลือกเหล่านี้:
บทความนี้ได้รวบรวมไว้ใน "การสอนการใช้ปลั๊กอิน bootstrap" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น