ภาพรวม

บุคคลหรือรวบรวม

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

แอตทริบิวต์ข้อมูล

คุณสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน Markup API ได้โดยไม่ต้องเขียน JavaScript แม้แต่บรรทัดเดียว นี่คือ API ระดับเฟิร์สคลาสของ Bootstrap และควรพิจารณาเป็นอันดับแรกเมื่อใช้ปลั๊กอิน

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

$(document).off('.data-api')

อีกวิธีหนึ่งในการกำหนดเป้าหมายปลั๊กอินเฉพาะ ให้รวมชื่อของปลั๊กอินเป็นเนมสเปซพร้อมกับเนมสเปซ data-api ดังนี้:

$(document).off('.alert.data-api')

API แบบเป็นโปรแกรม

เรายังเชื่อว่าคุณควรจะสามารถใช้ปลั๊กอิน Bootstrap ทั้งหมดผ่าน JavaScript API ได้อย่างหมดจด API สาธารณะทั้งหมดเป็นเมธอดเดียวที่เชื่อมต่อได้ และส่งคืนคอลเล็กชันที่ดำเนินการ

$('.btn.danger').button('toggle').addClass('fat')

เมธอดทั้งหมดควรยอมรับอ็อบเจ็กต์ตัวเลือกเสริม สตริงที่กำหนดเป้าหมายเมธอดเฉพาะ หรือไม่มีเลย (ซึ่งเริ่มต้นปลั๊กอินด้วยการทำงานเริ่มต้น):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

ปลั๊กอินแต่ละตัวยังเปิดเผยคอนสตรัคเตอร์ดิบใน พร็อพเพ อร์Constructorตี้: $.fn.popover.Constructorหากคุณต้องการรับอินสแตนซ์ปลั๊กอินบางตัว ให้ดึงข้อมูลโดยตรงจากองค์ประกอบ$('[rel="popover"]').data('popover'):

การตั้งค่าเริ่มต้น

คุณสามารถเปลี่ยนการตั้งค่าเริ่มต้นสำหรับปลั๊กอินโดยแก้ไขConstructor.DEFAULTSวัตถุของปลั๊กอิน:

$.fn.modal.Constructor.DEFAULTS.keyboard = false // changes default for the modal plugin's `keyboard` option to false

ไม่มีความขัดแย้ง

บางครั้ง จำเป็นต้องใช้ปลั๊กอิน Bootstrap กับเฟรมเวิร์ก UI อื่นๆ ในสถานการณ์เหล่านี้ การชนกันของเนมสเปซอาจเกิดขึ้นในบางครั้ง หากเกิดเหตุการณ์นี้ขึ้น คุณสามารถเรียก.noConflictใช้ปลั๊กอินที่คุณต้องการคืนค่า

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

กิจกรรม

Bootstrap จัดเตรียมเหตุการณ์ที่กำหนดเองสำหรับการกระทำเฉพาะของปลั๊กอินส่วนใหญ่ โดยทั่วไป สิ่งเหล่านี้มาในรูปแบบกริยาแบบ infinitive และ past participle โดยที่ infinitive (เช่นshow) จะถูกทริกเกอร์เมื่อเริ่มต้นเหตุการณ์ และรูปแบบกริยาที่ผ่านมา (ex. shown) จะถูกทริกเกอร์เมื่อการดำเนินการเสร็จสิ้น

ณ 3.0.0 เหตุการณ์ Bootstrap ทั้งหมดมีเนมสเปซ

เหตุการณ์ infinitive ทั้งหมดมีpreventDefaultฟังก์ชันการทำงาน สิ่งนี้ทำให้สามารถหยุดการดำเนินการก่อนที่จะเริ่ม

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

หมายเลขเวอร์ชัน

เวอร์ชันของปลั๊กอิน jQuery ของ Bootstrap แต่ละเวอร์ชันสามารถเข้าถึงได้ผ่านVERSIONคุณสมบัติของตัวสร้างของปลั๊กอิน ตัวอย่างเช่น สำหรับปลั๊กอินคำแนะนำเครื่องมือ:

$.fn.tooltip.Constructor.VERSION // => "3.3.7"

ไม่มีทางเลือกพิเศษเมื่อปิดใช้งาน JavaScript

ปลั๊กอินของ Bootstrap จะไม่ถอยกลับโดยเฉพาะอย่างยิ่งเมื่อปิดการใช้งาน JavaScript หากคุณสนใจเกี่ยวกับประสบการณ์ของผู้ใช้ในกรณีนี้ ใช้<noscript>เพื่ออธิบายสถานการณ์ (และวิธีเปิดใช้งาน JavaScript อีกครั้ง) ให้กับผู้ใช้ของคุณ และ/หรือเพิ่มทางเลือกที่คุณกำหนดเอง

Transitions Transition.js

เกี่ยวกับการเปลี่ยนภาพ

สำหรับเอฟเฟกต์การเปลี่ยนอย่างง่าย ให้รวมtransition.jsครั้งเดียวพร้อมกับไฟล์ JS อื่น หากคุณกำลังใช้คอมไพล์แล้ว (หรือย่อเล็กสุด) bootstrap.jsคุณไม่จำเป็นต้องรวมสิ่งนี้—มีอยู่แล้วในนั้น

อะไรอยู่ข้างใน

Transition.js เป็นผู้ช่วยพื้นฐานสำหรับtransitionEndเหตุการณ์เช่นเดียวกับโปรแกรมจำลองการเปลี่ยน CSS ปลั๊กอินนี้ใช้โดยปลั๊กอินอื่นๆ เพื่อตรวจสอบการสนับสนุนการเปลี่ยน CSS และเพื่อตรวจจับการเปลี่ยนภาพค้าง

ปิดการใช้งานทรานซิชั่น

การเปลี่ยนผ่านสามารถปิดใช้งานได้ทั่วโลกโดยใช้ข้อมูลโค้ด JavaScript ต่อไปนี้ ซึ่งต้องโหลดหลังจาก โหลด transition.js(หรือbootstrap.jsหรือbootstrap.min.jsแล้วแต่กรณี):

$.support.transition = false

Modals modal.js

Modals มีความคล่องตัว แต่มีความยืดหยุ่น พร้อมข้อความโต้ตอบพร้อมฟังก์ชันขั้นต่ำที่จำเป็นและค่าเริ่มต้นที่ชาญฉลาด

เนื่องจาก HTML5 กำหนดความหมายของมันautofocusแอตทริบิวต์ HTML จึงไม่มีผลใน Bootstrap modals เพื่อให้ได้ผลเช่นเดียวกัน ให้ใช้ JavaScript ที่กำหนดเอง:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

ตัวอย่าง

ตัวอย่างคงที่

โมดอลที่แสดงผลพร้อมส่วนหัว เนื้อหา และชุดของการดำเนินการในส่วนท้าย

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

สาธิตสด

สลับโมดอลผ่าน JavaScript โดยคลิกที่ปุ่มด้านล่าง มันจะเลื่อนลงและจางลงจากด้านบนของหน้า

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

ขนาดเสริม

Modals มีสองขนาดให้เลือก ใช้ได้ผ่านคลาสตัวปรับแต่งที่จะวางบนไฟล์.modal-dialog.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ลบแอนิเมชั่น

สำหรับโมดอลที่ปรากฏแทนที่จะดูจางๆ ให้ลบ.fadeคลาสออกจากมาร์กอัปโมดอลของคุณ

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">
  ...
</div>

การใช้ระบบกริด

ในการใช้ประโยชน์จากระบบกริด Bootstrap ภายในโมดอล เพียงแค่ซ้อน.rows ภายใน.modal-bodyแล้วใช้คลาสระบบกริดปกติ

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">.col-md-4</div>
          <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
        </div>
        <div class="row">
          <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
        </div>
        <div class="row">
          <div class="col-sm-9">
            Level 1: .col-sm-9
            <div class="row">
              <div class="col-xs-8 col-sm-6">
                Level 2: .col-xs-8 .col-sm-6
              </div>
              <div class="col-xs-4 col-sm-6">
                Level 2: .col-xs-4 .col-sm-6
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

เนื้อหาโมดอลแตกต่างกันไปตามปุ่มทริกเกอร์

มีปุ่มมากมายที่เรียกใช้ modal เดียวกัน แต่มีเนื้อหาต่างกันเล็กน้อยหรือไม่? ใช้event.relatedTargetและแอตทริบิวต์HTMLdata-* (อาจใช้ jQuery ) เพื่อเปลี่ยนแปลงเนื้อหาของโมดอลขึ้นอยู่กับว่าคลิกปุ่มใด ดูเอกสาร Modal Events สำหรับรายละเอียดเกี่ยวกับrelatedTarget,

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

การใช้งาน

ปลั๊กอินโมดอลจะสลับเนื้อหาที่ซ่อนอยู่ของคุณตามต้องการ ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript นอกจากนี้ยังเพิ่ม.modal-openเพื่อ<body>แทนที่พฤติกรรมการเลื่อนเริ่มต้น และสร้าง a .modal-backdropเพื่อให้พื้นที่การคลิกสำหรับการยกเลิกโมดอลที่แสดงเมื่อคลิกนอกโมดอล

ผ่านแอตทริบิวต์ข้อมูล

เปิดใช้งาน modal โดยไม่ต้องเขียน JavaScript ตั้งค่าdata-toggle="modal"บนองค์ประกอบตัวควบคุม เช่น ปุ่ม พร้อมกับ a data-target="#foo"หรือhref="#foo"เพื่อกำหนดเป้าหมายเป็นโมดอลเฉพาะเพื่อสลับ

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

ผ่านจาวาสคริปต์

เรียก modal ด้วย id myModalด้วย JavaScript บรรทัดเดียว:

$('#myModal').modal(options)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-เช่นในdata-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

วิธีการ

.modal(options)

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

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

สลับโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะแสดงหรือซ่อนอยู่จริง (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.modalหรือhidden.bs.modalเหตุการณ์จะเกิดขึ้น)

$('#myModal').modal('toggle')

.modal('show')

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

$('#myModal').modal('show')

.modal('hide')

ซ่อนโมดอลด้วยตนเอง กลับไปยังผู้โทรก่อนที่โมดอลจะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.modalเหตุการณ์จะเกิดขึ้น)

$('#myModal').modal('hide')

.modal('handleUpdate')

ปรับตำแหน่งของโมดอลใหม่เพื่อตอบโต้แถบเลื่อนในกรณีที่ควรปรากฏขึ้น ซึ่งจะทำให้โมดัลกระโดดไปทางซ้าย

จำเป็นเฉพาะเมื่อความสูงของโมดอลเปลี่ยนแปลงขณะเปิดอยู่

$('#myModal').modal('handleUpdate')

กิจกรรม

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

เหตุการณ์โมดอลทั้งหมดถูกไล่ออกจากกิริยาช่วย (เช่น ที่<div class="modal">)

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

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

ตัวอย่าง

เพิ่มเมนูแบบเลื่อนลงได้เกือบทุกอย่างด้วยปลั๊กอินง่ายๆ นี้ รวมถึงแถบนำทาง แท็บ และยาเม็ด

ภายในแถบนำทาง

ภายในเม็ด

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript ปลั๊กอินแบบเลื่อนลงจะสลับเนื้อหาที่ซ่อนอยู่ (เมนูแบบเลื่อนลง) โดยการสลับ.openคลาสในรายการหลัก

บนอุปกรณ์มือถือ การเปิดดรอปดาวน์จะเพิ่ม a .dropdown-backdropเป็นพื้นที่สำหรับปิดเมนูดรอปดาวน์เมื่อแตะนอกเมนู ซึ่งเป็นข้อกำหนดสำหรับการสนับสนุน iOS ที่เหมาะสม ซึ่งหมายความว่าการเปลี่ยนจากเมนูดรอปดาวน์แบบเปิดเป็นเมนูดรอปดาวน์อื่นจำเป็นต้องแตะพิเศษบนมือถือ

หมายเหตุ: data-toggle="dropdown"แอตทริบิวต์นี้ใช้สำหรับการปิดเมนูดรอปดาวน์ที่ระดับแอปพลิเคชัน ดังนั้นจึงควรใช้แอตทริบิวต์นี้เสมอ

ผ่านแอตทริบิวต์ข้อมูล

เพิ่มdata-toggle="dropdown"ในลิงก์หรือปุ่มเพื่อสลับรายการแบบเลื่อนลง

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

หากต้องการคง URL ไว้ด้วยปุ่มลิงก์ ให้ใช้data-targetแอตทริบิวต์แทนhref="#".

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com/" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

ผ่านจาวาสคริปต์

เรียกดรอปดาวน์ผ่าน JavaScript:

$('.dropdown-toggle').dropdown()

ตัวเลือก

ไม่มี

วิธีการ

$().dropdown('toggle')

สลับเมนูดรอปดาวน์ของแถบนำทางที่กำหนดหรือการนำทางแบบแท็บ

กิจกรรม

เหตุการณ์แบบเลื่อนลงทั้งหมดเริ่มต้นที่.dropdown-menuองค์ประกอบหลักของ '

เหตุการณ์แบบเลื่อนลงทั้งหมดมีrelatedTargetคุณสมบัติ ซึ่งมีค่าเป็นองค์ประกอบการสลับจุดยึด

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

ตัวอย่างในแถบนำทาง

ปลั๊กอิน ScrollSpy ใช้สำหรับอัปเดตเป้าหมายการนำทางโดยอัตโนมัติตามตำแหน่งการเลื่อน เลื่อนพื้นที่ด้านล่างแถบนำทางและดูการเปลี่ยนแปลงชั้นเรียนที่ใช้งานอยู่ รายการย่อยแบบเลื่อนลงจะถูกเน้นด้วย

การใช้งาน

ต้องการตำแหน่งสัมพัทธ์

ไม่ว่าจะใช้วิธีการใช้งานอย่างไร scrollspy จำเป็นต้องใช้position: relative;กับองค์ประกอบที่คุณกำลังสอดแนม ในกรณีส่วนใหญ่ นี่คือ<body>. เมื่อ scrollspying บนองค์ประกอบอื่นที่ไม่ใช่<body>ตรวจสอบให้แน่ใจว่าได้heightตั้งค่าและoverflow-y: scroll;นำไปใช้

ผ่านแอตทริบิวต์ข้อมูล

หากต้องการเพิ่มลักษณะการทำงานของ scrollspy ให้กับการนำทางบนแถบด้านบนของคุณอย่างง่ายดาย ให้เพิ่มdata-spy="scroll"องค์ประกอบที่คุณต้องการสอดแนม (โดยทั่วไปแล้วจะเป็น<body>) จากนั้นเพิ่มdata-targetแอตทริบิวต์ด้วย ID หรือคลาสขององค์ประกอบหลักขององค์ประกอบ.navBootstrap

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

ผ่านจาวาสคริปต์

หลังจากเพิ่มposition: relative;ใน CSS ของคุณแล้ว ให้เรียก scrollspy ผ่าน JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

วิธีการ

.scrollspy('refresh')

เมื่อใช้ scrollspy ร่วมกับการเพิ่มหรือลบองค์ประกอบออกจาก DOM คุณจะต้องเรียกวิธีการรีเฟรชดังนี้:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-เช่นในdata-offset="".

กิจกรรม

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

แท็บสลับ tab.js

แท็บตัวอย่าง

เพิ่มฟังก์ชันแท็บแบบไดนามิกที่รวดเร็วเพื่อเปลี่ยนผ่านบานหน้าต่างเนื้อหาในเครื่อง แม้กระทั่งผ่านเมนูแบบเลื่อนลง ไม่รองรับแท็บที่ซ้อนกัน

การใช้งาน

เปิดใช้งานแท็บแบบแท็บได้ผ่าน JavaScript (ต้องเปิดใช้งานแต่ละแท็บแยกกัน):

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

คุณสามารถเปิดใช้งานแต่ละแท็บได้หลายวิธี:

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

มาร์กอัป

คุณสามารถเปิดใช้งานการนำทางแท็บหรือยาเม็ดโดยไม่ต้องเขียน JavaScript ใด ๆ โดยเพียงแค่ระบุdata-toggle="tab"หรือdata-toggle="pill"บนองค์ประกอบ การเพิ่มnavและnav-tabsคลาสลงในแท็บ จะใช้การ จัดสไตล์แท็บul Bootstrap ขณะที่การเพิ่มคลาสและ จะใช้ การจัดสไตล์ยาเม็ดnavnav-pills

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

เอฟเฟกต์จาง

หากต้องการให้แท็บจางลง ให้เพิ่ม.fadeแต่ละ แท็ .tab-paneบ บานหน้าต่างแท็บแรกยังต้อง.inทำให้เนื้อหาเริ่มต้นมองเห็นได้

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
  <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

วิธีการ

$().tab

เปิดใช้งานองค์ประกอบแท็บและคอนเทนเนอร์เนื้อหา แท็บควรมี a data-targetหรือ การhrefกำหนดเป้าหมายโหนดคอนเทนเนอร์ใน DOM ในตัวอย่างข้างต้น แท็บต่างๆ คือแท็บที่<a>มีdata-toggle="tab"แอตทริบิวต์

.tab('show')

เลือกแท็บที่กำหนดและแสดงเนื้อหาที่เกี่ยวข้อง แท็บอื่นๆ ที่เลือกไว้ก่อนหน้านี้จะไม่ถูกเลือกและเนื้อหาที่เกี่ยวข้องจะถูกซ่อนไว้ กลับไปยังผู้โทรก่อนที่บานหน้าต่างแท็บจะแสดงขึ้นจริง (เช่น ก่อนที่shown.bs.tabเหตุการณ์จะเกิดขึ้น)

$('#someTab').tab('show')

กิจกรรม

เมื่อแสดงแท็บใหม่ เหตุการณ์จะเริ่มขึ้นตามลำดับต่อไปนี้:

1. hide.bs.tab(บนแท็บที่ใช้งานอยู่ในปัจจุบัน)
2. show.bs.tab(บนแท็บที่จะแสดง)
3. hidden.bs.tab(ในแท็บที่ใช้งานก่อนหน้านี้ อันเดียวกับhide.bs.tabเหตุการณ์)
4. shown.bs.tab(บนแท็บเพิ่งแสดงที่เพิ่งเปิดใช้งาน อันเดียวกับshow.bs.tabเหตุการณ์)

หากไม่มีแท็บใดเปิดใช้งานอยู่ เหตุการณ์ hide.bs.tabและhidden.bs.tabจะไม่เริ่มทำงาน

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

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

คำแนะนำเครื่องมือที่มีชื่อความยาวเป็นศูนย์จะไม่แสดงขึ้น

ตัวอย่าง

วางเมาส์เหนือลิงก์ด้านล่างเพื่อดูคำแนะนำเครื่องมือ:

เคล็ดลับเครื่องมือแบบคงที่

มีสี่ตัวเลือก: จัดตำแหน่งบน ขวา ล่าง และซ้าย

สี่ทิศ

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

การใช้งาน

ปลั๊กอินคำแนะนำเครื่องมือสร้างเนื้อหาและมาร์กอัปตามต้องการ และโดยค่าเริ่มต้นจะวางคำแนะนำเครื่องมือหลังองค์ประกอบทริกเกอร์

ทริกเกอร์คำแนะนำเครื่องมือผ่าน JavaScript:

$('#example').tooltip(options)

มาร์กอัป

มาร์กอัปที่จำเป็นสำหรับคำแนะนำเครื่องมือเป็นเพียงdataแอตทริบิวต์และtitleในองค์ประกอบ HTML ที่คุณต้องการให้มีคำแนะนำเครื่องมือ มาร์กอัปของคำแนะนำเครื่องมือที่สร้างขึ้นนั้นค่อนข้างง่าย แม้ว่าจะต้องมีตำแหน่ง (โดยค่าเริ่มต้น กำหนดtopโดยปลั๊กอิน)

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-เช่นในdata-animation="".

วิธีการ

$().tooltip(options)

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

.tooltip('show')

แสดงคำแนะนำเครื่องมือขององค์ประกอบ กลับไปยังผู้เรียกก่อนที่จะแสดงคำแนะนำเครื่องมือจริง (เช่น ก่อนที่shown.bs.tooltipเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการเรียกใช้ "คู่มือ" ของคำแนะนำเครื่องมือ คำแนะนำเครื่องมือที่มีชื่อความยาวเป็นศูนย์จะไม่แสดงขึ้น

$('#element').tooltip('show')

.tooltip('hide')

ซ่อนคำแนะนำเครื่องมือขององค์ประกอบ กลับไปยังผู้เรียกก่อนที่คำแนะนำเครื่องมือจะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.tooltipเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการเรียกใช้ "คู่มือ" ของคำแนะนำเครื่องมือ

$('#element').tooltip('hide')

.tooltip('toggle')

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

$('#element').tooltip('toggle')

.tooltip('destroy')

ซ่อนและทำลายคำแนะนำขององค์ประกอบ คำแนะนำเครื่องมือที่ใช้การมอบหมาย (ซึ่งสร้างขึ้นโดยใช้ตัวselectorเลือก ) ไม่สามารถทำลายทีละรายการในองค์ประกอบทริกเกอร์ที่สืบทอดได้

$('#element').tooltip('destroy')

กิจกรรม

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

เพิ่มเนื้อหาซ้อนทับขนาดเล็ก เช่น บน iPad ลงในองค์ประกอบใดๆ เพื่อใช้เป็นข้อมูลรอง

ป๊อปโอเวอร์ที่มีทั้งชื่อและเนื้อหามีความยาวเป็นศูนย์จะไม่ปรากฏ

$(function () {
  $('[data-toggle="popover"]').popover()
})

ตัวอย่าง

ป๊อปโอเวอร์แบบคงที่

มีสี่ตัวเลือก: จัดตำแหน่งบน ขวา ล่าง และซ้าย

สาธิตสด

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

สี่ทิศ

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

ปิดในคลิกถัดไป

ใช้focusทริกเกอร์เพื่อปิดป๊อปอัปในคลิกถัดไปที่ผู้ใช้ทำ

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

การใช้งาน

เปิดใช้งานป๊อปโอเวอร์ผ่าน JavaScript:

$('#example').popover(options)

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-เช่นในdata-animation="".

วิธีการ

$().popover(options)

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

.popover('show')

แสดงป๊อปโอเวอร์ขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ป๊อปโอเวอร์จะแสดงขึ้นจริง (เช่น ก่อนshown.bs.popoverเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการกระตุ้น "ด้วยตนเอง" ของป๊อปโอเวอร์ ป๊อปโอเวอร์ที่มีทั้งชื่อและเนื้อหามีความยาวเป็นศูนย์จะไม่ปรากฏ

$('#element').popover('show')

.popover('hide')

ซ่อนป๊อปโอเวอร์ขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ป๊อปโอเวอร์จะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.popoverเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการกระตุ้น "ด้วยตนเอง" ของป๊อปโอเวอร์

$('#element').popover('hide')

.popover('toggle')

สลับป๊อปโอเวอร์ขององค์ประกอบ กลับไปยังผู้โทรก่อนที่ป๊อปโอเวอร์จะแสดงหรือซ่อนอยู่จริง (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.popoverหรือhidden.bs.popoverเหตุการณ์จะเกิดขึ้น) นี่ถือเป็นการกระตุ้น "ด้วยตนเอง" ของป๊อปโอเวอร์

$('#element').popover('toggle')

.popover('destroy')

ซ่อนและทำลายป๊อปโอเวอร์ขององค์ประกอบ ป๊อปอัปที่ใช้การมอบหมาย (ซึ่งสร้างขึ้นโดยใช้ตัวselectorเลือก ) ไม่สามารถทำลายทีละรายการในองค์ประกอบทริกเกอร์ที่สืบทอดได้

$('#element').popover('destroy')

กิจกรรม

$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

ข้อความแจ้งเตือน alert.js

ตัวอย่างการแจ้งเตือน

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

เมื่อใช้.closeปุ่ม ต้องเป็นลูกคนแรกของ the .alert-dismissibleและไม่มีเนื้อหาข้อความใดนำหน้าในมาร์กอัป

การใช้งาน

เพียงเพิ่มdata-dismiss="alert"ปุ่มปิดเพื่อให้ฟังก์ชันปิดการแจ้งเตือนโดยอัตโนมัติ การปิดการแจ้งเตือนจะเป็นการนำออกจาก DOM

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

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

วิธีการ

$().alert()

ทำให้การแจ้งเตือนฟังเหตุการณ์การคลิกบนองค์ประกอบลูกหลานที่มีdata-dismiss="alert"แอตทริบิวต์ (ไม่จำเป็นเมื่อใช้การกำหนดค่าเริ่มต้นอัตโนมัติของ data-api)

$().alert('close')

ปิดการแจ้งเตือนโดยลบออกจาก DOM หากมี คลาส .fadeและ.inอยู่บนองค์ประกอบ การแจ้งเตือนจะจางหายไปก่อนที่จะถูกลบ

กิจกรรม

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

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

ปุ่ม button.js

ทำสิ่งต่างๆ ได้มากขึ้นด้วยปุ่มต่างๆ สถานะปุ่มควบคุมหรือสร้างกลุ่มปุ่มสำหรับส่วนประกอบเพิ่มเติม เช่น แถบเครื่องมือ

Stateful

เพิ่มdata-loading-text="Loading..."เพื่อใช้สถานะการโหลดบนปุ่ม

คุณลักษณะนี้เลิกใช้งานตั้งแต่ v3.3.5 และถูกลบใน v4

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

สลับเดี่ยว

เพิ่มdata-toggle="button"เพื่อเปิดใช้งานการสลับบนปุ่มเดียว

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

ช่องทำเครื่องหมาย / วิทยุ

เพิ่มdata-toggle="buttons"ลงใน.btn-groupช่องทำเครื่องหมายหรืออินพุตวิทยุที่มีเพื่อเปิดใช้งานการสลับในสไตล์ที่เกี่ยวข้อง

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

วิธีการ

$().button('toggle')

สลับสถานะการกด ให้ปุ่มมีลักษณะที่เปิดใช้งาน

$().button('reset')

รีเซ็ตสถานะปุ่ม - สลับข้อความเป็นข้อความต้นฉบับ เมธอดนี้เป็นแบบอะซิงโครนัสและส่งคืนก่อนที่การรีเซ็ตจะเสร็จสิ้นจริง

$().button(string)

สลับข้อความเป็นสถานะข้อความที่กำหนดไว้ของข้อมูล

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

ยุบยุบjs

ปลั๊กอินที่ยืดหยุ่นซึ่งใช้คลาสจำนวนหนึ่งเพื่อให้สลับการทำงานได้ง่าย

ตัวอย่าง

คลิกปุ่มด้านล่างเพื่อแสดงและซ่อนองค์ประกอบอื่นผ่านการเปลี่ยนแปลงคลาส:

• .collapseซ่อนเนื้อหา
• .collapsingถูกนำไปใช้ในระหว่างช่วงการเปลี่ยนภาพ
• .collapse.inแสดงเนื้อหา

คุณสามารถใช้ลิงก์ที่มีhrefแอตทริบิวต์หรือปุ่มที่มีdata-targetแอตทริบิวต์ได้ ในทั้งสองกรณีdata-toggle="collapse"จำเป็นต้องมี

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

ตัวอย่างหีบเพลง

ขยายลักษณะการยุบเริ่มต้นเพื่อสร้างหีบเพลงกับส่วนประกอบแผง

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

นอกจากนี้ยังสามารถเปลี่ยน.panel-bodys กับ.list-groups ได้อีกด้วย

การใช้งาน

ปลั๊กอินยุบใช้คลาสสองสามคลาสเพื่อจัดการกับการยกของหนัก:

• .collapseซ่อนเนื้อหา
• .collapse.inแสดงเนื้อหา
• .collapsingถูกเพิ่มเมื่อการเปลี่ยนแปลงเริ่มต้น และลบออกเมื่อเสร็จสิ้น

คลาสเหล่านี้สามารถพบได้ในcomponent-animations.less.

ผ่านแอตทริบิวต์ข้อมูล

เพียงเพิ่มdata-toggle="collapse"และ a data-targetให้กับองค์ประกอบเพื่อกำหนดการควบคุมองค์ประกอบที่ยุบได้โดยอัตโนมัติ แอตทริบิวต์data-targetยอมรับตัวเลือก CSS เพื่อปรับใช้การยุบ อย่าลืมเพิ่มคลาสcollapseลงในองค์ประกอบที่ยุบได้ หากคุณต้อ��การให้เปิดโดยค่าเริ่มต้น ให้เพิ่มคลาสinเพิ่มเติม

หากต้องการเพิ่มการจัดการกลุ่มแบบหีบเพลงให้กับตัวควบคุมที่ยุบได้ ให้เพิ่มแอตทริบิวต์data-parent="#selector"ข้อมูล อ้างถึงการสาธิตเพื่อดูการดำเนินการนี้

ผ่านจาวาสคริปต์

เปิดใช้งานด้วยตนเองด้วย:

$('.collapse').collapse()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-เช่นในdata-parent="".

วิธีการ

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

สลับองค์ประกอบที่ยุบได้เพื่อแสดงหรือซ่อน กลับไปยังผู้เรียกก่อนที่องค์ประกอบที่ยุบได้จะถูกแสดงหรือซ่อนอยู่จริง (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.collapseor hidden.bs.collapseจะเกิดขึ้น)

.collapse('show')

แสดงองค์ประกอบที่ยุบได้ กลับไปยังผู้เรียกก่อนที่จะแสดงองค์ประกอบที่ยุบได้จริง (เช่น ก่อนที่shown.bs.collapseเหตุการณ์จะเกิดขึ้น)

.collapse('hide')

ซ่อนองค์ประกอบที่ยุบได้ กลับไปยังผู้เรียกก่อนที่องค์ประกอบที่ยุบได้จะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.collapseเหตุการณ์จะเกิดขึ้น)

กิจกรรม

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

ม้าหมุนcarousel.js

ส่วนประกอบสไลด์โชว์สำหรับการปั่นจักรยานผ่านองค์ประกอบต่างๆ เช่น ม้าหมุน ไม่รองรับภาพหมุนที่ซ้อนกัน

ตัวอย่าง

ก่อนหน้า ต่อไป

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

คำบรรยายเสริม

เพิ่มคำอธิบายภาพให้กับสไลด์ของคุณได้อย่างง่ายดายด้วย.carousel-captionองค์ประกอบภายใน.itemไฟล์ . วาง HTML ที่เป็นตัวเลือกไว้ภายในนั้น และมันจะถูกจัดตำแหน่งและจัดรูปแบบโดยอัตโนมัติ

ป้ายสไลด์แรก

Nulla vitae elit libero, pharetra augue mollis interdum.

ป้ายสไลด์ที่สอง

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์

ป้ายสไลด์ที่สาม

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

ก่อนหน้า ต่อไป

<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

การใช้งาน

หลายวงล้อ

ภาพหมุนต้องใช้ an idที่คอนเทนเนอร์ด้านนอกสุด (the .carousel) เพื่อให้การควบคุมแบบหมุนทำงานได้อย่างถูกต้อง เมื่อเพิ่มภาพหมุนหลายภาพ หรือเมื่อเปลี่ยนภาพหมุนidโปรดอัปเดตการควบคุมที่เกี่ยวข้อง

ผ่านแอตทริบิวต์ข้อมูล

ใช้แอตทริบิวต์ข้อมูลเพื่อควบคุมตำแหน่งของวงล้อได้อย่างง่ายดาย data-slideยอมรับคำหลักprevหรือnextซึ่งเปลี่ยนตำแหน่งสไลด์ที่สัมพันธ์กับตำแหน่งปัจจุบัน อีกวิธีหนึ่ง ใช้data-slide-toเพื่อส่งดัชนีสไลด์ดิบไปยังภาพหมุนdata-slide-to="2"ซึ่งจะเลื่อนตำแหน่งสไลด์ไปที่ดัชนีเฉพาะที่ขึ้นต้น0ด้วย

แอตทริบิวต์data-ride="carousel"นี้ใช้เพื่อทำเครื่องหมายภาพหมุนเป็นภาพเคลื่อนไหวโดยเริ่มต้นเมื่อโหลดหน้าเว็บ ไม่สามารถใช้ร่วมกับการเริ่มต้น JavaScript ที่ชัดเจน (ซ้ำซ้อนและไม่จำเป็น) ของภาพหมุนเดียวกัน

ผ่านจาวาสคริปต์

โทรแบบหมุนด้วยตนเองด้วย:

$('.carousel').carousel()

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-เช่นในdata-interval="".

วิธีการ

.carousel(options)

เริ่มต้นวงล้อด้วยตัวเลือกเสริมobjectและเริ่มวนรอบรายการต่างๆ

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

หมุนเวียนผ่านรายการแบบหมุนจากซ้ายไปขวา

.carousel('pause')

หยุดม้าหมุนจากการขี่จักรยานผ่านรายการ

.carousel(number)

หมุนวงล้อไปที่เฟรมใดเฟรมหนึ่ง (อิงตาม 0 คล้ายกับอาร์เรย์)

.carousel('prev')

วนไปยังรายการก่อนหน้า

.carousel('next')

วนไปยังรายการถัดไป

กิจกรรม

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

ทั้งสองเหตุการณ์มีคุณสมบัติเพิ่มเติมดังต่อไปนี้:

• direction: ทิศทางที่ภาพหมุนเลื่อน ( "left"หรือ"right")
• relatedTarget: องค์ประกอบ DOM ที่กำลังถูกเลื่อนเข้าที่ในฐานะรายการที่ใช้งานอยู่

เหตุการณ์ภาพหมุนทั้งหมดจะถูกไล่ออกที่ตัวหมุนเอง (เช่น ที่<div class="carousel">)

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

ติด affix.js

ตัวอย่าง

ปลั๊กอินเสริมจะสลับposition: fixed;เปิดและปิด โดยเลียนแบบเอฟเฟกต์ที่พบด้วยposition: sticky;. การนำทางย่อยทางด้านขวาเป็นการสาธิตสดของปลั๊กอินเสริม

การใช้งาน

ใช้ปลั๊กอินเสริมผ่านแอตทริบิวต์ข้อมูลหรือด้วยตนเองด้วย JavaScript ของคุณเอง ในทั้งสองสถานการณ์ คุณต้องระบุ CSS สำหรับการวางตำแหน่งและความกว้างของเนื้อหาที่ติดอยู่

หมายเหตุ: อย่าใช้ปลั๊กอินเสริมบนองค์ประกอบที่มีอยู่ในองค์ประกอบที่ค่อนข้างวางตำแหน่ง เช่น คอลัมน์ที่ดึงหรือผลัก เนื่องจาก ข้อผิดพลาดในการเรนเด อร์ของSafari

การวางตำแหน่งผ่าน CSS

ปลั๊กอินเสริมจะสลับไปมาระหว่างสามคลาส แต่ละคลาสแสดงถึงสถานะเฉพาะ: .affix, , .affix-topและ .affix-bottomคุณต้องระบุสไตล์ ยกเว้นposition: fixed;on .affixสำหรับคลาสเหล่านี้ด้วยตนเอง (ไม่ขึ้นกับปลั๊กอินนี้) เพื่อจัดการตำแหน่งจริง

นี่คือวิธีการทำงานของปลั๊กอินเสริม:

1. ในการเริ่มต้น ปลั๊กอินจะเพิ่ม.affix-topเพื่อระบุว่าองค์ประกอบอยู่ในตำแหน่งบนสุด ณ จุดนี้ไม่จำเป็นต้องมีการวางตำแหน่ง CSS
2. การเลื่อนผ่านองค์ประกอบที่คุณต้องการติดจะทำให้เกิดการติดจริง นี่คือที่.affixแทนที่.affix-topและตั้งค่าposition: fixed;(จัดทำโดย CSS ของ Bootstrap)
3. หากมีการกำหนดออฟเซ็ตด้านล่าง การเลื่อนผ่าน ไปควรแทนที่.affixด้วย .affix-bottomเนื่องจากออฟเซ็ตเป็นทางเลือก คุณจึงจำเป็นต้องตั้งค่า CSS ที่เหมาะสม ในกรณีนี้ ให้เพิ่มposition: absolute;เมื่อจำเป็น ปลั๊กอินใช้แอตทริบิวต์ข้อมูลหรือตัวเลือก JavaScript เพื่อกำหนดตำแหน่งที่จะวางองค์ประกอบจากที่นั่น

ทำตามขั้นตอนด้านบนเพื่อตั้งค่า CSS ของคุณสำหรับตัวเลือกการใช้งานด้านล่าง

ผ่านแอตทริบิวต์ข้อมูล

หากต้องการเพิ่มพฤติกรรมการติดไปยังองค์ประกอบใดๆ อย่างง่ายดาย เพียงเพิ่มdata-spy="affix"องค์ประกอบที่คุณต้องการสอดแนม ใช้ออฟเซ็ตเพื่อกำหนดว่าเมื่อใดควรสลับการตรึงองค์ประกอบ

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

ผ่านจาวาสคริปต์

เรียกปลั๊กอินเสริมผ่าน JavaScript:

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูล ให้ผนวกชื่อตัวเลือกเข้ากับdata-เช่นในdata-offset-top="200".

วิธีการ

.affix(options)

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

$('#myAffix').affix({
  offset: 15
})

.affix('checkPosition')

คำนวณสถานะของส่วนต่อท้ายใหม่ตามขนาด ตำแหน่ง และตำแหน่งเลื่อนขององค์ประกอบที่เกี่ยวข้อง คลาส.affix, .affix-top, และ.affix-bottomถูกเพิ่มหรือลบออกจากเนื้อหาที่ติดอยู่ตามสถานะใหม่ ต้องเรียกวิธีนี้ทุกครั้งที่มีการเปลี่ยนแปลงขนาดของเนื้อหาที่ติดอยู่หรือองค์ประกอบเป้าหมาย เพื่อให้แน่ใจว่าการวางตำแหน่งที่ถูกต้องของเนื้อหาที่ติดอยู่

$('#myAffix').affix('checkPosition')

กิจกรรม

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