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

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 Modal Plugin


ปลั๊กอิน Modal

ปลั๊กอิน Modal เป็นกล่องโต้ตอบ / หน้าต่างป๊อปอัพที่แสดงอยู่ด้านบนของหน้าปัจจุบัน:

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


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

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างคำกริยาพื้นฐาน:

ตัวอย่าง

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
ลองตัวเอง»

ตัวอย่างอธิบาย

"Trigger" ส่วนหนึ่ง:

ที่จะเรียกหน้าต่างกิริยาคุณจะต้องใช้ปุ่มหรือการเชื่อมโยง

แล้วรวมทั้งสอง data-* คุณลักษณะ:

  • data-toggle="modal" เปิดหน้าต่างกิริยา
  • data-target="#myModal" ชี้ไปที่ ID ของกิริยาที่

"Modal" ส่วนหนึ่ง:

ผู้ปกครอง <div> ของคำกริยาจะต้องมี ID ที่เป็นเช่นเดียวกับค่าของแอตทริบิวต์ข้อมูลเป้าหมายที่ใช้ในการเรียกกิริยา ("myModal")

.modal ชั้นระบุเนื้อหาของ <div> เป็นคำกริยาและนำโฟกัสไปที่มัน

.fade ระดับเพิ่มผลการเปลี่ยนแปลงที่จางหายกิริยาทั้งในและนอก นำระดับนี้หากคุณไม่ต้องการผลกระทบนี้

แอตทริบิวต์ role="dialog" ช่วยเพิ่มการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ

.modal-dialog ระดับกำหนดความกว้างที่เหมาะสมและขอบของกิริยา

"เนื้อหา Modal" ส่วนหนึ่ง:

<div> กับ class="modal-content " รูปแบบคำกริยา (ชายแดนสีพื้นหลัง ฯลฯ ) ภายในนี้ <div> เพิ่มกิริยาของส่วนหัวลำตัวและส่วนท้าย

.modal-header ชั้นจะใช้ในการกำหนดรูปแบบของส่วนหัวของกิริยาที่ <button> ภายในส่วนหัวมี data-dismiss="modal" แอตทริบิวต์ซึ่งปิดกิริยาถ้าคุณคลิกที่มัน .close รูปแบบการเรียนปุ่มปิดและ .modal-title รูปแบบระดับส่วนหัวที่มีเหมาะสม line-height

.modal-body ชั้นจะใช้ในการกำหนดรูปแบบสำหรับร่างกายของกิริยาที่ เพิ่มมาร์กอัป HTML ใด ๆ ที่นี่; ย่อหน้ารูปภาพวิดีโอและอื่น ๆ

.modal-footer ชั้นจะใช้ในการกำหนดรูปแบบสำหรับส่วนท้ายของคำกริยาที่ โปรดทราบว่าพื้นที่นี้จะถูกจัดชิดขวาโดยค่าเริ่มต้น


โมดขนาด

เปลี่ยนขนาดของกิริยาโดยการเพิ่ม .modal-sm ชั้นเรียนสำหรับ Modals ขนาดเล็กหรือ .modal-lg ชั้นเรียนสำหรับ Modals ขนาดใหญ่

เพิ่มระดับขนาดไป <div> องค์ประกอบที่มีระดับ .modal-dialog :

โมดขนาดเล็ก

<div class="modal-dialog modal-sm">
ลองตัวเอง»

โมดขนาดใหญ่

<div class="modal-dialog modal-lg">
ลองตัวเอง»
บันทึก โดยค่าเริ่มต้น Modals ขนาดกลาง

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

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