მიმოხილვა

ინდივიდუალური ან შედგენილი

დანამატები შეიძლება ჩაერთოს ინდივიდუალურად (Bootstrap-ის ინდივიდუალური *.jsფაილების გამოყენებით), ან ერთდროულად (გამოყენებით bootstrap.jsან შემცირებული bootstrap.min.js).

მონაცემთა ატრიბუტები

თქვენ შეგიძლიათ გამოიყენოთ Bootstrap-ის ყველა დანამატი მხოლოდ მარკირების API-ის საშუალებით JavaScript-ის ერთი ხაზის დაწერის გარეშე. ეს არის 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

არანაირი კონფლიქტი

ზოგჯერ საჭიროა Bootstrap დანამატების გამოყენება სხვა UI ჩარჩოებთან ერთად. ამ პირობებში, სახელთა სივრცის შეჯახება ზოგჯერ შეიძლება მოხდეს. თუ ეს მოხდება, შეგიძლიათ დაურეკოთ .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
})

სადეზინფექციო საშუალება

Tooltips და 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)
  }
})

ვერსიის ნომრები

Bootstrap-ის jQuery-ის თითოეული მოდულის ვერსიაზე წვდომა შესაძლებელია VERSIONმოდულის კონსტრუქტორის საკუთრების მეშვეობით. მაგალითად, ინსტრუმენტული მითითების მოდულისთვის:

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

არ არის სპეციალური ჩანაცვლება, როდესაც JavaScript გამორთულია

Bootstrap-ის დანამატები არ იბრუნებს განსაკუთრებით მოხდენილად, როდესაც JavaScript გამორთულია. თუ თქვენ აინტერესებთ მომხმარებლის გამოცდილება ამ შემთხვევაში, გამოიყენეთ <noscript>სიტუაციის ახსნა (და როგორ ხელახლა ჩართოთ JavaScript) თქვენს მომხმარებლებს და/ან დაამატეთ თქვენი საკუთარი სარეზერვო.

გადასვლები transition.js

გადასვლების შესახებ

მარტივი გადასვლის ეფექტებისთვის, ჩართეთ transition.jsერთხელ სხვა JS ფაილებთან ერთად. თუ თქვენ იყენებთ შედგენილ (ან მინიფიცირებულ) bootstrap.js, არ არის საჭირო ამის ჩართვა — ის უკვე არსებობს.

Რა არის შიგნით

Transition.js არის ძირითადი დამხმარე transitionEndმოვლენებისთვის, ასევე CSS გადასვლის ემულატორი. მას სხვა დანამატები იყენებენ CSS გადასვლის მხარდაჭერის შესამოწმებლად და ჩამოკიდებული გადასვლების დასაჭერად.

გადასვლების გამორთვა

გადასვლები შეიძლება გლობალურად გამორთოთ შემდეგი JavaScript სნიპეტის გამოყენებით, რომელიც უნდა მოდიოდეს ჩატვირთვის შემდეგ transition.js(ან bootstrap.jsან bootstrap.min.js, როგორც შეიძლება იყოს):

$.support.transition = false

მოდალები 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 -->

ცვალებადი მოდალური კონტენტი ტრიგერის ღილაკზე დაყრდნობით

გაქვთ რამოდენიმე ღილაკი, რომელიც ყველა ერთსა და იმავე მოდალს უშვებს, ოდნავ განსხვავებული შინაარსით? გამოიყენეთ event.relatedTargetდა HTML data-*ატრიბუტები (შესაძლოა jQuery- ის საშუალებით ), რათა შეიცვალოს მოდალის შინაარსი იმისდა მიხედვით, თუ რომელ ღილაკზე დააწკაპუნეთ. იხილეთ მოდალური მოვლენების დოკუმენტები დეტალებისთვის relatedTarget,

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

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

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

გამოყენება

მოდალური დანამატი ცვლის თქვენს ფარულ შინაარსს მოთხოვნისამებრ, მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. ის ასევე ემატება ნაგულისხმევი გადახვევის .modal-openქცევის <body>გადაფარვას და წარმოქმნის .modal-backdropდაწკაპუნების ზონას მოდალის გარეთ დაწკაპუნებისას ნაჩვენები მოდალების გაუქმებისთვის.

მონაცემთა ატრიბუტების მეშვეობით

გაააქტიურეთ მოდალი JavaScript-ის ჩაწერის გარეშე. დაყენებულია data-toggle="modal"კონტროლერის ელემენტზე, როგორიცაა ღილაკი, data-target="#foo"ან href="#foo"მიზნად ისახავს კონკრეტული მოდალის გადართვას.

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

JavaScript-ის საშუალებით

დარეკეთ მოდალს id- myModalით JavaScript-ის ერთი ხაზით:

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-backdrop="".

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

მეთოდები

.modal(options)

ააქტიურებს თქვენს შინაარსს, როგორც მოდალს. იღებს არასავალდებულო ვარიანტებს object.

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

.modal('toggle')

ხელით ცვლის მოდალს. უბრუნდება აბონენტს მოდალის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ shown.bs.modalან hidden.bs.modalმოვლენა მოხდება).

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

.modal('show')

ხელით ხსნის მოდალს. უბრუნდება აბონენტს მოდალის რეალურად ჩვენებამდე (ანუ shown.bs.modalმოვლენის დადგომამდე).

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

.modal('hide')

ხელით მალავს მოდალს. უბრუნდება აბონენტს მანამ, სანამ მოდალი ნამდვილად დამალული იქნება (ანუ hidden.bs.modalმოვლენის დადგომამდე).

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

.modal('handleUpdate')

ხელახლა არეგულირებს მოდალის პოზიციონირებას გადახვევის ზოლის დასაპირისპირებლად, თუ ის გამოჩნდება, რაც მოდალურ ნახტომს მარცხნივ ხდის.

საჭიროა მხოლოდ მაშინ, როდესაც მოდალის სიმაღლე იცვლება, სანამ ის ღიაა.

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

Ივენთი

Bootstrap-ის მოდალური კლასი ავლენს რამდენიმე მოვლენას მოდალურ ფუნქციონირებაში ჩასართავად.

ყველა მოდალური მოვლენა ისროლება თავად მოდალზე (ანუ ზე <div class="modal">).

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

ჩამოსაშლელი ჩამოსაშლელები. js

მაგალითები

დაამატეთ ჩამოსაშლელი მენიუები თითქმის ყველაფერში ამ მარტივი მოდულით, მათ შორის ნავიგატორი, ჩანართები და აბები.

ნავიბარის ფარგლებში

აბების ფარგლებში

გამოყენება

მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით ჩამოსაშლელი დანამატი გადართავს ფარულ შინაარსს (ჩამოშლელ მენიუებს) .openკლასის გადართვით მშობელი სიის ელემენტზე.

მობილურ მოწყობილობებზე, ჩამოსაშლელი მენიუს გახსნა ამატებს ჩამოსაშლელ .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's მშობლის ელემენტზე.

ყველა ჩამოსაშლელ მოვლენას აქვს relatedTargetთვისება, რომლის მნიშვნელობა არის გადართვის წამყვანი ელემენტი.

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

ScrollSpy scrollspy.js

მაგალითი ნავიბარში

ScrollSpy მოდული არის ნავი მიზნების ავტომატურად განახლებისთვის, გადახვევის პოზიციიდან გამომდინარე. გადაახვიეთ ნავიგაციის ზოლის ქვემოთ და უყურეთ აქტიური კლასის ცვლილებას. ასევე მონიშნული იქნება ჩამოსაშლელი ქვეპუნქტები.

გამოყენება

მოითხოვს შედარებით პოზიციონირებას

განხორციელების მეთოდის მიუხედავად, scrollspy მოითხოვს იმ position: relative;ელემენტის გამოყენებას, რომელსაც თქვენ ჯაშუშობთ. უმეტეს შემთხვევაში ეს არის <body>. როდესაც Scrollspying ელემენტების გარდა <body>, დარწმუნდით, რომ აქვს heightკომპლექტი და overflow-y: scroll;გამოიყენება.

მონაცემთა ატრიბუტების მეშვეობით

იმისათვის, რომ ადვილად დაამატოთ scrollspy ქცევა თქვენს ზედა ზოლის ნავიგაციაში, დაამატეთ data-spy="scroll"ელემენტი, რომელზეც გსურთ თვალთვალისთვის (ყველაზე ხშირად ეს იქნება <body>). შემდეგ დაამატეთ data-targetატრიბუტი ნებისმიერი Bootstrap .navკომპონენტის მშობელი ელემენტის ID-ით ან კლასით.

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;შემდეგ, დარეკეთ scrollspy-ს JavaScript-ით:

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

მეთოდები

.scrollspy('refresh')

როდესაც იყენებთ scrollspy-ს DOM-დან ელემენტების დამატებასთან ან ამოღებასთან ერთად, თქვენ უნდა გამოიძახოთ განახლების მეთოდი ასე:

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-offset="".

Ივენთი

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

გადართვადი ჩანართები tab.js

ჩანართების მაგალითი

დაამატეთ სწრაფი, დინამიური ჩანართის ფუნქციონალობა ადგილობრივი შინაარსის პანელის გადასასვლელად, თუნდაც ჩამოსაშლელი მენიუს საშუალებით. ჩადგმული ჩანართები არ არის მხარდაჭერილი.

გამოყენება

ჩანართის ჩანართების ჩართვა JavaScript-ის საშუალებით (თითოეული ჩანართი ინდივიდუალურად უნდა გააქტიურდეს):

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

თქვენ შეგიძლიათ გაააქტიუროთ ინდივიდუალური ჩანართები რამდენიმე გზით:

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

მარკირება

თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია JavaScript-ის დაწერის გარეშე უბრალოდ ელემენტის მითითებით data-toggle="tab"ან მასზე. და კლასების ჩანართზე data-toggle="pill"დამატება გამოიყენებს Bootstrap ჩანართის სტილს , ხოლო და კლასების დამატება გამოიყენებს აბების სტილს .navnav-tabsulnavnav-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ან სამიზნე. hrefზემოთ მოყვანილ მაგალითებში, ჩანართები არის <a>ატრიბუტებით data-toggle="tab".

.tab('show')

ირჩევს მოცემულ ჩანართს და აჩვენებს მის დაკავშირებულ შინაარსს. ნებისმიერი სხვა ჩანართი, რომელიც ადრე იყო არჩეული, გაუქმდება და მასთან დაკავშირებული შინაარსი იმალება. უბრუნდება აბონენტს ჩანართების პანელის რეალურად ჩვენებამდე (ანუ shown.bs.tabმოვლენის დადგომამდე).

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

Ივენთი

ახალი ჩანართის ჩვენებისას, მოვლენები ჩნდება შემდეგი თანმიმდევრობით:

1. hide.bs.tab(მიმდინარე აქტიურ ჩანართზე)
2. show.bs.tab(გამოსაჩენ ჩანართზე)
3. hidden.bs.tab(წინა აქტიურ ჩანართზე, იგივე რაც hide.bs.tabღონისძიებისთვის)
4. shown.bs.tab(ახლად აქტიურ ახლად ნაჩვენები ჩანართზე, იგივე რაც show.bs.tabღონისძიებისთვის)

თუ არცერთი ჩანართი არ იყო აქტიური, მაშინ hide.bs.tabდა hidden.bs.tabმოვლენები არ გაიხსნება.

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

ინსტრუმენტების რჩევები tooltip.js

შთაგონებულია ჯეისონ ფრეიმის მიერ დაწერილი შესანიშნავი jQuery.tipsy მოდულით; Tooltips არის განახლებული ვერსია, რომელიც არ ეყრდნობა სურათებს, იყენებს 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()
})

გამოყენება

Tooltip დანამატი წარმოქმნის შინაარსს და მარკირებას მოთხოვნისამებრ, და ნაგულისხმევად ათავსებს ინსტრუმენტების რჩევებს მათი ტრიგერის ელემენტის შემდეგ.

ჩართეთ ინსტრუმენტული მინიშნება JavaScript-ის საშუალებით:

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

მარკირება

ინსტრუმენტის მითითებისთვის საჭირო მარკირება მხოლოდ dataატრიბუტია და titleHTML ელემენტზე გსურთ გქონდეთ ინსტრუმენტული მინიშნება. ინსტრუმენტთა რჩევის გენერირებული მარკირება საკმაოდ მარტივია, თუმცა ის მოითხოვს პოზიციას (ნაგულისხმევად, დაყენებულიაtop დანამატის მიერ).

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

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-animation="".

მეთოდები

$().tooltip(options)

ამაგრებს ხელსაწყოების დამმუშავებელს ელემენტების კოლექციაზე.

.tooltip('show')

ავლენს ელემენტის ინსტრუმენტს. უბრუნდება აბონენტს ინსტრუმენტების მითითების რეალურად ჩვენებამდე (ანუ shown.bs.tooltipმოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად. ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.

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

.tooltip('hide')

მალავს ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტის მინიშნება რეალურად დამალული იქნება (ანუ ადრეhidden.bs.tooltip მოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.

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

.tooltip('toggle')

ცვლის ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტის მინიშნება რეალურად გამოჩნდება ან დამალული იქნებაshown.bs.tooltip ( ანუ, სანამ მოხდება hidden.bs.tooltipმოვლენა). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.

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

.tooltip('destroy')

მალავს და ანადგურებს ელემენტის ინსტრუმენტს. ინსტრუმენტების რჩევები, რომლებიც იყენებენ დელეგირებასselector (რომლებიც შექმნილია ოფციის გამოყენებით ) არ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.

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

Ივენთი

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

Popovers popover.js

დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის.

პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასდროს არ გამოჩნდება.

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

მაგალითები

სტატიკური პოპოვერი

ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული.

ცოცხალი დემო

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

ოთხი მიმართულება

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

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

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

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

გაუქმება შემდეგ დაწკაპუნებით

გამოიყენეთ focusტრიგერი პოპოვერების გასაუქმებლად მომხმარებლის შემდეგ დაწკაპუნებაზე.

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

გამოყენება

ჩართეთ პოპოვერები JavaScript-ით:

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

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-animation="".

მეთოდები

$().popover(options)

ახორციელებს პოპოვერების ინიციალიზებას ელემენტების კოლექციისთვის.

.popover('show')

ავლენს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე (ანუ shown.bs.popoverმოვლენის დადგომამდე). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად. პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასდროს არ გამოჩნდება.

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

.popover('hide')

მალავს ელემენტის პოპოვერს. უბრუნდება აბონენტს მანამ, სანამ პოპოვერი რეალურად დამალული იქნება (ანუ ადრეhidden.bs.popover მოვლენის დადგომამდე). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად.

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

.popover('toggle')

ცვლის ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ shown.bs.popoverან hidden.bs.popoverმოვლენა მოხდება). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად.

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

.popover('destroy')

მალავს და ანადგურებს ელემენტის პოპოვერს. პოპოვერები, რომლებიც იყენებენ დელეგირებას (რომლებიც იქმნება ოფციის გამოყენებით ) selectorარ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.

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

Ივენთი

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

გაფრთხილების შეტყობინებები alert.js

გაფრთხილების მაგალითები

დაამატეთ გაუქმების ფუნქცია ყველა გაფრთხილების შეტყობინებას ამ მოდულით.

ღილაკის გამოყენებისას .close, ის უნდა იყოს ღილაკის პირველი შვილი .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…
})

ღილაკების ღილაკი .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>

ჩამრთველი/რადიო

დაამატეთ ჩამრთველ ველს ან რადიო შეყვანებს, რათა ჩართოთ მათი შესაბამისი სტილის გადართვა 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 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-ის შეცვლა .list-groups-ით.

გამოყენება

კოლაფსის დანამატი იყენებს რამდენიმე კლასს მძიმე აწევისთვის:

• .collapseმალავს შინაარსს
• .collapse.inაჩვენებს შინაარსს
• .collapsingემატება გადასვლის დაწყებისას და ამოღებულია როცა დასრულდება

ამ კლასების ნახვა შეგიძლიათ component-animations.less.

მონაცემთა ატრიბუტების მეშვეობით

უბრალოდ დაამატეთ data-toggle="collapse"და a data-targetელემენტს, რათა ავტომატურად მიენიჭოს კონტროლი დასაკეც ელემენტს. ატრიბუტი იღებს CSS ამომრჩეველს data-targetკოლაფსის გამოსაყენებლად. დარწმუნდით, რომ დაამატეთ კლასი 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…
})

კარუსელი კარუსელი .js

სლაიდშოუს კომპონენტი ელემენტებში ველოსიპედით გადასაადგილებლად, როგორიცაა კარუსელი. ჩადგმული კარუსელები მხარდაჭერილი არ არის.

მაგალითები

წინა შემდეგი

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

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

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

არჩევითი წარწერები

დაამატეთ სუბტიტრები თქვენს სლაიდებს მარტივად .carousel-captionნებისმიერი ელემენტის ფარგლებში .item. მოათავსეთ თითქმის ნებისმიერი არასავალდებულო HTML იქ და ის ავტომატურად გასწორდება და ფორმატირდება.

პირველი სლაიდის ეტიკეტი

Nulla vitae elit libero, pharetra augue mollis interdum.

მეორე სლაიდის ეტიკეტი

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

მესამე სლაიდის ეტიკეტი

ეს არის commodo cursus magna, vel scelerisque nisl consectetur.

წინა შემდეგი

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

გამოყენება

მრავალი კარუსელი

კარუსელი მოითხოვს idგარე კონტეინერზე (the .carousel) გამოყენებას კარუსელის კონტროლის სწორად ფუნქციონირებისთვის. რამდენიმე კარუსელის დამატებისას ან კარუსელის შეცვლისას idაუცილებლად განაახლეთ შესაბამისი კონტროლი.

მონაცემთა ატრიბუტების მეშვეობით

გამოიყენეთ მონაცემთა ატრიბუტები კარუსელის პოზიციის მარტივად გასაკონტროლებლად. data-slideიღებს საკვანძო სიტყვებს prevან next, რომელიც ცვლის სლაიდის პოზიციას მის ამჟამინდელ პოზიციასთან შედარებით. ალტერნატიულად, გამოიყენეთ data-slide-toნედლი სლაიდის ინდექსის კარუსელში გადასაცემად data-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;. ქვენავიგაცია მარჯვნივ არის affix მოდულის ცოცხალი დემო ვერსია.

გამოყენება

გამოიყენეთ აფიქსის დანამატი მონაცემთა ატრიბუტების საშუალებით ან ხელით თქვენი JavaScript-ით.ორივე შემთხვევაში, თქვენ უნდა მიაწოდოთ CSS თქვენი დამაგრებული შინაარსის პოზიციონირებისა და სიგანისთვის.

შენიშვნა: არ გამოიყენოთ აფიქსის დანამატი ელემენტზე, რომელიც შეიცავს შედარებით განლაგებულ ელემენტს, როგორიცაა გამოყვანილი ან აწეული სვეტი, Safari-ის რენდერის შეცდომის გამო .

პოზიციონირება 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;. დანამატი იყენებს მონაცემთა ატრიბუტს ან 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-ის აფიქსის დანამატი ავლენს რამდენიმე მოვლენას აფიქსის ფუნქციონირებაში ჩასართავად.