Ikuspegi orokorra

Banaka edo konpilatua

Pluginak banan-banan sar daitezke (Bootstrap-en fitxategi indibidualak erabiliz *.js), edo aldi berean ( bootstrap.jsedo minifikatua erabiliz bootstrap.min.js).

Datu-atributuak

Bootstrap plugin guztiak erabil ditzakezu markatze APIaren bidez soilik JavaScript lerro bakar bat idatzi gabe. Hau Bootstrap-en lehen mailako APIa da eta zure lehen kontua izan beharko litzateke plugin bat erabiltzean.

Hori bai, zenbait egoeratan funtzionalitate hori desaktibatzea komenigarria izan daiteke. Hori dela eta, datu-atributuaren APIa desgaitzeko gaitasuna ere eskaintzen dugu , izenekin tartekatuta dagoen dokumentuko gertaera guztiak deslotuz data-api. Honela dirudi:

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

Bestela, plugin zehatz bat bideratzeko, gehitu pluginaren izena izen-espazio gisa, datu-api izen-espazioarekin batera honela:

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

API programatikoa

Gainera, Bootstrap plugin guztiak JavaScript APIaren bidez soilik erabili ahal izango dituzula uste dugu. API publiko guztiak metodo bakarrak eta kateagarriak dira, eta egindako bilduma itzultzen dute.

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

Metodo guztiek aukerako aukera-objektu bat onartu beharko lukete, metodo jakin bati zuzendutako kate bat edo ezer ez (portaera lehenetsia duen plugin bat abiarazten duena):

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

Plugin bakoitzak bere eraikitzaile gordina ere erakusten du Constructorpropietate batean: $.fn.popover.Constructor. Plugin-instantzia jakin bat lortu nahi baduzu, eskuratu zuzenean elementu batetik: $('[rel="popover"]').data('popover').

Ezarpen lehenetsiak

Plugin baten ezarpen lehenetsiak alda ditzakezu pluginaren Constructor.DEFAULTSobjektua aldatuz:

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

Gatazkarik ez

Batzuetan beharrezkoa da Bootstrap pluginak beste UI esparru batzuekin erabiltzea. Egoera horietan, noizean behin izen-espazioen talkak gerta daitezke. Hori gertatzen bada, .noConflictbalioa berreskuratu nahi duzun pluginera dei dezakezu.

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

Gertaerak

Bootstrap-ek plugin gehienen ekintza berezietarako gertaera pertsonalizatuak eskaintzen ditu. Orokorrean, mugagabea eta iraganeko partizipio formakoak dira, non infinitiboa (adib. show) gertaera baten hasieran abiarazten den eta bere iraganeko partizipioaren forma (adib. shown) ekintza bat amaitzean abiarazten den.

3.0.0-tik aurrera, Bootstrap-eko gertaera guztiak izen-tartea daude.

Infinitiboko gertaera guztiek preventDefaultfuntzionaltasuna ematen dute. Horrek ekintza baten exekuzioa hasi baino lehen gelditzeko gaitasuna ematen du.

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

Higienizatzailea

Tooltips eta Popovers-ek gure integratutako desinfektatzailea erabiltzen dute HTML onartzen duten aukerak desinfektatzeko.

Balio lehenetsia whiteListhonako hau da:

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: []
}

Lehenetsi honi balio berriak gehitu nahi badituzu whiteList, hau egin dezakezu:

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)

Gure desinfektatzailea saihestu nahi baduzu liburutegi dedikatu bat erabiltzea nahiago duzulako, adibidez DOMPurify , honako hau egin beharko zenuke:

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

Bertsio zenbakiak

VERSIONBootstrap-en jQuery plugin bakoitzaren bertsioa pluginaren eraikitzailearen jabetzaren bidez sar daiteke . Adibidez, tooltip pluginerako:

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

Ez dago atzerabide berezirik JavaScript desgaituta dagoenean

Bootstrap-en pluginak ez dira bereziki dotoretasunez jaisten JavaScript desgaituta dagoenean. Kasu honetan erabiltzailearen esperientzia axola bazaizu, erabili <noscript>egoera azaltzeko (eta JavaScript berriro nola gaitu) zure erabiltzaileei eta/edo gehitzeko zure ordezko pertsonalizatuak.

Trantsizioak transition.js

Trantsizioei buruz

Trantsizio efektu errazetarako, sartu transition.jsbehin beste JS fitxategiekin batera. Konpilatua (edo txikitua) erabiltzen ari bazara bootstrap.js, ez dago hau sartu beharrik; dagoeneko hor dago.

Zer dago barruan

Transition.js gertaeren oinarrizko laguntzailea da transitionEnd, baita CSS trantsizio emuladorea ere. Beste pluginek CSS trantsizio-laguntza egiaztatzeko eta zintzilik dauden trantsizioak harrapatzeko erabiltzen dute.

Trantsizioak desgaitzea

Trantsizioak orokorrean desgaitu daitezke JavaScript zati hau erabiliz, kargatu ondoren transition.js(edo bootstrap.jsedo bootstrap.min.js, hala badagokio) etorri behar duena:

$.support.transition = false

Modalak modal.js

Modalak errazak dira, baina malguak, elkarrizketa-abisuak behar diren gutxieneko funtzionaltasunekin eta lehenespen adimendunekin.

HTML5-ek bere semantika definitzen duen moduan, autofocusHTML atributuak ez du eraginik Bootstrap modaletan. Efektu bera lortzeko, erabili JavaScript pertsonalizatu batzuk:

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

Adibideak

Adibide estatikoa

Goiburua, gorputza eta oinean ekintza multzoa dituen errendatutako modal bat.

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

Zuzeneko demoa

Aldatu modal bat JavaScript bidez, beheko botoian klik eginez. Behera lerratu eta orriaren goialdetik lausotuko da.

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

Aukerako neurriak

Modalek aukerako bi tamaina dituzte, modifikatzaile klaseen bidez erabilgarri .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>

Kendu animazioa

Ikusteko lausotu beharrean agertzen diren modaletarako, kendu .fadeklasea marka modaletik.

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

Sare sistema erabiliz

Bootstrap grid sistema modal baten barruan aprobetxatzeko, habia .rows barruan .modal-bodyeta erabili sareko sistema normal klaseak.

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

Abiarazte botoian oinarritutako eduki modal aldakorra

Modal bera abiarazten duten botoi mordoa al dituzu, eduki apur bat desberdinekin? Erabili event.relatedTargeteta HTML data-*atributuak (baliteke jQuery bidez ) modalaren edukia aldatzeko, klikatu den botoiaren arabera. Ikusi Modal Events dokumentuak buruzko xehetasunak lortzeko 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)
})

Erabilera

Plugin modalak zure ezkutuko edukia aldatzen du eskaeraren arabera, datu-atributuen edo JavaScript bidez. Era berean, korritze-portaera lehenetsia gainidazteko gehitzen .modal-opendu eta klik-eremu bat sortzen du, erakutsitako modalak baztertzeko, modaletik kanpo sakatzean.<body>.modal-backdrop

Datu-atributuen bidez

Aktibatu modal bat JavaScript idatzi gabe. Ezarri data-toggle="modal"kontrolagailu-elementu batean, botoi batean adibidez, data-target="#foo"edo href="#foo"aktibatzeko modal zehatz bat bideratzeko.

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

JavaScript bidez

Deitu id duen modal myModalbat JavaScript lerro bakar batekin:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-backdrop="".

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

Metodoak

.modal(options)

Zure edukia modal gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

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

.modal('toggle')

Modal bat eskuz aldatzen du. Deitzaileari itzultzen zaio modala benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.modaledo hidden.bs.modalgertaera gertatu baino lehen).

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

.modal('show')

Eskuz modal bat irekitzen du. Deitzaileari itzultzen zaio modala benetan erakutsi aurretik (hau da, shown.bs.modalgertaera gertatu baino lehen).

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

.modal('hide')

Eskuz ezkutatzen du modal bat. Deitzaileari itzultzen zaio modala benetan ezkutatu aurretik (hau da, hidden.bs.modalgertaera gertatu baino lehen).

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

.modal('handleUpdate')

Modalaren kokapena berregokitzen du korritze-barra bati aurre egiteko, bat agertuko balitz, modalak ezkerrera salto egingo luke.

Zabalik dagoen bitartean modalaren altuera aldatzen denean bakarrik behar da.

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

Gertaerak

Bootstrap-en klase modalak funtzionalitate modalean konektatzeko gertaera batzuk erakusten ditu.

Gertaera modal guztiak modalean bertan jaurtitzen dira (hau da, <div class="modal">).

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

Goitibeherak dropdown.js

Adibideak

Gehitu goitibeherako menuak plugin sinple honekin ia edozertara, nabigazio-barra, fitxak eta pilulak barne.

Nabigazio barra baten barruan

Pilulen barruan

Erabilera

Datu-atributuen edo JavaScript-en bidez, goitibeherako pluginak ezkutuko edukia (goigabeko menuak) txandakatzen du .open, gurasoen zerrendako elementuan klasea aldatuz.

Gailu mugikorretan, goitibeherako bat irekitzeak ukipen .dropdown-backdrop-eremu gisa gehitzen du goitibeherako menuak ixteko menutik kanpo sakatzean, iOS-en laguntza egokia izateko baldintza bat. Horrek esan nahi du goitibeherako menu ireki batetik beste goitibeherako menu batera aldatzeko mugikorrean ukitu gehigarria behar dela.

Oharra: data-toggle="dropdown"Atributua aplikazio mailan goitibeherako menuak ixteko oinarritzen da; beraz, komeni da beti erabiltzea.

Datu-atributuen bidez

Gehitu data-toggle="dropdown"esteka edo botoi bati goitibeherako aukera aldatzeko.

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

URLak esteka-botoiekin osorik mantentzeko, erabili data-targetatributua 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 bidez

Deitu goitibehetara JavaScript bidez:

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

Aukerak

Bat ere ez

Metodoak

$().dropdown('toggle')

Nabigazio-barra edo fitxen nabigazio baten goitibeherako menua aldatzen du.

Gertaerak

Goitibeherako gertaera guztiak .dropdown-menu' ren elementu nagusian abiarazten dira.

Goitibeherako gertaera guztiek relatedTargetpropietate bat dute, zeinaren balioa txandakatzeko aingura-elementua da.

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

ScrollSpy scrollspy.js

Adibidea nabigazio barran

ScrollSpy plugina nabigazio-helburuak automatikoki eguneratzeko da, korritze-posizioan oinarrituta. Joan nabigazio-barraren azpiko eremua eta ikusi klase aktiboaren aldaketa. Goitibeherako azpielementuak ere nabarmenduko dira.

Erabilera

Kokapen erlatiboa eskatzen du

position: relative;Ez dio axola inplementazio-metodoa, scrollspy -k zelatatzen ari zaren elementua erabiltzea eskatzen du . Kasu gehienetan hau da <body>. Scrollspying-a ez den elementuetan <body>, ziurtatu heightmultzo bat duzula eta overflow-y: scroll;aplikatuta.

Datu-atributuen bidez

Scrollspy portaera zure goiko barrako nabigazioan erraz gehitzeko, gehitu data-spy="scroll"espioi nahi duzun elementuari (normalean hau izango litzateke <body>). Ondoren, gehitu atributua Bootstrap-eko edozein osagairen data-targetelementu nagusiaren ID edo klasearekin ..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 bidez

Zure CSS gehitu ondoren position: relative;, deitu scrollspy JavaScript bidez:

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

Metodoak

.scrollspy('refresh')

Scrollspy DOMetik elementuak gehitzearekin edo kentzearekin batera erabiltzean, freskatzeko metodora deitu beharko duzu honela:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-offset="".

Gertaerak

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

Tab.js txandaka daitezkeen fitxak

Adibide fitxak

Gehitu fitxaren funtzionalitate azkarra eta dinamikoa tokiko edukiaren paneletatik igarotzeko, baita goitibeherako menuen bidez ere. Ez dira habiaratutako fitxak onartzen.

Erabilera

Gaitu tabulatzeko fitxak JavaScript bidez (fitxa bakoitza banan-banan aktibatu behar da):

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

Banakako fitxak hainbat modutara aktibatu ditzakezu:

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

Markatzea

Fitxa edo pilulen nabigazioa aktiba dezakezu JavaScript idatzi gabe data-toggle="tab"edo data-toggle="pill"elementu batean zehaztuta. naveta nav-tabsklaseak fitxara gehitzeak Bootstrap fitxaren estiloaul aplikatuko du , eta eta klaseak gehitzeak pilula estiloa aplikatuko du .navnav-pills

<div>

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

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

</div>

Desagertzeko efektua

Fitxak desagertzeko, gehitu .fadebakoitzari .tab-pane. Lehen fitxa-panelak .inhasierako edukia ikusgai jarri behar du.

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

Metodoak

$().tab

Fitxa-elementu eta eduki-edukiontzi bat aktibatzen du. Tabulak DOM-eko edukiontzi-nodo bat izan behar data-targetdu href. Goiko adibideetan, fitxak atributuak <a>dituzten s-ak dira.data-toggle="tab"

.tab('show')

Emandako fitxa hautatzen du eta hari lotutako edukia erakusten du. Aurretik hautatutako beste edozein fitxa hautatu gabe geratzen da eta hari lotutako edukia ezkutatu egiten da. Deitzen duenari itzultzen zaio fitxa-panela benetan erakutsi aurretik (hau da, shown.bs.tabgertaera gertatu baino lehen).

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

Gertaerak

Fitxa berri bat erakustean, gertaerak ordena honetan piztuko dira:

1. hide.bs.tab(uneko fitxa aktiboan)
2. show.bs.tab(Erakutsi beharreko fitxan)
3. hidden.bs.tab(aurreko fitxa aktiboan, ekitaldiaren berdina hide.bs.tab)
4. shown.bs.tab(Aktibatu berri den fitxan, ekitaldiaren berdina show.bs.tab)

Fitxarik ez bazegoen aktibo, orduan hide.bs.tabeta hidden.bs.tabgertaerak ez dira abiaraziko.

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

Tooltip.js tresna-informazioak

Jason Frame-k idatzitako jQuery.tipsy plugin bikainean inspiratuta; Tresna-aholkuak bertsio eguneratu bat dira, irudietan oinarritzen ez direnak, CSS3 animazioetarako eta datu-atributuak tokiko izenburuak biltegiratzeko.

Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.

Adibideak

Pasatu ondoko esteken gainean tresna-aholkuak ikusteko:

Tresna-informazio estatikoa

Lau aukera daude eskuragarri: goiko, eskuineko, beheko eta ezkerreko lerrokatuta.

Lau norabide

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

Erabilera

Tooltip pluginak edukia eta markak sortzen ditu eskaeraren arabera, eta, modu lehenetsian, tresna-aholkuak jartzen ditu abiarazte-elementuaren ondoren.

Aktibatu tresna-informazioa JavaScript bidez:

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

Markatzea

Tresna-informazio baterako beharrezkoa den marka dataatributu bat baino ez da eta titletresna-aholkua izan nahi duzun HTML elementuan. Tresna-informazio baten markaketa sinple samarra da, nahiz eta posizio bat behar duen (lehenespenez, toppluginak ezarrita).

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-animation="".

Metodoak

$().tooltip(options)

Elementu bilduma bati tresna-informazio-kudeatzailea eransten dio.

.tooltip('show')

Elementu baten argibidea erakusten du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi aurretik (hau da, shown.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da. Luzera zeroko tituluak dituzten tresna-aholkuak ez dira inoiz bistaratzen.

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

.tooltip('hide')

Elementu baten argibidea ezkutatzen du. Tresna-aholkua benetan ezkutatu aurretik itzultzen da deitzaileari (hau dahidden.bs.tooltip gertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.

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

.tooltip('toggle')

Elementu baten tresna-informazioa aktibatzen du. Deitzaileari itzultzen zaio tresna-informazioa benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.tooltipedo hidden.bs.tooltipgertaera gertatu baino lehen). Hau tresna-informazioaren "eskuz" abiaraztekotzat hartzen da.

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

.tooltip('destroy')

Elementu baten informazioa ezkutatu eta suntsitzen du. Ordezkapena erabiltzen duten tresna- informazioak ( selectoraukera erabiliz sortzen direnak ) ezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.

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

Gertaerak

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

Popovers popover.js

Gehitu edukiaren gainjartze txikiak, iPad-en bezalakoak, bigarren mailako informazioa gordetzeko edozein elementuri.

Izenburua eta edukia zero-luzera duten popover-ak ez dira inoiz bistaratzen.

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

Adibideak

Popover estatikoa

Lau aukera daude eskuragarri: goiko, eskuineko, beheko eta ezkerreko lerrokatuta.

Zuzeneko demoa

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

Lau norabide

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

Baztertu hurrengo klikan

Erabili focusabiarazlea erabiltzaileak egiten duen hurrengo klikean popover-ak baztertzeko.

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

Erabilera

Gaitu popover-ak JavaScript bidez:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-animation="".

Metodoak

$().popover(options)

Elementu bilduma baterako popover-ak hasieratzen ditu.

.popover('show')

Elementu baten popover-a agerian uzten du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi aurretik (hau da, shown.bs.popovergertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztekotzat hartzen da. Izenburua eta edukia zero-luzera duten popover-ak ez dira inoiz bistaratzen.

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

.popover('hide')

Elementu baten popover-a ezkutatzen du. Deitzen duenari itzultzen zaio popover-a benetan ezkutatu aurretik (hau da, hidden.bs.popovergertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztekotzat hartzen da.

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

.popover('toggle')

Elementu baten popover-a aktibatzen du. Deitzen duenari itzultzen zaio popover-a benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.popoveredo hidden.bs.popovergertaera gertatu baino lehen). Hau popover-aren "eskuz" abiaraztekotzat hartzen da.

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

.popover('destroy')

Elementu baten popover-a ezkutatu eta suntsitzen du. Delegazioa erabiltzen duten popover-ak (aukera erabiliz sortzen direnak ) selectorezin dira banan-banan suntsitu ondorengo abiarazle-elementuetan.

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

Gertaerak

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

Alerta-mezuak alert.js

Adibide alertak

Gehitu baztertzeko funtzionaltasuna plugin honekin alerta-mezu guztiei.

Botoi bat erabiltzean .close, lehen seme-alaba izan behar du .alert-dismissibleeta ezin da testu-edukirik agertu aurretik markatzean.

Erabilera

Gehitu data-dismiss="alert"ixteko botoia automatikoki alerta ixteko funtzionaltasuna emateko. Alerta bat ixteak DOMetik kentzen du.

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

Zure alertak animazioa erabil dezaten ixtean, ziurtatu .fadeeta .inklaseak dagoeneko aplikatuta dituztela.

Metodoak

$().alert()

data-dismiss="alert"Atributua duten ondorengo elementuetan klik-gertaerak entzuten dituen alerta bat egiten du . (Ez da beharrezkoa data-api-ren hasierako automatikoki erabiltzean.)

$().alert('close')

Alerta bat ixten du DOMetik kenduta. Elementuan .fadeeta .inklaseak badaude, alerta desagertuko da kendu aurretik.

Gertaerak

Bootstrap-en alerta-pluginak gertaera batzuk erakusten ditu alerta-funtzionalitatean konektatzeko.

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

Botoiak button.js

Egin gehiago botoiekin. Kontrolatu botoien egoerak edo sortu botoi-taldeak tresna-barrak bezalako osagai gehiagotarako.

Estatutua

Gehitu data-loading-text="Loading..."botoi batean kargatzeko egoera erabiltzeko.

Ezaugarri hau zaharkituta dago v3.3.5etik eta v4an kendu da.

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

Toggle bakarra

Gehitu data-toggle="button"botoi bakarrean txandakatzea aktibatzeko.

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

Kontrol-laukia / Irratia

Gehitu kontrol data-toggle="buttons"- .btn-grouplaukia edo irrati-sarrerak dagozkien estiloetan aldatzeko gaitzeko.

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

Metodoak

$().button('toggle')

Bultza-egoera aktibatzen du. Botoiari aktibatuta dagoen itxura ematen dio.

$().button('reset')

Botoiaren egoera berrezartzen du - testua jatorrizko testuarekin aldatzen du. Metodo hau asinkronoa da eta berrezarpena benetan amaitu baino lehen itzultzen da.

$().button(string)

Testua definitutako edozein testu-egoerara aldatzen du.

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

Tolestu collapse.js

Plugin malgua, klase gutxi batzuk erabiltzen dituena aldatzeko portaera errazetarako.

Adibidea

Egin klik beheko botoietan klase aldaketen bidez beste elementu bat erakusteko eta ezkutatzeko:

• .collapseedukia ezkutatzen du
• .collapsingtrantsizioetan aplikatzen da
• .collapse.inedukia erakusten du

Atributua duen esteka bat erabil dezakezu href, edo atributua duen botoi bat data-target. Bi kasuetan, data-toggle="collapse"beharrezkoa da.

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

Akordeoiaren adibidea

Hedatu tolestearen portaera lehenetsia paneleko osagaiarekin akordeoia sortzeko.

<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-rekin trukatzea ere posible da .list-group.

Erabilera

Tolestu pluginak klase batzuk erabiltzen ditu astunak kudeatzeko:

• .collapseedukia ezkutatzen du
• .collapse.inedukia erakusten du
• .collapsingtrantsizioa hasten denean gehitzen da, eta amaitzean kentzen da

Klase hauek atalean aurki daitezke component-animations.less.

Datu-atributuen bidez

Gehitu data-toggle="collapse"eta a data-targetelementuari elementu tolesgarri baten kontrola automatikoki esleitzeko. Atributuak CSS hautatzaile bat onartzen du data-targetkolapsoa aplikatzeko. Ziurtatu klasea gehitzen duzula collapseelementu tolesgarrian. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria in.

Akordeoi antzeko taldeen kudeaketa kontrol tolesgarri bati gehitzeko, gehitu datu-atributua data-parent="#selector". Ikusi demoa hau martxan ikusteko.

JavaScript bidez

Gaitu eskuz honekin:

$('.collapse').collapse()

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-parent="".

Metodoak

.collapse(options)

Zure edukia elementu tolesgarri gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

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

.collapse('toggle')

Elementu tolesgarri bat bistaratzen edo ezkutuan jartzen du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi edo ezkutatu aurretik (hau da, shown.bs.collapseedo hidden.bs.collapsegertaera gertatu baino lehen).

.collapse('show')

Elementu tolesgarria erakusten du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan erakutsi aurretik (hau da, shown.bs.collapsegertaera gertatu baino lehen).

.collapse('hide')

Elementu tolesgarri bat ezkutatzen du. Deitzen duenari itzultzen zaio elementu tolesgarria benetan ezkutatu aurretik (hau da, hidden.bs.collapsegertaera gertatu baino lehen).

Gertaerak

Bootstrap-en kolapso-klaseak kolapso-funtzionalitatean konektatzeko gertaera batzuk erakusten ditu.

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

Carousel carousel.js

Elementuetan zehar bizikletaz ibiltzeko diapositiba-aurkezpenaren osagaia, karrusel bat bezala. Ez dira habiaratutako karruselak onartzen.

Adibideak

Aurrekoa Hurrengoa

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

Aukerako epigrafeak

Gehitu erraz azpitituluak zure diapositibetan .carousel-captionedozein elementurekin .item. Jarri hemen hautazko edozein HTML eta automatikoki lerrokatu eta formateatu egingo da.

Lehenengo diapositiba-etiketa

Nulla vitae elit libero, a pharetra augue mollis interdum.

Bigarren diapositiba etiketa

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hirugarren diapositiba-etiketa

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Aurrekoa Hurrengoa

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

Erabilera

Karrusel anitz

idKarruselek kanpoaldeko edukiontzi bat erabiltzea eskatzen dute .carouselkarruselaren kontrolak behar bezala funtzionatzeko. Karrusel bat gehitzean edo karrusel bat aldatzean id, ziurtatu dagozkion kontrolak eguneratzen dituzula.

Datu-atributuen bidez

Erabili datu-atributuak karruselaren posizioa erraz kontrolatzeko. data-slidegako-hitzak onartzen ditu prevedo next, eta horrek diapositiba-posizioa bere uneko posizioarekiko aldatzen du. Bestela, erabili data-slide-todiapositiba-indize gordina karruselara pasatzeko data-slide-to="2", eta horrek diapositiba-posizioa indize jakin batera aldatzen du 0.

data-ride="carousel"Atributua orria kargatzen denetik hasita karrusel bat animazio gisa markatzeko erabiltzen da . Ezin da erabili karrusel beraren Javascript-en hasiera esplizituarekin batera (erredundantea eta beharrezkoa ez dena).

JavaScript bidez

Deitu karuselera eskuz honekin:

$('.carousel').carousel()

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-interval="".

Metodoak

.carousel(options)

Karrusela hautazko aukera batekin hasieratzen du objecteta elementuen bidez bizikletaz hasten da.

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

.carousel('cycle')

Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.

.carousel('pause')

Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.

.carousel(number)

Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera).

.carousel('prev')

Zikloak aurreko elementura.

.carousel('next')

Zikloak hurrengo elementura.

Gertaerak

Bootstrap-en karrusel klaseak bi gertaera erakusten ditu karruselaren funtzionalitatera konektatzeko.

Bi ekitaldiek propietate gehigarri hauek dituzte:

• direction: Karrusela irristatzen den norabidea ( "left"edo "right").
• relatedTarget: elementu aktibo gisa lekuan sartzen ari den DOM elementua.

Karruselaren gertaera guztiak karruselaren aurka jaurtitzen dira (hau da, <div class="carousel">).

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

Erantzi affix.js

Adibidea

Affix plugina aktibatu position: fixed;eta desaktibatu egiten da, aurkitutako efektua imitatuz position: sticky;. Eskuineko azpinabigazioa affix pluginaren zuzeneko demo bat da.

Erabilera

Erabili affix plugina datu-atributuen bidez edo eskuz zure JavaScript propioarekin. Bi egoeretan, CSS eman behar duzu erantsitako edukiaren kokapenerako eta zabalerarako.

Oharra: ez erabili afixa-plugin-a nahiko kokatutako elementu batean dagoen elementu batean, hala nola, tiratutako edo bultzatutako zutabe batean, Safari errendatzeko akats bat dela eta .

CSS bidez kokatzea

Afixa-pluginak hiru klaseen artean aldatzen du, bakoitzak egoera jakin bat adierazten du: .affix, .affix-top, eta .affix-bottom. Estiloak eman behar dituzu, position: fixed;on izan ezik .affix, klase hauetarako zuk zeuk (plugin honen independentea) benetako posizioak kudeatzeko.

Hona hemen affix pluginak nola funtzionatzen duen:

1. Hasteko, pluginak gehitzen .affix-topdu elementua goiko posizioan dagoela adierazteko. Une honetan ez da CSS posizionamendurik behar.
2. Erantsi nahi duzun elementutik pasatzeak benetako eranspena eragin beharko luke. Hau da, non .affixordezkatzen .affix-topeta ezartzen position: fixed;(Bootstrap-en CSS-k emandakoa).
3. Beheko desplazamendu bat definitzen bada, ondotik mugituz ordezkatu beharko .affixlitzateke .affix-bottom. Desplazamenduak aukerakoak direnez, bat ezartzeak CSS egokia ezartzea eskatzen du. Kasu honetan, gehitu position: absolute;behar denean. Pluginak datu-atributua edo JavaScript aukera erabiltzen du elementua hortik non kokatu behar den zehazteko.

Jarraitu goiko urratsei zure CSS ezartzeko beheko erabilera aukeretako batean.

Datu-atributuen bidez

Edozein elementuri afixen portaera erraz gehitzeko, gehitu data-spy="affix"espioi nahi duzun elementuari. Erabili desplazamenduak elementu baten aingura noiz aldatu zehazteko.

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

JavaScript bidez

Deitu affix plugina JavaScript bidez:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-offset-top="200".

Metodoak

.affix(options)

Zure edukia erantsitako eduki gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

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

.affix('checkPosition')

Eranskinaren egoera berriro kalkulatzen du elementu garrantzitsuen neurrietan, posizioan eta korritze-posizioan oinarrituta. , .affix, .affix-topeta .affix-bottomklaseak erantsitako edukiari gehitzen edo kentzen zaizkio egoera berriaren arabera. Erantsitako edukiaren edo xede-elementuaren dimentsioak aldatzen diren bakoitzean deitu behar da metodo hau, erantsitako edukiaren kokapen zuzena bermatzeko.

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

Gertaerak

Bootstrap-en afixa-pluginak afixuaren funtzionalitatera konektatzeko gertaera batzuk erakusten ditu.