ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Popover Plugin


Popover ปลั๊กอิน

Popover ปลั๊กอินคล้ายกับคำแนะนำเครื่องมือ; มันเป็นกล่องป๊อปอัพที่ปรากฏขึ้นเมื่อผู้ใช้คลิกที่องค์ประกอบ ความแตกต่างคือว่า popover สามารถมีเนื้อหามากขึ้น

Click To Toggle Popover

เคล็ดลับ: ปลั๊กอินสามารถรวมเป็นรายบุคคล (โดยใช้ Bootstrap's แต่ละบุคคล "popover.js" ไฟล์) หรือทั้งหมดในครั้งเดียว (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js" )


วิธีการสร้าง Popover

เพื่อสร้าง popover เพิ่ม data-toggle="popover" แอตทริบิวต์องค์ประกอบ

ใช้ title แอตทริบิวต์เพื่อระบุข้อความส่วนหัวของ popover และใช้ data-content แอตทริบิวต์การระบุข้อความที่ควรจะแสดงภายใน popover's ร่างกาย:

<a href="#" data-toggle="popover" title=" Popover Header" data-content="Some content inside the popover">Toggle popover</a>

หมายเหตุ: Popovers จะต้องเริ่มต้นกับ jQuery: เลือกองค์ประกอบที่ระบุและเรียก popover() วิธีการ

รหัสต่อไปนี้จะช่วยให้ทุก popovers ในเอกสาร:

ตัวอย่าง

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});
</script>
ลองตัวเอง»

Positioning Popovers

โดยค่าเริ่มต้น popover จะปรากฏบนด้านขวาขององค์ประกอบ

ใช้ data-placement แอตทริบิวต์ที่จะตั้งตำแหน่งของ popover ด้านบนด้านล่างด้านซ้ายหรือด้านขวาขององค์ประกอบ:

ตัวอย่าง

<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
ลองตัวเอง»

เคล็ดลับ: คุณยังสามารถใช้แอตทริบิวต์ข้อมูลตำแหน่งที่มีค่าของ "auto" ซึ่งจะช่วยให้เบราว์เซอร์ตัดสินใจตำแหน่งของ popover ตัวอย่างเช่นถ้าค่าเป็น "auto left" ที่ popover จะแสดงที่ด้านซ้ายเมื่อเป็นไปได้มิฉะนั้นทางด้านขวา


ปิด Popovers

โดยค่าเริ่มต้น popover ถูกปิดเมื่อคุณคลิกที่องค์ประกอบอีกครั้ง อย่างไรก็ตามคุณสามารถใช้ data-trigger="focus" แอตทริบิวต์ซึ่งจะปิด popover เมื่อคลิกนอกองค์ประกอบ:

ตัวอย่าง

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
ลองตัวเอง»

เคล็ดลับ: หากคุณต้องการ popover ที่จะปรากฏขึ้นเมื่อคุณย้ายตัวชี้เมาส์ไปที่องค์ประกอบใช้ data-trigger แอตทริบิวต์ที่มีค่าของ "hover" :

ตัวอย่าง

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
ลองตัวเอง»

กรอก Bootstrap Popover อ้างอิง

สำหรับการอ้างอิงที่สมบูรณ์ของทุก popover ตัวเลือกวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS Popover อ้างอิง