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

Konpilatutako JavaScript erabiliz

Biak bootstrap.jseta bootstrap.min.jsplugin guztiak fitxategi bakarrean dituzte. Sartu bakarra.

Plugin menpekotasunak

Plugin eta CSS osagai batzuk beste plugin batzuen araberakoak dira. Pluginak banan-banan sartzen badituzu, ziurtatu mendekotasun horiek egiaztatzea dokumentuetan. Kontuan izan, gainera, plugin guztiak jQueryren araberakoak direla (horrek esan nahi du jQuery plugin-fitxategien aurretik sartu behar dela). Kontsultatu gurebower.json jQuery-ren zein bertsio onartzen diren ikusteko.

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

Elementu bakoitzeko plugin bakarra datu-atributuen bidez

Ez erabili plugin anitzetako datu-atributuak elementu berean. Adibidez, botoi batek ezin du tresna-informaziorik izan eta modal bat aldatu. Horretarako, erabili biltzeko elementu bat.

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

Bertsio zenbakiak

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

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

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.

Hirugarrenen liburutegiak

Bootstrap-ek ez ditu ofizialki onartzen Prototype edo jQuery UI bezalako hirugarrenen JavaScript liburutegiak . Gertaerak tartekatuta egon arren .noConflict, zure kabuz konpondu behar dituzun bateragarritasun-arazoak egon daitezke.

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.

Modu ireki anitz ez dira onartzen

Ziurtatu ez duzula modal bat ireki beste bat oraindik ikusgai dagoen bitartean. Modal bat baino gehiago aldi berean erakusteak kode pertsonalizatua behar du.

Markatze modala jartzea

Saiatu beti modal baten HTML kodea zure dokumentuan goi-mailako posizio batean jartzen, beste osagai batzuek modalaren itxurari edo/eta funtzionaltasunari eraginik ez diezaioten.

Gailu mugikorreko oharrak

Gailu mugikorretan modalak erabiltzeari buruzko ohar batzuk daude. Ikusi gure arakatzailearen laguntza-dokumentuak xehetasunetarako.

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>

Egin modalak eskuragarri

Ziurtatu eta gehitzen duzula role="dialog", aria-labelledby="..."izenburu modalitateari erreferentzia eginez, to eta .modalberari .role="document".modal-dialog

Gainera, zure elkarrizketa modalaren deskribapena eman dezakezu aria-describedbyaktibatuta .modal.

YouTube bideoak txertatzea

YouTube-ko bideoak modaletan txertatzeak Bootstrap-en ez dagoen JavaScript gehigarria behar du erreprodukzioa automatikoki gelditzeko eta gehiago. Ikusi Stack Overflow argitalpen lagungarri hau informazio gehiago lortzeko.

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 bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

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

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

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

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,

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

Izena mota lehenetsia deskribapena
atzealdea boolearra edo katea'static' egia Atzeko plano-elementu modala dakar. Bestela, zehaztu staticklik egitean modala ixten ez duen atzeko planoa.
teklatua boolearra egia Ihes tekla sakatzen denean modala ixten du
erakutsi boolearra egia Hasieratzen denean modala erakusten du.
urrunekoa bidea faltsua

Aukera hau zaharkituta dago v3.3.0-tik eta v4-n kendu da. Horren ordez, bezeroaren aldeko txantiloiak edo datuak lotzeko esparru bat erabiltzea edo jQuery.load zeuk deitzea gomendatzen dugu.

Urruneko URL bat ematen bada, edukia behin kargatuko da jQuery-ren metodoaren bidez eta div load-ean sartuko da . .modal-contentData-api erabiltzen ari bazara, bestela hrefatributua erabil dezakezu urruneko iturburua zehazteko. Honen adibide bat behean erakusten da:

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

Metodoak

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

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

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

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

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

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

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

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

Gertaera mota Deskribapena
ikuskizuna.bs.modala Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean. Klik batek eragindakoa bada, klikatutako elementua relatedTargetgertaeraren jabetza gisa erabilgarri dago.
erakusten.bs.modala Gertaera hau modua erabiltzailearentzat ikusgai jarri denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). Klik batek eragindakoa bada, klikatutako elementua relatedTargetgertaeraren jabetza gisa erabilgarri dago.
ezkutatu.bs.modal Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuan.bs.modal Gertaera hau modua erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
kargatu.bs.modala Gertaera hau abiarazten da modalak remoteaukera erabiliz edukia kargatu duenean.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Goitibeherak dropdown.js

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

Nabigazio barra baten barruan

Pilulen barruan

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

data-toggle="dropdown"oraindik beharrezkoa

Goitibehera JavaScript bidez deitzen duzun edo datu-api-a erabiltzen duzun ala ez, data-toggle="dropdown"beti beharrezkoa da goitibeherako elementuaren abiarazlean egotea.

Bat ere ez

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

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

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

Gertaera mota Deskribapena
show.bs.gopdown Gertaera hau berehala abiarazten da show instance metodoa deitzen denean.
erakusten.bs.goigabea Gertaera hau goitibehitza erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioen zain egongo da osatzeko).
ezkutatu.bs.goigabea Gertaera hau berehala abiarazten da ezkutatzeko instantzia metodoa deitzen denean.
hidden.bs.gopdown Gertaera hau goitibeherako zerrenda erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioen zain egongo da amaitzeko).
$('#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.

@potolo

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi qui agortu aurretik. Tumblr baserritik mahairako bizikletaren eskubideak edozer. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby jertsea lomo jean galtza motzak, williamsburg hoodie gutxi batzuk ziurrenik ez duzu horien berri eta cardigan trust fund culpa biodiesel wes anderson estetika. Nihil tatuatu akusamus, kred ironia biodiesel keffiyeh artisau ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork bizar. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat lau loko nisi, ea helvetica nulla carles. Cosby jertse tatuatua food truck, mcsweeney-ren quis non freegan biniloa. Lo-fi wes anderson +1 sartoriala. Carles ez ariketa estetikoa quis gentrify. Brooklyn adipisicing artisau garagardo vice keytar deserunt.

bat

Occaecat commodo aliqua delectus. Fap artisau garagardo deserunt skateboard ea. Lomo bizikleta eskubideak adipisicing banh mi, belit ea dira hurrengo maila lokalizatu jatorri bakarreko kafea magna veniam. High life id biniloa, echo park consequat quis aliquip banh mi pitchfork. Vero VHS adipisicing da. Consectetur nisi DIY gutxieneko mezulari poltsa. Sinetsita dago, iphone-ko fanny-pack bateratu iraunkorra.

bi

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

three

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

Keytar twee bloga, culpa messenger poltsa marfa edozein dela ere delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica topiko ironia, thundercats ziurrenik ez duzu horien berri entzun hoodie glutenik gabeko lo-fi fap aliquip. Lan egin agortu baino lehen, Terry Richardson-ek hamaiketakoa egin behar izan zuen, eta kosby jertsea, bestela, artisau helvetikoa. Cardigan artisau garagardoa seitan readymade belit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Erabilera

Bootstrap nav behar da

Une honetan Scrollspy-k Bootstrap nav osagai bat erabiltzea eskatzen du esteka aktiboak behar bezala nabarmentzeko.

Ebatzi daitezkeen ID-helburuak behar dira

Nabbar-en estekek id-helburu konpongarriak izan behar dituzte. Adibidez, <a href="#home">home</a>behar bat DOM bezalako zerbaiti dagokio <div id="home"></div>.

Helburu ez :visiblediren elementuak baztertu dira

:visiblejQuery-ren araberakoak ez diren xede-elementuak ez dira aintzat hartuko eta dagozkien nabigazio-elementuak ez dira inoiz nabarmenduko.

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

Izena mota lehenetsia deskribapena
desplazamendu zenbakia 10 Goitik desplazatzeko pixelak korrituaren posizioa kalkulatzean.

Gertaerak

Gertaera mota Deskribapena
aktibatu.bs.scrollspy Gertaera hau scrollspy-k elementu berri bat aktibatzen duen bakoitzean abiarazten da.
$('#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.

Denim gordina ziurrenik ez duzu Austin galtza motzak entzun. Nesciunt tofu stumptown aliqua, retro synth master garbiketa. Bibote klixe denbora, williamsburg carles vegan helvetica. Rerehenderit harakina retro keffiyeh dreamcatcher sintetizadorea. Cosby jertse eu banh mi, qui irure terry richardson ex squid. Jarri salvia cillum iphone. Seitan aliquip quis cardigan american apparel, harakina voluptate nisi qui.

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

Fitxen nabigazioa hedatzen du

Plugin honek fitxadun nabigazio-osagaia hedatzen du tabulazio-eremuak gehitzeko.

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.

Gertaera mota Deskribapena
erakutsi.bs.tab Gertaera hau fitxen erakustaldian abiarazten da, baina fitxa berria erakutsi aurretik. Erabili event.targeteta event.relatedTargetfitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren.
erakusten.bs.tab Gertaera hau fitxen erakustaldian abiarazten da fitxa bat erakutsi ondoren. Erabili event.targeteta event.relatedTargetfitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren.
ezkutatu.bs.tab Gertaera hau fitxa berri bat erakutsi nahi denean abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu behar da). Erabili event.targeteta event.relatedTargetuneko fitxa aktibora eta laster aktibo egongo den fitxa berria bideratzeko, hurrenez hurren.
ezkutuko.bs.tab Gertaera hau fitxa berri bat erakutsi ondoren abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu egiten da). Erabili event.targeteta event.relatedTargetaurreko fitxa aktibora eta fitxa aktibo berria bideratzeko, hurrenez hurren.
$('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:

Praka estuak hurrengo mailan keffiyeh ziurrenik ez duzu horien berri. Photo booth beard raw denim letterpress vegan messenger poltsa stumptown. Baserritik mahairako seitan, mcsweeney's fixie sustainable quinoa 8 bit American Apparel- ek terry richardson binilozko chambray dute. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesela williamsburg marfa, lau loko mcsweeney's cleanse vegan chambray. Artisau benetan ironikoa edozein dela ere keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim jatorri bakarreko kafe birala.

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>

Aukeratzeko funtzionaltasuna

Errendimendu-arrazoiak direla eta, Tooltip eta Popover datu-apiak aukera ematen dute, hau da, zuk zeuk hasieratu behar dituzu .

Orrialde bateko tresna-aholku guztiak hasieratzeko modu bat haien data-toggleatributuaren arabera hautatzea izango litzateke:

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

Lerro anitzeko estekak

Batzuetan, lerro bat baino gehiago biltzen dituen hiperesteka bati tresna-informazioa gehitu nahi zaio. Tooltip pluginaren portaera lehenetsia horizontalean eta bertikalean zentratzea da. Gehitu white-space: nowrap;zure ainguretara hori ekiditeko.

Botoien taldeetan, sarrera taldeetan eta tauletan tresna-informazioek ezarpen berezia behar dute

.btn-groupA edo baten barruan dauden elementuei buruzko argibideak erabiltzean .input-group, edo taularekin erlazionatutako elementuetan ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), aukera zehaztu beharko duzu container: 'body'(behean dokumentatua) nahi ez diren albo-ondorioak saihesteko (adibidez, elementua gero eta zabalagoa izatea eta/. edo bere ertz biribilduak galtzea tresna-abiarazpena abiarazten denean).

Ez saiatu ezkutuko elementuei buruzko tresna-aholkuak erakusten

$(...).tooltip('show')Helburu-elementua noiz dagoen deitzeak tresna-aholkua display: none;gaizki kokatuko du.

Teklatuaren eta laguntza-teknologien erabiltzaileentzako tresna-aholku eskuragarriak

Teklatu batekin nabigatzen ari diren erabiltzaileentzat, eta, bereziki, laguntza-teknologien erabiltzaileentzat, teklatuan bideratu daitezkeen elementuei tresna-aholkuak soilik gehitu behar dizkiezu, hala nola, estekak, inprimaki-kontrolak edo tabindex="0"atributu bat duen edozein elementu arbitrario.

Elementu desgaituei buruzko tresna-informazioek bilgarri-elementuak behar dituzte

disabledA edo elementuari tresna-aholkua gehitzeko .disabled, jarri elementua a-ren barruan <div>eta aplikatu horren <div>ordez.

Aukerak

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

Izena Mota Lehenetsia Deskribapena
animazioa boolearra egia Aplikatu CSS desagertze-trantsizioa tresna-informazioari
edukiontzia katea | faltsua faltsua

Elementu zehatz bati eransten dio tresna-informazioa. Adibidea container: 'body':. Aukera hau bereziki erabilgarria da, tresna-abiarazlea dokumentuaren fluxuan abiarazte-elementuaren ondoan kokatzeko aukera ematen baitu, eta horrek tresna-abiarazlea elementu abiarazletik mugitzea eragotziko du leihoaren tamaina aldatzean.

atzerapena zenbakia | objektua 0

Atzeratu tresna-informazioa erakustea eta ezkutatzea (ms) - ez dagokio eskuzko abiarazle motari

Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko

Objektuaren egitura hau da:delay: { "show": 500, "hide": 100 }

html boolearra faltsua Txertatu HTML tresna-informazioan. Faltsua bada, jQuery-ren textmetodoa erabiliko da edukia DOMean txertatzeko. Erabili testua XSS erasoekin kezkatuta bazaude.
Kokapen katea | funtzioa 'goian'

Nola kokatu tresna-informazioa - goian | behea | ezkerra | eskuina | autoa.
"auto" zehazten denean, tresna-informazioa dinamikoki berbideratuko du. Adibidez, kokapena "auto ezkerrera" bada, tresna-informazioa ezkerrera bistaratuko da posible denean, bestela eskuinera bistaratuko da.

Funtzio bat kokapena zehazteko erabiltzen denean, tresna-informazioa DOM nodoa deitzen zaio lehen argumentu gisa eta abiarazte elementua DOM nodoa bigarren gisa. thisTestuingurua argibide-instantzian ezartzen da .

hautatzailea katea faltsua Hautatzailea ematen bada, tresna-informazioko objektuak zehaztutako helburuetara delegatuko dira. Praktikan, HTML eduki dinamikoa tresna-aholkuak gehitzeko gaitzeko erabiltzen da. Ikusi hau eta informazio-adibide bat .
txantiloia katea '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

Oinarrizko HTML tresna-informazioa sortzean erabiltzeko.

Tresna- titleinformazioa injektatuko da .tooltip-inner.

.tooltip-arrowtresna-informazioaren gezia bihurtuko da.

Kanpoko bilgarri-elementuak .tooltipklasea izan behar du.

Izenburua katea | funtzioa ''

Izenburuaren balio lehenetsia titleatributua ez badago.

thisFuntzio bat ematen bada, tresna -informazioa erantsita dagoen elementuari erreferentzia ezarrita deituko zaio .

trigger katea 'pasatzean fokua' Nola abiarazten den tresna-informazioa - egin klik | pasatzea | fokua | eskuliburua. Hainbat abiarazle pasa ditzakezu; bereiz itzazu tarte batekin. manualezin da beste edozein eragilerekin konbinatu.
ikusmira katea | objektua | funtzioa { hautatzailea: 'gorputza', betegarria: 0}

Elementu honen mugen barruan mantentzen du tresna-informazioa. Adibidea: viewport: '#viewport'edo{ "selector": "#viewport", "padding": 0 }

Funtzio bat ematen bada, abiarazte elementua DOM nodoa argumentu bakarra dela deitzen zaio. thisTestuingurua argibide-instantzian ezartzen da .

Banakako argibideetarako datu-atributuak

Banakako argibideetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke, goian azaldu bezala.

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. Deitzen duenari itzultzen zaio tresna-informazioa benetan ezkutatu baino lehen (hau da, hidden.bs.tooltipgertaera 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

Gertaera mota Deskribapena
erakutsi.bs.tresna-informazioa Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakusten.bs.tresna-informazioa Gertaera hau tresna-informazioa erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
ezkutatu.bs.tooltip Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuko.bs.tooltip Gertaera hau tresna-informazioa erabiltzaileari ezkutatzen amaitzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
txertatua.bs.tresna-informazioa Gertaera hau gertaeraren ondoren abiarazten da tresna- show.bs.tooltipinformazio txantiloia DOM-era gehitu denean.
$('#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.

Plugin menpekotasuna

Popover-ek tresna-informaziorako plugina zure Bootstrap bertsioan sartzea eskatzen du.

Aukeratzeko funtzionaltasuna

Errendimendu-arrazoiak direla eta, Tooltip eta Popover datu-apiak aukera ematen dute, hau da, zuk zeuk hasieratu behar dituzu .

Orrialde bateko popover guztiak hasieratzeko modu bat haien data-toggleatributuaren arabera hautatzea izango litzateke:

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

Botoi taldeetan, sarrera taldeetan eta tauletan popover-ek ezarpen berezia behar dute

.btn-groupA edo baten barruan dauden elementuetan popover-ak erabiltzean .input-group, edo taularekin erlazionatutako elementuetan ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), aukera zehaztu beharko duzu container: 'body'(behean dokumentatua) nahi ez diren albo-ondorioak saihesteko (adibidez, elementua gero eta zabalagoa izatea eta/. edo bere ertz biribilduak galtzea popover-a abiarazten denean).

Ez saiatu ezkutuko elementuetan popover-ak erakusten

$(...).popover('show')Helburu-elementua noiz dagoen deitzeak popover display: none;-a gaizki kokatuko da.

Desgaitutako elementuen popover-ek bilgarri-elementuak behar dituzte

disabledA edo elementuari popover bat gehitzeko .disabled, jarri elementua a-ren barruan <div>eta aplikatu horren <div>ordez popover-a.

Lerro anitzeko estekak

Batzuetan, lerro bat baino gehiago biltzen dituen hiperesteka bati popover bat gehitu nahi zaio. Popover pluginaren portaera lehenetsia horizontalean eta bertikalean zentratzea da. Gehitu white-space: nowrap;zure ainguretara hori ekiditeko.

Adibideak

Popover estatikoa

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

Popover gaina

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

Popover eskuinera

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

Popover behealdea

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

Popover ezkerrean

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

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.

Markatu zehatza behar da hurrengo klik egitean baztertzeko

Arakatzaile eta plataforma anitzeko portaera egokia izateko, <a>etiketa erabili behar duzu, ez etiketa , eta eta atributuak <button>ere sartu behar dituzu .role="button"tabindex

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

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

Izena Mota Lehenetsia Deskribapena
animazioa boolearra egia Aplikatu CSS desagertzeko trantsizioa popover-ean
edukiontzia katea | faltsua faltsua

Popover-a elementu zehatz bati eransten dio. Adibidea container: 'body':. Aukera hau bereziki erabilgarria da, popover-a dokumentuaren fluxuan kokatzeko aukera ematen baitu elementu eragilearen ondoan, eta horrek saihestuko du popover-a abiaraztearen elementutik urruntzea leihoaren tamaina aldatzean.

edukia katea | funtzioa ''

Edukiaren balio lehenetsia data-contentatributua ez badago.

thisFuntzio bat ematen bada, popover-a erantsita dagoen elementuari erreferentzia ezarrita deituko zaio .

atzerapena zenbakia | objektua 0

Atzeratu popover-a erakusteko eta ezkutatzeko (ms) - ez dagokio eskuzko abiarazle motari

Zenbaki bat ematen bada, atzerapena aplikatuko da ezkutatzeko/erakusteko

Objektuaren egitura hau da:delay: { "show": 500, "hide": 100 }

html boolearra faltsua Sartu HTML popover-ean. Faltsua bada, jQuery-ren textmetodoa erabiliko da edukia DOMean txertatzeko. Erabili testua XSS erasoekin kezkatuta bazaude.
Kokapen katea | funtzioa 'zuzen'

Popover-a nola kokatu - goiko | behea | ezkerra | eskuina | autoa.
"auto" zehazten denean, popover-a dinamikoki berbideratuko du. Adibidez, kokapena "auto ezkerra" bada, popover-a ezkerrera bistaratuko da posible denean, bestela eskuinera agertuko da.

Funtzio bat kokapena zehazteko erabiltzen denean, popover DOM nodoa lehen argumentu gisa deitzen da eta abiarazte elementua DOM nodoa bigarren gisa. thisTestuingurua popover instantzian ezartzen da .

hautatzailea katea faltsua Hautatzaile bat ematen bada, popover objektuak zehaztutako helburuetara delegatuko dira. Praktikan, HTML eduki dinamikoa gaitzeko erabiltzen da popovers gehitzeko. Ikusi hau eta informazio-adibide bat .
txantiloia katea '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Oinarrizko HTML popover-a sortzerakoan erabiltzeko.

Popover- titleak injektatuko dira .popover-title.

Popover- contentak injektatuko dira .popover-content.

.arrowpopover-en gezia bihurtuko da.

Kanpoko bilgarri-elementuak .popoverklasea izan behar du.

Izenburua katea | funtzioa ''

Izenburuaren balio lehenetsia titleatributua ez badago.

thisFuntzio bat ematen bada, popover-a erantsita dagoen elementuari erreferentzia ezarrita deituko zaio .

trigger katea 'klik' Popover nola abiarazten den - egin klik | pasatzea | fokua | eskuliburua. Hainbat abiarazle pasa ditzakezu; bereiz itzazu tarte batekin. manualezin da beste edozein eragilerekin konbinatu.
ikusmira katea | objektua | funtzioa { hautatzailea: 'gorputza', betegarria: 0}

Popover-a elementu honen mugen barruan mantentzen du. Adibidea: viewport: '#viewport'edo{ "selector": "#viewport", "padding": 0 }

Funtzio bat ematen bada, abiarazte elementua DOM nodoa argumentu bakarra dela deitzen zaio. thisTestuingurua popover instantzian ezartzen da .

Popover indibidualentzako datu-atributuak

Popover indibidualetarako aukerak bestela datu-atributuak erabiliz zehaztu daitezke, goian azaldu bezala.

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

Gertaera mota Deskribapena
show.bs.popover Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakutsi.bs.popover Gertaera hau abiarazten da popover-a erabiltzailearentzat ikusgai jartzen denean (CSS trantsizioak amaitu arte itxarongo da).
ezkutatu.bs.popover Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuko.bs.popover Gertaera hau abiarazten da popover-a erabiltzaileari ezkutatzen amaitzen denean (CSS trantsizioak amaitu arte itxarongo da).
txertatuta.bs.popover Gertaera hau gertaeraren ondoren show.bs.popoverabiarazten da popover txantiloia DOM-era gehitu denean.
$('#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, honen lehen seme-alaba izan behar du .alert-dismissibleeta ezin izango 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.

Gertaera mota Deskribapena
itxi.bs.alerta Gertaera hau berehala abiarazten da closeinstantzia-metodoa deitzen denean.
itxita.bs.alerta Gertaera hau alerta itxi denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
$('#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.

Arakatzaileen arteko bateragarritasuna

Firefoxek inprimakien kontrol-egoerak jarraitzen ditu (desgaitasuna eta egiaztapena) orrialdeen karga guztietan . Honetarako konponbidea erabiltzea da autocomplete="off". Ikusi Mozilla akatsa #654072 .

Estatutua

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

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

Erabili nahi duzun egoera!

Erakusketa honen mesedetan, data-loading-texteta erabiltzen ari gara $().button('loading'), baina hori ez da erabil dezakezun egoera bakarra. Ikusi honi buruzko informazio gehiago behean $().button(string)dokumentazioan .

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

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

Toggle bakarra

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

Aurrez txandakaturiko botoiak behar dira .activeetaaria-pressed="true"

Aurrez txandakaturiko botoietarako, .activeklasea eta aria-pressed="true"atributua buttonzeure buruari gehitu behar dizkiozu.

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

Kontrol-laukia / Irratia

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

Aurrez hautatutako aukerak behar dira.active

Aurrez hautatutako aukeretarako, .activeklasea zuk zeuk gehitu behar diozu sarrerari label.

Ikusizko egiaztatutako egoera klik egitean soilik eguneratzen da

Markagailu-laukiaren botoi baten egoera markatutako egoera botoian clickgertaerarik piztu gabe eguneratzen bada (adibidez , sarreraren propietatea <input type="reset">ezarriz edo bidez ), klasea zuk zeuk sartu beharko duzu.checked.activelabel

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

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" autocomplete="off">
  ...
</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.

Plugin menpekotasuna

Tolestu behar da trantsizioen plugina zure Bootstrap-en bertsioan sartzea.

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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Akordeoiaren adibidea

Hedatu tolestearen portaera lehenetsia paneleko osagaiarekin akordeoia sortzeko.

Besteak beste, klixea erreklamatzea, bizimodu handia salatu Terry Richardson eta txipiroiak. 3 wolf moon ofiziala aute, ez cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 otsoaren ilargiaren denbora, baina txori bat jarri txipiroiak jatorri bakarreko kafea ez du hartu shoreditch eta. Nihil anim keffiyeh helvetica, artisau garagardoa lan egiteko wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur harategia vice lomo. Leggings occaecat artisau garagardoa baserritik mahaira, raw denim estetiko sintetizadoreak ziurrenik ez dituzu entzun VHS jasangarria salatu.
Besteak beste, klixea erreklamatzea, bizimodu handia salatu Terry Richardson eta txipiroiak. 3 wolf moon ofiziala aute, ez cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 otsoaren ilargiaren denbora, baina txori bat jarri txipiroiak jatorri bakarreko kafea ez du hartu shoreditch eta. Nihil anim keffiyeh helvetica, artisau garagardoa lan egiteko wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur harategia vice lomo. Leggings occaecat artisau garagardoa baserritik mahaira, raw denim estetiko sintetizadoreak ziurrenik ez dituzu entzun VHS jasangarria salatu.
Besteak beste, klixea erreklamatzea, bizimodu handia salatu Terry Richardson eta txipiroiak. 3 wolf moon ofiziala aute, ez cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 otsoaren ilargiaren denbora, baina txori bat jarri txipiroiak jatorri bakarreko kafea ez du hartu shoreditch eta. Nihil anim keffiyeh helvetica, artisau garagardoa lan egiteko wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur harategia vice lomo. Leggings occaecat artisau garagardoa baserritik mahaira, raw denim estetiko sintetizadoreak ziurrenik ez dituzu entzun VHS jasangarria salatu.
<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.

  • Bootply
  • One itmus ac facilin
  • Bigarren eros

Egin zabaldu/tolestu kontrolak eskuragarri

Ziurtatu aria-expandedkontrol-elementuari gehitzea. Atributu honek esplizituki definitzen du tolesgarri den elementuaren egungo egoera pantaila-irakurleentzat eta antzeko laguntza-teknologientzat. Elementu tolesgarria lehenespenez itxita badago, balio izan beharko luke aria-expanded="false". Elementu tolesgarria lehenespenez irekita egon dadin ezarri baduzu inklasea erabiliz, ezarri aria-expanded="true"kontrolaren ordez. Pluginak atributu hau automatikoki aldatuko du tolesgarria den elementua ireki edo itxi den kontuan hartuta.

Gainera, zure kontrol-elementuak elementu tolesgarri bakar batera bideratzen badu (hau da, data-targetatributuak idhautatzaile batera seinalatzen badu), atributu gehigarri bat gehi diezaiokezu aria-controlskontrol-elementuari, idelementu tolesgarriaren aldea duena. Pantaila-irakurle modernoek eta antzeko laguntza-teknologiek atributu hau erabiltzen dute erabiltzaileei lasterbide osagarriak eskaintzeko, elementu tolesgarrira zuzenean nabigatzeko.

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

Izena mota lehenetsia deskribapena
gurasoa hautatzailea faltsua Hautatzailea ematen bada, zehaztutako gurasoaren azpian dauden elementu tolesgarri guztiak itxiko dira elementu tolesgarri hau erakusten denean. (akordeoiaren portaera tradizionalaren antzekoa - hau panelklasearen araberakoa da)
txandakatu boolearra egia Elementu tolesgarria aktibatzen du deitzean

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.

Gertaera mota Deskribapena
erakutsi.bs.kolapsoa Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakutsi.bs.kolapsoa Gertaera hau tolesteko elementu bat erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
ezkutatu.bs.kolapsoa Gertaera hau berehala abiarazten da hidemetodoa deitzen denean.
ezkutuan.bs.kolapsoa Gertaera hau tolesteko elementu bat erabiltzaileari ezkutatu zaionean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
$('#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.

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

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

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 datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-interval="".

Izena mota lehenetsia deskribapena
tartea zenbakia 5000 Elementu bat automatikoki bizikletaz ibiltzearen artean atzeratu behar den denbora. Gezurra bada, karrusela ez da automatikoki zirkulatuko.
pausa katea | nulua "pasatu" Aukeran ezartzen bada "hover", karruselaren txirrindularitza aktibatuta gelditzen du eta karruselaren txirrindularitza aktibatuta mouseenterberriro hasiko da mouseleave. Aukeran ezartzen bada null, karruselaren gainean pasatzeak ez du etengo.
bildu boolearra egia Karruselak etengabe zirkulatzen duen edo geldialdi gogorrak izan behar dituen.
teklatua boolearra egia Karruselak teklatuko gertaeren aurrean erreakzionatu behar duen ala ez.

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

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

Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.

Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.

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

Zikloak aurreko elementura.

Zikloak hurrengo elementura.

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event Type Description
slide.bs.carousel This event fires immediately when the slide instance method is invoked.
slid.bs.carousel This event is fired when the carousel has completed its slide transition.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

Example

The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of the affix plugin.


Usage

Use the affix plugin via data attributes or manually with your own JavaScript. In both situations, you must provide CSS for the positioning and width of your affixed content.

Note: Do not use the affix plugin on an element contained in a relatively positioned element, such as a pulled or pushed column, due to a Safari rendering bug.

Positioning via CSS

The affix plugin toggles between three classes, each representing a particular state: .affix, .affix-top, and .affix-bottom. You must provide the styles, with the exception of position: fixed; on .affix, for these classes yourself (independent of this plugin) to handle the actual positions.

Here's how the affix plugin works:

  1. To start, the plugin adds .affix-top to indicate the element is in its top-most position. At this point no CSS positioning is required.
  2. Scrolling past the element you want affixed should trigger the actual affixing. This is where .affix replaces .affix-top and sets position: fixed; (provided by Bootstrap's CSS).
  3. If a bottom offset is defined, scrolling past it should replace .affix with .affix-bottom. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add position: absolute; when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.

Follow the above steps to set your CSS for either of the usage options below.

Via data attributes

To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Use offsets to define when to toggle the pinning of an element.

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

Via JavaScript

Call the affix plugin via JavaScript:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".

Name type default description
offset number | function | object 10 Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object offset: { top: 10 } or offset: { top: 10, bottom: 5 }. Use a function when you need to dynamically calculate an offset.
target selector | node | jQuery element the window object Specifies the target element of the affix.

Methods

.affix(options)

Activates your content as affixed content. Accepts an optional options object.

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

.affix('checkPosition')

Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The .affix, .affix-top, and .affix-bottom classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.

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

Events

Bootstrap's affix plugin exposes a few events for hooking into affix functionality.

Event Type Description
affix.bs.affix This event fires immediately before the element has been affixed.
affixed.bs.affix This event is fired after the element has been affixed.
affix-top.bs.affix Gertaera hau elementua goian jarri baino lehen berehala piztuko da.
itsatsi-top.bs.afixatu Gertaera hau elementua goian jarri ondoren abiarazten da.
eranskin-behean.bs.affix Gertaera hau elementua behean finkatu baino lehen berehala piztuko da.
itsatsi-behean.bs.atxiki Gertaera hau elementua behean jarri ondoren abiarazten da.