Тойм

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

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

Эмхэтгэсэн JavaScript ашиглах

Аль аль bootstrap.jsнь bootstrap.min.jsнэг файлд бүх залгаасуудыг агуулна. Зөвхөн нэгийг оруулаарай.

Plugin хамаарал

Зарим залгаасууд болон CSS бүрэлдэхүүн хэсгүүд нь бусад залгаасуудаас хамаардаг. Хэрэв та залгаасуудыг тус тусад нь оруулсан бол эдгээр хамаарлыг баримтаас шалгаарай. Мөн бүх залгаасууд jQuery-ээс хамаардаг гэдгийг анхаарна уу (энэ нь залгаасын файлуудын өмнө jQuery-г оруулах ёстой гэсэн үг ). jQuery-ийн аль хувилбарууд дэмжигддэгийг манайхаас лавлана уу.bower.json

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

Та бүх 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
})

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

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

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

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

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

Гуравдагч талын номын сангууд

Bootstrap нь Prototype эсвэл jQuery UI зэрэг гуравдагч талын JavaScript сангуудыг албан ёсоор дэмждэггүй . Үйл явдлууд болон нэрийн зайтай байсан ч .noConflict, та өөрөө засах шаардлагатай нийцтэй байдлын асуудал гарч болзошгүй.

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

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

Олон нээлттэй горимыг дэмждэггүй

Өөр нэг загвар харагдаж байхад модыг нээхгүй байхаа мартуузай. Нэг удаад нэгээс олон модыг харуулахын тулд тусгай код шаардлагатай.

Модаль тэмдэглэгээний байршил

Модалын харагдах байдал болон/эсвэл үйл ажиллагаанд нөлөөлөх бусад бүрэлдэхүүн хэсгүүдээс зайлсхийхийн тулд модалын HTML кодыг баримтынхаа дээд түвшний байрлалд байрлуулахыг үргэлж хичээгээрэй.

Хөдөлгөөнт төхөөрөмжийн анхааруулга

Мобайл төхөөрөмж дээр мод ашиглахтай холбоотой зарим анхааруулга байдаг. Дэлгэрэнгүйг манай хөтчийн дэмжлэгийн баримтаас харна уу.

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>

Модыг хүртээмжтэй болгох

Модаль гарчгийг иш татан , -д болон өөрт нь role="dialog"мөн нэмэхээ мартуузай .aria-labelledby="...".modalrole="document".modal-dialog

Нэмж дурдахад, та дээр нь модаль харилцах цонхны тайлбарыг өгч aria-describedbyболно .modal.

YouTube видеог оруулах

YouTube видеог загварт оруулахад автоматаар тоглуулахыг зогсоох болон бусад зүйлийг хийхийн тулд Bootstrap дээр биш нэмэлт JavaScript шаардлагатай. Дэлгэрэнгүй мэдээллийг Stack Overflow нийтлэлээс үзнэ үү .

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

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

Нэр төрөл анхдагч тайлбар
дэвсгэр логик эсвэл мөр'static' үнэн Modal-backdrop элементийг агуулдаг. Эсвэл товшилтоор модыг хаадаггүй staticbackdrop-ыг зааж өгнө үү.
гар логик үнэн Escape товчийг дарахад модальыг хаадаг
шоу логик үнэн Эхлэх үед модыг харуулна.
алсын зайнаас зам худлаа

Энэ сонголтыг v3.3.0 хувилбараас хойш цуцалсан бөгөөд v4 хувилбараас хассан. Оронд нь үйлчлүүлэгч талын загварчлал эсвэл өгөгдөл холбох хүрээ ашиглах эсвэл jQuery.load руу өөрөө залгахыг зөвлөж байна.

Хэрэв алсын URL-г өгсөн бол контентыг jQuery-ийн аргаар нэг удаа ачаалж , div руу оруулна. Хэрэв та data-api ашиглаж байгаа бол алсын эх сурвалжийг зааж өгөхийн тулд атрибутыг ашиглаж болно. Үүний жишээг доор харуулав.load.modal-contenthref

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

Арга зүй

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

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

Модалыг гараар сэлгэдэг. Модалыг харуулах эсвэл нуухаас өмнө (өөрөөр хэлбэл shown.bs.modalэсвэл hidden.bs.modalүйл явдал болохоос өмнө) дуудагч руу буцна.

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

Модалыг гараар нээнэ. Модалыг бодитоор харуулахаас өмнө (өөрөөр хэлбэл shown.bs.modalүйл явдал болохоос өмнө) дуудагч руу буцна.

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

Модалыг гараар нууна. Модаль нуугдахаас өмнө (өөрөөр хэлбэл hidden.bs.modalүйл явдал болохоос өмнө) дуудагч руу буцна.

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

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

Модалын өндөр нь нээлттэй байх үед өөрчлөгдөхөд л хэрэгтэй.

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

Үйл явдал

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

Бүх модаль үйл явдлууд модаль өөрөө (өөрөөр хэлбэл <div class="modal">) дээр буудаг.

Үйл явдлын төрөл Тодорхойлолт
show.bs.modal showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . Хэрэв товшилтоор үүсгэгдсэн бол товшсон элемент нь relatedTargetүйл явдлын өмч болно.
үзүүлсэн.bs.modal Модалыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). Хэрэв товшилтоор үүсгэгдсэн бол товшсон элемент нь relatedTargetүйл явдлын өмч болно.
hide.bs.modal hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
hidden.bs.modal Модал нь хэрэглэгчээс нуугдаж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилт дуусахыг хүлээх болно).
loaded.bs.modal Модал нь remoteсонголтыг ашиглан контентыг ачаалсан үед энэ үйл явдал идэвхгүй болно.
$('#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()

data-toggle="dropdown"шаардлагатай хэвээр байна

Та JavaScript-ээр унадаг цэс рүү залгах эсвэл оронд нь data-api ашиглах эсэхээс үл хамааран унадаг цэсний data-toggle="dropdown"гох элемент дээр байнга байх шаардлагатай.

Байхгүй

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

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

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

Үйл явдлын төрөл Тодорхойлолт
show.bs.dropdown Show instance аргыг дуудах үед энэ үйл явдал шууд идэвхждэг.
харуулсан.bs.унадаг Унтраах цэсийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
нуух.bs.dropdown Нуух жишээний аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг.
hidden.bs.dropdown Унтраах цэсийг хэрэглэгчээс нууж дуусах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Navbar дээрх жишээ

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

@ тарган

Ad leggings keytar, brunch id art party dolor labore. Тэд qui зарагдахаас өмнө сэрээ yr enim lo-fi. Tumblr фермээс ширээний дугуйн эрх ямар ч байсан. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 чоно сар irure. Cosby цамц lomo жинсэн шорт, Williamsburg hoodie minim Qui та тэдний талаар сонсоогүй байж магадгүй ба кардиган итгэлцлийн сан culpa biodiesel Wes Anderson aesthetic. Nihil шивээстэй accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Вениам марфа сахалтай скейтборд, adipisicing fugiat velit сэрээ сахал. Freegan сахал aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Шивээстэй косби цамц хүнсний ачааны машин, Mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Карлесын гоо зүйн бус дасгалууд нь зөөлөн биш юм. Brooklyn adipisicing гар урлалын шар айраг дэд keytar deserunt.

нэг

Commodo aliqua delectus. Fap craft шар айраг deserunt skateboard ea. Ломо дугуйн эрхийг adipisicing banh mi, velit ea sunt sunt next level locavore in one orgin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY хамгийн бага элч цүнх. Cred ex in, тогтвортой delectus consectetur fanny pack Iphone.

хоёр

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats, consequat hoodie gluten free lo-fi fap aliquip-ийн талаар та сонсоогүй байх. Тэд зарагдаж дуусахаас өмнө ажилчид, Терри Ричардсон өглөөний цайны хоолонд оров. Cardigan craft шар айраг seitan бэлэн velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Хэрэглээ

Bootstrap Nav-г шаарддаг

Scrollspy нь одоогоор идэвхтэй холбоосуудыг зөв тодруулахын тулд Bootstrap nav komponent ашиглахыг шаарддаг .

Шийдвэрлэх боломжтой ID зорилтууд шаардлагатай

Navbar холбоосууд нь шийдвэрлэх боломжтой id зорилтуудтай байх ёстой. Жишээ нь, <a href="#home">home</a>заавал байх ёстой зүйл нь DOM дахь <div id="home"></div>.

Зорилтот бус :visibleэлементүүдийг үл тоомсорлосон

:visiblejQuery- д заагаагүй зорилтот элементүүдийг үл тоомсорлож, тэдгээрийн харгалзах навигацийн элементүүдийг хэзээ ч тодруулахгүй.

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

Хэрэгжүүлэх аргаас үл хамааран 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="".

Нэр төрөл анхдагч тайлбар
офсет тоо 10 Гүйлгэх байрлалыг тооцоолохдоо дээд талаас нь солих пиксел.

Үйл явдал

Үйл явдлын төрөл Тодорхойлолт
activate.bs.scrollspy Scrollspy-ээр шинэ зүйл идэвхжих болгонд энэ үйл явдал идэвхждэг.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Шилжүүлж болох таб tab.js

Жишээ таб

Унждаг цэсээр ч гэсэн дотоод контентын хэсэг рүү шилжихийн тулд хурдан, динамик таб функцийг нэмээрэй. Оруулсан табыг дэмждэггүй.

Түүхий жинсэн өмд Та магадгүй тэдний талаар сонсоогүй жинсэн шорт Остин. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Сахал клише tempor, Williamsburg carles vegan helvetica. Reprehenderit яргачин чимэг keffiyeh dreamcatcher synth. Косби цамц, qui irure Терри Ричардсон экс далайн амьтан. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, махчин nisi qui voluptate.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Цонхтой навигацыг өргөтгөнө

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

Хэрэглээ

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үйл явдлууд идэвхгүй болно.

Үйл явдлын төрөл Тодорхойлолт
show.bs.tab Энэ үйл явдал нь шинэ таб харагдахаас өмнө tab шоу дээр гарч ирдэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
харуулсан.bs.tab Энэ үйл явдал нь табыг харуулсны дараа tab шоунд идэвхждэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
hide.bs.tab Энэ үйл явдал шинэ цонхыг харуулах үед идэвхждэг (ингэснээр өмнөх идэвхтэй табыг нуух шаардлагатай). Одоогийн идэвхтэй таб болон удахгүй идэвхтэй болох шинэ табыг тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
hidden.bs.tab Энэ үйл явдал шинэ табыг харуулсны дараа идэвхждэг (ингэснээр өмнөх идэвхтэй таб нуугдсан). Өмнөх идэвхтэй таб болон шинэ идэвхтэй табыг тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
$('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, орон нутгийн гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаггүй шинэчилсэн хувилбар юм.

Тэг урттай гарчигтай зөвлөмжийг хэзээ ч харуулахгүй.

Жишээ

Доорх холбоосууд дээр хулганаа гүйлгэж, зөвлөмжийг харна уу:

Бариу өмд дараагийн түвшний keffiyeh та тэдний талаар сонсоогүй байх. Фото лангуу сахал түүхий жинсэн үсэг веган мессенжер цүнх Stumptown. Фермээс ширээнд суух seitan, Mcsweeney's fixie sustainable quinoa 8-бит америк хувцас нь Терри Ричардсон винил камертай. Сахал хожуул, кардиган банх ми ломо аянга. Дүпү биодизель Виллиамсбург Марфа, дөрвөн Локо Максвинигийн цэвэршүүлэх веган Chambray. Үнэхээр инээдтэй гар урлаач ямар ч keytar , scenester farm-to-table banksy Остин twitter бариул freegan cred raw denim single-origin coffee virus.

Статик хэрэгслийн зөвлөмж

Дөрвөн сонголт боломжтой: дээд, баруун, доод, зүүн зэрэгцүүлсэн.

Дөрвөн чиглэл

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

Нэвтрэх функц

Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-д хамрагдах боломжтой тул та тэдгээрийг өөрөө эхлүүлэх хэрэгтэй гэсэн үг юм.

Хуудасны бүх зөвлөмжийг эхлүүлэх нэг арга бол тэдгээрийг data-toggleшинж чанараар нь сонгох явдал юм:

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

Олон мөрийн холбоосууд

Заримдаа та олон мөрийг боож буй гипер холбоос дээр зөвлөмж нэмэхийг хүсдэг. Хэрэгслийн нэмэлт өргөтгөлийн үндсэн үйлдэл нь хэвтээ болон босоо чиглэлд төвлөрөх явдал юм. white-space: nowrap;Үүнээс зайлсхийхийн тулд зангуудаа нэмнэ үү .

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

.btn-groupA эсвэл a доторх элементүүд .input-groupэсвэл хүснэгттэй холбоотой элементүүд ( <td>, <th>, <tr>, , , , , , , , <thead>, <tbody>, ) дээр зөвлөмжийг ашиглахдаа хүсээгүй сөрөг нөлөөллөөс (элемент улам томрох болон/ гэх мэт) зайлсхийхийн тулд <tfoot>сонголтыг (доор бичигдсэн) зааж өгөх шаардлагатай. container: 'body'эсвэл зөвлөмжийг асаахад дугуйрсан булангаа алддаг).

Нууцлагдмал элементүүдийн зөвлөмжийг харуулахыг бүү оролд

Зорилтот $(...).tooltip('show')элемент байх үед дуудах нь зөвлөмжийг display: none;буруу байрлуулахад хүргэдэг.

Гар болон туслах технологийн хэрэглэгчид ашиглах боломжтой зөвлөмжүүд

tabindex="0"Гараар жолоодож буй хэрэглэгчид, ялангуяа туслах технологийн хэрэглэгчдийн хувьд холбоос, маягтын удирдлага эсвэл атрибут бүхий дурын элемент гэх мэт гарын төвлөрсөн элементүүдэд зөвхөн зөвлөмж нэмэх хэрэгтэй .

Идэвхгүй элементүүдийн зөвлөмжүүд нь боодлын элементүүдийг шаарддаг

disabledЭлемент эсвэл элементэд зөвлөмж нэмэхийн тулд .disabledэлементийг a дотор байрлуулж, оронд <div>нь зөвлөмжийг ашиглана уу <div>.

Сонголтууд

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

Нэр Төрөл Өгөгдмөл Тодорхойлолт
хөдөлгөөнт дүрс логик үнэн Хэрэгслийн зааварт CSS бүдгэрүүлэх шилжилтийг ашиглана уу
сав мөр | худлаа худлаа

Тодорхой элементийн зөвлөмжийг хавсаргана. Жишээ нь: container: 'body'. Энэ сонголт нь ялангуяа хэрэглүүртэй бөгөөд энэ нь танд хэрэглүүрийн зөвлөмжийг гох элементийн ойролцоох баримт бичгийн урсгалд байрлуулах боломжийг олгодог бөгөөд энэ нь цонхны хэмжээг өөрчлөх үед гох элементээс холдохоос сэргийлнэ.

саатал тоо | обьект 0

Зөвлөмжийг харуулах, нуухыг хойшлуулах (ms) - гарын авлагын гох төрөлд хамаарахгүй

Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ

Объектын бүтэц нь:delay: { "show": 500, "hide": 100 }

html логик худлаа Хэрэгслийн зааварт HTML оруулна уу. Хэрэв худал бол jQuery-ийн textаргыг DOM-д контент оруулахад ашиглана. Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу.
байрлуулах мөр | функц 'дээд'

Хэрэгслийн зөвлөмжийг хэрхэн байрлуулах вэ - дээд | доод | зүүн | зөв | авто.
"Авто" гэж заасан үед энэ нь зөвлөмжийг динамикаар өөрчлөх болно. Жишээлбэл, хэрэв байрлал нь "автоматаар зүүн" байвал зөвлөмжийг боломжтой бол зүүн тийш харуулах болно, эс тэгвээс баруун тийш харуулах болно.

Байршлыг тодорхойлохын тулд функцийг ашиглах үед түүнийг эхний аргумент болгон багажийн зөвлөмжийн DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. thisКонтекстийг хэрэгслийн зөвлөмжийн жишээнд тохируулсан .

сонгогч мөр худлаа Хэрэв сонгогчийг өгсөн бол хэрэгслийн зөвлөмжийн объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML агуулгыг идэвхжүүлэхийн тулд зөвлөмжийг нэмэхэд ашиглагддаг. Үүнийг болон мэдээллийн жишээг үзнэ үү .
загвар мөр '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Зөвлөгөө үүсгэх үед ашиглах үндсэн HTML.

Хэрэгслийн titleзөвлөмжийг .tooltip-inner.

.tooltip-arrowнь зөвлөмжийн сум болно.

Хамгийн гадна талын боодлын элемент нь .tooltipангитай байх ёстой.

гарчиг мөр | функц ''

titleХэрэв шинж чанар байхгүй бол гарчгийн өгөгдмөл утга .

Хэрэв функц өгөгдсөн бол энэ нь thisмэдээллийн хэрэгслийн хавсаргасан элементийн лавлагаагаар дуудагдах болно.

гох мөр 'фокус дээр хулганаа чиглүүлэх' Хэрэгслийн зөвлөмж��йг хэрхэн идэвхжүүлдэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла. manualбусад өдөөгчтэй хослуулах боломжгүй.
харах хэсэг мөр | объект | функц {сонгогч: 'body', padding: 0}

Хэрэгслийн зөвлөмжийг энэ элементийн хүрээнд хадгална. Жишээ нь: viewport: '#viewport'эсвэл{ "selector": "#viewport", "padding": 0 }

Хэрэв функц өгөгдсөн бол түүнийг цорын ганц аргумент болгон өдөөх элементийн DOM зангилаагаар дуудна. thisКонтекстийг хэрэгслийн зөвлөмжийн жишээнд тохируулсан .

Тусдаа хэрэгслийн зөвлөмжийн өгөгдлийн шинж чанарууд

Дээр тайлбарласны дагуу өгөгдлийн шинж чанаруудыг ашиглан тус тусын зөвлөмжийн сонголтуудыг зааж өгч болно.

Арга зүй

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

Үйл явдал

Үйл явдлын төрөл Тодорхойлолт
show.bs.tooltip showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн.bs.хэрэгслийн зөвлөгөө Хэрэгслийн зөвлөмжийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
hide.bs.tooltip hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
hidden.bs.tooltip Хэрэгслийн зөвлөмжийг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
оруулсан.bs.хэрэгслийн зөвлөгөө show.bs.tooltipХэрэгслийн загвар DOM-д нэмэгдсэн үед энэ үйл явдал үйл явдлын дараа идэвхгүй болно.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Хоёрдогч мэдээллийг байрлуулах аливаа элементэд iPad дээрх шиг жижиг контент давхаргыг нэмнэ үү.

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

Plugin-ийн хамаарал

Popover-ууд нь таны Bootstrap-ийн хувилбарт гарын авлагыг оруулахыг шаарддаг.

Нэвтрэх функц

Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-д хамрагдах боломжтой тул та тэдгээрийг өөрөө эхлүүлэх хэрэгтэй гэсэн үг юм.

Хуудас дээрх бүх поповыг эхлүүлэх нэг арга бол тэдгээрийг data-toggleшинж чанараар нь сонгох явдал юм:

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

Товчлуурын бүлгүүд, оролтын бүлгүүд болон хүснэгтүүд дэх поповерууд нь тусгай тохиргоо шаарддаг

.btn-groupa эсвэл a доторх элементүүд .input-group, эсвэл хүснэгттэй холбоотой элементүүд ( <td>, <th>, <tr>, , <thead>, <tbody>, ) дээр поповеруудыг ашиглахдаа хүсээгүй сөрөг нөлөөллөөс (элемент улам томрох болон/ гэх мэт) зайлсхийхийн тулд (доор баримтжуулсан) <tfoot>сонголтыг зааж өгөх шаардлагатай. container: 'body'эсвэл поповыг асаахад дугуйрсан булангаа алддаг).

Нууцлагдмал элементүүд дээр поповеруудыг харуулахыг бүү оролд

$(...).popover('show')Зорилтот элемент байх үед дуудах нь поповыг display: none;буруу байрлуулахад хүргэдэг.

Идэвхгүй элементүүд дээрх поповерууд нь боодлын элементүүдийг шаарддаг

disabledэсвэл элементэд поповер нэмэхийн тулд .disabledэлементийг a дотор байрлуулж, оронд <div>нь поповерыг хэрэглэнэ <div>.

Олон мөрийн холбоосууд

Заримдаа та олон мөрийг ороосон холбоос дээр поповер нэмэхийг хүсдэг. Поповер залгаасын өгөгдмөл үйлдэл нь түүнийг хэвтээ болон босоо байдлаар голлуулах явдал юм. white-space: nowrap;Үүнээс зайлсхийхийн тулд зангуудаа нэмнэ үү .

Жишээ

Статик попопвер

Дөрвөн сонголт боломжтой: дээд, баруун, доод, зүүн зэрэгцүүлсэн.

Popover дээд

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Попов баруун

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Попвер ёроол

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Попов явсан

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Шууд демо

<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>ёстой бөгөөд мөн мөн шинж чанаруудыг агуулсан <button>байх ёстой .role="button"tabindex

<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 руу CSS бүдгэрүүлэх шилжилтийг ашиглана уу
сав мөр | худлаа худлаа

Тодорхой элементэд поповыг хавсаргана. Жишээ нь: container: 'body'. Энэ сонголт нь цонхны хэмжээг өөрчлөх үед поповерыг идэвхжүүлэгч элементээс холдохоос сэргийлж, баримт бичгийн урсгалд гох элементийн ойролцоо байрлуулах боломжийг олгодогоороо онцгой ач холбогдолтой юм.

агуулга мөр | функц ''

data-contentХэрэв шинж чанар байхгүй бол агуулгын өгөгдмөл утга .

Хэрэв функц өгөгдсөн thisбол поповер залгагдсан элементийн лавлагаагаар дуудагдах болно.

саатал тоо | обьект 0

Поповерыг харуулах, нуух саатал (ms) - гарын авлагын гох төрөлд хамаарахгүй

Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ

Объектын бүтэц нь:delay: { "show": 500, "hide": 100 }

html логик худлаа Popover руу HTML оруулна уу. Хэрэв худал бол jQuery-ийн textаргыг DOM-д контент оруулахад ашиглана. Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу.
байрлуулах мөр | функц 'зөв'

Поповерыг хэрхэн байрлуулах вэ - дээд | доод | зүүн | зөв | авто.
"Авто" гэж заасан үед энэ нь поповыг динамикаар өөрчлөх болно. Жишээлбэл, хэрэв байрлал нь "автоматаар зүүн" бол popover боломжтой бол зүүн тийш харагдана, эс бөгөөс баруун тийш харагдана.

Байршлыг тодорхойлоход функцийг ашиглах үед түүнийг эхний аргумент болгон popover DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. Контекстийг поповын thisжишээнд тохируулсан.

сонгогч мөр худлаа Хэрэв сонгогчийг өгсөн бол popover объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML контентыг поповер нэмэхэд ашигладаг. Үүнийг болон мэдээллийн жишээг үзнэ үү .
загвар мөр '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Popover үүсгэх үед ашиглах үндсэн HTML.

Поповерыг . title_.popover-title

Поповерыг . content_.popover-content

.arrowпоповын сум болно.

Хамгийн гадна талын боодлын элемент нь .popoverангитай байх ёстой.

гарчиг мөр | функц ''

titleХэрэв шинж чанар байхгүй бол гарчгийн өгөгдмөл утга .

Хэрэв функц өгөгдсөн thisбол поповер залгагдсан элементийн лавлагаагаар дуудагдах болно.

гох мөр "товших" Поповер хэрхэн идэвхждэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла. manualбусад өдөөгчтэй хослуулах боломжгүй.
харах хэсэг мөр | объект | функц {сонгогч: 'body', padding: 0}

Энэ элементийн хүрээнд поповыг хадгална. Жишээ нь: viewport: '#viewport'эсвэл{ "selector": "#viewport", "padding": 0 }

Хэрэв функц өгөгдсөн бол түүнийг цорын ганц аргумент болгон өдөөх элементийн DOM зангилаагаар дуудна. Контекстийг поповын thisжишээнд тохируулсан.

Хувь хүний ​​поповеруудад зориулсан өгөгдлийн шинж чанарууд

Дээр тайлбарласны дагуу өгөгдлийн шинж чанаруудыг ашиглан хувь хүний ​​поповеруудын сонголтыг зааж өгч болно.

Арга зүй

$().popover(options)

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

.popover('show')

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

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

.popover('hide')

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

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

.popover('toggle')

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

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

.popover('destroy')

Элементийн поповыг нууж, устгана. Төлөөлөгчийг ашигладаг поповеруудыг ( сонголтыг ашиглан үүсгэсэнselector ) удамшлын триггер элементүүд дээр тус тусад нь устгах боломжгүй.

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

Үйл явдал

Үйл явдлын төрөл Тодорхойлолт
show.bs.popover showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн.bs.popover Поповерыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
hide.bs.popover hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
hidden.bs.popover Поповерыг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилт дуусахыг хүлээх болно).
оруулсан.bs.popover show.bs.popoverDOM-д поповын загварыг нэмсэн тохиолдолд энэ үйл явдал идэвхгүй болно .
$('#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-ийн дохиоллын залгаас нь дохиоллын функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.

Үйл явдлын төрөл Тодорхойлолт
хаах.б.сэрэмжлүүлэг closeИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
хаалттай.б.сэрэмжлүүлэг Сэрэмжлүүлэг хаагдсан үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Товчлуурууд button.js

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

Хөтөч хоорондын нийцтэй байдал

Firefox нь хуудас ачаалагдах үед хэлбэрийн хяналтын төлөвийг (тахир дутуу болон шалгагдсан) хэвээр хадгалдаг . Үүнийг шийдвэрлэх арга бол ашиглах явдал autocomplete="off"юм. Mozilla алдаа # 654072- г үзнэ үү .

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

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

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

Та дуртай мужаа ашиглана уу!

Энэхүү жагсаалын үүднээс бид data-loading-textand -г ашиглаж $().button('loading')байгаа ч энэ нь таны ашиглаж болох цорын ганц төлөв биш юм. Доорх $().button(string)баримт бичигт энэ талаар дэлгэрэнгүй харна уу .

<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"Нэг товчлуур дээр сэлгэхийг идэвхжүүлэхийн тулд нэмэх .

Урьдчилан асаасан товчлуурууд хэрэгтэй.active баaria-pressed="true"

Урьдчилан асаасан товчлууруудын хувьд та .activeанги болон aria-pressed="true"шинж чанарыг buttonөөртөө нэмэх ёстой.

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

Checkbox / Радио

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

Урьдчилан сонгосон сонголтууд хэрэгтэй.active

Урьдчилан сонгосон сонголтуудын хувьд та .activeангиллыг оролтод labelөөрөө нэмэх ёстой.

Визуал шалгасан төлөв нь зөвхөн товшилтоор шинэчлэгддэг

Хэрэв шалгах хайрцагны товчлуурын тэмдэглэсэн төлөвийг товчлуур clickдээр үйл явдал үүсгэхгүйгээр (жишээлбэл , оролтын шинж чанарыг <input type="reset">тохируулах замаар эсвэл дамжуулан ) шинэчилсэн бол та өөрөө оролтын ангиллыг солих шаардлагатай болно.checked.activelabel

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

Буулгах collapse.js

Амархан сэлгэх үйлдэл хийхэд цөөн хэдэн анги ашигладаг уян хатан залгаас.

Plugin-ийн хамаарал

Буулгах нь шилжилтийн залгаасыг таны Bootstrap хувилбарт оруулахыг шаарддаг.

Жишээ

Ангийн өөрчлөлтөөр өөр элементийг харуулах, нуухын тулд доорх товчлууруудыг дарна уу:

  • .collapseагуулгыг нуудаг
  • .collapsingшилжилтийн үед хэрэглэнэ
  • .collapse.inагуулгыг харуулдаг

Та hrefатрибут бүхий холбоос эсвэл шинж чанар бүхий товчлуурыг ашиглаж болно data-target. Аль ч тохиолдолд data-toggle="collapse"шаардлагатай.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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>

Баян хуурын жишээ

Самбарын бүрэлдэхүүнтэй баян хуур үүсгэхийн тулд өгөгдмөл нуралтын горимыг сунгана.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 чоно сар officia aute, бус cupidatat skateboard dolor brunch. Хүнсний машин quinoa nesciunt laborum eiusmod. Brunch 3 чоно сарны tempor, sunt aliqua дээр нь шувуу тавьж далайн амьтан нэг гаралтай кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur яргачин дэд lomo. Leggings occaecat гар урлалын шар айрагны фермээс ширээнд хүртэл, түүхий жинсэн гоо зүйн синтетик синтетик nesciunt нь тэдний accusamus labore тогтвортой VHS-ийн талаар сонсоогүй байх.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 чоно сар officia aute, бус cupidatat skateboard dolor brunch. Хүнсний машин quinoa nesciunt laborum eiusmod. Brunch 3 чоно сарны tempor, sunt aliqua дээр нь шувуу тавьж далайн амьтан нэг гаралтай кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur яргачин дэд lomo. Leggings occaecat гар урлалын шар айрагны фермээс ширээнд хүртэл, түүхий жинсэн гоо зүйн синтетик синтетик nesciunt нь тэдний accusamus labore тогтвортой VHS-ийн талаар сонсоогүй байх.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 чоно сар officia aute, бус cupidatat skateboard dolor brunch. Хүнсний машин quinoa nesciunt laborum eiusmod. Brunch 3 чоно сарны tempor, sunt aliqua дээр нь шувуу тавьж далайн амьтан нэг гаралтай кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur яргачин дэд lomo. Leggings occaecat гар урлалын шар айрагны фермээс ширээнд хүртэл, түүхий жинсэн гоо зүйн синтетик синтетик nesciunt нь тэдний accusamus labore тогтвортой VHS-ийн талаар сонсоогүй байх.
<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.

  • Bootply
  • Нэг гажигтай
  • Хоёр дахь эрос

Өргөтгөх/буулгах хяналтыг ашиглах боломжтой болгох

aria-expandedХяналтын элемент дээр нэмэхээ мартуузай . Энэ шинж чанар нь дэлгэц уншигч болон үүнтэй төстэй туслах технологид эвхэгддэг элементийн одоогийн төлөвийг тодорхой тодорхойлдог. Хэрэв эвхэгддэг элемент нь анхдагчаар хаагдсан бол энэ нь гэсэн утгатай байх ёстой aria-expanded="false". Хэрэв та эвхэгддэг элементийг inанги ашиглан анхдагчаар нээлттэй байхаар тохируулсан бол тохируулна ууaria-expanded="true" ашиглан анхдагчаар нээлттэй байхаар тохируулсан бол оронд нь удирдлага дээр тохируулна уу. Энэ залгаас нь эвхэгддэг элемент нээгдсэн эсвэл хаагдсан эсэхээс хамаарч энэ шинж чанарыг автоматаар сэлгэх болно.

Нэмж хэлэхэд, хэрэв таны хяналтын элемент нэг эвхэгддэг элемент рүү чиглэж байгаа бол, өөрөөр хэлбэл data-targetатрибут нь сонгогч руу чиглэж байгаа бол та эвхэгддэг элементийг агуулсан хяналтын элементэд idнэмэлт атрибут нэмж болно . Орчин үеийн дэлгэц уншигчид болон үүнтэй төстэй туслах технологиуд нь хэрэглэгчдэд эвхэгддэг элемент рүү шууд шилжих ��эмэлт товчлолоор хангахын тулд энэ шинж чанарыг ашигладаг.aria-controlsid

Хэрэглээ

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

  • .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="".

Нэр төрөл анхдагч тайлбар
эцэг эх сонгогч худлаа Хэрэв сонгогчийг өгсөн бол энэ эвхэгддэг зүйлийг харуулах үед заасан эхийн доорх бүх эвхэгддэг элементүүд хаагдах болно. (уламжлалт баян хуурын зан үйлтэй төстэй - энэ нь panelангиас хамаарна)
солих логик үнэн Дуудлага хийх үед эвхэгддэг элементийг асаана

Арга зүй

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

Үйл явдлын төрөл Тодорхойлолт
харуулах.bs. нурах showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
харуулсан.bs.нууралт Уналтын элементийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
нуух.б. нурах hideАрга дуудагдсан үед энэ үйл явдал шууд идэвхждэг .
нуугдмал.б.нууралт Уналтын элементийг хэрэглэгчээс нуусан үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
$('#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-г байрлуулбал автоматаар зэрэгцүүлэн форматлах болно.

<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="".

Нэр төрөл анхдагч тайлбар
интервал тоо 5000 Тухайн зүйлийг автоматаар эргүүлэх хооронд саатах хугацаа. Хэрэв худал бол тойруулга автоматаар эргэхгүй.
түр зогсоох мөр | null "хулганах" Хэрэв гэж тохируулсан бол "hover"тойруулалтын дугуйг түр зогсоож, эргүүлэх хөдөлгөөнийг асаалттай mouseenterүргэлжлүүлнэ mouseleave. Хэрэв гэж тохируулсан бол nullтойруулуур дээр хулганыг түр зогсоохгүй.
боох логик үнэн Тойрог тасралтгүй эргэлдэх үү, эсвэл хатуу зогсолттой байх уу.
гар логик үнэн Тойрог гарны үйл явдалд хариу үйлдэл үзүүлэх эсэх.

Нэмэлт сонголтоор тойруулгыг objectэхлүүлж, эд зүйлсээр эргэлдэж эхэлнэ.

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

Зүүнээс баруун тийш тойруулгыг эргүүлнэ.

Тойрог эд зүйлсээр эргэлдэхийг зогсооно.

Тойрог тойргийг тодорхой хүрээ рүү эргэлддэг (массивтэй төстэй 0 дээр суурилсан).

Өмнөх зүйл рүү шилжих.

Дараагийн зүйл рүү шилжих.

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

Хоёр үйл явдал нь дараахь нэмэлт шинж чанартай байдаг.

  • direction: Тойрог гулсаж буй чиглэл ( "left"эсвэл "right").
  • relatedTarget: Идэвхтэй зүйл болгон байрлуулж буй DOM элемент.

Бүх тойруулгын үйл явдлуудыг тойруулгыг өөрөө (өөрөөр хэлбэл <div class="carousel">).

Үйл явдлын төрөл Тодорхойлолт
слайд.б.карусель slideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг.
гулсуур.б.карусель Тойрог гулсуурын шилжилтийг хийж дуусмагц энэ үйл явдал идэвхгүй болно.
$('#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".

Нэр төрөл анхдагч тайлбар
офсет тоо | функц | обьект 10 Гүйлгэх байрлалыг тооцоолохдоо дэлгэцээс ялгах пиксел. Хэрэв нэг тоо өгсөн бол офсетийг дээд ба доод чиглэлд хэрэглэнэ. Өвөрмөц, доод ба дээд офсетийг өгөхийн тулд зүгээр л объект offset: { top: 10 }эсвэл offset: { top: 10, bottom: 5 }. Офсетийг динамикаар тооцоолох шаардлагатай үед функцийг ашиглана уу.
зорилтот сонгогч | зангилаа | jQuery элемент windowобъект _ Хавсралтын зорилтот элементийг тодорхойлно.

Арга зүй

.affix(options)

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

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

.affix('checkPosition')

Холбогдох элементүүдийн хэмжээс, байрлал, гүйлгэх байрлалд үндэслэн нэмэлтийн төлөвийг дахин тооцоолно. , .affix, .affix-topболон .affix-bottomангиудыг шинэ төлөвийн дагуу хавсаргасан агуулгад нэмж эсвэл хасна. Хавсаргасан контент эсвэл зорилтот элементийн хэмжээсийг өөрчлөх бүрт энэ аргыг дуудах шаардлагатай бөгөөд ингэснээр хавсаргасан агуулгын зөв байрлалыг баталгаажуулна.

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

Үйл явдал

Bootstrap-ийн affix залгаас нь аффиксийн функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.

Үйл явдлын төрөл Тодорхойлолт
affix.bs.affiks Элементийг бэхлэхээс өмнө энэ үйл явдал шууд эхэлдэг.
хавсаргасан.б.заалт Элементийг хавсаргасны дараа энэ үйл явдал идэвхждэг.
affix-top.bs.affiks Энэ үйл явдал нь элементийг дээд талд наахаас өмнө шууд гарч ирдэг.
хавсаргасан-дээд.bs.affiks Элементийг дээд талд байрлуулсны дараа энэ үйл явдал идэвхждэг.
affix-bottom.bs.affiks Энэ үйл явдал нь элементийг доод талд байрлуулахаас өмнө шууд гарч ирдэг.
хавсаргасан-доод.bs.affiks Элементийг доод талд байрлуулсны дараа энэ үйл явдал идэвхждэг.