Overview

Olona tsirairay na natambatra

Ny plugins dia azo ampidirina tsirairay (mampiasa ny *.jsrakitra manokana an'ny Bootstrap), na indray mandeha (mampiasa bootstrap.jsna ny minified bootstrap.min.js).

Mampiasa ny JavaScript natambatra

Samy bootstrap.jsary bootstrap.min.jsmisy plugins rehetra ao anaty rakitra tokana. Ampidiro iray ihany.

Miankina amin'ny plugin

Ny plugins sasany sy ny singa CSS dia miankina amin'ny plugins hafa. Raha ampidirinao tsirairay ny plugins, ataovy azo antoka ny manamarina ireo fiankinan-doha ireo ao amin'ny doka. Mariho ihany koa fa miankina amin'ny jQuery ny plugins rehetra (midika izany fa tsy maintsy ampidirina alohan'ny rakitra plugin ny jQuery). Jereo ny anaybower.json mba hahitana hoe iza amin'ireo dikan-jQuery no tohana.

Data attributes

Azonao atao ny mampiasa ny plugins Bootstrap rehetra amin'ny alàlan'ny API markup nefa tsy manoratra andalana iray amin'ny JavaScript. Ity no API kilasy voalohany an'ny Bootstrap ary tokony hoheverinao voalohany rehefa mampiasa plugin.

Izany hoe, amin'ny toe-javatra sasany dia mety ilaina ny hamono ity fampiasa ity. Noho izany, izahay koa dia manome ny fahafahana manafoana ny data attribute API amin'ny alalan'ny fanafoanana ny hetsika rehetra ao amin'ny antontan-taratasy namespaced amin'ny data-api. Toa izao ity:

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

Raha tsy izany, raha mikendry plugin manokana, ampidiro fotsiny ny anaran'ilay plugin ho toy ny namespace miaraka amin'ny namespace data-api toy izao:

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

Plugin iray isaky ny singa amin'ny alàlan'ny toetra angona

Aza mampiasa toetra angona avy amin'ny plugins maromaro amin'ny singa iray ihany. Ohatra, ny bokotra iray dia tsy afaka manana tondro-fitaovana sy mamadika modal. Mba hanaovana izany, dia ampiasao singa famonosana.

Programmatic API

Mino koa izahay fa tokony ho afaka mampiasa ny plugins Bootstrap rehetra ianao amin'ny alàlan'ny JavaScript API. Ny API ho an'ny daholobe rehetra dia fomba tokana, azo fehezina ary mamerina ny fanangonana natao.

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

Ny fomba rehetra dia tokony hanaiky zavatra safidy azo atao, tady izay mikendry fomba manokana, na tsy misy (izay manomboka plugin miaraka amin'ny fitondran-tena mahazatra):

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

Ny plugin tsirairay ihany koa dia mampiseho ny mpanamboatra manta ao amin'ny Constructorfananana iray: $.fn.popover.Constructor. Raha te hahazo ohatra plugin manokana ianao dia alaivo mivantana avy amin'ny singa iray: $('[rel="popover"]').data('popover').

Fikirana Default

Azonao atao ny manova ny kinova default ho an'ny plugin iray amin'ny fanovana ny Constructor.DEFAULTStanjon'ny plugin:

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

Tsy misy fifandirana

Indraindray dia ilaina ny mampiasa plugins Bootstrap miaraka amin'ny rafitra UI hafa. Amin'ireo toe-javatra ireo, mety hitranga indraindray ny fifandonan'ny toeran'ny anarana. Raha mitranga izany dia azonao atao ny miantso .noConflictny plugin tianao hamerenana ny sandan'ny.

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

zava-mitranga

Bootstrap dia manome hetsika manokana ho an'ny ankamaroan'ny hetsika tokana ataon'ny plugins. Amin'ny ankapobeny, ireo dia avy amin'ny endrika infinitive sy past participle - izay ny infinitive (ohatra. show) dia mipoitra eo am-piandohan'ny hetsika iray, ary ny endrik'ilay matoanteny lasa (ex. shown) dia mipoitra rehefa vita ny hetsika iray.

Amin'ny 3.0.0, ny hetsika Bootstrap rehetra dia nomena anarana.

Ny hetsika infinitive rehetra dia manome preventDefaultfiasa. Izany dia manome fahafahana hampiato ny fanatanterahana hetsika iray alohan'ny hanombohany.

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

Laharana dikan-teny

Ny dikan-teny tsirairay amin'ny plugins jQuery an'ny Bootstrap dia azo idirana amin'ny alàlan'ny VERSIONfananan'ny mpamorona ny plugin. Ohatra, ho an'ny plugin tooltip:

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

Tsy misy fiatoana manokana rehefa tsy mandeha ny JavaScript

Ny plugins Bootstrap dia tsy miverina amin'ny fomba tsara indrindra rehefa tsy mandeha ny JavaScript. Raha miraharaha ny traikefan'ny mpampiasa amin'ity tranga ity ianao dia ampiasao <noscript>ny manazava ny toe-javatra (sy ny fomba famelomana indray ny JavaScript) amin'ny mpampiasa anao, ary/na ampio ny fianjeranao manokana.

Tranomboky an'ny antoko fahatelo

Bootstrap dia tsy manohana amin'ny fomba ofisialy ny tranokala JavaScript an'ny antoko fahatelo toa ny Prototype na jQuery UI. Na .noConflictdia eo aza ny zava-mitranga ary nomena anarana, dia mety hisy olana amin'ny fifanarahana izay mila amboarinao samirery.

Transitions transition.js

Momba ny tetezamita

Ho an'ny vokatry ny tetezamita tsotra, ampidiro transition.jsindray mandeha miaraka amin'ireo rakitra JS hafa. Raha mampiasa ny compiled (na minifié) bootstrap.jsianao, dia tsy ilaina ny mampiditra an'ity — efa eo izy io.

Inona no ao anatiny

Transition.js dia mpanampy fototra amin'ny transitionEndhetsika ary koa emulator tetezamita CSS. Ampiasain'ny plugins hafa izy io mba hijerena ny fanohanan'ny tetezamita CSS sy hisambotra ny fifindrana mihantona.

Mamono ny tetezamita

Ny Tetezamita dia mety ho kilemaina maneran-tany amin'ny fampiasana ity snippet JavaScript manaraka ity, izay tsy maintsy ho avy aorian'ny fampidirana transition.js( bootstrap.jsna bootstrap.min.js, araka ny mety ho zava-misy):

$.support.transition = false

Modals modal.js

Modals dia mirindra, fa moramora, ny fifampiresahana miaraka amin'ny fampiasa kely indrindra ilaina sy ny default.

Mody misokatra maro tsy tohana

Aza hadino ny manokatra modal iray raha mbola hita ny iray hafa. Mila kaody manokana ny fampisehoana mody mihoatra ny iray isaky ny mandeha.

Fametrahana marika marika

Andramo foana ny mametraka ny kaody HTML an'ny modal amin'ny toerana ambony ao amin'ny antontan-taratasinao mba hialana amin'ny singa hafa misy fiantraikany amin'ny fisehoan'ny modal sy/na fampiasa.

Fanamafisana ny fitaovana finday

Misy fampitandremana sasany momba ny fampiasana modals amin'ny fitaovana finday. Jereo ny antontan-taratasy fanohanana ny navigateur raha mila antsipiriany.

Noho ny fomba famaritan'ny HTML5 ny semantikany, ny autofocustoetra HTML dia tsy misy fiantraikany amin'ny modals Bootstrap. Mba hahazoana vokatra mitovy amin'izany, ampiasao JavaScript mahazatra:

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

OHATRA

Ohatra static

Mody adika miaraka amin'ny lohapejy, vatana, ary andiana hetsika ao amin'ny tongo-tongony.

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

Demo mivantana

Ampifamadiho ny modal amin'ny alàlan'ny JavaScript amin'ny fipihana ny bokotra etsy ambany. Hivezivezy midina izy io ary hanjavona avy any an-tampon'ny pejy.

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

Ataovy azo idirana ny modals

Ataovy azo antoka ny manampy role="dialog"sy aria-labelledby="...", manondro ny lohateny modal, ny .modal, ary role="document"ny .modal-dialogtenany.

Ho fanampin'izany, azonao atao ny manome famaritana ny fifanakalozan-dresakao miaraka amin'ny aria-describedbyon .modal.

Mampiditra horonan-tsary YouTube

Ny fametahana horonan-tsary YouTube amin'ny modals dia mitaky JavaScript fanampiny tsy ao amin'ny Bootstrap mba hampijanonana ho azy ny playback sy ny maro hafa. Jereo ity lahatsoratra Stack Overflow mahasoa ity raha mila fanazavana fanampiny.

Habe azo atao

Ny modely dia manana habe roa azo atao, azo alaina amin'ny alàlan'ny kilasy modifier hapetraka amin'ny .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>

Esory ny animation

Ho an'ny modals izay miseho fotsiny fa tsy manjavona hojerena, esory ny .fadekilasy amin'ny marika modal anao.

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

Mampiasa ny rafitra grid

Mba hanararaotra ny rafitra grid Bootstrap ao anatin'ny modal iray, dia asio akany .rowao anaty .modal-bodyary ampiasao ny kilasin'ny rafitra grid mahazatra.

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

Manana bokotra maromaro izay miteraka mody iray ihany, miaraka amin'ny atiny hafa kely fotsiny? Ampiasao event.relatedTargetsy HTML data-*toetra (mety ho amin'ny alalan'ny jQuery ) mba hanova ny votoatin'ny ny modal miankina amin'ny bokotra izay no kitihina. Jereo ny doka Modal Events ho an'ny antsipiriany momba ny relatedTarget,

... bokotra fanampiny ...
<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)
})

Fampiasana

Ny plugin modal dia manova ny atiny miafina amin'ny fangatahana, amin'ny alàlan'ny toetran'ny data na JavaScript. Izy io koa dia manampy .modal-openamin'ny <body>fanafoanana ny fitondran-tena scrolling default ary miteraka a .modal-backdropmanome faritra kitiho hanesorana ireo modals aseho rehefa manindry ivelan'ny modal.

Amin'ny alàlan'ny data attributes

Ampidiro modal iray tsy manoratra JavaScript. Apetraho data-toggle="modal"eo amin'ny singa mpanara-maso, toy ny bokotra iray, miaraka amin'ny data-target="#foo"na href="#foo"hikendry mody iray manokana hivezivezy.

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

Amin'ny JavaScript

Miantso modal miaraka amin'ny id myModalmisy andalana tokana amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-backdrop="".

Anarana karazana toerana misy anao Description
resahana boolean na ny tady'static' marina Ahitana singa modal-backdrop. Raha tsy izany, manendry staticny backdrop izay tsy manidy ny modal amin'ny tsindry.
Ohatra boolean marina Manakatona ny modal rehefa tsindriana ny fanalahidin'ny escape
FAMPISEHOANA boolean marina Mampiseho ny modal rehefa natomboka.
mitokana LALANA DISO

Ity safidy ity dia tsy ampiasaina hatramin'ny v3.3.0 ary nesorina tamin'ny v4. Manoro hevitra izahay fa hampiasa templating amin'ny lafiny mpanjifa na rafitra famatorana data, na miantso ny jQuery.load ny tenanao.

Raha misy URL lavitra omena, ny votoaty dia hapetraka indray mandeha amin'ny alàlan'ny loadfomba jQuery ary ampidirina ao amin'ny .modal-contentdiv. Raha mampiasa ny data-api ianao, dia azonao atao koa ny mampiasa ny hreftoetra hamaritana ny loharano lavitra. Ohatra iray amin'izany no aseho eto ambany:

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

fomba

Mampihetsika ny atiny ho toy ny modal. Manaiky safidy azo atao object.

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

Manova fomba tanana iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny modal (izany hoe talohan'ny nitrangan'ny shown.bs.modalna hidden.bs.modalhetsika).

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

Manokatra modal amin'ny tanana. Miverina any amin'ny mpiantso alohan'ny tena naseho ny modal (izany hoe alohan'ny shown.bs.modalnitrangan'ny hetsika).

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

Manafina modal iray amin'ny tanana. Miverina amin'ny mpiantso alohan'ny nafenina ny modal (izany hoe alohan'ny hidden.bs.modalnitrangan'ny hetsika).

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

Manitsy ny toeran'ny modal mba hanohitra ny scrollbar raha sendra misy miseho, izay hahatonga ny modal hitsambikina miankavia.

Ilaina ihany rehefa miova ny haavon'ny modal rehefa misokatra.

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

zava-mitranga

Ny kilasy modal an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa modal.

Ny hetsika modal rehetra dia alefa amin'ny modal mihitsy (izany hoe ao amin'ny <div class="modal">).

Karazana hetsika Description
show.bs.modal Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa. Raha vokatry ny tsindry iray dia azo alaina ho relatedTargetfananan'ny hetsika ny singa voakitika.
shown.bs.modal Ity hetsika ity dia voaroaka rehefa natao ho hitan'ny mpampiasa ny modal (hiandry ny fifindran'ny CSS ho vita). Raha vokatry ny tsindry iray dia azo alaina ho relatedTargetfananan'ny hetsika ny singa voakitika.
hide.bs.modal Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
hidden.bs.modal Voaroaka ity hetsika ity rehefa vita ny nafenina tamin'ny mpampiasa ny modal (hiandry ny famitana ny fifindrana CSS).
loaded.bs.modal Voaroaka ity hetsika ity rehefa nampiditra atiny tamin'ny fampiasana ny remotesafidy ny modal.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Ampio ny menio midina amin'ny zavatra rehetra miaraka amin'ity plugin tsotra ity, ao anatin'izany ny navbar, tabilao ary pilina.

Ao anaty navbar

Ao anatin'ny pilina

Amin'ny alàlan'ny toetran'ny data na JavaScript, ny plugin fidinana dia mamadika votoaty miafina (meno midina) amin'ny alàlan'ny fanodina ny .openkilasy amin'ny lisitry ny ray aman-dreny.

Amin'ny fitaovana finday, ny fanokafana dropdown dia manampy .dropdown-backdropfaritra fanidiana ho an'ny fanakatonana ny menio midina rehefa manindry ivelan'ny sakafo, fepetra takiana amin'ny fanohanana iOS mety. Midika izany fa mila paompy fanampiny amin'ny finday ny fifindrana avy amin'ny menio midina mivelatra mankany amin'ny menio midina hafa.

Fanamarihana: data-toggle="dropdown"Miantehitra amin'ny fanakatonana ny menio midina amin'ny ambaratonga fampiharana ilay toetra, ka tsara ny mampiasa azy foana.

Amin'ny alàlan'ny data attributes

Ampio data-toggle="dropdown"amin'ny rohy na bokotra iray mba hivezivezena ny fidina.

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

Mba hitazonana ny URL tsy misy ifandraisany amin'ny bokotra rohy dia ampiasao ny data-targettoetra fa tsy 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>

Amin'ny JavaScript

Antsoy amin'ny alalan'ny JavaScript ny dropdowns:

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

data-toggle="dropdown"mbola takiana

Na inona na inona miantso ny fidinao amin'ny JavaScript ianao na mampiasa ny data-api, data-toggle="dropdown"dia tsy maintsy misy foana ny singa trigger an'ny dropdown.

tsy misy

Manova ny menio fidinan'ny navbar nomena na navigateur misy tabilao.

Ny hetsika fidinana rehetra dia alefa amin'ny .dropdown-menusinga ray aman-dreny.

Ny hetsika fidinana rehetra dia manana relatedTargetfananana, ny sandany dia ny singa vatofantsika mifamadika.

Karazana hetsika Description
show.bs.dropdown Mirehitra avy hatrany ity hetsika ity rehefa antsoina ny fomba fampisehoana ohatra.
aseho.bs.dropdown Ity hetsika ity dia alefa rehefa hita ho hitan'ny mpampiasa ny fampidinana (hiandry ny fifindrana CSS, ho vita).
hide.bs.dropdown Alefa avy hatrany ity hetsika ity rehefa nantsoina ny fomba fanafenana.
hidden.bs.dropdown Voaroaka ity hetsika ity rehefa tapitra nafenina tamin'ny mpampiasa ny fampidinana (hiandry ny fifindrana CSS, ho vita).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Ohatra amin'ny navbar

Ny plugin ScrollSpy dia natao hanavao ho azy ireo tanjona nav mifototra amin'ny toeran'ny horonam-boky. Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Hasongadina ihany koa ireo singa ambany midina.

@matavy

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi talohan'ny namidy azy ireo. Tumblr farm-to-table zon'ny bisikileta na inona na inona. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mety mbola tsy naheno azy ireo ianao ary ny cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatoazy accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa volombava skateboard, adipisicing fugiat velit pitchfork volombava. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat efatra loko nisi, ea helvetica nulla carles. Kamiao sakafo palitao cosby misy tatoazy, vinyl's quis non freegan an'i mcsweeney. Lo-fi wes anderson +1 sartorial. Carles tsy aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

iray

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore single-original coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS dia adipisicing. Consectetur misy DIY kely messenger kitapo. Cred ex in, maharitra delectus consectetur fanny pack iphone.

rOA

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

three

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

Keytar twee blog, culpa messenger bag marfa na inona na inona kamiao sakafo delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats angamba mbola tsy henonao momba azy ireo consequat hoodie tsy misy gluten lo-fi fap aliquip. Miasa elit placeat alohan'ny hamidy, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Fampiasana

Mitaky Bootstrap nav

Ny Scrollspy amin'izao fotoana izao dia mitaky ny fampiasana singa Bootstrap nav mba hanasongadinana ireo rohy mavitrika.

Ilaina ny tanjona ID azo vahana

Ny rohy Navbar dia tsy maintsy manana tanjona id azo vahana. Ohatra, <a href="#home">home</a>tsy maintsy mifanaraka amin'ny zavatra ao amin'ny DOM toy ny <div id="home"></div>.

Tsy noraharahiana :visibleireo singa tsy kendrena

Ny singa kendrena izay tsy :visiblemifanaraka amin'ny jQuery dia tsy hojerena ary tsy hasongadina na oviana na oviana ireo singa nav mifanaraka aminy.

Mitaky toerana mifanila

Na inona na inona fomba fampiharana, scrollspy dia mitaky ny fampiasana position: relative;amin'ny singa tsikilovanao. Amin'ny ankamaroan'ny tranga dia ity no <body>. Rehefa scrollspy amin'ny singa hafa ankoatry ny <body>, ataovy azo antoka fa manana heightnapetraka sy overflow-y: scroll;ampiharina.

Amin'ny alàlan'ny data attributes

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar dia ampio data-spy="scroll"amin'ny singa tianao hitsikilo (matetika dia ity no <body>). Avy eo dia ampio ny data-targettoetra miaraka amin'ny ID na kilasy amin'ny singa ray amin'ny singa Bootstrap rehetra .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>

Amin'ny JavaScript

Rehefa avy nampidirina position: relative;tao amin'ny CSS-nao, antsoy ny scrollspy amin'ny alàlan'ny JavaScript:

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

fomba

.scrollspy('refresh')

Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset="".

Anarana karazana toerana misy anao Description
offset isa 10 Pikaola ho entin'ny tampony rehefa manao kajy ny toeran'ny horonam-boky.

zava-mitranga

Karazana hetsika Description
activate.bs.scrollspy Ity hetsika ity dia mirehitra isaky ny misy singa vaovao mampandeha ny scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabs azo togglable tab.js

Ohatra tabilao

Manampia fampiasa kiheba haingana sy mavitrika mba hivezivezy amin'ny alàlan'ny tontonana amin'ny atiny eo an-toerana, na dia amin'ny alàlan'ny menio midina. Tsy tohana ny kiheba nested.

Denim manta angamba mbola tsy henonao ny momba azy ireo pataloha jeans Austin. Nesciunt tofu stumptown aliqua, fanadiovana retro synth master. Ny volombava cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Alefaso toerana amin'ny salvia cillum iphone. Seitan aliquip quis cardigan akanjo amerikana, mpivaro-kena 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.

Manitatra ny fitetezana tabilao

Ity plugin ity dia manitatra ny singa navigateur misy tabilao mba hanampiana faritra azo vakiana.

Fampiasana

Alefaso amin'ny alalan'ny JavaScript ny kiheba azo vakiana (mila ampihetsika tsirairay ny tabilao tsirairay):

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

Azonao atao ny manetsika ny tabilao tsirairay amin'ny fomba maro:

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

fanamarihana

Azonao atao ny manetsika kiheba na pilule navigation nefa tsy manoratra JavaScript amin'ny alalan'ny famaritana fotsiny data-toggle="tab"na data-toggle="pill"amin'ny singa iray. Ny fampidirana ny navsy ny nav-tabskilasy amin'ny tabilao uldia hampihatra ny bootstrap tab styling , raha ampiana ny navand nav-pillsclasses dia hampihatra pill styling .

<div>

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

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

</div>

Fade effect

Mba hahatonga ny tabilao ho levona, ampio .fadeny tsirairay .tab-pane. Ny takelaka tabilao voalohany dia tsy maintsy .inmanao ny atiny voalohany ho hita ihany koa.

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

fomba

$().tab

Manetsika singa kiheba sy fitoeran'ny atiny. Ny tabilao dia tokony hanana na data-targetkendrena hrefny node container ao amin'ny DOM. Amin'ireo ohatra etsy ambony ireo, ny tabilao dia ny <a>s misy data-toggle="tab"toetra.

.tab('show')

Mifidy ny tabilao nomena ary mampiseho ny atiny mifandray aminy. Izay kiheba hafa voafantina teo aloha dia lasa tsy voafantina ary nafenina ny atiny mifandray aminy. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny takelaka tabilao (izany hoe alohan'ny shown.bs.tabnitrangan'ny hetsika).

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

zava-mitranga

Rehefa mampiseho kiheba vaovao dia miredareda toy izao manaraka izao ny hetsika:

  1. hide.bs.tab(amin'ny tabilao mavitrika ankehitriny)
  2. show.bs.tab(eo amin'ny tabilao haseho)
  3. hidden.bs.tab(eo amin'ny tabilao mavitrika teo aloha, mitovy amin'ny an'ny hide.bs.tabhetsika)
  4. shown.bs.tab(eo amin'ny tabilao vao naseho vao mavitrika, mitovy amin'ny an'ny show.bs.tabhetsika)

Raha tsy misy kiheba efa navitrika dia tsy ho voaroaka ny hetsika ary hide.bs.tab.hidden.bs.tab

Karazana hetsika Description
show.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba, saingy alohan'ny hisehoan'ny kiheba vaovao. Ampiasao event.targetsy event.relatedTargetlasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
aseho.bs.tab Ity hetsika ity dia mirehitra amin'ny seho kiheba rehefa avy naseho ny kiheba iray. Ampiasao event.targetsy event.relatedTargetlasibatra ny tabilao mavitrika sy ny tabilao mavitrika teo aloha (raha misy).
hide.bs.tab Mirehitra ity hetsika ity rehefa misy kiheba vaovao haseho (ary noho izany dia afenina ny kiheba mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetlasibatra ny tabilao mavitrika ankehitriny sy ny tabilao vaovao tsy ho ela.
hidden.bs.tab Mirehitra ity hetsika ity rehefa miseho ny tabilao vaovao (ary noho izany dia afenina ny tabilao mavitrika teo aloha). Ampiasao event.targetsy event.relatedTargetikendrena ny tabilao mavitrika teo aloha sy ny tabilao mavitrika vaovao.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips tooltip.js

Nahazo aingam-panahy avy amin'ny plugin jQuery.tipsy tena tsara nosoratan'i Jason Frame; Tooltips dia kinova nohavaozina, izay tsy miankina amin'ny sary, mampiasa CSS3 ho an'ny sary mihetsika, ary angona-attributes ho an'ny fitahirizana lohateny eo an-toerana.

Ny toro-hevitra momba ny fitaovana misy lohateny tsy misy halavany dia tsy aseho mihitsy.

OHATRA

Mitsangàna eo amin'ny rohy etsy ambany raha te hahita fitaovana:

pataloha tery next level keffiyeh angamba mbola tsy naheno azy ireo ianao. Tranon-tsary volombava manta denim letterpress vegan messenger bag stumptown. Seitan Farm-to-table, mcsweeney's fixie sustainable quinoa 8-bit american apparel dia manana terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, efatra loko mcsweeney's cleanse vegan chambray. Mpanao asa tanana tena mahatsikaiky na inona na inona keytar , scenester farm-to-table banksy Austin twitter mitantana freegan cred denim manta kafe tokana nipoitra.

Fitaovana static

Misy safidy efatra: ambony, havanana, ambany ary havia.

Lalana efatra

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

Fampiasana opt-in

Noho ny antony fampisehoana, ny Tooltip sy Popover data-apis dia opt-in, midika izany fa tsy maintsy ataonao voalohany izy ireo .

Ny fomba iray hanombohana ny toro-hevitra rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-toggletoetrany:

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

Fampiasana

Ny plugin tooltip dia mamorona votoaty sy marika amin'ny fangatahana, ary amin'ny alàlan'ny default dia mametraka ireo toro-hevitra aorian'ny singa trigger.

Alefaso amin'ny alalan'ny JavaScript ny toro-hevitra:

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

fanamarihana

Ny mari-pamantarana ilaina ho an'ny tondro-fitaovana dia datatoetra iray ihany ary titleamin'ny singa HTML tianao hananana tondro-fitaovana. Ny mari-pamantarana vokarina amin'ny tondro-fitaovana dia tsotra, na dia mitaky toerana aza izany (amin'ny alàlan'ny default, napetraky topny plugin).

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

Rohy andalana maromaro

Indraindray ianao te-hanampy tondro-fitaovana amin'ny rohibe mifono tsipika maromaro. Ny fitondran-tena mahazatra an'ny plugin tooltip dia ny mametraka azy mitsivalana sy mitsangana. Ampio white-space: nowrap;amin'ny vatofantsika mba hisorohana izany.

Ny toro-làlana amin'ny vondrona bokotra, vondrona fampidirana ary tabilao dia mila lamina manokana

Rehefa mampiasa toro-hevitra momba ny singa ao anatin'ny a .btn-groupna ny .input-group, na amin'ny singa mifandraika amin'ny latabatra ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), dia tsy maintsy mamaritra ny safidy ianao container: 'body'(voarakitra eto ambany) mba hisorohana ny voka-dratsy tsy ilaina (toy ny singa mitombo midadasika sy/ na very ny zorony boribory rehefa mipoitra ny tondro fitaovana).

Aza manandrana mampiseho toro-hevitra momba ny singa miafina

Ny fiantsoana $(...).tooltip('show')rehefa misy ny singa kendrena dia display: none;hahatonga ny kiheba ho diso toerana.

Toro-làlana azo idirana ho an'ireo mpampiasa teknolojia manampy

Ho an'ireo mpampiasa mandeha amin'ny fitendry, ary indrindra ireo mpampiasa teknolojia manampy, dia tokony hampiditra toro-hevitra fotsiny amin'ireo singa azo ifantohan'ny klavier toy ny rohy, ny fanaraha-maso ny endrika, na ny singa tsy manara-dalàna misy tabindex="0"toetra.

Ny toro-làlana momba ny singa kilemaina dia mila singa wrapper

Raha te hampiditra tondro-fitaovana disabledamin'ny .disabledsinga iray, dia apetraho ao anatin'ny a ny singa <div>ary ampiharo amin'izany <div>kosa ny tondro-fitaovana.

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

Anarana Type toerana misy anao Description
fanentanana boolean marina Ampiharo CSS fade transition amin'ny tooltip
fitoeran-javatra string | DISO DISO

Ampidiro amin'ny singa manokana ny tondro-fitaovana. Ohatra: container: 'body'. Ity safidy ity dia tena ilaina indrindra amin'ny ahafahanao mametraka ny torolalana amin'ny fikorianan'ny antontan-taratasy eo akaikin'ny singa manentana - izay hisakana ny fitaovana tsy hitsingevana hiala amin'ny singa manentana mandritra ny fanovana ny haben'ny varavarankely.

fahatarana laharana | zavatra 0

Fanemorana ny fampisehoana sy ny fanafenana ny toro-hevitra (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { "show": 500, "hide": 100 }

html boolean DISO Ampidiro ao amin'ny tondro-fitaovana ny HTML. Raha diso, ny textfomba jQuery dia hampiasaina hampidirana votoaty ao amin'ny DOM. Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao.
fametrahana string | asa 'top'

Ahoana ny fametrahana ny tondro-fitaovana - top | ambany | ankavia | marina | fiara.
Rehefa voatondro ny "auto", dia hamerenana amin'ny laoniny ny tondro-fitaovana. Ohatra, raha "auto left" ny fametrahana, dia hiseho miankavia ny toro-hevitra raha azo atao, raha tsy izany dia hiseho miankavanana.

Rehefa ampiasaina hamaritana ny fametrahana ny asa iray dia antsoina miaraka amin'ny node DOM tooltip ho tohan-kevitra voalohany ary ny singa DOM node ho azy faharoa. Ny thiscontexte dia apetraka amin'ny ohatra amin'ny tooltip.

mpifidy tady DISO Raha misy mpifidy omena dia atolotra amin'ireo tanjona voafaritra ireo zavatra momba ny fitaovana. Amin'ny fampiharana, izany dia ampiasaina mba ahafahan'ny votoaty HTML mavitrika hampidirana toro-hevitra. Jereo ity ary ohatra misy fampahalalana .
môdely tady '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML fototra ampiasaina amin'ny famoronana ny toro-hevitra.

Ampidirina titleao amin'ny .tooltip-inner.

.tooltip-arrowho lasa zana-tsipìkan'ny fitaovana.

Ny singa famonosana ivelany indrindra dia tokony hanana ny .tooltipkilasy.

lohateny string | asa ''

Sanda titre default raha titletsy misy ny toetra.

Raha misy asa omena, dia hantsoina miaraka amin'ny thisreferences napetraka amin'ny singa izay ampifandraisina amin'ny tooltip.

miteraka tady 'hover focus' Ahoana ny fomba fandraisan'ny tooltip - tsindrio | hover | mifantoka | manual. Mety handalo trigger maromaro ianao; saraho amin'ny toerana iray izy ireo. manualtsy azo atambatra amin'ny trigger hafa.
viewport string | object | asa { mpifidy: 'body', padding: 0 }

Tazonina ao anatin'ny fetran'ity singa ity ny tendron'ny fitaovana. Ohatra: viewport: '#viewport'na{ "selector": "#viewport", "padding": 0 }

Raha misy asa omena, dia antsoina miaraka amin'ny singa DOM node izy io ho tohan-kevitra tokana. Ny thiscontexte dia apetraka amin'ny ohatra amin'ny tooltip.

Toetran'ny data ho an'ny toro-làlana tsirairay

Ny safidy ho an'ny toro-làlana tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data, araka ny hazavaina etsy ambony.

fomba

$().tooltip(options)

Ampifandraiso amin'ny fanangonana singa iray ny mpitantana fitaovana.

.tooltip('show')

Maneho ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nanehoana ny tondro-fitaovana (izany hoe alohan'ny shown.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip. Ny toro-hevitra momba ny fitaovana misy lohateny tsy misy halavany dia tsy aseho mihitsy.

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

.tooltip('hide')

Manafina ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nafenina ny tondro fitaovana (izany hoe alohan'ny hidden.bs.tooltipnitrangan'ny hetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

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

.tooltip('toggle')

Manova ny tondro-fitaovan'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny tondro-fitaovana (izany hoe talohan'ny nitrangan'ny shown.bs.tooltipna hidden.bs.tooltiphetsika). Ity dia raisina ho toy ny "manual" triggering ny tooltip.

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

.tooltip('destroy')

Manafina sy manimba ny tondro-fitaovan'ny singa iray. Ireo toro-lalana mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo rava tsirairay amin'ny singa trigger.

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

zava-mitranga

Karazana hetsika Description
show.bs.tooltip Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
shown.bs.tooltip Voaroaka ity hetsika ity rehefa naseho ho hitan'ny mpampiasa ny toro-lalana (hiandry ny fahavitan'ny fifindrana CSS).
hide.bs.tooltip Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
hidden.bs.tooltip Voaroaka ity hetsika ity rehefa tapitra nafenina tamin'ny mpampiasa ny toro-hevitra (hiandry ny famitana ny fifindrana CSS).
inserted.bs.tooltip Ity hetsika ity dia alefa aorian'ny show.bs.tooltiphetsika rehefa nampidirina tao amin'ny DOM ny môdelin'ny tooltip.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Manampia votoaty mipetaka kely, toy ny ao amin'ny iPad, amin'ny singa rehetra amin'ny fametrahana fampahalalana faharoa.

Popovers ny lohateniny sy ny atiny dia aotra ny halavany dia tsy aseho mihitsy.

Fiankinan-doha amin'ny plugin

Ny Popovers dia mitaky ny plugin tooltip mba hampidirina ao amin'ny kinova Bootstrap anao.

Fampiasana opt-in

Noho ny antony fampisehoana, ny Tooltip sy Popover data-apis dia opt-in, midika izany fa tsy maintsy ataonao voalohany izy ireo .

Ny fomba iray hanombohana ny popovers rehetra amin'ny pejy iray dia ny fisafidianana azy ireo amin'ny data-toggletoetrany:

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

Ny popovers amin'ny vondrona bokotra, vondrona fampidirana, ary latabatra dia mila lamina manokana

Rehefa mampiasa popovers amin'ny singa ao anatin'ny a .btn-groupna an .input-group, na amin'ny singa mifandraika amin'ny latabatra ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), dia tsy maintsy mamaritra ny safidy ianao container: 'body'(voarakitra eto ambany) mba hisorohana ny voka-dratsy tsy ilaina (toy ny singa mitombo mivelatra sy/ na very ny zorony boribory rehefa mipoitra ny popover).

Aza manandrana mampiseho popover amin'ny singa miafina

Ny fiantsoana $(...).popover('show')rehefa misy ny singa kendrena dia display: none;hahatonga ny popover ho diso toerana.

Ny popovers amin'ny singa kilemaina dia mila singa wrapper

Raha te hampiditra popover amina singa disablediray .disableddia apetraho ao anatin'ny a ny singa <div>ary ampiharo amin'izany ny popover <div>.

Rohy andalana maromaro

Indraindray ianao te-hanampy popover amin'ny rohibe iray mamehy andalana maromaro. Ny fitondran-tena mahazatra amin'ny plugin popover dia ny mametraka azy mitsivalana sy mitsangana. Ampio white-space: nowrap;amin'ny vatofantsika mba hisorohana izany.

OHATRA

static popover

Misy safidy efatra: ambony, havanana, ambany ary havia.

Popover ambony

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

Popover havanana

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

Popover ambany

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

Popover sisa

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

Demo mivantana

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

Lalana efatra

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

Alefaso amin'ny tsindrio manaraka

Ampiasao ny focustrigger hanilika popovers amin'ny tsindry manaraka ataon'ny mpampiasa.

Fanamafisana manokana ilaina amin'ny fandroahana-amin'ny-tsindrio manaraka

Ho an'ny fihetsika mifanandrify amin'ny navigateur sy cross-platform dia tsy maintsy mampiasa ny <a>marika ianao, fa tsy ny <button>tag, ary tsy maintsy ampidirinao koa ny toetra role="button"sy 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>

Fampiasana

Alefaso ny popovers amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-animation="".

Anarana Type toerana misy anao Description
fanentanana boolean marina Ampiharo CSS fade transition amin'ny popover
fitoeran-javatra string | DISO DISO

Manampy ny popover amina singa iray manokana. Ohatra: container: 'body'. Ity safidy ity dia tena ilaina indrindra amin'ny ahafahanao mametraka ny popover amin'ny fikorianan'ny antontan-taratasy eo akaikin'ny singa mandrisika - izay hanakana ny popover tsy hitsingevana amin'ny singa miteraka mandritra ny fanovana ny haben'ny varavarankely.

votoaty string | asa ''

Sanda votoaty default raha data-contenttsy misy ny toetra.

Raha misy asa omena, dia hantsoina miaraka amin'ny thisreferences napetraka amin'ny singa izay ampifandraisina amin'ny popover.

fahatarana laharana | zavatra 0

Fanemorana ny fampisehoana sy fanafenana ny popover (ms) - tsy mihatra amin'ny karazana trigger manual

Raha misy laharana omena dia mihatra amin'ny fanafenana/seho ny fahatarana

Ny firafitry ny zavatra dia:delay: { "show": 500, "hide": 100 }

html boolean DISO Ampidiro ao anaty popover ny HTML. Raha diso, ny textfomba jQuery dia hampiasaina hampidirana votoaty ao amin'ny DOM. Mampiasà lahatsoratra raha manahy momba ny fanafihana XSS ianao.
fametrahana string | asa 'marina'

Ahoana ny fametrahana ny popover - top | ambany | ankavia | marina | fiara.
Rehefa voatondro ny "auto", dia hamerenana amin'ny laoniny ny popover izany. Ohatra, raha "auto left" ny fametrahana, dia hiseho miankavia ny popover raha azo atao, raha tsy izany dia hiseho havanana.

Rehefa ampiasaina hamaritana ny toerana ny asa iray, dia antsoina miaraka amin'ny popover DOM node ho tohan-kevitra voalohany ary ny singa DOM node ho azy faharoa. thisApetraka amin'ny ohatra popover ny contexte .

mpifidy tady DISO Raha misy mpifidy omena, ny zavatra popover dia atolotra amin'ireo tanjona voafaritra. Amin'ny fampiharana, izany dia ampiasaina mba ahafahan'ny votoaty HTML mavitrika hampidirana popovers. Jereo ity ary ohatra misy fampahalalana .
môdely tady '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

Base HTML ampiasaina rehefa mamorona ny popover.

Ny popover's titledia ampidirina ao amin'ny .popover-title.

Ny popover's contentdia ampidirina ao amin'ny .popover-content.

.arrowho lasa zana-tsipìka popover.

Ny singa famonosana ivelany indrindra dia tokony hanana ny .popoverkilasy.

lohateny string | asa ''

Sanda titre default raha titletsy misy ny toetra.

Raha misy asa omena, dia hantsoina miaraka amin'ny thisreferences napetraka amin'ny singa izay ampifandraisina amin'ny popover.

miteraka tady 'click' Ahoana no nanombohan'ny popover - tsindrio | hover | mifantoka | manual. Mety handalo trigger maromaro ianao; saraho amin'ny toerana iray izy ireo. manualtsy azo atambatra amin'ny trigger hafa.
viewport string | object | asa { mpifidy: 'body', padding: 0 }

Mitazona ny popover ao anatin'ny sisin'ity singa ity. Ohatra: viewport: '#viewport'na{ "selector": "#viewport", "padding": 0 }

Raha misy asa omena, dia antsoina miaraka amin'ny singa DOM node izy io ho tohan-kevitra tokana. thisApetraka amin'ny ohatra popover ny contexte .

Toetran'ny data ho an'ny popovers tsirairay

Ny safidy ho an'ny popovers tsirairay dia azo faritana amin'ny alàlan'ny fampiasana ny toetran'ny data, araka ny hazavaina etsy ambony.

fomba

$().popover(options)

Manomboha popover ho an'ny fanangonana singa.

.popover('show')

Mampiseho popover singa iray. Miverina any amin'ny mpiantso alohan'ny tena naseho ny popover (izany hoe alohan'ny shown.bs.popovernitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover. Popovers ny lohateniny sy ny atiny dia aotra ny halavany dia tsy aseho mihitsy.

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

.popover('hide')

Manafina ny popover an'ny singa iray. Miverina amin'ny mpiantso alohan'ny nafenina ny popover (izany hoe alohan'ny hidden.bs.popovernitrangan'ny hetsika). Izany dia heverina ho "manual" triggering ny popover.

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

.popover('toggle')

Manova ny popover an'ny singa iray. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny popover (izany hoe alohan'ny nitrangan'ny shown.bs.popoverna hidden.bs.popoverhetsika). Izany dia heverina ho "manual" triggering ny popover.

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

.popover('destroy')

Manafina sy manimba ny popover singa iray. Popovers izay mampiasa delegasiona (izay noforonina amin'ny alalan'ny safidy selector) dia tsy azo ravana tsirairay amin'ny singa trigger.

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

zava-mitranga

Karazana hetsika Description
show.bs.popover Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
aseho.bs.popover Ity hetsika ity dia alefa rehefa naseho ho hitan'ny mpampiasa ny popover (hiandry ny famitana ny fifindrana CSS).
hide.bs.popover Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba fiasa.
hidden.bs.popover Ity hetsika ity dia alefa rehefa vita ny nafenina tamin'ny mpampiasa ny popover (hiandry ny famitana ny fifindrana CSS).
inserted.bs.popover Ity hetsika ity dia alefa aorian'ny show.bs.popoverhetsika rehefa nampidirina tao amin'ny DOM ny môdely popover.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Hafatra fanairana alert.js

Fampandrenesana ohatra

Ampio ny fampiasa fandroahana amin'ny hafatra fanairana rehetra miaraka amin'ity plugin ity.

Rehefa mampiasa .closebokotra iray dia tsy maintsy zaza voalohany amin'ny .alert-dismissibleary tsy misy atiny lahatsoratra mety ho eo alohan'ny marika.

Fampiasana

Ampio fotsiny data-dismiss="alert"amin'ny bokotra akaiky anao mba hanomezana fampiasa akaiky fanairana ho azy. Ny fanakatonana fanairana dia manala azy amin'ny DOM.

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

Raha te hampiasa sary mihetsika ny fanairanao rehefa mihidy dia ataovy azo antoka fa manana ny .fadeand.in kilasy efa mihatra aminy izy ireo.

fomba

$().alert()

Manao fanairana amin'ny fihainoana hetsika kitiho amin'ny singa taranaka manana ny data-dismiss="alert"toetra. (Tsy ilaina rehefa mampiasa ny fampandehanana mandeha ho azy ny data-api.)

$().alert('close')

Manakatona fanairana amin'ny fanesorana azy amin'ny DOM. Raha misy ny .fadeand .inclasses ao amin'ilay singa, dia hanjavona ny fanairana alohan'ny hanesorana azy.

zava-mitranga

Ny plugin fanairana an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampiasa mailo.

Karazana hetsika Description
close.bs.alert Mirehitra avy hatrany ity hetsika ity rehefa closeantsoina ny fomba fiasa.
closed.bs.alert Tafavoaka ity hetsika ity rehefa nakatona ny fanairana (hiandry ny fahavitan'ny fifindrana CSS).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Buttons button.js

Manaova bebe kokoa amin'ny bokotra. Ny bokotra fanaraha-maso dia manambara na mamorona vondrona bokotra ho an'ny singa maro kokoa toy ny barazy.

Mifanaraka amin'ny navigateur

Firefox dia manohy ny fanjakana mifehy ny endrika (kilemaina sy ny fanaraha-maso) manerana ny entana pejy . Ny vahaolana amin'izany dia ny fampiasana autocomplete="off". Jereo Mozilla bug #654072 .

Stateful

Ampio data-loading-text="Loading..."mba hampiasa ny toetry ny entana amin'ny bokotra iray.

Ity endri-javatra ity dia tsy ampiasaina hatramin'ny v3.3.5 ary nesorina tamin'ny v4.

Ampiasao izay fanjakana tianao!

Ho an'ity fihetsiketsehana ity dia mampiasa data-loading-textary izahay $().button('loading'), saingy tsy izany ihany no fanjakana azonao ampiasaina. Jereo bebe kokoa momba izany eto ambany ao amin'ny $().button(string)antontan -taratasy .

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

Ampio data-toggle="button"mba hampavitrika ny famadihana amin'ny bokotra tokana.

Ny bokotra efa navadika dia mila .activearyaria-pressed="true"

Ho an'ny bokotra efa navadika mialoha dia tsy maintsy ampidirinao amin'ny tenanao ny .activekilasy sy ny aria-pressed="true"toetra button.

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

Checkbox / Radio

Ampio data-toggle="buttons"amin'ny .btn-groupboaty fisaka misy na fampidiran-dresaka amin'ny onjam-peo mba ahafahana manova ny fomba fiasany.

Ilaina ny safidy voafantina.active

Ho an'ny safidy voafantina dia tsy maintsy ampidirinao .activeamin'ny fampidirana ny kilasy ny labeltenanao.

Ny toe-javatra voamarika hita maso ihany no havaozina amin'ny tsindry

Raha toa ka havaozina ny toetry ny bokotra checkbox nefa tsy manetsika clickhetsika eo amin'ny bokotra (ohatra amin'ny <input type="reset">alàlan'ny fametrahana ny checkedfananan'ny fampidirana), dia mila manodina ny .activekilasy amin'ny fidirana labelianao.

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

fomba

$().button('toggle')

Manova ny toetry ny fanosehana. Manome ny bokotra ny endrika fa efa navitrika.

$().button('reset')

Mamerina ny toetry ny bokotra - manova lahatsoratra amin'ny lahatsoratra tany am-boalohany. Ity fomba ity dia asynchronous ary miverina alohan'ny fahavitan'ny famerenana.

$().button(string)

Manova lahatsoratra amin'ny toe-tsoratra voafaritra voafaritra.

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

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

Collapse collapse.js

Plugin flexible izay mampiasa kilasy vitsivitsy ho an'ny fihetsika mora miova.

Fiankinan-doha amin'ny plugin

Ny fianjerana dia mila ampidirina ao amin'ny kinova Bootstrap anao ny plugins transitions .

OHATRA

Kitiho ny bokotra etsy ambany mba hampisehoana sy hanafenana singa hafa amin'ny alàlan'ny fanovana kilasy:

  • .collapsemanafina votoaty
  • .collapsingdia ampiharina mandritra ny tetezamita
  • .collapse.inmampiseho votoaty

Azonao atao ny mampiasa rohy misy ilay hreftoetra, na bokotra misy ilay data-targettoetra. Amin'ireo tranga roa ireo, data-toggle="collapse"dia ilaina ny.

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>

Ohatra accordion

Ampitomboy ny fitondran-tena firodana mahazatra mba hamoronana akorandriaka miaraka amin'ny singa tontonana.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
<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>

Azo atao koa ny manakalo .panel-bodys amin'ny .list-groups.

  • Bootply
  • Iray itmus ac facilin
  • Eros faharoa

Ataovy azo idirana ny fanaraha-maso manitatra/mirodana

Ataovy azo antoka ny manampy aria-expandedny singa fanaraha-maso. Ity toetra ity dia mamaritra mazava ny toetry ny singa azo harodana amin'izao fotoana izao mba hamakiana ny mpamaky sy ny teknolojia fanampiana mitovy. Raha mihidy amin'ny alàlan'ny default ny singa azo rava, dia tokony hanana sanda aria-expanded="false". Raha toa ianao ka nametraka ny singa azo rava ho misokatra amin'ny alàlan'ny fampiasana ny inkilasy dia apetraho aria-expanded="true"amin'ny fanaraha-maso kosa. Ny plugin dia hanova ho azy io toetra io mifototra amin'ny hoe nosokafana na nakatona ilay singa azo rava.

Fanampin'izany, raha mikendry singa tokana azo harodana ny singanao - izany hoe data-targetmanondro idmpifidy iray ny toetranao - azonao atao ny manampy aria-controlstoetra fanampiny amin'ny singa fanaraha-maso, misy ny idsinga azo harodana. Ireo mpamaky efijery maoderina sy ireo teknolojia fanampiana mitovy amin'izany dia mampiasa an'io toetra io mba hanomezana ireo mpampiasa hitsin-dàlana fanampiny hivezivezy mivantana mankany amin'ilay singa azo rava.

Fampiasana

Ny plugin collapse dia mampiasa kilasy vitsivitsy hifehezana ny fampiakarana mavesatra:

  • .collapsemanafina ny votoatiny
  • .collapse.inmampiseho ny votoatiny
  • .collapsingampiana rehefa manomboka ny tetezamita, ary esorina rehefa tapitra

Ireo kilasy ireo dia azo jerena ao amin'ny component-animations.less.

Amin'ny alàlan'ny data attributes

Ampio fotsiny data-toggle="collapse"ary a data-targetamin'ny singa mba hanendry ho azy ny fanaraha-maso ny singa azo rava. Ny data-targettoetra dia manaiky mpifidy CSS hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapseamin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny in.

Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny fanaraha-maso azo harodana, ampio ny toetran'ny data data-parent="#selector". Jereo ny demo raha te hahita an'ity hetsika ity.

Amin'ny JavaScript

Alefa tanana amin'ny:

$('.collapse').collapse()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-parent="".

Anarana karazana toerana misy anao Description
ray aman-dreny mpifidy DISO Raha misy mpifidy omena, dia hikatona avokoa ny singa azo harodana eo ambanin'ny ray aman-dreny voatondro rehefa aseho io singa azo harodana io. (mitovy amin'ny fihetsika akordionina nentim-paharazana - miankina amin'ny panelkilasy izany)
mifamadika boolean marina Manova ny singa azo harodana amin'ny fiantsoana

fomba

.collapse(options)

Mampihetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object.

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

.collapse('toggle')

Manova singa azo harodana ho aseho na afenina. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny singa azo rava (izany hoe talohan'ny nitrangan'ny shown.bs.collapsena hidden.bs.collapsehetsika).

.collapse('show')

Mampiseho singa azo harodana. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa azo harodana (izany hoe alohan'ny shown.bs.collapsenitrangan'ny hetsika).

.collapse('hide')

Manafina singa azo harodana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny singa azo harodana (izany hoe alohan'ny hidden.bs.collapsenitrangan'ny hetsika).

zava-mitranga

Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampandehanana mirodana.

Karazana hetsika Description
show.bs.collapse Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
aseho.bs.collapse Ity hetsika ity dia alefa rehefa misy singa mirodana hita ho hitan'ny mpampiasa (hiandry ny famitana ny fifindrana CSS).
hide.bs.collapse Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba.
hidden.bs.collapse Ity hetsika ity dia voaroaka rehefa misy singa mianjera nafenina tamin'ny mpampiasa (hiandry ny fifindran'ny CSS ho vita).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Singa sary mihetsika ho an'ny fitetezana singa, toy ny carousel. Tsy tohanana ny carousels voatokana.

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

Captions azo atao

Ampio caption amin'ny slide-nao mora foana miaraka amin'ny .carousel-captionsinga ao anatin'ny .item. Apetraho ao anatin'izany ny HTML rehetra azo atao ary halamina sy halamina ho azy izany.

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

Carousels maro

Ny carousels dia mitaky ny fampiasana ny ideny amin'ny kaontenera ivelany indrindra (ny .carousel) mba hifehezana ny carousel miasa tsara. Rehefa manampy carousels maromaro, na rehefa manova carousel id, dia ataovy izay hanavao ny fanaraha-maso mifandraika.

Amin'ny alàlan'ny data attributes

Mampiasà toetra angon-drakitra mba hifehezana mora foana ny toerana misy ny carousel. data-slidemanaiky ny teny fanalahidy prevna next, izay manova ny toeran'ny slide mifandraika amin'ny toerana misy azy ankehitriny. Raha tsy izany, ampiasao data-slide-tony fampitaovana fanondroana misesy manta mankany amin'ny carousel data-slide-to="2", izay mamindra ny toeran'ny kisendrasendra mankany amina fanondroana manokana manomboka amin'ny 0.

Ny data-ride="carousel"toetra dia ampiasaina hanamarihana carousel ho toy ny animating manomboka amin'ny entana pejy. Tsy azo ampiasaina miaraka amin'ny (miankina sy tsy ilaina) fanombohana JavaScript mazava ny carousel mitovy.

Amin'ny JavaScript

Antsoy amin'ny tanana ny carousel amin'ny:

$('.carousel').carousel()

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-interval="".

Anarana karazana toerana misy anao Description
elanelana isa 5000 Ny faharetan'ny fotoana eo anelanelan'ny fandehanana mandeha ho azy amin'ny zavatra iray. Raha diso dia tsy mandeha ho azy ny carousel.
fiatoana string | tohivakana foana "hover" Raha apetraka amin'ny "hover", atsaharo ny fihodinan'ny carousel mouseenterary avereno indray ny fihodinan'ny carousel amin'ny mouseleave. Raha apetraka amin'ny null, dia tsy hampiato azy ny fikopaka eo ambonin'ny carousel.
fonosina boolean marina Na tokony hihodina tsy tapaka ny carousel na hisy fiatoana mafy.
Ohatra boolean marina Na tokony hihetsika amin'ny hetsika fitendry ny carousel.

Manomboka ny carousel miaraka amin'ny safidy azo atao objectary manomboka mandehandeha amin'ny entana.

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

Mihodikodina amin'ireo singa carousel miankavia miankavanana.

Manakana ny carousel tsy hivezivezy amin'ny entana.

Mihodina ny carousel mankany amin'ny frame manokana (mifototra amin'ny 0, mitovy amin'ny array).

Mihodina mankany amin'ilay singa teo aloha.

Mihodina mankany amin'ny singa manaraka.

Ny kilasin'ny carousel an'ny Bootstrap dia mampiseho fisehoan-javatra roa ho an'ny fampidiran-dresaka amin'ny fiasa carousel.

Samy manana ireto toetra fanampiny ireto ny hetsika roa:

  • direction: Lalana mikoriana ny carousel (na "left"na "right").
  • relatedTarget: Ny singa DOM izay apetraka amin'ny toerany ho singa mavitrika.

Ny hetsika carousel rehetra dia alefa amin'ny carousel mihitsy (izany hoe ao amin'ny <div class="carousel">).

Karazana hetsika Description
slide.bs.carousel Mirehitra avy hatrany ity hetsika ity rehefa ampiasaina ny slidefomba fiasa.
slid.bs.carousel Tafavoaka ity hetsika ity rehefa nahavita ny fifindran'ny diany ny carousel.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix affix.js

OHATRA

Ny plugin affix dia mihodina position: fixed;sy miala, maka tahaka ny vokatra hita miaraka amin'ny position: sticky;. Ny subnavigation eo ankavanana dia demo mivantana amin'ny plugin affix.


Fampiasana

Ampiasao ny plugin affix amin'ny alàlan'ny toetra data na amin'ny tananao miaraka amin'ny JavaScript anao manokana. Amin'ireo toe-javatra roa ireo dia tsy maintsy manome CSS ianao amin'ny fametrahana sy ny sakan'ny atiny affixed anao.

Fanamarihana: Aza mampiasa ny plugin affix amin'ny singa iray ao anatin'ny singa iray somary mipetrapetraka, toy ny tsanganana voasintona na atosika, noho ny tsy fahampian'ny Safari rendering .

Fametrahana amin'ny alàlan'ny CSS

Ny plugin affix dia mifamadika eo anelanelan'ny kilasy telo, izay samy maneho fanjakana manokana: .affix, .affix-top, ary .affix-bottom. Tsy maintsy manome ny styles ianao, ankoatra ny position: fixed;on .affix, ho an'ireo kilasy ireo ny tenanao (tsy miankina amin'ity plugin ity) mba hikarakarana ny toerana tena izy.

Toy izao ny fomba fiasan'ny plugin affix:

  1. Hanombohana, manampy ny plugin .affix-topmanondro fa ny singa dia eo amin'ny toerana ambony indrindra. Amin'izao fotoana izao dia tsy ilaina ny fametrahana CSS.
  2. Ny fandehanana mandalo ny singa tianao apetaka dia tokony hiteraka ny tena affixing. Eto no .affixmanolo .affix-topsy mametraka position: fixed;(nomen'ny CSS Bootstrap).
  3. Raha voafaritra ny offset ambany dia tokony .affixhosoloina .affix-bottom. Satria tsy voatery ny offsets, ny fametrahana iray dia mitaky anao hametraka ny CSS mety. Amin'ity tranga ity, ampio position: absolute;raha ilaina. Ny plugin dia mampiasa ny toetran'ny data na safidy JavaScript hamaritana ny toerana hametrahana ilay singa avy any.

Araho ireo dingana etsy ambony mba hametrahana ny CSS-nao ho an'ny iray amin'ireo safidy fampiasana etsy ambany.

Amin'ny alàlan'ny data attributes

Mba hanampiana mora foana ny fitondran-tena affix amin'ny singa rehetra, ampio fotsiny data-spy="affix"amin'ny singa tianao hitsikilo. Mampiasà offset mba hamaritana hoe rahoviana no hanodina ny fanindriana singa iray.

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

Amin'ny JavaScript

Antsoy ny plugin affix amin'ny JavaScript:

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

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset-top="200".

Anarana karazana toerana misy anao Description
offset laharana | asa | zavatra 10 Pikaola hosoloina amin'ny efijery rehefa manao kajy ny toeran'ny horonana. Raha misy isa tokana omena, ny offset dia ampiharina amin'ny lalana ambony sy ambany. Mba hanomezana offset tokana, ambany sy ambony dia omeo zavatra offset: { top: 10 }na offset: { top: 10, bottom: 5 }. Mampiasà asa iray rehefa mila manao kajy dynamique ianao.
tanjona mpifidy | node | singa jQuery ny windowzavatra Mamaritra ny singa kendrena amin'ny affix.

fomba

.affix(options)

Mampihetsika ny atiny ho votoaty apetaka. Manaiky safidy azo atao object.

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

.affix('checkPosition')

Mamerina kajy ny toetry ny affix mifototra amin'ny refy, ny toerana ary ny toeran'ny horonam-boky misy ireo singa mifandraika amin'izany. Ny .affix, .affix-top, ary ny .affix-bottomkilasy dia ampiana na esorina amin'ny atiny mipetaka araka ny fanjakana vaovao. Mila antsoina io fomba io isaky ny miova ny refin'ny atiny apetaka na ny singa kendrena, mba hahazoana antoka ny fipetrahan'ny atiny mipetaka marina.

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

zava-mitranga

Ny plugin affix an'ny Bootstrap dia mampiseho hetsika vitsivitsy amin'ny fampifandraisana amin'ny fiasa affix.

Karazana hetsika Description
affix.bs.affix Mirehitra avy hatrany ity hetsika ity alohan'ny hametrahana ilay singa.
affixed.bs.affix Ity hetsika ity dia alefa aorian'ny fametrahana ilay singa.
affix-top.bs.affix Mirehitra avy hatrany ity hetsika ity alohan'ny hametrahana ilay singa-ambony.
affixed-top.bs.affix Ity hetsika ity dia alefa aorian'ny fametrahana ny singa-tampony.
affix-bottom.bs.affix Mirehitra avy hatrany ity hetsika ity alohan'ny hametrahana ilay singa-ambany.
affixed-bottom.bs.affix Ity hetsika ity dia alefa rehefa avy nasiana singa-ambany.