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

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 JS Popover


JS Popover (popover.js)

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

พึ่งพาปลั๊กอิน: Popovers ต้องใช้ปลั๊กอินเคล็ดลับเครื่องมือ (tooltip.js) จะรวมอยู่ในรุ่นของ Bootstrap

สำหรับการกวดวิชาเกี่ยวกับ Popovers อ่านของเรา Bootstrap Popover กวดวิชา


ผ่าน data-* แอตทริบิวต์

data-toggle="popover" เปิดใช้งาน 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 ปลั๊กอินไม่ CSS อย่างเดียวและดังนั้นจึงต้องเริ่มต้นกับ jQuery: เลือกองค์ประกอบที่ระบุและเรียก popover() วิธีการ

ตัวอย่าง

// Select all elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();

// Select a specified element
$('#myPopover').popover();
ลองตัวเอง»

Popover ตัวเลือก

ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ data- ในขณะที่ data-placement=""

ชื่อ ชนิด ค่าเริ่มต้น ลักษณะ ลองมัน
animationbooleantrue

ระบุว่าเพื่อเพิ่มผลการเปลี่ยนแปลง CSS จางเมื่อเปิดและปิด popover

  • จริง - เพิ่มผลซีดจาง
  • เท็จ - อย่าเพิ่มผลซีดจาง
ลองมัน
containerstring, or the boolean falsefalse ผนวก popover กับองค์ประกอบที่เฉพาะเจาะจง
ตัวอย่าง: ภาชนะ: 'body'
ลองมัน
contentstring"" ระบุข้อความภายใน popover's body ลองมัน
delaynumber, or object0 ระบุจำนวนมิลลิวินาทีก็จะใช้เวลาในการเปิดและปิด popover

เพื่อระบุความล่าช้าในการเปิดและอีกคนหนึ่งสำหรับการปิดการใช้โครงสร้างวัตถุ:

delay: {show: 500, hide: 100} - ซึ่งจะใช้เวลา 500 มิลลิวินาทีเพื่อเปิด popover แต่เพียง 100 มิลลิวินาทีจะปิดมัน
ลองมัน
htmlbooleanfalse ระบุว่าจะยอมรับแท็ก HTML ใน popover :
  • true - ยอมรับแท็ก
  • false - อย่ายอมรับแท็ก
หมายเหตุ: HTML จะต้องแทรกอยู่ในแอตทริบิวต์ชื่อ (หรือใช้ตัวเลือกชื่อ)

เมื่อตั้งค่าเป็นเท็จ (ค่าเริ่มต้น) ของ jQuery text() วิธีการจะนำไปใช้ การใช้งานนี้ถ้าคุณมีความกังวลใจเกี่ยวกับการโจมตี XSS
ลองมัน
placementstring"right" ระบุ popover ตำแหน่ง ค่าที่เป็นไปได้:

  • "top" - Popover ด้านบน
  • "bottom" - Popover ที่ด้านล่าง
  • "left" - Popover ด้านซ้าย
  • "right" - Popover ด้านขวา
  • "auto" - ช่วยให้เบราว์เซอร์ตัดสินใจตำแหน่งของ popover ตัวอย่างเช่นถ้าค่าเป็น "auto left" ที่ popover จะแสดงที่ด้านซ้ายเมื่อเป็นไปได้มิฉะนั้นทางด้านขวา หากมีค่าเป็น "auto bottom" ที่ popover จะแสดงที่ด้านล่างเมื่อเป็นไปได้มิฉะนั้นด้านบน
ลองมัน
selectorstring, or the boolean falsefalse เพิ่ม popover กับตัวเลือกที่ระบุ ลองมัน
templatestring  ฐาน HTML เพื่อใช้เมื่อสร้าง popover

popover's ชื่อจะได้รับการฉีดเข้าไปใน .popover ชื่อ

popover's เนื้อหาจะถูกฉีดเข้าไปใน .popover เนื้อหา

.arrow จะกลายเป็น popover's ลูกศร

องค์ประกอบที่ห่อหุ้มชั้นนอกสุดควรมี .popover ระดับ
titlestring"" ระบุข้อความส่วนหัวของ popover ลองมัน
triggerstring"click" ระบุวิธีการ popover ถูกเรียก ค่าที่เป็นไปได้:

  • "click" - ทริกเกอร์ popover ด้วยการคลิก
  • "hover" - ทริกเกอร์ popover บนโฉบ
  • "focus" - ทริกเกอร์ popover เมื่อได้รับโฟกัส (โดยแท็บหรือคลิก .eg)
  • "manual" - ทริกเกอร์ popover ด้วยตนเอง
Tip: การส่งผ่านค่าหลายแยกด้วยช่องว่าง
ลองมัน
viewportstring, or object{selector: "body", padding: 0} ช่วยให้ popover ภายในขอบเขตขององค์ประกอบนี้

ตัวอย่าง: viewport: '#viewport' หรือ {selector: '#viewport', padding: 0}

Popover วิธี

ตารางต่อไปนี้แสดงรายการที่มีอยู่ทั้งหมด popover วิธี

วิธี ลักษณะ ลองมัน
.popover( options ) เปิดใช้งาน popover ที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง ลองมัน
.popover("show") แสดงให้เห็นถึง popover ลองมัน
.popover("hide") ซ่อน popover ลองมัน
.popover("toggle") สลับ popover ลองมัน
.popover("destroy") ซ่อนและทำลาย popover ลองมัน

Popover เหตุการณ์

ตารางต่อไปนี้แสดงรายการที่มีอยู่ทั้งหมด popover เหตุการณ์

เหตุการณ์ ลักษณะ ลองมัน
show.bs.popover เกิดขึ้นเมื่อ popover เป็นเรื่องเกี่ยวกับที่จะแสดง ลองมัน
shown.bs.popover เกิดขึ้นเมื่อ popover ก็แสดงให้เห็นอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน
hide.bs.popover เกิดขึ้นเมื่อ popover กำลังจะถูกซ่อน ลองมัน
hidden.bs.popover เกิดขึ้นเมื่อ popover ถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน

ตัวอย่าง

ตัวอย่าง

ที่กำหนดเอง Popover ออกแบบ

ใช้ CSS ปรับแต่งรูปลักษณ์ของ popover :

ตัวอย่าง

 /* Popover */
.popover {
    border: 2px dotted red;
}

/* Popover Header */
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    font-size: 28px;
    text-align:center;
}

/* Popover Body */
.popover-content {
    background-color: coral;
    color: #FFFFFF;
    padding: 25px;
}

/* Popover Arrow */
.arrow {
    border-right-color: red !important;
}
ลองตัวเอง»