Kakaretso

Motho ka mong kapa a kopantswe

Li-plugins li ka kenyelletsoa ka bonngoe (ho sebelisa *.jslifaele tsa motho ka mong tsa Bootstrap), kapa kaofela ka nako e le 'ngoe (ho sebelisa bootstrap.jskapa minified bootstrap.min.js).

Ho sebelisa JavaScript e hlophisitsoeng

Ka bobeli bootstrap.jsmme bootstrap.min.jsli na le li-plugins tsohle faeleng e le 'ngoe. Kenyelletsa e le 'ngoe feela.

Litšenyehelo tsa plugin

Li-plugins tse ling le likarolo tsa CSS li itšetlehile ka li-plugins tse ling. Haeba u kenyelletsa li-plugins ka bonngoe, etsa bonnete ba hore u hlahloba litšepiso tsena ho litokomane. Hape hlokomela hore li-plugins tsohle li itšetlehile ka jQuery (sena se bolela hore jQuery e tlameha ho kenngoa pele ho lifaele tsa plugin). Ikopanye le ronabower.json ho bona hore na ke mefuta efe ea jQuery e tšehetsoeng.

Litšobotsi tsa data

U ka sebelisa li-plugins tsohle tsa Bootstrap feela ka har'a markup API ntle le ho ngola mola o le mong oa JavaScript. Ena ke API ea boemo ba pele ba Bootstrap 'me e lokela ho ba maikutlo a hau a pele ha u sebelisa plugin.

Ho boletse joalo, maemong a mang ho ka ba molemo ho tima ts'ebetso ena. Ka hona, re boetse re fana ka bokhoni ba ho tima API ea tšobotsi ea data ka ho lokolla liketsahalo tsohle tse tokomaneng e nang le sebaka sa mabitso data-api. Sena se shebahala tjena:

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

Ntle le moo, ho lebisa plugin e itseng, kenyelletsa feela lebitso la plugin joalo ka sebaka sa mabitso hammoho le sebaka sa mabitso sa data-api joalo ka:

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

Ke plugin e le 'ngoe feela ka sebopeho sa data

Se ke oa sebelisa lintlha tse tsoang ho li-plugins tse ngata nthong e le 'ngoe. Ka mohlala, konopo e ke ke ea ba le ntlha ea lisebelisoa le ho fetola modal. Ho etsa sena, sebelisa ntho e 'ngoe ea ho phuthela.

Programmatic API

Hape re lumela hore o lokela ho sebelisa li-plugins tsohle tsa Bootstrap feela ka JavaScript API. Li-API tsohle tsa sechaba ke mekhoa e le 'ngoe, e ka tsamaisoang ka ketane, 'me e khutlisetsa pokello e sebelisitsoeng.

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

Mekhoa eohle e lokela ho amohela ntho ea boikhethelo, khoele e lebisitseng mokhoa o itseng, kapa letho (e qalang plugin ka boits'oaro ba kamehla):

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

Plugin e 'ngoe le e' ngoe e boetse e pepesa sehahi sa eona se tala Constructorsetšeng: $.fn.popover.Constructor. Haeba u batla ho fumana mohlala o itseng oa plugin, e fumane ka kotloloho ho tsoa ho element: $('[rel="popover"]').data('popover').

Litlhophiso tsa kamehla

U ka fetola litlhophiso tsa kamehla tsa plugin ka ho fetola Constructor.DEFAULTSntho ea plugin:

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

Ha ho khohlano

Ka linako tse ling hoa hlokahala ho sebelisa li-plugins tsa Bootstrap tse nang le meralo e meng ea UI. Maemong ana, ka linako tse ling ho ka ba le likhohlano tsa sebaka sa mabitso. Haeba sena se etsahala, u ka bitsa .noConflictplugin u lakatsa ho khutlisetsa boleng ba.

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

Liketsahalo

Bootstrap e fana ka liketsahalo tsa tloaelo bakeng sa liketso tse ikhethang tsa li-plugins. Ka kakaretso, tsena li tla ka mokhoa o sa feleng le oa nako e fetileng - moo lentsoe le sa feleng (mohlala. show) le qalisoang qalong ea ketsahalo, 'me sebopeho sa eona sa nako e fetileng sa karolo (mohl. shown) se hlahisoang ha ketso e phethoa.

Ho tloha ka 3.0.0, liketsahalo tsohle tsa Bootstrap li arotsoe ka mabitso.

Liketsahalo tsohle tse sa feleng li fana ka preventDefaultts'ebetso. Sena se fana ka bokhoni ba ho emisa ts'ebetso ea ketso pele e qala.

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

Linomoro tsa phetolelo

Mofuta oa e 'ngoe le e' ngoe ea li-plugins tsa Bootstrap's jQuery e ka fumaneha ka VERSIONthepa ea sehahi sa plugin. Ka mohlala, bakeng sa plugin ea tooltip:

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

Ha ho na liphoso tse ikhethileng ha JavaScript e koetsoe

Li-plugins tsa Bootstrap ha li khutlele morao haholo ha JavaScript e koetsoe. Haeba u tsotella boiphihlelo ba mosebelisi ntlheng ena, sebelisa <noscript>ho hlalosa boemo (le mokhoa oa ho lumella JavaScript hape) ho basebelisi ba hau, le/kapa eketsa liphoso tsa hau tsa tloaelo.

Lilaebrari tsa batho ba bang

Bootstrap ha e tšehetse ka molao lilaebrari tsa mokha oa boraro tsa JavaScript joalo ka Prototype kapa jQuery UI. Leha .noConflictho na le liketsahalo tse arohaneng le mabitso, ho kanna ha ba le mathata a ho lumellana ao u hlokang ho a lokisa u le mong.

Transitions transition.js

Mabapi le liphetoho

Bakeng sa litlamorao tse bonolo tsa phetoho, kenyelletsa transition.jshang hammoho le lifaele tse ling tsa JS. Haeba u sebelisa compiled (kapa minified) bootstrap.js, ha ho hlokahale ho kenyelletsa sena - se se se ntse se le teng.

Se ka hare

Transition.js ke mothusi oa mantlha oa transitionEndliketsahalo hammoho le emulator ea phetoho ea CSS. E sebelisoa ke li-plugins tse ling ho lekola tšehetso ea phetoho ea CSS le ho ts'oara liphetoho tse leketlileng.

E thibela liphetoho

Liphetoho li ka emisoa lefatšeng ka bophara ho sebelisoa snippet e latelang ea JavaScript, e tlamehang ho tla ka mor'a hore transition.js(kapa bootstrap.js, bootstrap.min.jsjoalo ka ha ho ka ba joalo) e kentsoe:

$.support.transition = false

Mekhoa ea modal.js

Li-modal li hlophisitsoe hantle, empa lia tenyetseha, likeletso tsa lipuisano tse nang le ts'ebetso e nyane e hlokahalang le mefokolo e bohlale.

Mekhoa e mengata e bulehileng ha e tšehetsoe

Etsa bonnete ba hore u se ke ua bula modal ha e 'ngoe e ntse e bonahala. Ho hlahisa mefuta e fetang e le 'ngoe ka nako ho hloka khoutu e ikhethileng.

Modal markup placement

Kamehla leka ho beha khoutu ea modal ea HTML sebakeng sa boemo bo holimo tokomaneng ea hau ho qoba likarolo tse ling tse amang chebahalo le/kapa tšebetso ea modal.

Litlhahiso tsa lisebelisoa tsa mohala

Ho na le litemoso tse ling mabapi le ho sebelisa li-modal ho lisebelisoa tsa mehala. Sheba litokomane tsa rona tsa tšehetso ea sebatli ho fumana lintlha.

Ka lebaka la hore na HTML5 e hlalosa semantics ea eona joang, autofocustšobotsi ea HTML ha e na phello ho mekhoa ea Bootstrap. Ho fihlela phello e tšoanang, sebelisa JavaScript e tloaelehileng:

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

Mehlala

Mohlala o tsitsitseng

Mokhoa o hlophisitsoeng o nang le hlooho, 'mele, le sete sa liketso botlaseng.

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

Pontšo e phelang

Fetolela modal ka JavaScript ka ho tobetsa konopo e ka tlase. E tla thellela fatše ebe e nyamela ho tloha holimo leqepheng.

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

Etsa hore li-modal li fumanehe

Etsa bonnete ba ho eketsa role="dialog"le aria-labelledby="...", ho supa sehlooho sa modal, ho .modal, le role="document"ho eona .modal-dialogka boeona.

Ho feta moo, o ka fana ka tlhaloso ea puisano ea hau ea modal le aria-describedbyon .modal.

Ho kenyelletsa livideo tsa YouTube

Ho kenya livideo tsa YouTube ho li-modal ho hloka JavaScript e eketsehileng eseng ho Bootstrap ho emisa ho bapala le tse ling. Sheba poso ena e thusang ea Stack Overflow bakeng sa lintlha tse ling.

Boikhethelo ba boholo

Li-modal li na le mefuta e 'meli ea boikhethelo, e fumanehang ka litlelase tsa ho feto-fetoha tse tla beoa ho .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>

Tlosa animation

Bakeng sa li-modal tse hlahang feela ho e-na le ho nyamela, tlosa .fadesehlopha ho li-modal markup tsa hau.

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

Ho sebelisa sistimi ea grid

Ho nka monyetla ka sistimi ea grid ea Bootstrap ka har'a modal, feela sehlaha .rows ka hare ho .modal-bodyebe o sebelisa litlelase tse tloaelehileng tsa grid system.

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

Na u na le lihlopha tsa likonopo tse hlahisang mokhoa o tšoanang, ka litaba tse fapaneng hanyane? Sebelisa event.relatedTargetle litšobotsi tsa HTMLdata-* (mohlomong ka jQuery ) ho fetola litaba tsa modal ho latela hore na konopo e tobetse. Sheba litokomane tsa Modal Events bakeng sa lintlha tse mabapi le relatedTarget,

...likonopo tse ling...
<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)
})

Tšebeliso

Modal plugin e fetola litaba tsa hau tse patiloeng ha li batloa, ka likarolo tsa data kapa JavaScript. E boetse e ekelletsa .modal-openho <body>tloleng boits'oaro ba kamehla ba ho phutha 'me e hlahisa .modal-backdropho fana ka sebaka sa ho tobetsa bakeng sa ho leleka mekhoa e bontšitsoeng ha o tobetsa ka ntle ho modal.

Ka litšobotsi tsa data

Kenya modal ntle le ho ngola JavaScript. Beha data-toggle="modal"karolo ea taolo, joalo ka konopo, hammoho le data-target="#foo"kapa href="#foo"ho shebisa mokhoa o itseng oa ho fetola.

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

Ka JavaScript

Letsetsa modal ka id myModalka mola o le mong oa JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-backdrop="".

Lebitso mofuta ya kamehla tlhaloso
bokamorao boolean kapa khoele'static' 'nete E kenyelletsa karolo ea modal-backdrop. Ntle le moo, hlakisa staticboemo ba morao-rao bo sa koaheleng mokhoa oa ho tobetsa.
keyboard boolean 'nete E koala modal ha konopo ea escape e tobetsoa
bontsha boolean 'nete E bonts'a modal ha e qala.
hole tsela bohata

Khetho ena e tlositsoe ho tloha v3.3.0 mme e tlositsoe ho v4. Re khothaletsa ho sebelisa template ea lehlakore la bareki kapa moralo o tlamang data, kapa ho letsetsa jQuery.load ka bouena.

Haeba URL e hole e fanoe, litaba li tla kengoa hang ka mokhoa oa jQuery loadebe li kenngoa ka har'a .modal-contentdiv. Haeba u sebelisa data-api, u ka sebelisa hreftšobotsi ho hlalosa mohloli o hole. Mohlala oa sena o bontšitsoe ka tlase:

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

Mekhoa

E kenya tšebetsong litaba tsa hau joalo ka mokhoa. E amohela khetho ea boikhethelo object.

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

E fetola modal ka letsoho. E kgutlela ho motho ya letsetsang pele modal e bontshwa kapa e patilwe (ke hore pele ketsahalo shown.bs.modalkapa hidden.bs.modalketsahalo e etsahala).

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

E bula modal ka letsoho. E khutlela ho motho ea letselitseng pele mokha o bonts'oa (ke hore pele shown.bs.modalketsahalo e etsahala).

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

E pata modal ka letsoho. E khutlela ho motho ea letselitseng pele mohale o patiloe (ke hore pele hidden.bs.modalketsahalo e etsahala).

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

E lokisa boemo ba modal ho hanyetsa scrollbar haeba motho a ka hlaha, e leng se ka etsang hore modal e tlole ka ho le letšehali.

E hlokahala feela ha bophahamo ba modal bo fetoha ha bo ntse bo bulehile.

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

Liketsahalo

Sehlopha sa modal sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea modal.

Liketsahalo tsohle tsa modal li lelekoa ho modal ka boeona (ke hore ho <div class="modal">).

Mofuta oa Ketsahalo Tlhaloso
show.bs.modal Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa. Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTargetthepa ea ketsahalo.
e bonts'itsoeng.bs.modal Ketsahalo ena e ts'oaroa ha modal e entsoe hore e bonahale ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). Haeba e bakoa ke ho tobetsa, ntho e tobelitsoeng e fumaneha e le relatedTargetthepa ea ketsahalo.
pata.bs.modal Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
patiloeng.bs.modal Ketsahalo ena e ts'oaroa ha modal e qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
loaded.bs.modal Ketsahalo ena e lelekoa ha modal e kentse litaba tse sebelisang remotekhetho.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Dropdowns dropdown.js

Kenya menyetla ea ho theoha hoo e batlang e le eng kapa eng ka plugin ena e bonolo, ho kenyeletsoa navbar, li-tab le lipilisi.

Ka har'a navbar

Ka har'a lipilisi

Ka litšoaneleho tsa data kapa JavaScript, plugin e theohang e fetola litaba tse patiloeng (menu e theohang) ka ho fetola .opensehlopha lethathamong la batsoali.

Ho lisebelisoa tsa mehala, ho bula ho theoha ho eketsa sebaka .dropdown-backdropsa pompo bakeng sa ho koala menyetla ea ho theoha ha o tobetsa ka ntle ho menu, e leng tlhokahalo ea tšehetso e nepahetseng ea iOS. Sena se bolela hore ho tloha ho menu e theohang e bulehileng ho ea ho menu e fapaneng ho hloka pompo e eketsehileng ho mobile.

Tlhokomeliso: Ho data-toggle="dropdown"tšeptjoa tšobotsi bakeng sa ho koala li-menu tse theohang boemong ba ts'ebeliso, kahoo ke mohopolo o motle ho e sebelisa kamehla.

Ka litšobotsi tsa data

Kenya data-toggle="dropdown"sehokelong kapa konopong ho totobetsa ho theoha.

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

Ho boloka li-URL li ntse li le teng ka likonopo tsa lihokelo, sebelisa data-targettšobotsi ho fapana le 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>

Ka JavaScript

Letsetsa li-dropdown ka JavaScript:

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

data-toggle="dropdown"e ntse e hlokahala

Ho sa tsotelehe hore na u letsetsa ho theoha ha hau ka JavaScript kapa ho e-na le hoo u sebelisa data-api, data-toggle="dropdown"kamehla ho hlokahala hore u be teng karolong ea "trigger" e theoha.

Ha ho letho

E fetola menyetla ea ho theoha ea navbar e fanoeng kapa navigation e nang le li-tabbed.

Liketsahalo tsohle tse theohang li lelekoa ho karolo ea .dropdown-menumotsoali.

Liketsahalo tsohle tse theohang li na le relatedTargetthepa, eo boleng ba eona e leng ntho ea toggling ankora.

Mofuta oa Ketsahalo Tlhaloso
bonts'a.bs.ho theoha Ketsahalo ena e tuka hang hang ha mokhoa oa mohlala oa pontšo o bitsoa.
e bonts'itsoeng.bs.ho theoha Ketsahalo ena e ts'oaroa ha ho theoha ho bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs.ho theoha Ketsahalo ena e lelekoa hang hang ha mokhoa oa ho pata o se o bitsoa.
patiloeng.bs.ho theoha Ketsahalo ena e ts'oaroa ha ho theoha ho felile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Mohlala ho navbar

The ScrollSpy plugin ke ea ho inchafatsa lipheo tsa nav ka bo eona ho ipapisitse le boemo ba moqolo. Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Lintlha tse tlase li tla totobatsoa hape.

@mafura

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi pele ba rekisa qui. Litokelo tsa libaesekele tsa polasi-to-tafola tsa Tumblr eng kapa eng. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mohlomong ha u e-s'o utloe ka tsona et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork litelu. Litelu tsa Freegan aliqua cupidatat mcsweeney's vero. Cupidatat tse nne loko nisi, ea helvetica nulla carles. Lori ea lijo e nang le tattoo ea cosby sweater, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft biri motlatsi oa keytar deserunt.

ngoe

Occaecat commodo aliqua deelectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS e ntlafalitse. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

tse pedi

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

three

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

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id guessnda. Locavore sed helvetica cliche irony, thundercats mohlomong ha u so utloe ka tsona consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat pele ba rekisa, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft biri seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Tšebeliso

E hloka Bootstrap nav

Scrollspy hajoale e hloka ts'ebeliso ea karolo ea Bootstrap nav bakeng sa tokiso e nepahetseng ea lihokelo tse sebetsang.

Lipehelo tsa ID tse rarollehang lia hlokahala

Lihokelo tsa Navbar li tlameha ho ba le lipehelo tsa id tse rarollehang. Ka mohlala, e <a href="#home">home</a>tlameha ho lumellana le ntho e 'ngoe e DOM e kang <div id="home"></div>.

Lintho tse sa lebelloang :visibleli hlokomolohuoe

Lintlha tse reriloeng tse sa lumellaneng :visiblele jQuery li tla hlokomolohuoa 'me lintho tse tsamaisanang le tsona li ke ke tsa hlakisoa.

E hloka maemo a amanang

Ho sa tsotelehe mokhoa oa ts'ebetsong, scrollspy e hloka ts'ebeliso ea position: relative;ntho eo u ntseng u e hloela. Maemong a mangata sena ke <body>. Ha u scrollspying linthong tse ling ntle le <body>, etsa bonnete ba hore u na le heightsete le overflow-y: scroll;ho sebelisoa.

Ka litšobotsi tsa data

Ho eketsa habonolo boits'oaro ba scrollspy ho navigation ea topbar ea hau, eketsa nthong data-spy="scroll"eo u batlang ho e hloela (haholo-holo ena e tla ba eona <body>). Ebe u eketsa data-targettšobotsi ka ID kapa sehlopha sa karolo ea motsoali ea karolo efe kapa efe ea Bootstrap .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>

Ka JavaScript

Kamora ho kenya position: relative;CSS ea hau, letsetsa scrollspy ka JavaScript:

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

Mekhoa

.scrollspy('refresh')

Ha o sebelisa scrollspy mmoho le ho eketsa kapa ho tlosa likarolo ho tsoa ho DOM, o tla hloka ho letsetsa mokhoa oa ho khatholla joalo ka:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset="".

Lebitso mofuta ya kamehla tlhaloso
offset palo 10 Lipikseli tsa ho theola ho tloha holimo ha ho baloa boemo ba ho tsamaisa.

Liketsahalo

Mofuta oa Ketsahalo Tlhaloso
kenya tshebetsong.bs.scrollpy Ketsahalo ena e tuka neng kapa neng ha ntho e ncha e kentsoe tšebetsong ke scrollspy.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Togglable tabs tab.js

Li-tab tsa mohlala

Eketsa ts'ebetso ea li-tab e potlakileng, e matla ho fetolela ka har'a liphasejene tsa litaba tsa lehae, esita le ka li-menu tse theohang. Li-tabo tsa Nested ha li tšehetsoe.

Raw denim mohlomong ha u e-s'o utloe ka bona li-jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.

E eketsa ho tsamaea ka li-tabbed

Plugin ena e atolosa karolo ea ho tsamaea e nang le li-tabbed ho eketsa libaka tse ka khonehang.

Tšebeliso

Lumella li-tab tse ka khonehang ka JavaScript (tabo e 'ngoe le e' ngoe e hloka ho etsoa ka bonngoe):

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

O ka kenya li-tab tsa motho ka mong ka litsela tse 'maloa:

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

Markup

O ka kenya ts'ebetso ea "tabo" kapa "pilisi" ntle le ho ngola JavaScript efe kapa efe ka ho hlakisa feela data-toggle="tab"kapa data-toggle="pill"ka ntho e itseng. Ho kenyelletsa navle nav-tabslitlelase ho tab ho tla sebelisa setaele sa tabul ea Bootstrap , ha u ntse u eketsa le litlelase li tla sebelisa setaele sa lipilisi .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>

Fade phello

Ho etsa hore li-tab li nyamele, eketsa .fadeho e 'ngoe le e 'ngoe .tab-pane. Letlapa la pele la li-tab le lona le tlameha .inho etsa hore litaba tsa pele li bonahale.

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

Mekhoa

$().tab

E kenya tshebetsong karolo ya tab le setshelo sa dikahare. Tab e lokela ho ba le node ea setshelo data-targetkapa e hreflebisitsoeng ho DOM. Mehlaleng e ka holimo, li-tab ke tsa <a>s tse nang le data-toggle="tab"litšobotsi.

.tab('show')

E khetha tab e fanoeng ebe e bontša litaba tse amanang le eona. Taba efe kapa efe e neng e khethiloe nakong e fetileng e fetoha e sa khethoang, 'me litaba tse amanang le eona lia patoa. E kgutlela ho moletsi pele fenstere ya tab e bontshwa (ke hore pele shown.bs.tabketsahalo e etsahala).

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

Liketsahalo

Ha o hlahisa tab e ncha, liketsahalo li tla ka tatellano e latelang:

  1. hide.bs.tab(tabong ea hajoale e sebetsang)
  2. show.bs.tab(letlapeng le tlang ho bontšoa)
  3. hidden.bs.tab(tabong e fetileng e sebetsang, e ts'oanang le ea hide.bs.tabketsahalo)
  4. shown.bs.tab(tabong e sa tsoa hlaha, e ts'oanang le ea show.bs.tabketsahalo)

Haeba ho se tab e neng e se e ntse e sebetsa, joale the hide.bs.table hidden.bs.tabliketsahalo li ke ke tsa lelekoa.

Mofuta oa Ketsahalo Tlhaloso
bontša.bs.tab Ketsahalo ena e qala ho bonts'a li-tab, empa pele tab e ncha e bontšoa. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
e bonts'itsoeng.bs.tab Ketsahalo ena e tla hlaha ka mor'a hore tab e hlahisoe. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
pata.bs.tab Ketsahalo ena e tuka ha tab e ncha e tla bontšoa ('me ka hona tab e fetileng e sebetsang e lokela ho patoa). Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang ea hajoale le e ncha e tlang ho sebetsa haufinyane, ka ho latellana.
patiloeng.bs.tab Ketsahalo ena e tuka ka mor'a hore ho bontšoe tabo e ncha ('me kahoo tab e fetileng e sebetsang e patiloe). Sebelisa event.targetle event.relatedTargetho shebisa tab e fetileng e sebetsang le tab e ncha e sebetsang, ka ho latellana.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tooltips.js _

E bululetsoe ke plugin e ntle haholo ea jQuery.tipsy e ngotsoeng ke Jason Frame; Litlhahiso ke mofuta o ntlafalitsoeng, o sa itšetleheng ka litšoantšo, sebelisa CSS3 bakeng sa lipopae, le litšobotsi tsa data bakeng sa polokelo ea lihlooho tsa lehae.

Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.

Mehlala

Tsamaea holim'a lihokelo tse ka tlase ho bona lintlha tsa lisebelisoa:

Borikhoe bo thata bo latelang keffiyeh mohlomong ha u so utloe ka bona. Photo booth litelu tse tala tsa denim letterpress vegan messenger bag stumptown. Seaparo sa polasi-to-tafola seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparse e na le terry richardson vinyl chambray. Litelu stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Keletso e tsitsitseng

Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.

Litsela tse 'ne

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

Ts'ebetso ea ho khetha

Ka mabaka a ts'ebetso, Tooltip le Popover data-apis lia khetha ho kena, ho bolelang hore u tlameha ho li qala ka bouena .

Tsela e 'ngoe ea ho qala lisebelisoa tsohle tse leqepheng e tla ba ho li khetha ka data-toggletšobotsi ea tsona:

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

Tšebeliso

plugin ea tooltip e hlahisa litaba le markup ha ho hlokahala, 'me ka ho sa feleng e beha malebela ka mor'a ntho ea eona ea ho qala.

Qala sesebelisoa ka JavaScript:

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

Markup

Letšoao le hlokahalang bakeng sa sesebelisoa ke datatšobotsi feela 'me titleho karolo ea HTML u lakatsa ho ba le sesebelisoa. Thepa e hlahisitsoeng ea sesebelisoa e bonolo, leha e hloka boemo (ka kamehla, e behiloeng topke 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>

Lihokelo tsa mela e mengata

Ka nako e 'ngoe u batla ho kenya sesebelisoa ho hyperlink e koahelang mela e mengata. Boitšoaro bo sa lekanyetsoang ba plugin ea tooltip ke ho e beha bohareng ka mokhoa o otlolohileng le o otlolohileng. Eketsa white-space: nowrap;liankora tsa hau ho qoba sena.

Litlhahiso ka lihlopha tsa likonopo, lihlopha tsa ho kenya letsoho, le litafole li hloka tlhophiso e khethehileng

Ha u sebelisa lisebelisoa tsa lisebelisoa ka har'a a .btn-groupkapa .input-group, kapa linthong tse amanang le tafole ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), u tla tlameha ho totobatsa khetho container: 'body'(e ngotsoeng ka tlase) ho qoba litla-morao tse sa batleheng (joalo ka ntho e ntseng e hola ka bophara le/ kapa ho lahleheloa ke likhutlo tse chitja ha sesebelisoa sa thulusi se hlongoa).

U se ke ua leka ho bontša malebela a lisebelisoa linthong tse patiloeng

Ho hohela $(...).tooltip('show')ha ntho e shebiloeng e le ho display: none;tla etsa hore sesebelisoa se be boemong bo fosahetseng.

Litlhahiso tse fumanehang bakeng sa keyboard le basebelisi ba theknoloji e thusang

Bakeng sa basebelisi ba tsamaeang ka keyboard, haholo-holo basebelisi ba litheknoloji tse thusang, o lokela ho eketsa lintlha tsa lisebelisoa ho lisebelisoa tse shebaneng le keyboard joalo ka lihokelo, taolo ea liforomo, kapa ntho efe kapa efe e sa reroang e nang le tabindex="0"tšobotsi.

Lisebelisoa tsa lisebelisoa tse holofetseng li hloka likarolo tsa wrapper

Ho kenya sesebelisoa ho ntho disabledkapa .disabledelement, kenya elemente ka hare ho a <div>'me u e sebelise ho eona <div>.

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Lebitso Mofuta Ea kamehla Tlhaloso
animation boolean 'nete Kenya phetoho ea CSS fade ho tooltip
setshelo khoele | bohata bohata

E kopanya ntlha ea lisebelisoa ho ntho e itseng. Mohlala container: 'body':. Khetho ena e na le thuso ka ho khetheha hobane e u lumella ho beha sesebelisoa ho phallo ea tokomane haufi le ntho e qalang - e tla thibela sesebelisoa hore se se ke sa phaphamala ho tloha nthong e qalang nakong ea ho fetola boholo ba fensetere.

lieha nomoro | ntho 0

Ho lieha ho bonts'a le ho pata ntlha ea lisebelisoa (ms) - ha e sebetse mofuteng oa ho kenya letsoho

Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli

Sebopeho sa ntho ke:delay: { "show": 500, "hide": 100 }

html boolean bohata Kenya HTML karolong ea lisebelisoa. Haeba e le leshano, mokhoa oa jQuery texto tla sebelisoa ho kenya litaba ho DOM. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS.
ho beha khoele | tshebetso 'holimo'

Mokhoa oa ho beha sesebelisoa - top | tlase | le letšehali | hantle | koloi.
Ha "auto" e hlalositsoe, e tla hlophisa sesebelisoa hape. Mohlala, haeba ho beoa e le "auto left", ntlha ea lisebelisoa e tla hlaha ka ho le letšehali ha ho khoneha, ho seng joalo e tla hlaha ka ho le letona.

Ha ts'ebetso e sebelisoa ho fumana hore na e behiloe hokae, e bitsoa ka node ea DOM e nang le "tooltip" e le khang ea eona ea pele, 'me karolo e qalang ea DOM e le ea bobeli. Moelelo thiso behiloe ho mohlala oa lisebelisoa.

mokhethi khoele bohata Haeba ho fanoe ka sekhetho, lintlha tsa lisebelisoa li tla abeloa lipehelo tse boletsoeng. Ha e le hantle, sena se sebelisetsoa ho nolofalletsa litaba tsa HTML tse matla hore li be le lisebelisoa tsa lisebelisoa. Bona sena le mohlala o rutang .
template khoele '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML ea mantlha eo u ka e sebelisang ha u theha sesebelisoa.

The tooltip's titlee tla kenngoa ka har'a .tooltip-inner.

.tooltip-arrowe tla fetoha motsu oa sesebelisoa.

Karolo e ka ntle ea wrapper e lokela ho ba le .tooltipsehlopha.

sehlooho khoele | tshebetso ''

Boleng ba sehlooho sa kamehla haeba titlesemelo se le sieo.

Haeba mosebetsi o fanoe, o tla bitsoa ka thislitšupiso tsa ona ho element eo thulusi e khomaretsoeng ho eona.

qhoqhoa khoele 'hover focus' Mokhoa oa lisebelisoa o qala joang - tobetsa | hloella | tsepamisa | tataiso. U ka 'na ua fetisa li-triggers tse ngata; di arole ka sebaka. manuale ke ke ea kopanngoa le ntho leha e le efe e qalang.
boema-kepe khoele | ntho | tshebetso {sekhetho: 'mele', padding: 0}

E boloka ntlha ea lisebelisoa ka har'a meeli ea ntho ena. Mohlala: viewport: '#viewport'kapa{ "selector": "#viewport", "padding": 0 }

Haeba ts'ebetso e fanoe, e bitsoa le "triggering element DOM node" e le khang ea eona feela. Moelelo thiso behiloe ho mohlala oa lisebelisoa.

Litšobotsi tsa data bakeng sa lisebelisoa tsa motho ka mong

Likhetho tsa lisebelisoa tsa motho ka mong li ka hlalosoa ka tšebeliso ea lintlha, joalo ka ha ho hlalositsoe ka holimo.

Mekhoa

$().tooltip(options)

E hokela sebatli sa lithulusi pokellong ea lintho.

.tooltip('show')

E senola karolo ea lisebelisoa. E kgutlela ho moletsi pele thulusi e bontshwa (ke hore pele shown.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa. Lisebelisoa tse nang le lihlooho tsa bolelele ba zero ha li hlahisoe.

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

.tooltip('hide')

E pata ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se patiloe (ke hore pele hidden.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

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

.tooltip('toggle')

E fetola ntlha ea lisebelisoa. E khutlela ho ea letselitseng pele sesebelisoa se bontšoa kapa se patiloe (ke hore pele ketsahalo shown.bs.tooltipkapa hidden.bs.tooltipketsahalo e etsahala). Sena se nkuoa e le "manual" e qalang ea sesebelisoa.

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

.tooltip('destroy')

E pata le ho senya ntlha ea lisebelisoa. Litlhahiso tse sebelisang kemiso (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe holima lintho tse qalang.

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

Liketsahalo

Mofuta oa Ketsahalo Tlhaloso
bonts'a.bs.tooltip Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
bontshiweng.bs.tooltip Ketsahalo ena e ts'oaroa ha sesebelisoa sa lisebelisoa se bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs.tooltip Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
patiloeng.bs.tooltip Ketsahalo ena e ts'oaroa ha sesebelisoa se qeta ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
kenya.bs.tooltip Ketsahalo ena e lelekoa ka mor'a show.bs.tooltipketsahalo ea ha thempleite ea tooltip e kentsoe ho DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

Eketsa likoahelo tse nyane tsa litaba, joalo ka tse ho iPad, ho karolo efe kapa efe bakeng sa tlhaiso-leseling ea bobeli ea matlo.

Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.

Ho itšetleha ka plugin

Popovers e hloka hore plugin ea tooltip e kenyellelitsoe mofuta oa hau oa Bootstrap.

Ts'ebetso ea ho khetha

Ka mabaka a ts'ebetso, Tooltip le Popover data-apis lia khetha ho kena, ho bolelang hore u tlameha ho li qala ka bouena .

Mokhoa o mong oa ho qala li-popovers tsohle leqepheng e tla ba ho li khetha ho latela data-togglesemelo sa tsona:

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

Li-Popovers ka lihlopha tsa likonopo, lihlopha tsa ho kenya letsoho, le litafole li hloka maemo a khethehileng

Ha u sebelisa li-popovers linthong tse ka hare ho a .btn-groupkapa .input-group, kapa linthong tse amanang le tafole ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), u tla tlameha ho hlakisa khetho container: 'body'(e ngotsoeng ka tlase) ho qoba litla-morao tse sa batleheng (joalo ka ntho e ntseng e hola ka bophara le/ kapa ho lahleheloa ke likhutlo tsa eona tse chitja ha popover e qala).

Se ke oa leka ho bonts'a li-popovers linthong tse patiloeng

Ho etsa kopo $(...).popover('show')ha ntho e shebiloeng e le ho display: none;tla etsa hore popover e be maemong a fosahetseng.

Li-Popovers holim'a lintho tse holofetseng li hloka likarolo tsa wrapper

Ho eketsa popover ho ntho disabledkapa .disabledelement, kenya elemente ka hare ho a <div>ebe u sebelisa popover ho seo <div>ho fapana le hoo.

Lihokelo tsa mela e mengata

Ka nako e 'ngoe u batla ho eketsa popover ho hyperlink e koahelang mela e mengata. Boitšoaro bo sa lekanyetsoang ba plugin ea popover ke ho e beha sebakeng se otlolohileng le se otlolohileng. Eketsa white-space: nowrap;liankora tsa hau ho qoba sena.

Mehlala

Popover e tsitsitseng

Ho na le likhetho tse 'nè: holimo, ho le letona, ka tlase, le ho le letšehali.

Popover top

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

Popover ka ho le letona

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

Popover tlase

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

Popover o ile a tloha

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

Pontšo e phelang

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

Litsela tse 'ne

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

Tlosa ho tobetsa e latelang

Sebelisa focustrigger ho leleka li-popover ha motho a penya ka lekhetlo le latelang.

Ho hlokahala letšoao le ikhethileng bakeng sa ho penya-ha-e latelang

Bakeng sa boits'oaro bo nepahetseng ba sebatli le sethala, o tlameha ho sebelisa tag <a>, eseng<button> tag, hape o tlameha ho kenyelletsa role="button"le tabindexlitšobotsi.

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

Tšebeliso

Lumella li-popover ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-animation="".

Lebitso Mofuta Ea kamehla Tlhaloso
animation boolean 'nete Kenya phetoho ea CSS fade ho popover
setshelo khoele | bohata bohata

E eketsa popover ho element e itseng. Mohlala container: 'body':. Khetho ena e bohlokoa haholo hobane e u lumella ho beha popover phallong ea tokomane haufi le ntho e qalang - e tla thibela popover hore e se ke ea phaphamala hole le ntho e bakang nakong ea ho fetola boholo ba fensetere.

dikahare khoele | tshebetso ''

Boleng ba litaba bo ka rekoang haeba data-contentsemelo se le sieo.

Haeba ts'ebetso e fanoe, e tla bitsoa ka thislitšupiso tsa eona ho element eo popover e khomaretsoeng ho eona.

lieha nomoro | ntho 0

Ho lieha ho bonts'a le ho pata popover (ms) - ha e sebetse ho mofuta oa mochini oa ho qala

Haeba nomoro e fanoe, ho lieha ho sebelisoa ho pata/show ka bobeli

Sebopeho sa ntho ke:delay: { "show": 500, "hide": 100 }

html boolean bohata Kenya HTML ho popover. Haeba e le leshano, mokhoa oa jQuery texto tla sebelisoa ho kenya litaba ho DOM. Sebelisa mongolo haeba u tšoenyehile ka litlhaselo tsa XSS.
ho beha khoele | tshebetso 'ho lokile'

Mokhoa oa ho beha popover - holimo | tlase | le letšehali | hantle | koloi.
Ha "auto" e hlalositsoe, e tla hlophisa popover ka matla. Mohlala, haeba ho beoa e le "auto left", popover e tla hlaha ka ho le letšehali ha ho khoneha, ho seng joalo e tla hlaha ka ho le letona.

Ha ts'ebetso e sebelisoa ho fumana sebaka sa ho beoa, e bitsoa le node ea popover DOM e le khang ea eona ea pele le ntho e qalang ea DOM node e le ea bobeli. Boemo thisbo behiloe ho mohlala oa popover.

mokhethi khoele bohata Haeba ho fanoe ka khetho, lintho tsa popover li tla abeloa ho sepheo se boletsoeng. Ha e le hantle, sena se sebelisetsoa ho nolofalletsa litaba tsa HTML tse matla hore li eketsoe ke popover. Bona sena le mohlala o rutang .
template khoele '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML ea mantlha eo u ka e sebelisang ha u theha popover.

Li-popover li titletla kenngoa ka har'a .popover-title.

Li-popover li contenttla kenngoa ka har'a .popover-content.

.arrowe tla fetoha motsu oa popover.

Karolo e ka ntle ea wrapper e lokela ho ba le .popoversehlopha.

sehlooho khoele | tshebetso ''

Boleng ba sehlooho sa kamehla haeba titlesemelo se le sieo.

Haeba ts'ebetso e fanoe, e tla bitsoa ka thislitšupiso tsa eona ho element eo popover e khomaretsoeng ho eona.

qhoqhoa khoele 'tobetsa' Popover e qala joang - tlanya | hloella | tsepamisa | tataiso. U ka 'na ua fetisa li-triggers tse ngata; di arole ka sebaka. manuale ke ke ea kopanngoa le ntho leha e le efe e qalang.
boema-kepe khoele | ntho | tshebetso {sekhetho: 'mele', padding: 0}

E boloka popover ka har'a meeli ea ntho ena. Mohlala: viewport: '#viewport'kapa{ "selector": "#viewport", "padding": 0 }

Haeba ts'ebetso e fanoe, e bitsoa le "triggering element DOM node" e le khang ea eona feela. Boemo thisbo behiloe ho mohlala oa popover.

Litšobotsi tsa data bakeng sa li-popovers ka bomong

Likhetho bakeng sa li-popovers ka bomong li ka hlalosoa ka tšebeliso ea litšobotsi tsa data, joalo ka ha ho hlalositsoe ka holimo.

Mekhoa

$().popover(options)

E qala popovers bakeng sa pokello ea lintho.

.popover('show')

E hlahisa poover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa (ke hore pele shown.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo. Li-Popovers tseo sehlooho le litaba tsa tsona li leng bolelele ba lefela ha ho mohla li hlahisoang.

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

.popover('hide')

E pata popo ea lintho. E khutlela ho ea letselitseng pele popover e patiloe (ke hore pele hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

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

.popover('toggle')

E fetola popover ea element. E khutlela ho ea letselitseng pele popover e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.popoverkapa hidden.bs.popoverketsahalo e etsahala). Sena se nkuoa e le "manual" e tsosang popo.

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

.popover('destroy')

E pata le ho senya popover ea element. Li-Popovers tse sebelisang moifo (tse entsoeng ho sebelisoa khetho selector) li ke ke tsa senngoa ka bonngoe ho latela likarolo tse qalang.

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

Liketsahalo

Mofuta oa Ketsahalo Tlhaloso
bonts'a.bs.popover Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
bontshitsweng.bs.popover Ketsahalo ena e lelekoa ha popover e se e bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs.popover Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
patiloeng.bs.popover Ketsahalo ena e ts'oaroa ha popover e qetile ho patoa ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
kentse.bs.popover Ketsahalo ena e lelekoa kamora show.bs.popoverketsahalo ea ha template ea popover e kentsoe ho DOM.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Melaetsa ea tlhokomeliso alert.js

Mehlala ea tlhokomeliso

Kenya ts'ebetso ea ho tlosa melaetsa eohle ea tlhokomeliso ka plugin ena.

Ha o sebelisa .closekonopo, e tlameha ho ba ngoana oa pele .alert-dismissible'me ho se be le sengoloa se ka tlang pele ho eona ka har'a markup.

Tšebeliso

Kenya feela data-dismiss="alert"konopo ea hau ea ho koala ho fana ka ts'ebetso e haufi ea tlhokomeliso. Ho koala tlhokomeliso ho e tlosa ho DOM.

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

Ho etsa hore litemoso tsa hau li sebelise animation ha u koala, etsa bonnete ba hore li na le .fadele.in litlelase tse seng li sebelisitsoe ho tsona.

Mekhoa

$().alert()

E fana ka tlhokomeliso bakeng sa diketsahalo tsa ho tobetsa lintho tse hlahang tse nang le data-dismiss="alert"tšobotsi. (Ha ho hlokahale ha o sebelisa data-api's auto-initialization.)

$().alert('close')

E koala tlhokomeliso ka ho e tlosa ho DOM. Haeba li- .fadeclass .inli le teng ho element, tlhokomeliso e tla nyamela pele e tlosoa.

Liketsahalo

Sesebelisoa sa tlhokomeliso sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea tlhokomeliso.

Mofuta oa Ketsahalo Tlhaloso
koala.bs.temoso Ketsahalo ena e tuka hang hang ha closemokhoa oa mohlala o bitsoa.
e koetsoeng.bs.temoso Ketsahalo ena e ts'oaroa ha tlhokomeliso e koetsoe (e tla emela hore liphetoho tsa CSS li phethehe).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

LikonopoLikonopo

Etsa ho eketsehileng ka likonopo. Konopo ea ho laola e bolela kapa etsa lihlopha tsa likonopo bakeng sa likarolo tse ling tse kang lithulusi.

Khokahano ea sebatli

Firefox e phehella maemo a taolo ea sebopeho (bofofu le bofokoli) hohle maqepheng a mangata . Tharollo ea sena ke ho e sebelisa autocomplete="off". Sheba bug ea Mozilla #654072 .

E bolelang

Eketsa data-loading-text="Loading..."ho sebelisa boemo ba ho kenya konopo.

Sebopeho sena ha se sa sebetsa ho tloha ka v3.3.5 mme se tlositsoe ho v4.

Sebelisa boemo bofe kapa bofe boo u bo ratang!

Molemong oa pontšo ena, re sebelisa data-loading-text'me $().button('loading'), empa ha se eona feela naha eo u ka e sebelisang. Sheba ho eketsehileng ka sena ka tlase $().button(string)litokomaneng .

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

Phetoho e le 'ngoe

Eketsa data-toggle="button"ho kenya tshebetsong toggling ho konopo e le 'ngoe.

Likonopo tse fetoletsoeng esale pele lia hlokahala.active learia-pressed="true"

Bakeng sa likonopo tse fetoletsoeng pele, u tlameha ho eketsa .activesehlopha le aria-pressed="true"semelo ho buttonuena.

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

Lebokose la ho hlahloba / Radio

Eketsa lebokoseng data-toggle="buttons"le .btn-groupnang le li-checkbox kapa lisebelisoa tsa seea-le-moea ho nolofalletsa ho fetola mekhoa ea bona.

Likhetho tse khethiloeng esale pele li hloka.active

Bakeng sa likhetho tse khethiloeng esale pele, u tlameha ho eketsa .activesehlopha ho tse kenyelletsoang ka labelbouena.

Ponahalo e hlahlobiloeng e ntlafatsoa feela ka ho tobetsa

Haeba boemo bo tšoailoeng ba konopo ea lebokose la ho hlahloba bo ka nchafatsoa ntle le ho thunya clickketsahalo e konopong (mohlala, ka <input type="reset">kapa ka ho seta checkedthepa ea kenyeletso), o tla hloka ho fetolela .activesehlopha ka labelbouena.

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

Mekhoa

$().button('toggle')

E fetola boemo ba push. E fa konopo ponahalo ea hore e kentsoe tšebetsong.

$().button('reset')

Seta bocha boemo ba konopo - fetola mongolo ho ea ho mongolo oa mantlha. Mokhoa ona ha o asynchronous 'me o khutla pele ho seta ho felile.

$().button(string)

Fetola mongolo ho boemo bofe kapa bofe ba mongolo bo hlalositsoeng.

<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

Flexible plugin e sebelisang lihlopha tse 'maloa bakeng sa boitšoaro bo bonolo ba ho fetola.

Ho itšetleha ka plugin

Ho putlama ho hloka hore plugin ea liphetoho e kenyellelitsoe mofuta oa hau oa Bootstrap.

Mohlala

Tobetsa likonopo tse ka tlase ho bontša le ho pata ntho e 'ngoe ka liphetoho tsa sehlopha:

  • .collapsee pata litaba
  • .collapsinge sebelisoa nakong ea liphetoho
  • .collapse.ine bontsha dikahare

U ka sebelisa sehokelo se nang le hreftšobotsi, kapa konopo e nang le data-targettšobotsi. Maemong ana ka bobeli, ho data-toggle="collapse"hlokahala.

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>

Mohlala oa accordion

Eketsa tloaelo ea ho putlama ho theha accordion ka karolo ea phanele.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Lori ea lijo quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beha nonyana holim'a eona squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft biri labour wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft craft biri-to-table, raw denim aesthetic synth nesciunt mohlomong ha u so utloe ka bona accusamus labour sustainable VHS.
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.
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 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>

Hape hoa khoneha ho fapanyetsana .panel-bodys le .list-groups.

  • Bootply
  • One itmus ac facilin
  • Second eros

Etsa hore litaolo tsa ho atolosa/ho putlama li fumanehe

Etsa bonnete ba hore o eketsa aria-expandedkarolo ea taolo. Tšobotsi ena e hlalosa ka ho hlaka boemo ba hona joale ba ntho e ka putlamang ho libali tsa skrini le lisebelisoa tse ling tse thusang. Haeba elemente e putlang e koetsoe ka mokhoa oa kamehla, e lokela ho ba le boleng ba aria-expanded="false". Haeba u setehile hore ntho e ka phuthoang e buloe ka mokhoa oa kamehla u sebelisa insehlopha, beha aria-expanded="true"taolong. Plugin e tla fetola tšobotsi ena ka bo eona ho latela hore na ntho e putlahang e butsoe kapa che.

Ho feta moo, haeba karolo ea hau ea taolo e shebile ntho e le 'ngoe e ka putlamang - ke hore, data-targettšobotsi e supa motho ea idkhethang - o ka eketsa aria-controlstšobotsi e 'ngoe ho karolo ea taolo, e nang le idntho e putlang. Babali ba skrine ba sejoale-joale le mahlale a thusang a tšoanang a sebelisa tšobotsi ena ho fa basebelisi likhutšoane tse ling tsa ho ea ka kotloloho ho ntho e putlang ka boyona.

Tšebeliso

Plugin ea ho putlama e sebelisa lihlopha tse 'maloa ho sebetsana le ho phahamisa boima:

  • .collapsee pata litaba
  • .collapse.ine bontsha dikahare
  • .collapsinge eketsoa ha phetoho e qala, mme e tlosoe ha e fela

Lihlopha tsena li ka fumanoa ho component-animations.less.

Ka litšobotsi tsa data

Kenya feela data-toggle="collapse"le a data-targetho element ho fana ka taolo ea ntho e putlahang. data-targetTšobotsi e amohela khetho ea CSS eo o ka sebelisang ho putlama ho eona . Etsa bonnete ba hore o kenyelletsa sehlopha collapseho ntho e putlang. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso in.

Ho kenya taolo ea sehlopha se kang accordion taolong e putlang, eketsa tšobotsi ea data data-parent="#selector". Sheba demo ho bona sena se sebetsa.

Ka JavaScript

Lumella ka letsoho ka:

$('.collapse').collapse()

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-parent="".

Lebitso mofuta ya kamehla tlhaloso
motsoadi mokhethi bohata Haeba ho fanoe ka khetho, likarolo tsohle tse ka putlamang tlas'a motsoali ea boletsoeng li tla koaloa ha ntho ena e bonohang e bontšoa. (e ts'oanang le boits'oaro ba moetlo oa accordion - sena se ipapisitse le panelsehlopha)
toggle boolean 'nete E fetola ntho e ka putlamang kopong

Mekhoa

.collapse(options)

E kenya tšebetsong litaba tsa hau joalo ka ntho e ka putlamang. E amohela khetho ea boikhethelo object.

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

.collapse('toggle')

E fetolela ntho e putlahang hore e bontšoe kapa e patiloe. E khutlela ho moletsi pele ntho e putlahang e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.collapsekapa hidden.bs.collapseketsahalo e etsahala).

.collapse('show')

E bonts'a ntho e putlahang. E khutlela ho ea letselitseng pele ntho e putlang e bonts'oa (ke hore pele shown.bs.collapseketsahalo e etsahala).

.collapse('hide')

E pata ntho e putlang. E khutlela ho ea letselitseng pele ntho e putlang e patiloe (ke hore pele hidden.bs.collapseketsahalo e etsahala).

Liketsahalo

Sehlopha sa ho putlama sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea ho putlama.

Mofuta oa Ketsahalo Tlhaloso
bontša.bs. putlama Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
e bontshitsweng.bs.e putlama Ketsahalo ena e ts'oaroa ha ntho e putlama e bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs. putlama Ketsahalo ena e lelekoa hang-hang ha hidemokhoa o bitsoa.
patiloeng.bs.roha Ketsahalo ena e ts'oaroa ha ntho e putlamang e patetsoe mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Carousel carousel.js

Karolo ea li-slideshow bakeng sa ho palama libaesekele ho pholletsa le likarolo, joalo ka carousel. Li-carousels tse halikiloeng ha li tšehetsoe.

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

Litlhaloso tsa boikhethelo

Kenya litlhaloso ho li-slide tsa hau habonolo ka .carousel-captionkarolo e ka har'a .item. Beha hoo e ka bang HTML efe kapa efe ea boikhethelo ka har'a moo 'me e tla ikamahanya le ho hlophisoa ka bo eona.

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

Li-carousels tse ngata

Li-carousel li hloka ts'ebeliso ea idsets'oants'o se ka ntle (the .carousel) hore litsamaiso tsa carousel li sebetse hantle. Ha u eketsa li-carousel tse ngata, kapa ha u fetola carousel's id, etsa bonnete ba hore u ntlafatsa litsamaiso tse amehang.

Ka litšobotsi tsa data

Sebelisa litšobotsi tsa data ho laola boemo ba carousel habonolo. data-slidee amohela mantsoe a sehlooho prevkapa next, e fetolang boemo ba slide ho ipapisitse le boemo ba hona joale. Ntle le moo, sebelisa data-slide-toho fetisa index ea li-slide e tala ho carousel data-slide-to="2", e fetolang boemo ba li-slide ho index e itseng e qalang ka 0.

Tšobotsi data-ride="carousel"e sebelisoa ho tšoaea carousel e le e phelang ho qala ka palo ea maqephe. E ke ke ea sebelisoa hammoho le (ho sa hlokahale le ho sa hlokahale) ho qalisoa ka ho hlaka ha JavaScript ea carousel e tšoanang.

Ka JavaScript

Letsetsa carousel ka letsoho ka:

$('.carousel').carousel()

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-interval="".

Lebitso mofuta ya kamehla tlhaloso
karohano palo 5000 Nako ea ho lieha pakeng tsa ho palama ntho ka bo eona. Haeba e le leshano, carousel e ke ke ea potoloha ka bo eona.
kgefutsa khoele | lefeela "tsamaea" Ha e setetswe ho "hover", e emisa ho palama baesekele ya carousel mouseenterebe e ntshetsapele baesekele ya carousel ka mouseleave. Haeba e setiloe ho null, ho soaela holim'a carousel ho ke ke ha e emisa.
thatela boolean 'nete Hore na carousel e lokela ho potoloha ka ho sa feleng kapa e eme ka thata.
keyboard boolean 'nete Hore na carousel e lokela ho arabela liketsahalong tsa keyboard.

E qala carousel ka khetho ea boikhethelo objectebe e qala ho palama lintho.

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

E potoloha ka har'a lintho tsa carousel ho tloha ho le letšehali ho ea ho le letona.

E emisa carousel ho palama baesekele ka har'a lintho.

E potoloha carousel ho foreime e itseng (0 e thehiloeng, e ts'oanang le lethathamo).

Lipotoloho ho ea nthong e fetileng.

Lipotoloho ho ea nthong e latelang.

Sehlopha sa carousel sa Bootstrap se pepesa liketsahalo tse peli tsa ho hokahana le ts'ebetso ea carousel.

Liketsahalo tsena ka bobeli li na le litšobotsi tse latelang:

  • direction: Tsela eo carousel e thellang ho eona (ebang ke "left"kapa "right").
  • relatedTarget: Karolo ea DOM e ntseng e theoleloa sebakeng e le eona ntho e sebetsang.

Liketsahalo tsohle tsa carousel li thunngoa ho carousel ka boeona (ke hore ho <div class="carousel">).

Mofuta oa Ketsahalo Tlhaloso
slide.bs.carousel Ketsahalo ena e tuka hang hang ha slidemokhoa oa mohlala o sebelisoa.
slid.bs.carousel Ketsahalo ena e thunngoa ha carousel e phethela phetoho ea eona ea li-slide.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Affix.js _

Mohlala

Affix plugin e bulela position: fixed;le ho tima, e etsisa phello e fumanoang ka position: sticky;. Subnavigation e ka ho le letona ke setšoantšo se phelang sa plugin ea affix.


Tšebeliso

Sebelisa plugin ea affix ka litšobotsi tsa data kapa ka letsoho ka JavaScript ea hau. Maemong ana ka bobeli, o tlameha ho fana ka CSS bakeng sa boemo le bophara ba litaba tse khomaretsoeng.

Tlhokomeliso: Se ke oa sebelisa plugin ea affix ho element e fumanehang sebakeng se batlang se eme, joalo ka kholomo e huloang kapa e sutumelitsoeng, ka lebaka la phoso ea Safari rendering bug .

Ho ema ka CSS

Affix plugin e fetoha lipakeng tsa lihlopha tse tharo, e 'ngoe le e 'ngoe e emela boemo bo itseng: .affix, .affix-top, le .affix-bottom. U tlameha ho fana ka litaele, ntle le position: fixed;on .affix, bakeng sa litlelase tsena u le mong (o ikemetseng oa plugin ena) ho sebetsana le maemo a nnete.

Mona ke kamoo plugin ea affix e sebetsang kateng:

  1. Ho qala, plugin ea eketsa.affix-top ho bonts'a hore element e maemong a eona a holimo haholo. Mothating ona ha ho hlokahale boemo ba CSS.
  2. Ho tsamaisetsa ho feta ntho eo u batlang ho e hlomathisoa ho lokela ho etsa hore ho be le sekhomaretsi sa 'nete. Mona ke moo ho .affixnkeloang sebaka .affix-tople ho seta position: fixed;(ho fanoe ke Bootstrap's CSS).
  3. Haeba ho hlalositsoe botlaaseng ba offset, ho tsamaisetsa ho feta ho lokela ho nkela sebaka .affixka .affix-bottom. Kaha li-offsets ke tsa boikhethelo, ho beha e 'ngoe ho hloka hore u behe CSS e nepahetseng. Tabeng ena, eketsa position: absolute;ha ho hlokahala. Plugin e sebelisa tšobotsi ea data kapa khetho ea JavaScript ho fumana hore na e beha ntlha hokae ho tloha moo.

Latela mehato e ka holimo ho seta CSS ea hau bakeng sa e 'ngoe ea likhetho tse ka tlase.

Ka litšobotsi tsa data

Ho eketsa habonolo boitšoaro ba affix ho ntho efe kapa efe, eketsa feela data-spy="affix"ntho eo u batlang ho e hloela. Sebelisa li-offsets ho hlalosa nako ea ho fetola pinning ea element.

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

Ka JavaScript

Letsetsa plugin ea affix ka JavaScript:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-offset-top="200".

Lebitso mofuta ya kamehla tlhaloso
offset nomoro | tshebetso | ntho 10 Lipikselse tsa ho theola skrineng ha ho baloa hore na sebaka sa moqolo ke sefe. Haeba ho fanoe ka nomoro e le 'ngoe, offset e tla sebelisoa ka litsela tse ka holimo le tse ka tlaase. Ho fana ka e ikhethang, tlase le holimo offset fana feela ka ntho offset: { top: 10 }kapa offset: { top: 10, bottom: 5 }. Sebelisa tšebetso ha u hloka ho bala offset ka matla.
sepheo mokhethi | node | jQuery element windowntho _ E totobatsa ntlha e lebisitsoeng ho eona ea affix.

Mekhoa

.affix(options)

E kenya tšebetsong litaba tsa hau joalo ka litaba tse khomaretsoeng. E amohela khetho ea boikhethelo object.

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

.affix('checkPosition')

E bala bocha boemo ba affix ho ipapisitsoe le boholo, boemo, le boemo ba moqolo ba likarolo tse amehang. The .affix, .affix-top, and .affix-bottomclass li eketsoa kapa li tlosoa ho litaba tse khomaretsoeng ho latela boemo bo bocha. Mokhoa ona o hloka ho bitsoa neng kapa neng ha litekanyo tsa litaba tse khomaretsoeng kapa ntho eo ho shebiloeng e fetoloa, ho netefatsa boemo bo nepahetseng ba litaba tse khomaretsoeng.

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

Liketsahalo

Bootstrap's affix plugin e pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea affix.

Mofuta oa Ketsahalo Tlhaloso
hlomamisa.bs.hlomathisa Ketsahalo ena e tuka hang hang pele element e khomaretsoe.
hlohlelletsoa.bs.khomaretsa Ketsahalo ena e lelekoa ka mor'a hore element e hlomathisoe.
hlomamisa-ka holimo.bs.hlomela Ketsahalo ena e tuka hang hang pele element e behiloe holimo.
hlohlelletsoa-ka holimo.bs.affix Ketsahalo ena e ts'oaroa ka mor'a hore element e behoe holimo.
khomaretsa-tlase.bs.khoketsa Ketsahalo ena e tuka hang hang pele element e behiloe-tlase.
khomaretse-tlase.bs.khomaretsa Ketsahalo ena e lelekoa ka mor'a hore element e behoe ka tlase.