Тойм

Ганцаарчилсан эсвэл эмхэтгэсэн

Залгаасуудыг тус тусад нь (Bootstrap-ийн бие даасан *.jsфайлуудыг ашиглан) эсвэл бүгдийг нэг дор ( bootstrap.jsэсвэл жижигрүүлсэн хэлбэрээр bootstrap.min.js) оруулах боломжтой.

Өгөгдлийн шинж чанарууд

Та бүх Bootstrap залгаасуудыг JavaScript-ийн нэг мөр бичихгүйгээр зөвхөн тэмдэглэгээний API-ээр дамжуулан ашиглах боломжтой. Энэ бол Bootstrap-ийн нэгдүгээр зэрэглэлийн API бөгөөд залгаасыг ашиглахдаа хамгийн түрүүнд анхаарах ёстой.

Зарим тохиолдолд энэ функцийг унтраах нь зүйтэй байж магадгүй юм. Иймээс бид баримтын нэрийн зайтай бүх үйл явдлыг салгах замаар API өгөгдлийн атрибутыг идэвхгүй болгох боломжийг олгодог data-api. Энэ нь иймэрхүү харагдаж байна:

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

Өөрөөр, тодорхой залгаас руу чиглүүлэхийн тулд залгаасын нэрийг дараах байдлаар өгөгдлийн 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

Зөрчилдөөн байхгүй

Заримдаа бусад UI хүрээтэй Bootstrap залгаасуудыг ашиглах шаардлагатай болдог. Ийм нөхцөлд нэрийн орон зайн зөрчилдөөн хааяа тохиолдож болно. Хэрэв ийм зүйл тохиолдвол та .noConflictутгыг буцаахыг хүссэн залгаас руу залгаж болно.

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

Үйл явдал

Bootstrap нь ихэнх залгаасуудын өвөрмөц үйлдлүүдэд зориулсан тусгай үйл явдлуудыг хангадаг. showЕрөнхийдөө эдгээр нь үйл явдлын эхэнд инфинитив (жишээ нь ) идэвхждэг shownба үйл ажиллагаа дууссаны дараа түүний өнгөрсөн үеийн хэлбэр (жишээ нь ) идэвхждэг.

3.0.0-ээс эхлэн бүх Bootstrap үйл явдлууд нэрийн зайтай байна.

Бүх инфинитив үйл явдлууд preventDefaultфункцийг хангадаг. Энэ нь үйлдлийг эхлэхээс өмнө гүйцэтгэх ажиллагааг зогсоох боломжийг олгодог.

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

Ариутгагч

Зөвлөмжүүд болон Popovers нь HTML-г хүлээн зөвшөөрдөг сонголтуудыг ариутгахын тулд бидний суулгасан ариутгагчийг ашигладаг.

Өгөгдмөл whiteListутга нь дараах байдалтай байна.

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Хэрэв та энэ өгөгдмөл утгад шинэ утгыг нэмэхийг хүсвэл whiteListдараахь зүйлийг хийж болно.

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Хэрэв та тусгай номын сан, жишээ нь DOMPurify ашиглахыг илүүд үздэг тул манай ариутгагчийг тойрч гарахыг хүсвэл дараах зүйлийг хийх хэрэгтэй.

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})

Хувилбарын дугаарууд

VERSIONBootstrap-ийн jQuery залгаас бүрийн хувилбарт залгаасын үүсгэгчийн өмчөөр хандаж болно . Жишээлбэл, зааврын нэмэлт өргөтгөлийн хувьд:

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

JavaScript-г идэвхгүй болгосон үед тусгай нөөц байхгүй

JavaScript идэвхгүй болсон үед Bootstrap-ийн залгаасууд тийм ч сайн унадаггүй. Хэрэв та энэ тохиолдолд хэрэглэгчийн туршлагад санаа зовж байгаа бол хэрэглэгчдэдээ <noscript>нөхцөл байдлыг тайлбарлах (мөн JavaScript-г хэрхэн дахин идэвхжүүлэх) болон/эсвэл өөрийн захиалгат өгөгдлүүдийг нэмэхийн тулд ашиглана уу.

Transitions transition.js

Шилжилтийн тухай

Шилжилтийн энгийн эффектүүдийн хувьд transition.jsбусад JS файлуудын хажууд нэг удаа оруулна уу. Хэрэв та эмхэтгэсэн (эсвэл жижигрүүлсэн) ашиглаж bootstrap.jsбайгаа бол үүнийг оруулах шаардлагагүй - энэ нь аль хэдийн байна.

Дотор нь юу байна

Transition.js нь үйл явдлын үндсэн туслах, transitionEndCSS шилжилтийн эмулятор юм. Үүнийг бусад залгаасууд CSS-ийн шилжилтийн дэмжлэг байгаа эсэхийг шалгах, өлгөөтэй шилжилтийг барихад ашигладаг.

Шилжилтийг идэвхгүй болгож байна

Шилжилтийг дараах JavaScript хэсгийг ашиглан хааж болно, энэ нь ачаалагдсаны дараа transition.js(эсвэл bootstrap.jsэсвэл ) гарч ирэх ёстой:bootstrap.min.js

$.support.transition = false

Modals modal.js

Модаль нь оновчтой, гэхдээ уян хатан, шаардлагатай хамгийн бага ажиллагаатай, ухаалаг өгөгдмөл тохиргоотой харилцах цонхтой.

HTML5 өөрийн семантикийг хэрхэн тодорхойлдог тул autofocusHTML атрибут нь Bootstrap горимд ямар ч нөлөө үзүүлэхгүй. Ижил үр дүнд хүрэхийн тулд зарим захиалгат 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>

Нэмэлт хэмжээ

Модаль нь хоёр сонголттой хэмжээтэй байдаг бөгөөд тэдгээрийг өөрчлөх ангиудад байрлуулах боломжтой .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" 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" 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 сүлжээний системийн давуу талыг ашиглахын тулд зүгээр л .rowдотор нь үүр хийж .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 -->

Триггер товчлуур дээр тулгуурлан өөр өөр загвар контент

Бага зэрэг өөр агуулгатай, ижил горимыг идэвхжүүлдэг олон товчлуур байгаа юу? Аль товчийг дарснаас хамаарч модаль контентыг өөрчлөхийн тулд HTML event.relatedTargetшинж чанаруудыг data-*( 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тулд a үүсгэдэг.<body>.modal-backdrop

Өгөгдлийн шинж чанаруудаар дамжуулан

Модалыг JavaScript бичихгүйгээр идэвхжүүлнэ үү. data-toggle="modal"Товчлуур гэх мэт удирдлагын элемент дээр сэлгэхийн тулд тодорхой модаль руу чиглүүлэхийн тулд data-target="#foo"эсвэл тохируулна.href="#foo"

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

JavaScript-ээр дамжуулан

myModalJavaScript-ийн нэг мөр бүхий id бүхий модаль дууд :

$('#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...
})

Dropdowns dropdown.js

Жишээ

Энэхүү энгийн залгаасын тусламжтай бүх зүйл, тухайлбал навигацийн самбар, таб, эм зэрэг дээр унждаг цэсийг нэмнэ үү.

Navbar дотор

Эмийн дотор

Хэрэглээ

.openӨгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулан унадаг залгаас нь эх жагсаалтын зүйл дээрх ангийг сэлгэх замаар далд контентыг (унадаг цэс) сэлгэдэг .

Хөдөлгөөнт төхөөрөмж дээр унадаг цэсийг нээх нь .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-ээр дамжуулан

JavaScript-ээр унадаг цэс рүү залгана уу:

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

Сонголтууд

Байхгүй

Арга зүй

$().dropdown('toggle')

Өгөгдсөн навигацийн самбар эсвэл цонхтой навигацийн унждаг цэсийг сэлгэх.

Үйл явдал

Унтраах бүх үйл явдлууд нь .dropdown-menuэх элемент дээр явагдана.

Унждаг бүх үйл явдал нь relatedTargetсэлгэн залгах зангуу элемент болох шинж чанартай байдаг.

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

ScrollSpy scrollspy.js

Navbar дээрх жишээ

ScrollSpy залгаас нь гүйлгэх байрлалд тулгуурлан навигацийн зорилтуудыг автоматаар шинэчлэх зориулалттай. Navbar-ийн доорх хэсгийг гүйлгэж, идэвхтэй ангийн өөрчлөлтийг хараарай. Унждаг дэд зүйлүүдийг мөн тодруулна.

Хэрэглээ

Харьцангуй байрлалыг шаарддаг

Хэрэгжүүлэх аргаас үл хамааран scrollspy нь position: relative;таны тагнаж байгаа элемент дээр ашиглахыг шаарддаг. Ихэнх тохиолдолд энэ нь <body>. -аас бусад элементүүд дээр гүйлгэхдээ багц болон хэрэглэгдэхүүнтэй <body>байхаа мартуузай .heightoverflow-y: scroll;

Өгөгдлийн шинж чанаруудаар дамжуулан

Топбарын навигацдаа гүйлгэх үйлдлийг хялбархан нэмэхийн тулд тагнахыг хүсэж буй элементдээ нэмнэ data-spy="scroll"үү (ихэнхдээ энэ нь <body>). Дараа нь аливаа Bootstrap бүрэлдэхүүн хэсгийн data-targetэх элементийн ID эсвэл анги бүхий атрибутыг нэмнэ үү..nav

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>

JavaScript-ээр дамжуулан

CSS-ээ нэмсний дараа position: relative;JavaScript-ээр дамжуулан scrollspy руу залгана уу:

$('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-ээр чихтэй табуудыг идэвхжүүлэх (tab бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

$('#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ангиудыг нэмбэл ulBootstrap табын хэв маягийгnav ашиглах ба мөн ангиудыг нэмбэл эм хэлбэрийгnav-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

Таб элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM доторх чингэлэг зангилаа руу чиглэсэн data-targetэсвэл a байх ёстой . hrefДээрх жишээнүүдэд табууд нь шинж чанаруудтай <a>s 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
})

Зөвлөмжүүд tooltip.js

Жэйсон Фреймийн бичсэн гайхалтай jQuery.tipsy залгаасаас санаа авсан; Хэрэгслийн зөвлөмжүүд нь зураг дээр тулгуурладаггүй, хөдөлгөөнт дүрслэлд 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 дээрх шиг жижиг контент давхаргыг нэмнэ үү.

Гарчиг болон агуулга нь 0 урттай поповеруудыг хэзээ ч харуулахгүй.

$(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)

Элементийн цуглуулгад зориулсан поповеруудыг эхлүүлнэ.

.popover('show')

Элементийн поповыг харуулна. Поповыг харуулахаас өмнө (өөрөөр хэлбэл shown.bs.popoverүйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гарын авлагын" өдөөгч гэж үздэг. Гарчиг болон агуулга нь 0 урттай поповеруудыг хэзээ ч харуулахгүй.

$('#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энэ нь эхний хүүхэд байх ёстой .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…
})

Buttons button.js

Товчлуур ашиглан илүү ихийг хий. Хяналтын товчлуурыг зааж өгөх эсвэл хэрэгслийн мөр гэх мэт бусад бүрэлдэхүүн хэсгүүдийн товчлууруудын бүлгийг үүсгэх.

Төрийн мэдээлэлтэй

data-loading-text="Loading..."Товчлуур дээр ачаалах төлөвийг ашиглахын тулд нэмнэ үү .

Энэ функцийг v3.3.5-аас хойш цуцалсан бөгөөд v4 дээр устгасан.

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary">
  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">
  Single toggle
</button>

Checkbox / Радио

data-toggle="buttons"Тус тусын хэв маягаар .btn-groupсэлгэхийг идэвхжүүлэхийн тулд шалгах хайрцаг эсвэл радио оролтыг нэмнэ үү .

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

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

Арга зүй

$().button('toggle')

Түлхэх төлөвийг сэлгэх. Товчлуурыг идэвхжүүлсэн мэт харагдуулна.

$().button('reset')

Товчлуурын төлөвийг дахин тохируулах - текстийг эх текст рүү шилжүүлнэ. Энэ арга нь асинхрон бөгөөд дахин тохируулж дуусахаас өмнө буцаж ирдэг.

$().button(string)

Текстийг өгөгдөлд тодорхойлсон дурын төлөв рүү шилжүүлнэ.

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

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

Буулгах collapse.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-г s-ээр солих боломжтой .list-group.

Хэрэглээ

Нурах залгаас нь хүнд ачааг даах хэд хэдэн ангиллыг ашигладаг:

• .collapseагуулгыг нуудаг
• .collapse.inагуулгыг харуулж байна
• .collapsingШилжилт эхлэхэд нэмэгдэж, дуусах үед хасагдана

Эдгээр ангиудыг эндээс олж болно component-animations.less.

Өгөгдлийн шинж чанаруудаар дамжуулан

Эвхэгддэг элементийн удирдлагыг автоматаар хуваарилахын тулд элементэд " data-toggle="collapse"a" -г нэмэхэд л хангалттай . data-targetУг data-targetатрибут нь задлах үйлдэл хийх CSS сонгогчийг хүлээн зөвшөөрдөг. collapseЭвхэгддэг элементэд ангийг нэмэхээ мартуузай . Хэрэв та үүнийг анхдагчаар нээхийг хүсвэл нэмэлт анги нэмнэ үү in.

Эвхэгддэг удирдлагад баян хуур шиг бүлгийн удирдлагыг нэмэхийн тулд дата атрибутыг нэмнэ үү data-parent="#selector". Үүнийг хэрхэн ажиллаж байгааг харахын тулд демо-г үзнэ үү.

JavaScript-ээр дамжуулан

Гараар идэвхжүүлэх:

$('.collapse').collapse()

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-parent="".

Арга зүй

.collapse(options)

Таны агуулгыг эвхэгддэг элемент болгон идэвхжүүлнэ. Нэмэлт сонголтуудыг хүлээн зөвшөөрдөг object.

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

.collapse('toggle')

Эвхэгддэг элементийг харуулах эсвэл нуух горимд шилжүүлнэ. Эвхэгддэг элементийг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.collapseэсвэл hidden.bs.collapseүйл явдал болохоос өмнө) дуудагч руу буцна.

.collapse('show')

Эвхэгддэг элементийг харуулж байна. Эвхэгддэг элементийг бодитоор харуулахаас өмнө (өөрөөр хэлбэл shown.bs.collapseүйл явдал болохоос өмнө) дуудагч руу буцна.

.collapse('hide')

Эвхэгддэг элементийг нууна. Эвхэгддэг элементийг нуухаас өмнө (өөрөөр хэлбэл hidden.bs.collapseүйл явдал болохоос өмнө) дуудагч руу буцна.

Үйл явдал

Bootstrap-ийн уналтын анги нь уналтын функцэд холбогдох хэд хэдэн үйл явдлыг илрүүлдэг.

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

Carousel 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, a 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>

Хэрэглээ

Олон тооны тойруулга

Тойрог тойруулгыг зөв ажиллуулахын idтулд хамгийн гадна талын савыг ( ) ашиглахыг шаарддаг . .carouselОлон тойруул нэмэх эсвэл тойруулгыг өөрчлөхдөө idхолбогдох удирдлагыг шинэчлэхээ мартуузай.

Өгөгдлийн шинж чанаруудаар дамжуулан

Тойрогны байрлалыг хялбархан хянахын тулд өгөгдлийн шинж чанаруудыг ашиглана уу. эсвэл data-slideтүлхүүр үгсийг хүлээн авдаг бөгөөд энэ нь слайдын байрлалыг одоогийн байрлалтай нь харьцуулан өөрчилдөг. Эсвэл слайдын байрлалыг -ээр эхэлсэн тодорхой индекс рүү шилжүүлдэг тойруулга руу түүхий слайдын индексийг дамжуулахын тулд ашиглана уу .prevnextdata-slide-todata-slide-to="2"0

Энэ data-ride="carousel"атрибутыг хуудас ачаалж эхлэх үед тойруулгыг хөдөлгөөнт гэж тэмдэглэхэд ашигладаг. Үүнийг ижил тойруулгыг JavaScript-ийн илэрхий эхлүүлэхтэй (илүүдэл ба шаардлагагүй) хослуулан ашиглах боломжгүй.

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 render -ийн алдааны улмаас татсан эсвэл түлхсэн багана гэх мэт харьцангуй байрлалтай элементэд байгаа элемент дээр нэмэлт залгаасыг бүү ашиглаарай .

CSS-ээр байршуулах

Аффикс залгаас нь тус бүр нь тодорхой төлөвийг төлөөлдөг гурван ангийн хооронд шилждэг: .affix, .affix-top, болон .affix-bottom. Бодит байрлалыг зохицуулахын тулд та эдгээр ангиудад (энэ залгаасаас хамааралгүйгээр) position: fixed;on- оос бусад хэв маягийг өгөх ёстой ..affix

Аффикс залгаас хэрхэн ажилладагийг энд харуулав.

1. Эхлэхийн тулд залгаас .affix-topнь элементийг хамгийн дээд байрлалд байгааг харуулахын тулд нэмдэг. Энэ үед CSS байршлыг тогтоох шаардлагагүй.
2. Хавсаргах гэж буй элементийнхээ хажуугаар гүйлгэх нь бодит хавсралтыг өдөөх ёстой. Энэ нь .affixсолих .affix-topболон тохируулдаг газар position: fixed;юм (Bootstrap-ийн CSS-ээр хангагдсан).
3. Хэрэв доод офсет тодорхойлогдсон бол хажуугаар нь гүйлгэх нь -ээр .affixсолигдоно .affix-bottom. Офсет нь сонголттой тул нэгийг тохируулах нь тохирох CSS-г тохируулахыг шаарддаг. Энэ тохиолдолд position: absolute;шаардлагатай бол нэмнэ. Plugin нь тухайн элементийг хаана байрлуулахаа тодорхойлохын тулд өгөгдлийн атрибут эсвэл JavaScript сонголтыг ашигладаг.

Доорх ашиглалтын сонголтуудын аль нэгэнд CSS-ээ тохируулахын тулд дээрх алхмуудыг дагана уу.

Өгөгдлийн шинж чанаруудаар дамжуулан

Аливаа элементэд хавсаргасан зан үйлийг хялбархан нэмэхийн тулд тагнахыг data-spy="affix"хүсэж буй элемент дээрээ нэмэхэд л хангалттай. Элементийн бэхэлгээг хэзээ солихыг тодорхойлохын тулд офсетийг ашиглана уу.

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

JavaScript-ээр дамжуулан

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-ийн affix залгаас нь аффиксын функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.