Haala Waliigalaa

Dhuunfaa ykn qindaa’ee

Plugins dhuunfaan hammatamuu danda'u ( *.jsfaayilota dhuunfaa Bootstrap fayyadamuun), ykn hunda yeroo tokkotti (fayyadamuun bootstrap.jsykn kan xiqqaate bootstrap.min.js).

JaavaScript qindaa'e fayyadamuun

Lamaanuu bootstrap.jsfi bootstrap.min.jsifteessitoota hunda faayilii tokko keessatti of keessaa qabu. Tokko qofa dabali.

Hirkatummaa ifteessaa

Plugins fi qaamolee CSS tokko tokko plugins biroo irratti hundaa'u. Yoo dhuunfaan ifteessitoota hammatte, hirkattummaa kana docs keessatti ilaaluu mirkaneessi. Akkasumas hubadhu, pilaaginoonni hundi jQuery irratti akka hirkatan (kana jechuun jQuery faayilii ifteessaa dura hammatamuu qaba jechuudha). Gosoota jQuery kamtu akka deeggaramu ilaaluuf keenya ilaali .bower.json

Amaloota deetaa

Sarara JaavaScript tokko osoo hin barreessiin pilaaginoota Bootstrap hunda karaa API mallattoo qulqulluu ta'een fayyadamuu dandeessa. Kun API sadarkaa tokkoffaa Bootstrap yoo ta'u yeroo plugin fayyadamtu yaada kee isa jalqabaa ta'uu qaba.

Kana jechuun, haala tokko tokko keessatti dalagaa kana dhaamsuun barbaachisaa ta'uu danda'a. Kanaafuu, akkasumas dandeettii API amaloota deetaa hanqisuu taateewwan hunda galmee maqaa addaan baafame irratti hidhuudhaan ni kennina data-api. Kunis akkana fakkaata:

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

Akka filannootti, ifteessaa murtaa'e irratti xiyyeeffachuuf, maqaa ifteessaa akka iddoo maqaatti iddoo maqaa deetaa-api waliin akkasitti qofa hammachuu:

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

Qaama tokkoof karaa amaloota deetaa ifteessaa tokko qofa

Amaloota deetaa ifteessitoota hedduu irraa elementii tokko irratti hin fayyadamin. Fakkeenyaaf, qaree tokko lamaanuu tooltip qabaachuu fi moodaalii jijjiiruu hin danda'u. Kana galmaan ga'uuf, elementii marfamu fayyadami.

API sagantaa

Akkasumas, Bootstrap plugins hunda karaa JavaScript API qulqulluu ta'een fayyadamuu danda'uu qabdu jennee amanna. APIwwan uummataa hundi malawwan tokko, sansalata qaban, fi walitti qabama irratti tarkaanfii fudhatame deebisu.

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

Malleen hundi wanta filannoowwan filannoo, tarree mala murtaa'e irratti xiyyeeffatu, ykn homaa hin qabne (kan amala durtii waliin ifteessituu jalqabu) fudhachuu qabu:

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

Tokkoon tokkoon ifteessaa akkasumas ijaarsa isaa raw Constructorqabeentaa irratti saaxilaa: $.fn.popover.Constructor. Yoo fakkeenya ifteessaa murtaa'e argachuu barbaadde, kallattiin elementii irraa fudhadhu: $('[rel="popover"]').data('popover').

Sajoo durtii

Sajoo durtii ifteessaa jijjiiruu dandeessa Constructor.DEFAULTSwanta ifteessaa fooyyessuudhaan:

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

Waldhabdee hin qabu

Yeroo tokko tokko Bootstrap plugins UI frameworks biroo wajjin fayyadamuun barbaachisaadha. Haalota kanneen keessatti, walitti bu'iinsi iddoo maqaa darbee darbee uumamuu danda'a. Yoo kun ta'e, .noConflictpilaaginii gatii isaa deebisuu barbaaddu bilbiluu dandeessa.

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

Taateewwan

Bootstrap taateewwan amala gochoota addaa plugins baay'eedhaaf kenna. Walumaagalatti, kunniin bifa xumura hin qabnee fi gocha darbeen dhufu - bakka xumura hin qabne (fkn show) jalqaba taatee tokkoo irratti kaka’u, fi bifa gocha isaa darbe (fk. shown) xumura gocha tokkoo irratti kaka’u.

3.0.0 irraa eegalee, taateewwan Bootstrap hundi maqaa addaan baafamaniiru.

Taateewwan dhuma hin qabne hundi preventDefaultdalagaa ni kennu. Kunis dandeettii raawwii gocha tokkoo osoo hin jalqabin dhaabuu kenna.

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

Lakkoofsa version

VERSIONVershiniin tokkoon tokkoo pilaaginii jQuery Bootstrap karaa qabeentaa ijaarsa ifteessaa argachuun ni danda'ama . Fakkeenyaaf, plugin tooltip tiif:

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

Yeroo JaavaScript hanqifamu kufaatii addaa hin jiru

Bootstrap's plugins addatti yeroo JavaScript hanqifamu gracefully duubatti hin kufan. Yoo waa'ee muuxannoo fayyadamaa haala kana keessatti dhimmamte, <noscript>haala (fi akkaataa JaavaScript irra deebitee dandeessiftu) fayyadamtoota keetiif ibsuuf fayyadami, fi/ykn kufaatii amala mataa keetii itti dabali.

Manneen kitaabaa qaama sadaffaa

Bootstrap mana kitaabaa JaavaScript qaama sadaffaa akka Prototype ykn jQuery UI ifatti hin deeggaru. Taateewwan jiraatanis .noConflictfi maqaa addaan baafaman, rakkoon walsimsiisaa kan ofii keetiin sirreessuu qabdu jiraachuu danda'a.

Ce'umsaa ce'umsa.js

Waa'ee ce'umsaa

Bu'aa ce'umsaa salphaadhaaf, transition.jsfaayilii JS kanneen biroo cinatti al tokko dabali. Yoo qindaa'e (ykn xiqqaate) fayyadamaa jirta ta'e bootstrap.js, kana hammachuun hin barbaachisu—duruu jira.

Waan keessa jiru

Transition.js gargaaraa bu'uuraa transitionEndtaateewwanii akkasumas fakkeenya ce'umsaa CSS ti. Deeggarsa ce'umsa CSS sakatta'uuf akkasumas ce'umsa fannifame qabachuuf pilaaginoota birootiin fayyadama.

Ce'umsa hojii irraa oolchuu

Ce'umsi akka addunyaatti cuquliisa JaavaScript armaan gadii fayyadamuun hanqisuun ni danda'ama, kunis erga transition.js(ykn bootstrap.jsykn bootstrap.min.js, akka haala isaatti) fe'amee booda dhufuu qaba:

$.support.transition = false

Moodaalota modal.js jedhaman

Moodaalonni qajeeltoo, garuu jijjiiramaa, qaaqa gaaffiiwwan dalagaa xiqqaa barbaadamu fi durtii ismaartii qaban.

Moodaalonni banaa hedduu hin deeggaraman

Osoo kan biraa mul'atu moodaalii tokko akka hin banne mirkaneeffadhu. Yeroo tokkotti moodaalii tokkoo ol agarsiisuu koodii amala barbaada.

Bakka mallattoo moodaalii

Yeroo hunda koodii HTML moodaalichaa galmee kee keessatti bakka sadarkaa olaanaatti kaa'uuf yaali, qaamolee biroo bifa fi/ykn dalagaa moodaalichaa irratti dhiibbaa akka hin geessisneef.

Of eeggannoo meeshaa moobaayilaa

Meeshaalee moobaayilaa irratti moodaalota fayyadamuu ilaalchisee of eeggannoowwan tokko tokko jiru. Bal'ina isaaf docs deeggarsa browser keenya ilaalaa .

Sababa akkaataa HTML5 hiika isaa ibsutti, autofocusamalli HTML moodaalota Bootstrap keessatti bu'aa hin qabu. Bu'aa walfakkaatu galmaan ga'uuf, JaavaScript amala tokko tokko fayyadami:

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

Fakkeenyaaf

Fakkeenya istaatiksii

Moodaalii agarsiifame mataduree, qaama, fi tuuta gochoota jalaqaba keessatti.

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

Deemoo kallattiin

Qabduu armaan gadii cuqaasuun moodaalii tokko karaa JaavaScript jijjiiri. Innis gadi siqee gubbaa fuula irraa ni fade in ta'a.

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

Moodaalonni dhaqqabamaa ta’an gochuu

role="dialog"fi aria-labelledby="...", mata duree moodaalii wabeeffachuun, gara .modal, fi role="document"ofii isaatii dabaluu kee mirkaneessi .modal-dialog.

Dabalataan, ibsa qaaqa moodaalii kee aria-describedbyirratti on waliin kennuu dandeessa .modal.

Viidiyoo YouTube keessa galchuu

Viidiyoowwan YouTube modal keessatti galchuun ofumaan tapha dhaabuuf Bootstrap keessa hin taane JavaScript dabalataa barbaada fi kanneen biroo. Odeeffannoo dabalataaf barreeffama Stack Overflow gargaaraa kana ilaali .

Safara filannoo

Moodaalonni hammangaa filannoo lama qabu, karaa gita fooyyessaa a irratti kaa'amuu danda'u .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>

Animeeshinii balleessi

Moodaalota salphaatti mul'ataniif ilaaluuf fade in osoo hin taane, .fadegita mallattoo moodaalii kee irraa haqi.

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

Sirna giiridii fayyadamuun

Sirna tarjaa Bootstrap moodaalii keessaa fayyadamuuf, .rows keessaa qofa man'ee .modal-bodysana booda gita sirna tarjaa idilee fayyadami.

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

Tuuta buttooni hundi isaanii moodaalii walfakkaataa kakaasan qabduu, qabiyyee xiqqoo adda ta'e qofa qabaadhaa? Fayyadamaa event.relatedTargetfi amaloota HTMLdata-* ( karaa jQuery ta'uu danda'a ) qabiyyee moodaalichaa qaree kamtu cuqaafame irratti hundaa'uun garaagarummaa uumuuf. Bal'ina isaaf docs Modal Events ilaali relatedTarget, .

...button dabalataa...
<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)
})

Fayyadama

Ijaarsi moodaalii qabiyyee dhokataa kee gaaffii irratti, karaa amaloota deetaa ykn JaavaScript jijjiira. Akkasumas amala garagalchuu durtii irra darbuu .modal-openirratti dabalee yeroo moodaaliin ala cuqaastu moodaalota agarsiifaman kuffisuuf naannoo cuqaasuu kennuudhaaf a uuma.<body>.modal-backdrop

Karaa amaloota deetaa

JaavaScript osoo hin barreessiin moodaalii tokko hojii irra oolchi. Qaama too'ataa irratti saagi data-toggle="modal", akka qaree, waliin data-target="#foo"ykn href="#foo"moodaalii murtaa'e jijjiiruuf irratti xiyyeeffachuuf.

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

Karaa JaavaScript

Moodaalii id myModalqabu sarara JaavaScript tokkoon waami:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-backdrop="".

Maqaa akaakuu durtii ibsa
duubbee boolean ykn tarree'static' dhugaa Qaama moodaalii-duubbee of keessaa qaba. staticAkka filannootti, duubbee kan moodaalii cuqaasuu irratti hin cufneef ifteessi .
kiiboordii boolee dhugaa Yeroo furtuun miliquu dhiibamu moodaalii cufa
agarsiisuu boolee dhugaa Moodaalii yeroo jalqabamu agarsiisa.
fagoo karaa soba

Filannoon kun erga v3.3.0 irraa kan hafe yoo ta'u v4 keessatti haqameera. Inumaayyuu unkaa gama maamilaa ykn unkaa hidhaa deetaa fayyadamuu, ykn jQuery.load ofii keetii waamuu ni gorsina.

Yoo URL fagoo kenname, qabiyyeen yeroo tokko karaa loadmala jQuery'n fe'amee gara .modal-contentdiv tti ni naqama. Yoo deetaa-api fayyadamaa jirta ta'e, hrefmadda fagoo ifteessuuf filannoodhaan amaloota fayyadamuu dandeessa. Fakkeenyi kanaa akka armaan gadiitti agarsiifameera:

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

Malawwan

Qabiyyee kee akka moodaaliitti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

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

Harkaan moodaalii tokko jijjiira. Moodaaliin qabatamaan osoo hin agarsiifamin ykn hin dhokatiin dura (jechuunis osoo taatee shown.bs.modalykn hin uumamin dura) gara waamichaatti deebi'a.hidden.bs.modal

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

Harkaan moodaalii tokko bana. Moodaaliin qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.modaltaatee osoo hin uumamin dura) gara waamichaatti deebi'a.

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

Harkaan moodaalii tokko dhoksa. Moodaaliin qabatamaan osoo hin dhokatin dura (jechuunis osoo hidden.bs.modaltaatee hin uumamin dura) gara waamichaatti deebi'a.

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

Yoo tokko mul'achuu qaba ta'e, barruu qaxxaamuraa faallaadhaaf, kan moodaaliin gara bitaatti utaaluu danda'u, bakka moodaalichaa irra deebi'ee sirreessa.

Yeroo olka'iinsi moodaalichaa osoo banaa ta'ee jijjiiramu qofa barbaachisa.

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

Taateewwan

Gitni moodaalii Bootstrap taateewwan muraasa gara dalagaa moodaaliitti hooking gochuuf saaxila.

Taateewwan moodaalii hundi moodaalii mataa isaa irratti (jechuunis <div class="modal">) irratti dhukaafamu.

Gosa Taatee Ibsa
agarsiisa.bs.moodaalii Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa. Yoo cuqaasuun uumame, qaamni cuqaafame akka relatedTargetqabeentaa taateetti argama.
agarsiifame.bs.moodaalii Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaaf akka mul'atu godhame (ce'umsa CSS xumuramuu eega). Yoo cuqaasuun uumame, qaamni cuqaafame akka relatedTargetqabeentaa taateetti argama.
dhoksi.bs.moodaalii Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa.bs.moodaalii Taatee kun kan dhukaafamu yeroo moodaaliin fayyadamaa irraa dhokatee xumuredha (ce'umsa CSS xumuramuu eega).
fe'ame.bs.moodaalii Taatee kun kan dhukaafamu yeroo moodaalichi filannoo fayyadamuun qabiyyee fe'edha remote.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Gadi bu'oota dropdown.js

Navbar, caancalaa fi kiniinii dabalatee, plugin salphaa kanaan menuwwan gadi bu'an gara waan kamiyyuu jechuun ni danda'amatti dabali.

Navbar tokko keessa

Kiniinii keessaa

Karaa amaloota deetaa ykn JaavaScript, ifteessituun tarree qabiyyee dhokataa (qajoojiiwwan gadi bu'aa) .opengita wanta tarree warraa irratti jijjiiruun jijjiira.

Meeshaalee moobaayilaa irratti, gadi bu'aa banuun .dropdown-backdropakka naannoo tuqaatti yeroo menu ala tuqxu menu gadi bu'aa cufuuf dabalata, kunis deeggarsa iOS sirrii ta'eef barbaachisaadha. Kana jechuun open dropdown menu irraa gara dropdown menu adda ta'etti jijjiiruun mobile irratti dabalataan tuquu barbaachisa.

Hubachiisa: data-toggle="dropdown"Amalli kun sadarkaa aplikeeshinii irratti qaaqa tarree cufuuf irratti hirkata, kanaaf yeroo hunda fayyadamuun yaada gaarii dha.

Karaa amaloota deetaa

data-toggle="dropdown"Tarree tokko jijjiiruuf hidhaa ykn qaree irratti dabali .

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

URL'n qaree walqabsiisaa waliin akka hin mancaane gochuuf, data-targetbakka 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>

Karaa JaavaScript

Karaa JaavaScript kanneen gadi bu'an bilbili:

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

data-toggle="dropdown"ammallee barbaachisaadha

Karaa JaavaScript tarree kee waamtus ykn inumaayyuu data-api fayyadamuu kee osoo hin ilaalin, data-toggle="dropdown"yeroo hunda elementii kaka'umsaa gadi bu'aa irratti argamuun barbaachisaadha.

Homaa

Sajoo tarree navbar kennamee ykn qajeelcha caancalaa jijjiira.

Taateewwan tarree hunduu .dropdown-menuqaama warraa ' irratti dhukaafamu.

Taateewwan tarree hunduu relatedTargetqabeentaa qabu, kan gatiin isaa qaama ankuraa jijjiirraa dha.

Gosa Taatee Ibsa
show.bs.gadi bu'aa Taatee kun yeroo mala fakkeenya agarsiisaa waamamu battalumatti dhukaasa.
agarsiifame.bs.gara bu'aa Taatee kun yeroo gadi bu'iinsi fayyadamaaf akka mul'atu godhame ni ari'ama (ce'umsa CSS ni eega, xumuruuf).
dhoksi.bs.gara bu'aa Taatee kun yeroo mala fakkeenya dhoksaa waamame battalumatti dhukaafama.
dhokataa.bs.gadi bu'aa Taatee kun kan dhukaafamu yeroo gadi bu'iinsi fayyadamaa irraa dhokfamuu xumure (ce'umsa CSS ni eega, xumuruuf).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy Afaan Oromoo.js

Fakkeenya navbar keessatti

Ijaarsi ScrollSpy bakka tarree irratti hundaa'uun galmoota nav ofumaan fooyyessuuf. Naannoo navbar jala jiru garagalchiiti jijjiirama gita socho'aa ilaali. Wantoonni xiqqaan gadi bu'an akkasumas ni calaqqisu.

@furdaa

Beeksisa leggings keytar, brunch id dhaaba aartii dolor labore. Pitchfork yr enim lo-fi osoo isaan hin gurguratin qui. Tumblr qonnaa irraa gara minjaalaatti mirga biskileetii waanuma fedhe. Anim keffiyeh kaarlees kaardii. Velit seitan mcsweeney's suuraa booth 3 lukkuu ji'a irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui tarii waa'ee isaanii hin dhageenye et cardigan fandii imaanaa culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony baayoodiizeelii keffiyeh artiisan ullamco bu'aa.

@mdo jedhaa

Veniam marfa mustache iskeetiiboordii, adipisicing fugiat velit qeensa pitchfork. Freegan qeensa aliqua cupidat mcsweeney's vero jedhamuun beekama. Kuupidaat afur loko nisi, ea helvetica nulla carles. Tattooed cosby sweater konkolaataa nyaataa fe'umsaa, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial jedhamuun beekama. Carles sochii qaamaa miidhaginaa hin taane quis gentrify. Biruukiliin adipisicing hojii harkaa biiraa itti aanaa keytar deserunt.

tokko

Occaecat commodo aliqua delectus jedhamuun beekama. Fap hojii harkaa biiraa deserunt skateboard ea. Lomo mirga biskileetii adipisicing banh mi, velit ea sunt sadarkaa itti aanu locavore buna ka'umsa tokkoo magna veniam keessatti. Jireenya ol'aanaa id vaayinaayilii, echo paarkii consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing jedhamuun beekama. Consectetur nisi DIY boorsaa ergamaa xiqqaa. Cred ex in, itti fufiinsa kan qabu delectus consectetur fanny pack iphone.

lama

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 ergamaa boorsaa marfa waanuma fedhe delectus nyaata fe'umsaa. Sapiente synth id akka tilmaamaatti. Locavore sed helvetica cliche irony, thundercats tarii waa'ee isaanii hin dhageenye consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat osoo isaan hin gurguramin dura, terry richardson proident brunch nesciunt quis cosby iswiiterii pariatur keffiyeh ut helvetica artisan. Cardigan biiraa hojii harkaa seitan qophaa'aa velit. VHS chambray laboris yeroodhaaf veniam. Anim mollit minim commodo ullamco qilleensaa.

Fayyadama

Bootstrap nav barbaada

Scrollspy yeroo ammaa fayyadama qaama Bootstrap nav hidhannoowwan socho'an sirriitti calaqqisiisuuf barbaada.

Target ID furmaata argachuu danda'an barbaachisa

Hidhamtoonni Navbar galmoota id furmaata argachuu danda'an qabaachuu qabu. Fakkeenyaaf, a <a href="#home">home</a>waan DOM keessa jiru akka <div id="home"></div>.

Qaamolee :visiblegalma hin taane tuffataman

Qaamonni galmee :visibleakkaataa jQuery hin taane ni tuffatamu fi wantoonni nav isaanii walgitan gonkumaa hin calaqqisan.

Ejjennoo walqabataa (relative positioning) barbaada

Malli hojiirra oolmaa maal iyyuu yoo ta'e, scrollspy position: relative;elementii ati basaastu irratti fayyadamuu barbaada. Yeroo baayyee kun kan <body>. Yeroo elementoota , malee biroo irratti scrollspying gootu , tuuta qabaachuu fi hojiirra oolchuu <body>kee mirkaneessi .heightoverflow-y: scroll;

Karaa amaloota deetaa

Amala scrollspy salphaatti gara navigeeshinii barruu gubbaa keetti dabaluuf, data-spy="scroll"elementii basaasuu barbaaddutti dabali (baay'inaan kun kan ta'a <body>). Sana booda data-targetamalli ID ykn gita qaama warraa qaama Bootstrap kamiyyuu waliin dabali .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>

Karaa JaavaScript

CSS keessan keessatti erga dabaltanii booda position: relative;, karaa JavaScript scrollspy waami:

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

Malawwan

.scrollspy('refresh')

Yeroo scrollspy fayyadamtu elementoota DOM irraa dabaluu ykn haquu wajjin walqabatee, mala haaromsaa akkasitti waamuun si barbaachisa:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset="".

Maqaa akaakuu durtii ibsa
ofseeti jechuun ni danda’ama lakkoofsa 10. Piikseelota yeroo iddoo tarree shallagdu gubbaa irraa ofseeti.

Taateewwan

Gosa Taatee Ibsa
hojii irra oolchuu.bs.scrollspy Taatee kun yeroo wanti haaraan scrollspy'n hojiirra oolu hundatti dhukaasa.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Caancaloota jijjiiramuu danda'an tab.js

Fakkeenya caancalaa

Dalagaa caancala saffisaa, daayinamikii gara foddaa qabiyyee naannootti ce'uutti dabali, karaa qaaqa tarree illee. Caancaloota man'ee hin deeggaraman.

Raw denim tarii waa'ee isaanii hin dhageenye jean shorts Austin. Nesciunt tofu stumptown aliqua, qulqullina gooftaa retro synth. Mustache cliche yeroodhaaf, williamsburg carles vegan helvetica jedhamuun beekama. Reprehenderit foon qalaa retro keffiyeh abjuu qabatu synth. Koosbii iswiiterii eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum afaan oromoo afaan oromoo. Seitan aliquip quis cardigan uffata ameerikaa, foon qalaa 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.

Navigeeshinii caancalaa dheeressa

Ijaarsi kun qaama qajeelcha caancala qabu bal'isuun naannoowwan caancalaa dabaluuf.

Fayyadama

Caancalawwan caancala qaban karaa JaavaScript dandeessisi (tokkoon tokkoon caancalaa dhuunfaan hojii irra oolchuu qaba):

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

Caancaloota dhuunfaa karaa hedduudhaan hojii irra oolchuu dandeessa:

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

data-toggle="tab"JaavaScript kamiyyuu osoo hin barreessiin salphaatti ifteessuudhaan ykn data-toggle="pill"elementii tokko irratti navigeeshinii caancala ykn kiniinii hojii irra oolchuu dandeessa . Gitoota navfi gara caancalaatti dabaluudhaan akkaataa caancala Bootstrap hojiirra oolcha , gitaalee fi dabaluudhaan ammoo akkaataa kiniinii hojiirra oolcha .nav-tabsulnavnav-pills

<div>

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

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

</div>

Fade effect jedhamuun beekama

Caancaloota akka keessaa bahan gochuuf, .fadetokkoon tokkoon .tab-pane. Qaaqa caancala .injalqabaa qabiyyee jalqabaa akka mul'atu gochuus qaba.

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

Malawwan

$().tab

Qabduu caancalaa fi qabduu qabiyyee hojii irra oolcha. Caancalli DOM keessatti noodiin qabduu a data-targetykn kan xiyyeeffatu qabaachuu qaba. hrefFakkeenyota armaan olii keessatti, caancaloonni <a>s data-toggle="tab"amaloota qaban dha.

.tab('show')

Caancala kenname filatee qabiyyee isaa walqabate agarsiisa. Caancalli biraa kamiyyuu kan duraan filatame hin filatamne ta'ee qabiyyeen isaa walqabatu dhokata. Osoo foddaan caancala qabatamaan hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo shown.bs.tabtaatee hin uumamin dura).

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

Taateewwan

Yeroo caancala haaraa agarsiisu, taateewwan tartiiba armaan gadiitiin dhukaasu:

  1. hide.bs.tab(caancala amma socho'aa jiru irratti)
  2. show.bs.tab(caancala agarsiifamu irratti)
  3. hidden.bs.tab(caancala socho'aa duraa irratti, kan taatee sanaaf walfakkaatu hide.bs.tab)
  4. shown.bs.tab(caancala haaraa-socho'aa reefuu agarsiifame irratti, kan show.bs.tabtaatee sanaaf walfakkaatu)

Yoo caancala duraan socho'aa hin turre, sana booda taateewwan hide.bs.tabfi hidden.bs.tabhin dhukaafaman.

Gosa Taatee Ibsa
caancala.bs. agarsiisi Taatee kun agarsiisa caancalaa irratti dhukaasa, garuu osoo caancala haaraan hin agarsiifamiin dura. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.targetfi fayyadami .event.relatedTarget
agarsiifame.bs.tab Taatee kun agarsiisa caancala irratti erga caancala agarsiifamee booda dhukaasa. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.targetfi fayyadami .event.relatedTarget
caancala.bs.dhoksaa Taatee kun yeroo caancala haaraa agarsiifamuu qabutti dhukaasa (kanaanis caancala socho'aa duraanii dhokfamuu qaba). Caancala socho'aa ammaa fi caancala haaraa yeroo dhiyootti socho'u irratti xiyyeeffachuuf event.targetfi fayyadami , akkaataa wal duraa duubaan.event.relatedTarget
dhokataa.bs.tab Taatee kun erga caancala haaraa agarsiifamee booda dhukaasa (kanaanis caancala socho'aa duraanii dhokata). Caancala socho'aa duraa fi caancala socho'aa haaraa irratti xiyyeeffachuuf event.targetfi fayyadami , akkaataa wal duraa duubaan.event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Gorsa meeshaalee tooltip.js

JQuery.tipsy plugin gaarii Jason Frame barreesse irraa kaka'umsa argate; Gorsi meeshaa gosa fooyya'eedha, kan fakkiiwwan irratti hin hirkanne, sochiiwwaniif CSS3 fayyadamu, fi kuusaa mata duree naannootiif deetaa-amaloota.

Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.

Fakkeenyaaf

Gorsa meeshaalee ilaaluuf hidhannoowwan armaan gadii irratti harka kaa'i:

Paantii cimaa sadarkaa itti aanu keffiyeh tarii waa'ee isaanii hin dhageenye. Booth suuraa qeensa raw denim letterpress vegan ergamaa boorsaa stumptown. Qonnaa irraa gara minjaalaatti seitan, mcsweeney's fixie itti fufiinsa qabu quinoa 8-bit uffata ameerikaa terry richardson vinyl chambray qabu . Beard stumptown, kaardii banh mi lomo qilleensaa. Tofu biodiesel williamsburg marfa, afur loko mcsweeney's qulqulleessuu vegan chambray. A really ironic artisan whatever keytar , scenester qonnaa irraa gara minjaala banksy Austin twitter qabachuu freegan cred raw denim buna ka'umsa tokkoo vaayirasii.

Gorsa meeshaa istaatiksii

Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e.

Kallattii afur

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

Hojii filannoo keessaa (opt-in functionality).

Sababa raawwii hojiif, Tooltip fi Popover data-apis opt-in dha, jechuunis ofii keetii jalqabuu qabda .

data-toggleKaraan tokko gorsa meeshaalee hunda fuula tokko irratti jalqabsiisuu amaloota isaaniitiin filachuu ta'a :

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

Fayyadama

Ijaarsi gorsa meeshaa qabiyyee fi mallattoo gaaffii irratti maddisiisa, akkasumas durtii gorsa meeshaa qaama kaka'umsaa isaanii booda kaa'a.

Gorsa meeshaa karaa JaavaScript kakaasi:

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

Markup gochuu

Mallattoon barbaachisu gorsa meeshaa dataamaloota qofaa fi titleqaama HTML irratti gorsa meeshaa qabaachuu barbaadda. Mallattoon gorsa meeshaa uumame baay'ee salphaadha, haa ta'u malee bakka barbaada (durtiidhaan, ifteessaadhaan saagi top).

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

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

Hidhamtoota sarara hedduu qaban

Yeroo tokko tokko gorsa meeshaa gara haayperliinkii sararoota hedduu marsutti dabaluu barbaadda. Amalli durtii ifteessaa gorsa meeshaa, qajeelaa fi dhaabbataa giddugaleessa gochuudha. white-space: nowrap;Kana irraa of eeguuf anchors keessanitti dabalaa .

Gorsi meeshaalee gareewwan qaree, gareewwan galtee, fi gabatee keessatti qindaa'ina addaa barbaadu

Yeroo gorsa meeshaa elementoota a .btn-groupykn an keessa jiran irratti fayyadamtu .input-group, ykn elementoota gabatee wajjin walqabatan irratti ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), container: 'body'miidhaa hin barbaachifne (kan akka elementiin bal'inaan guddachuu fi/ ykn yeroo fiixeen meeshaa kaka’u goleewwan isaa geengoo ta’an dhabuu).

Qaamolee dhokatan irratti gorsa meeshaa agarsiisuuf hin yaalin

$(...).tooltip('show')Yeroo qaamni galmee ta'u waamuun display: none;, gorsa meeshaa akka sirrii hin taaneetti akka dhaabbatu taasisa.

Gorsa meeshaalee fayyadamtoota kiiboordii fi teeknooloojii gargaaraaf dhaqqabamaa ta'e

Fayyadamtoota kiiboordii waliin naanna'aniif, fi keessumaa fayyadamtoota teeknooloojiiwwan gargaarsaa, gorsa meeshaa qaamolee kiiboordii irratti xiyyeeffachuu danda'an kan akka hidhannoo, too'annoo unkaa, ykn qaama fedhii kamiyyuu tabindex="0"amaloota qabu qofa irratti dabaluu qabda.

Gorsi meeshaa qaamolee hanqifaman irratti elementoota marfataa barbaadu

disabledGorsa meeshaa a ykn elementii irratti dabaluuf .disabled, elementii a keessa kaa'iitii bakka <div>isaa fiixee meeshaa sana irratti hojii irra oolchi <div>.

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Maqaa Akaakuu Durtii dha Ibsa
sochii qaamaa (animation). boolee dhugaa Ce'umsa fade CSS gara gorsa meeshaatti hojii irra oolchi
qabduu tarree | soba soba

Gorsa meeshaa gara qaama murtaa'etti dabalata. Fakkeenyaaf: container: 'body'. Filannoon kun keessumaa faayidaa kan qabu yoo ta'u, kunis fiixee meeshaa dhangala'aa galmee keessatti naannoo qaama kakaasutti akka kaa'attu si dandeessisa - kunis yeroo guddina foddaa gorsa meeshaa qaama kakaasu irraa akka hin yaabbanne dhorka.

boodatti hafuu lakkoofsa | meeshaa 0.

Gorsa meeshaa agarsiisuu fi dhoksuu harkifachuu (ms) - gosa kaka'umsa harkaa irratti hin hojjetu

Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola

Caasaan wantaa: 1.1.delay: { "show": 500, "hide": 100 }

html boolee soba HTML gara gorsa meeshaa galchi. Yoo soba ta'e, textmala jQuery qabiyyee gara DOMtti galchuuf fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami.
ramaddii tarree | faayidaa 'gubbaa'

Akkaataa itti tooltip - gubbaa | jalaa | bitaa | mirgaa | auto.
Yeroo "auto" ifteessamu, inni daayinamiikiin gorsa meeshaa irra deebi'ee qajeelcha. Fakkeenyaaf, yoo iddoon "ofumaan bitaa" ta'e, gorsi meeshaa yeroo danda'ame gara bitaatti agarsiisa, yoo kana hin taane mirga agarsiisa.

Faankishiniin tokko iddoo murteessuuf yeroo fayyadamu, akka murfii isaa isa jalqabaatti noodiin DOM fiixee meeshaa fi noodiin DOM elementii kakaasu akka isa lammaffaatti waamama. Qabduun thisgara fakkeenya gorsa meeshaatti qindaa'a.

filannoodha hidhaa soba Yoo filataan kenname, wantoonni gorsa meeshaa galmoota ifteessamaniif ni kennamu. Qabatamaan, kun qabiyyee HTML daayinamikii gorsa meeshaa akka dabalamu dandeessisuuf fayyadama. Kanaa fi fakkeenya odeeffannoo qabu ilaalaa .
unkaa hidhaa '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML yeroo gorsa meeshaa uumtu fayyadamuuf bu'uura.

Tooltip's titlegara .tooltip-inner.

.tooltip-arrowxiyya tooltip ta'a.

Qaamni marfataa alaa .tooltipgita qabaachuu qaba.

mata-duree tarree | faayidaa '' .

Gatii mata duree durtii yoo titleamalli hin jirre.

Yoo faankishiniin kenname, thistuuta wabii isaa elementii fiixeen meeshaa itti maxxane waliin ni waamama.

dammaqsuu hidhaa 'xiyyeeffannoo hover' jedhu. Akkaataa tooltip itti kakaafamu - | cuqaasi hover | xiyyeeffannoo | kan harkaanii. Kaka’umsa hedduu darbuu dandeessa; bakka adda baasuun addaan baasuu. manualtrigger biraa kamiinuu waliin walitti makamuu hin danda’u.
iddoo ilaalchaa tarree | wanta | faayidaa { filannoo: 'qaama', padding: 0 } .

Qabduu meeshaa daangaa elementii kanaa keessa eega. Fakkeenyaaf: viewport: '#viewport'ykn{ "selector": "#viewport", "padding": 0 }

Yoo faankishiniin kenname, akka murfii isaa tokkichatti elementii kakaasu DOM noodiin waamama. Qabduun thisgara fakkeenya gorsa meeshaatti qindaa'a.

Amaloota deetaa gorsa meeshaalee dhuunfaaf

Filannoon gorsa meeshaalee dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama, akkuma armaan olitti ibsame.

Malawwan

$().tooltip(options)

Qabduu gorsa meeshaa walitti qabama elementii irratti maxxansi.

.tooltip('show')

Gorsa meeshaa elementii tokkoo mul'isa. Osoo gorsi meeshaa qabatamaan hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo shown.bs.tooltiptaatee hin uumamin dura). Kun akka "harkaan" kakaasuu tooltip ta'ee fudhatama. Gorsi meeshaa mata dureewwan dheerina zeeroo qaban gonkumaa hin agarsiifaman.

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

.tooltip('hide')

Gorsa meeshaa elementii dhoksa. Osoo gorsi meeshaa qabatamaan hin dhokatiin (jechuun osoo taatee hin uumamin dura) gara waamichaatti deebi'a . hidden.bs.tooltipKun akka "harkaan" kakaasuu tooltip ta'ee fudhatama.

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

.tooltip('toggle')

Gorsa meeshaa qaama tokkoo jijjiira. Gara waamichaatti deebi'a osoo gorsi meeshaa qabatamaan hin agarsiifamin ykn hin dhokatiin (jechuunis osoo taatee shown.bs.tooltipykn hin uumamin dura hidden.bs.tooltip). Kun akka "harkaan" kakaasuu tooltip ta'ee fudhatama.

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

.tooltip('destroy')

Gorsa meeshaa elementii tokkoo dhoksuu fi balleessa. Gorsi meeshaalee bakka bu'iinsa fayyadaman ( kanneen selectorfilannoo fayyadamuun uumaman ) qaamolee kaka'umsaa sanyii irratti dhuunfaan balleessuu hin danda'an.

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

Taateewwan

Gosa Taatee Ibsa
gorsa meeshaa agarsiisu.bs Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifame.bs.tooltip Taatee kun yeroo gorsi meeshaa fayyadamaaf mul'atu taasifamu ni ari'ama (ce'umsa CSS xumuramu ni eega).
gorsa meeshaa dhoksi.bs Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa.bs.meeshaa Taatee kun yeroo gorsi meeshaa fayyadamaa irraa dhokatee xumuru ni dhukaafama (ce'umsa CSS xumuramuu eega).
gorsa meeshaa.bs.galfame Taatee kun taatee booda show.bs.tooltipyeroo unkaan gorsa meeshaa DOM irratti dabalame ari'ama.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js jedhamuun beekama

Qabiyyee xixiqqoo, akkuma kanneen iPad irratti, odeeffannoo lammaffaa mana jireenyaaf elementii kamiyyuu irratti dabali.

Popovers mata duree fi qabiyyeen isaanii lamaan isaanii dheerina zeeroo ta'e gonkumaa hin agarsiifaman.

Hirkatummaa pilaagii

Popovers akka tooltip plugin version Bootstrap kee keessatti hammatamuu barbaadu.

Hojii filannoo keessaa (opt-in functionality).

Sababa raawwii hojiif, Tooltip fi Popover data-apis opt-in dha, jechuunis ofii keetii jalqabuu qabda .

data-toggleKaraan tokko fuula tokko irratti popovers hunda jalqabsiisuu danda'an amaloota isaaniitiin filachuu ta'a :

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

Popovers gareewwan qaree, gareewwan galtee, fi gabateewwan keessatti qindaa'ina addaa barbaadu

Yeroo popovers elementoota a .btn-groupykn an keessa jiran irratti fayyadamtu .input-group, ykn elementoota gabatee wajjin walqabatan irratti ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), container: 'body'miidhaa hin barbaachifne (kan akka elementiin bal'inaan guddachuu fi/ ykn yeroo popover ka’u goleewwan isaa geengoo ta’an dhabuu).

Elementiiwwan dhokatan irratti popovers agarsiisuuf hin yaalin

$(...).popover('show')Yeroo elementiin galmee ta'u waamuun display: none;popover dogoggoraan akka dhaabbatu taasisa.

Popovers elementoota hanqina qaban irratti elementoota wrapper barbaadu

Poopover a disabledykn .disabledelementii irratti dabaluuf, elementii a keessa kaa'iitii bakka <div>isaa popover sana irratti hojii irra oolchi <div>.

Hidhamtoota sarara hedduu qaban

Yeroo tokko tokko popover gara hyperlink sararoota hedduu marsu irratti dabaluu barbaadda. Amalli durtii ifteessaa popover gara qajeelaa fi dhaabbataatti giddugaleessa gochuudha. white-space: nowrap;Kana irraa of eeguuf anchors keessanitti dabalaa .

Fakkeenyaaf

Poopover kan hin jijjiiramne

Filannoon afur ni jiru: gubbaa, mirgaa, jalaa, fi bitaa qindaa'e.

Popover gubbaa

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Aenean eu leo ​​quam jedhamuun beekama. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Popover sirriidha

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Aenean eu leo ​​quam jedhamuun beekama. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Popover jalatti

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Aenean eu leo ​​quam jedhamuun beekama. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Popover ni deeme

Sed posuere consectetur est kan jedhamu kan lobortis irratti argamu. Aenean eu leo ​​quam jedhamuun beekama. Pellentesque ornare sem lacinia quam venenatis vestibulum jedhamuun kan beekamu dha.

Deemoo kallattiin

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

Kallattii afur

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

Cuqaasuu itti aanu irratti hojii irraa ari'i

focusCuqaasuu itti aanu kan fayyadamaan godhu irratti popovers kuffisuuf trigger fayyadami .

Mallattoo addaa cuqaasuu itti aanu irratti ari'uuf barbaachisa

Amala qaxxaamuraa-browser fi qaxxaamuraa-waltajjii sirrii ta'eef, mallattoo fayyadamuu qabda malee mallattoo fayyadamuu qabda , akkasumas<a> amaloota fi hammachuu qabda .<button>role="button"tabindex

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

Fayyadama

Popovers karaa JavaScript dandeessisi:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-animation="".

Maqaa Akaakuu Durtii dha Ibsa
sochii qaamaa (animation). boolee dhugaa Ce'umsa CSS fade gara popover tti hojiirra oolchi
qabduu tarree | soba soba

Poopover elementii murtaa'e tokkotti dabalata. Fakkeenyaaf: container: 'body'. Filannoon kun keessumaa faayidaa guddaa kan qabu yoo ta'u, kunis popover dhangala'aa galmee keessatti naannoo elementii kakaasutti akka kaa'attu si dandeessisa - kunis yeroo guddina foddaa jijjiirraa popover elementii kakaasu irraa akka hin yaabbanne dhorka.

qabiyyee tarree | faayidaa '' .

Gatii qabiyyee durtii yoo data-contentamalli hin jirre.

Yoo faankishiniin kenname, thiswabii isaa elementii popover itti maxxane waliin qindaa'a.

boodatti hafuu lakkoofsa | meeshaa 0.

Harkifannaa agarsiisuu fi dhoksuu popover (ms) - gosa kaka'umsa harkaa irratti hin hojjetu

Yoo lakkoofsi kenname, harkifannaa dhoksuu/agarsiisi lamaan irratti hojii irra oola

Caasaan wantaa: 1.1.delay: { "show": 500, "hide": 100 }

html boolee soba HTML popover keessa galchi. Yoo soba ta'e, textmala jQuery qabiyyee gara DOMtti galchuuf fayyadama. Yoo waa'ee haleellaa XSS si yaaddesse barreeffama fayyadami.
ramaddii tarree | faayidaa 'sirrii'

Akkaataa popover itti dhaabdan - top | jalaa | bitaa | mirgaa | auto.
Yeroo "auto" ifteessamu, popover daayinamiikiin irra deebi'ee qajeelcha. Fakkeenyaaf, yoo iddoon "ofumaan bitaa" ta'e, popover yeroo danda'ame gara bitaatti agarsiisa, yoo kana hin taane mirga agarsiisa.

Faankishiniin tokko iddoo murteessuuf yeroo fayyadamu, noodiin popover DOM akka falmii isaa isa jalqabaatti fi elementii kakaasu DOM noodiin akka lammaffaatti waamama. Yaadni thisgara fakkeenya popover tti qindaa'a.

filannoodha hidhaa soba Yoo filataan kenname, wantoonni popover galmoota ifteessamaniif ni kennamu. Qabatamaan, kun qabiyyee HTML daayinamikii popovers akka dabalaman dandeessisuuf fayyadama. Kanaa fi fakkeenya odeeffannoo qabu ilaalaa .
unkaa hidhaa '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML yeroo popover uumtu fayyadamuuf bu'uura.

Popover's titlegara .popover-title.

Popover's contentgara .popover-content.

.arrowxiyya popover ta'a.

Qaamni marfataa alaa .popovergita qabaachuu qaba.

mata-duree tarree | faayidaa '' .

Gatii mata duree durtii yoo titleamalli hin jirre.

Yoo faankishiniin kenname, thiswabii isaa elementii popover itti maxxane waliin qindaa'a.

dammaqsuu hidhaa 'cuqaasaa'. Akkaataa popover itti kaka'u - | cuqaasaa hover | xiyyeeffannoo | kan harkaanii. Kaka’umsa hedduu darbuu dandeessa; bakka adda baasuun addaan baasuu. manualtrigger biraa kamiinuu waliin walitti makamuu hin danda’u.
iddoo ilaalchaa tarree | wanta | faayidaa { filannoo: 'qaama', padding: 0 } .

Popover daangaa elementii kanaa keessa eega. Fakkeenyaaf: viewport: '#viewport'ykn{ "selector": "#viewport", "padding": 0 }

Yoo faankishiniin kenname, akka murfii isaa tokkichatti elementii kakaasu DOM noodiin waamama. Yaadni thisgara fakkeenya popover tti qindaa'a.

Amaloota deetaa popovers dhuunfaa

Filannoon popovers dhuunfaa filannoodhaan karaa fayyadama amaloota deetaa ifteessuun ni danda'ama, akkuma armaan olitti ibsame.

Malawwan

$().popover(options)

Kuusaa elementii tokkoof popovers jalqaba.

.popover('show')

Poopover elementii tokkoo mul'isa. Poopover qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.popovertaatee osoo hin uumamin dura) gara waamichaatti deebi'a. Kun akka "harkaan" popover kakaasutti ilaalama. Popovers mata duree fi qabiyyeen isaanii lamaan isaanii dheerina zeeroo ta'e gonkumaa hin agarsiifaman.

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

.popover('hide')

Poopover elementii tokkoo dhoksa. Osoo popover qabatamaan hin dhokatin (jechuun osoo hidden.bs.popovertaatee hin uumamin dura) gara waamichaatti deebi'a. Kun akka "harkaan" popover kakaasutti ilaalama.

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

.popover('toggle')

Poopover elementii tokkoo jijjiira. Osoo popover qabatamaan hin agarsiifamin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.popoverykn hin uumamin dura hidden.bs.popover). Kun akka "harkaan" popover kakaasutti ilaalama.

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

.popover('destroy')

Popover elementii tokkoo dhoksee balleessa. Popovers kanneen delegation fayyadaman ( kanneen selectorfilannoo fayyadamuun uumaman ) elementoota kaka'umsa sanyii irratti dhuunfaan balleessuu hin danda'an.

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

Taateewwan

Gosa Taatee Ibsa
agarsiisi.bs.hiyyummaa Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiise.bs.hiyyummaa Taatee kun yeroo popover fayyadamaaf mul'atu taasifamu ni ari'ama (ce'umsa CSS xumuramu ni eega).
dhoksi.bs.hiyyummaa Taatee kun yeroo hidemala fakkeenyaa waamame battalumatti dhukaafama.
dhokataa.bs.hiyyummaa Taatee kun yeroo popover fayyadamaa irraa dhokatee xumure ni ari'ama (ce'umsa CSS xumuramu ni eega).
galfame.bs.hiyyummaa Taatee kun taatee booda show.bs.popoveryeroo unkaan popover DOM irratti dabalame ari'ama.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

Ergaawwan akeekkachiisaa alert.js

Fakkeenya akeekkachiisa

Ergaawwan akeekkachiisaa hunda irratti dalagaa ari'uu ifteessaa kanaan dabali.

Yeroo .closeqaree fayyadamtu, mucaa jalqabaa kan ta'uu qaba .alert-dismissiblefi qabiyyeen barruu kamiyyuu mallattoo keessatti isa dura dhufuu hin danda'u.

Fayyadama

data-dismiss="alert"Ofumaan dalagaa cufiinsa akeekkachiisaa kennuudhaaf button cufuu kee irratti dabaluu qofa . Akeekkachiisa cufuun DOM irraa ni haqa.

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

Akeekkachiisni kee yeroo cufamu sochii akka fayyadaman gochuuf, gitaalee .fadefi duraan isaan irratti hojiirra oolan qabaachuu isaanii mirkaneessi..in

Malawwan

$().alert()

Akeekkachiisa taateewwan cuqaasuu qaamolee sanyii kanneen data-dismiss="alert"amaloota qaban irratti dhaggeeffatu taasisa. (Yeroo ofumaan jalqabuu data-api fayyadamtu barbaachisaa miti.)

$().alert('close')

Akeekkachiisa DOM irraa haquudhaan cufa. Yoo gitaaleen .fadefi .inelementii irratti argaman, akeekkachiisni osoo hin haqamin dura ni bada.

Taateewwan

Bootstrap's alert plugin taateewwan muraasa gara dalagaa akeekkachiisaatti hooking gochuuf saaxila.

Gosa Taatee Ibsa
cufi.bs.akeekkachiisa Taatee kun yeroo closemala fakkeenyaa waamamu battalumatti dhukaasa.
cufame.bs.akeekkachiisa Taatee kun yeroo akeekkachiisni cufame ni dhukaafama (ce'umsa CSS xumuruuf ni eega).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Qabduulee button.js

Buttons waliin caalaatti hojjedhu. Qabduu too'annoo haalata ykn gareewwan qaree qaamolee dabalataa akka barruulee uumi.

Walsimsiisa qaxxaamuraa-browser

Firefox haalata too'annoo unkaa (hanqifamuu fi sakatta'amuu) fe'iinsa fuula hunda keessatti itti fufa . Kanaaf furmaanni autocomplete="off". Rakkoo Mozilla #654072 ilaali .

Stateful

data-loading-text="Loading..."Haalata fe'iinsaa qaree irratti fayyadamuuf dabali .

Amalli kun erga v3.3.5 irraa eegalee kan hin fayyadamne yoo ta'u, v4 keessatti haqameera.

State barbaadde fayyadami!

Agarsiisa kanaaf jecha, data-loading-textfi fayyadamaa jirra $().button('loading'), garuu sun qofa miti kan ati fayyadamuu dandeessan. Kana irratti bal'inaan $().button(string)galmee keessatti armaan gadii ilaalaa .

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

Tokkicha toggle

data-toggle="button"Qabduu tokko irratti toggling activate gochuuf dabali .

Qabduu dursee jijjiirame barbaachisa .activefiaria-pressed="true"

Qabduu durtii jijjiirameef, .activegitaa fi aria-pressed="true"amalli gara buttonofii keetii dabaluu qabda.

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

Sanduuqa filannoo / Raadiyoo

Akkaataa isaanii keessatti jijjiiruu dandeessisuuf sanduuqa filannoo ykn galtee raadiyoo of keessaa qabutti data-toggle="buttons"dabali ..btn-group

Filannoon dursee filataman barbaachisa.active

Filannoowwan durtii filatamaniif, .activegita gara galtee labelofii keetii dabaluu qabda.

Haalli mul'ataan sakatta'ame cuqaasuu qofa irratti fooyya'a

Yoo haalli mallatteeffame qaree sanduuqa filannoo clicktaatee qaree irratti osoo hin dhukaasiin fooyya'e (fkn karaa <input type="reset">ykn karaa qabeentaa galtee saaguu ), gita galtee irratti ofii keetii checkedjijjiiruu si barbaachisa ..activelabel

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

Malawwan

$().button('toggle')

Haala dhiibaa jijjiira. Qabduu bifa akka inni hojiirra oole kenna.

$().button('reset')

Haalata qaree deebisa - barruu gara barruu jalqabaatti jijjiira. Malli kun wal hin simne yoo ta'u osoo irra deebiin qabatamaan hin xumuramin deebi'a.

$().button(string)

Barruu gara haalata barruu deetaa ibsame kamiyyuu jijjiira.

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

Kuusaa collapse.js

Ijaarsa jijjiiramaa kan amala jijjiirraa salphaadhaaf gita muraasa fayyadamu.

Hirkatummaa pilaagii

Collapse plugin ce'umsaa version Bootstrap kee keessatti hammatamuu barbaada.

Fakkeenya

Qaaqa biraa karaa jijjiirama gitaa agarsiisuu fi dhoksuuf qareewwan armaan gadii cuqaasi:

  • .collapseqabiyyee dhoksa
  • .collapsingyeroo ce’umsaa hojiirra oola
  • .collapse.inqabiyyee agarsiisa

hrefHidhaa amaloota waliin, ykn qaree amaloota waliin fayyadamuu dandeessa data-target. Haala lamaan keessatti, the data-toggle="collapse"ni barbaachisa.

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>

Fakkeenya akkoordiyoonii

Qaama qaaqa waliin akkoordiyoon uumuuf amala kufaatii durtii dheeressi.

Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.
Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa VHS.
Anim pariatur cliche reprehenderit, enim eiusmod jireenya olaanaa accusamus terry richardson ad squid. 3 lukkuu ji'a officia aute, non cupidat iskeetiiboordii dolor brunch. Konkolaataa nyaataa quinoa nesciunt laborum eiusmod. Brunch 3 lukkuu ji'a tempor, sunt aliqua simbirroo irra kaa'uu squid buna ka'umsa tokkoo nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, hojii biiraa hojii harkaa wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur foon qalaa itti aanaa lomo. Leggings occaecat hojii harkaa biiraa qonnaa-gara-minjaala, raw denim aesthetic synth nesciunt tarii waa'ee isaanii hin dhageenye accusamus labore itti fufiinsa 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>

Akkasumas .panel-bodys s waliin jijjiiruun ni danda'ama .list-group.

  • Bootply jedhamuun beekama
  • Tokko itmus ac facilin jedhamuun beekama
  • Lammaffaa eros

To'annoo babal'isuu/kuffisuu dhaqqabamaa taasisuu

aria-expandedQaama too'annoo irratti dabaluu kee mirkaneessi . Amalli kun haala ammaa elementii kufaatii dubbistoota iskiriinii fi teeknooloojiiwwan gargaarsaa walfakkaatan ifatti ibsa. Yoo qaamni cufamuu danda'u durtiidhaan cufame, gatii qabaachuu qabaaria-expanded="false" . Yoo qaama cufamuu danda'u akka durtii ingita fayyadamuun banaa saagde, aria-expanded="true"bakka isaa too'annoo irratti saagi. Ijaartuun ofumaan amalli kana jijjiira, qaama kuffamuu danda'u banamuu ykn cufamuu dhabuu irratti hundaa'uun.

Dabalataan, yoo qaamni too'annoo kee qaama kuffamuu danda'u tokko irratti xiyyeeffate – jechuunis data-targetamalli gara filannootti agarsiisaa jira – amalli dabalataa qaama too'annootti iddabaluu dandeessa , kan qaama kuffamuu danda'u of keessaa qaba. Dubbistoonni iskiriinii ammayyaa fi teeknooloojiiwwan gargaarsaa walfakkaatan amaloota kana fayyadamuun fayyadamtootaaf karaa gabaabaa dabalataa kallattiin gara elementii kufaatii ofii isaatii akka qajeelan ni kennu.aria-controlsid

Fayyadama

Ijaarsiin kufaatii gita muraasa fayyadama kaasuun ulfaataa to'achuuf:

  • .collapseqabiyyee dhoksa
  • .collapse.inqabiyyee agarsiisa
  • .collapsingyeroo ce'umsi jalqabu dabalama, yeroo xumuramu immoo ni haqama

Kutaawwan kunniin component-animations.less.

Karaa amaloota deetaa

To'annoo elementii kuffamuu danda'u ofumaan ramaduuf elementicha irratti data-toggle="collapse"fi a qofa dabaluu qofa . data-targetAmalli data-targetfilannoo CSS kufaatii itti hojii irra oolchuuf fudhata. collapseGitaa gara qaama cufamuu danda'utti dabaluu kee mirkaneessi . Yoo durtii akka banamu barbaadde, gita dabalataa dabali in.

Bulchiinsa garee akkoordiyoon fakkaatu gara too'annoo kuffamuu danda'utti dabaluuf, amalli deetaa dabali data-parent="#selector". Kana hojiidhaan ilaaluuf demoo ilaalaa.

Karaa JaavaScript

Harkaan dandeessisi:

$('.collapse').collapse()

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-parent="".

Maqaa akaakuu durtii ibsa
warra filannoodha soba Yoo filataan kenname, kana booda qaamolee kuffamuu danda'an hundi warra ifteessame jala jiran yeroo wanti cufamuu danda'u kun agarsiifamu ni cufamu. (amala akkoordiyoonii aadaa wajjin wal fakkaata - kun paneldaree irratti hundaa'a)
toggle jechuudha boolee dhugaa Waamicha irratti qaama kuffamuu danda'u jijjiira

Malawwan

.collapse(options)

Qabiyyee kee akka qaama cufamuu danda'utti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

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

.collapse('toggle')

Qaama cufamuu danda'u gara agarsiifame ykn dhokfameetti jijjiira. Qabeentiin kuffamuu danda'u qabatamaan osoo hin agarsiifamiin ykn hin dhokatiin dura gara waamichaatti deebi'a (jechuunis osoo taatee shown.bs.collapseykn hin uumamin dura hidden.bs.collapse).

.collapse('show')

Qabeentaa kuffamuu danda'u agarsiisa. Qaamni kuffamuu danda'u qabatamaan osoo hin agarsiifamiin dura (jechuunis shown.bs.collapsetaatee osoo hin uumamin dura) gara waamichaatti deebi'a.

.collapse('hide')

Qabeentaa kuffamuu danda'u dhoksa. Qaamni kuffamuu danda'u qabatamaan osoo hin dhokatin dura gara waamichaatti deebi'a (jechuunis osoo hidden.bs.collapsetaatee hin uumamin dura).

Taateewwan

Gitni kufaatii Bootstrap taateewwan muraasa gara dalagaa kufaatiitti hooking gochuuf saaxila.

Gosa Taatee Ibsa
agarsiisa.bs.kufaatii Taatee kun yeroo showmala fakkeenyaa waamamu battalumatti dhukaasa.
agarsiifame.bs.collapse Taatee kun yeroo qaamni kufaatii fayyadamaaf mul'atu taasifamu dhukaafama (ce'umsa CSS xumuramuu eega).
dhoksi.bs.kuffisuu Taatee kun yeroo hidemala waamame battalumatti dhukaafama.
dhokataa.bs.kufaatii Taatee kun yeroo qaamni kufaatii fayyadamaa irraa dhokate dhukaafama (ce'umsa CSS xumuramuu eega).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Kaarooseelii kaarooseelii.js

Qaama agarsiisa islaayidii elementoota keessa marsaa, akka kaarooseelii. Nested carousels hin deeggaraman.

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

Barreeffamoota filannoo ta'an

.carousel-captionQabeentaa kamiyyuu keessa jiruun salphaatti islaayidoota kee irratti barruulee dabali .item. HTML filannoo kamiyyuu jechuun ni danda'ama achi keessa kaa'i ofumaan ni qindaa'a, ni foormaatii ta'a.

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

Kaarooseelii dachaa

Kaarooseelonni to'annoo kaarooseelii sirnaan akka hojjetaniif idmeeshaa alaa irratti (the ) fayyadamuu barbaadu . .carouselYeroo carousels hedduu dabaltu, ykn yeroo carousel's jijjiirtu id, too'annoowwan barbaachisoo ta'an haaromsuu mirkaneessi.

Karaa amaloota deetaa

Bakka kaarooseelii salphaatti to'achuuf amaloota deetaa fayyadami. data-slidejechoota furtuu prevykn next, kan iddoo islaayidii bakka ammaa isaa wajjin walqabatee jijjiira. data-slide-toAkka filannootti, indeeksii islaayidii raw gara karooseeliitti dabarsuudhaaf fayyadami data-slide-to="2", kunis bakka islaayidii gara indeeksii murtaa'aa dhaan jalqabutti jijjiira 0.

Amalli data-ride="carousel"karooseelii akka sochoosuutti fe'iinsa fuula irraa eegalee mallattoo itti gochuuf fayyadama. Innis (barbaachisaa fi hin barbaachifne) ifatti JaavaScript jalqabbii karooseelii walfakkaataa wajjin walitti makuun fayyadamuu hin danda'u.

Karaa JaavaScript

Carousel harkaan bilbili:

$('.carousel').carousel()

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-interval="".

Maqaa akaakuu durtii ibsa
gidduugaleessaa lakkoofsa 5000 ta'a Hamma yeroo meeshaa tokko ofumaan marsaa gidduutti harkifachuu qabu. Yoo soba ta'e, carousel ofumaan hin marsaa.
gidduutti dhaabuu tarree | duwwaa "hover" jedhu. Yoo gara tti saagame "hover", marsaa kaarooseelichaa irratti dhaaba mouseenterfi marsaa kaarooseelichaa irra deebi'ee jalqaba mouseleave. Yoo gara tti saagame null, kaarooseelii irratti olkaasuun hin dhaabu.
itti maruu boolee dhugaa Kaarooseelichi marsaa itti fufiinsaan deemuu qaba moo dhaabbannaa cimaa qabaachuu qaba.
kiiboordii boolee dhugaa Karooseeliin taateewwan kiiboordii irratti deebii kennuu qabaachuu fi dhiisuu isaa.

Filannoo filannoo ta'een kaarooseelii jalqabsiisee objectmeeshaalee keessaa biskileetii jalqaba.

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

Meeshaalee karooseelii keessaa bitaa gara mirgaatti marsaa.

Kaarooseeliin meeshaalee keessa akka hin biskileetii hin deemne ni dhaaba.

Kaarooseelii gara furtuu murtaa'etti marsaa (0 irratti hundaa'e, tarree wajjin wal fakkaata).

Gara wanta duraatti marsaa.

Gara wanta itti aanutti marsaa.

Bootstrap's carousel class taateewwan lama hooking gara dalagaa carousel saaxila.

Taateewwan lamaan amaloota dabalataa armaan gadii qabu:

  • direction: Kallattii kaarooseelichi itti lilmoo’u (yookaan "left"ykn "right").
  • relatedTarget: Qaama DOM kan akka wanta socho'aa bakkatti siqsaa jiru.

Taateewwan karooseelii hundi karooseelicha mataa isaa irratti (jechuunis <div class="carousel">) irratti dhukaafamu.

Gosa Taatee Ibsa
islaayidii.bs.kaarooseelii Taatee kun yeroo slidemala fakkeenyaa waamamu battalumatti dhukaasa.
slid.bs.kaarooseelii Taatee kun kan dhukaafamu yeroo kaarooseeliin ce'umsa islaayidii isaa xumurudha.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js jedhu itti maxxansi

Fakkeenya

Ijaarsi dabalataa ibsaa position: fixed;fi dhaamsa, bu'aa waliin argame fakkeessa position: sticky;. Subnavigation gara mirgaa jiru live demo kan affix plugin ti.


Fayyadama

Ijaarsa dabalataa karaa amaloota deetaa ykn harkaan JaavaScript mataa keetiin fayyadami. Haala lamaan keessatti, iddoo fi bal'ina qabiyyee kee maxxanfameef CSS kennuu qabda.

Hubachiisa: Sababa dogongora agarsiisa Safariitiin , qaama qaama walmadaaluun bakka jiru keessatti argamu irratti, kan akka tarjaa harkifame ykn dhiibame, ifteessaa dabalataa hin fayyadaminaa .

Karaa CSS ejjennoo kennuu

Ijaarsi dabalataa gita sadii gidduutti jijjiira, tokkoon tokkoon haalata murtaa'e bakka bu'u: .affix, .affix-top, fi .affix-bottom. Akkaataawwan kennuu qabda, position: fixed;on irraa kan hafe .affix, gitawwan kanaaf ofii keetii (ijaarsa kana irraa walaba ta'ee) iddoowwan qabatamaa akka qabataniif.

Akkaataa itti plugin affix itti hojjetu kunooti:

  1. Jalqabuuf, plugin dabalata.affix-top elementiin bakka isaa isa gubbaa-irratti akka jiru agarsiisuuf dabalata. Yeroo kanatti iddoon CSS hin barbaachisu.
  2. Qaama maxxansi barbaaddu bira darbuun maxxansi qabatamaa kakaasuu qaba. Kunis .affixbakka bakka bu'ee .affix-topfi saaga position: fixed;(CSS Bootstrap'n kenname).
  3. Yoo ofseeti jalaa ibsame, darbee garagalchuun bakka bu'uu .affixqaba .affix-bottom. Ofseetotni filannoo waan ta'aniif, tokko saaguun CSS sirrii ta'e saaguu si gaafata. Haala kana keessatti position: absolute;yeroo barbaachisaa ta’etti itti dabali. Ijaarsaan amaloota deetaa ykn filannoo JaavaScript fayyadamuun qaama achi irraa eessatti akka kaa'amu murteessa.

Filannoo fayyadama armaan gadii keessaa tokkoof CSS kee saaguuf tartiibota armaan olii hordofi.

Karaa amaloota deetaa

Amala affix salphaatti elementii kamiyyuu irratti dabaluuf, data-spy="affix"elementii basaasuu barbaaddu qofatti dabaluu qofa. Yoom akka qaphxii elementii jijjiiruu qabdu ibsuuf ofseetota fayyadami.

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

Karaa JaavaScript

Karaa JavaScript tiin affix plugin waami:

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

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-offset-top="200".

Maqaa akaakuu durtii ibsa
ofseeti jechuun ni danda’ama lakkoofsa | faankishinii | meeshaa 10. Piikseelota yeroo iddoo tarree shallagdu iskiriinii irraa ofseeti. Yoo lakkoofsi tokko kenname, ofseeti kallattii gubbaa fi jalaa lamaan isaaniitiin hojiirra oola. Ofseeti addaa, jalaa fi gubbaa kennuudhaaf wanta offset: { top: 10 }ykn qofa kennuu offset: { top: 10, bottom: 5 }. Yeroo ofseeti daayinamiikiin shallaguu barbaaddu faankishinii fayyadami.
xiyyeeffaanoo filannoo | noodiin | Qaama jQuery windowwanta sana Qaama galmee dabalataa ifteessa.

Malawwan

.affix(options)

Qabiyyee kee akka qabiyyee maxxanfameetti hojii irra oolcha. Filannoo filannoo tokko fudhata object.

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

.affix('checkPosition')

Haalata maxxansaa safara, iddoo, fi iddoo qaxxaamuraa qaamolee barbaachisoo irratti hundaa'uun irra deebi'ee shallaga. Kutaawwan .affix, .affix-top, fi .affix-bottomakkaataa haalata haaraatiin qabiyyee maxxanfame irratti dabalamu ykn irraa haqamu. Malli kun yeroo hunda dimenshiniiwwan qabiyyee maxxanfame ykn elementii galma jijjiirame waamamuu qaba, qabiyyee maxxanfame sirriitti akka kaa'amu mirkaneessuuf.

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

Taateewwan

Bootstrap's affix plugin taateewwan muraasa gara dalagaa affix tti hooking saaxila.

Gosa Taatee Ibsa
affix.bs.maxxansi Taatee kun osoo elementiin hin maxxanfamin battalumatti dhukaasa.
maxxanfame.bs.affix Taatee kun erga elementiin maxxanfamee booda dhukaafama.
affix-gubbaa.bs.maxxansi Taatee kun osoo elementiin hin maxxanfamin-gubbaa battalumatti dhukaasa.
maxxanfame-gubbaa.bs.affix Taatee kun erga elementiin affixed-top ta'ee booda dhukaafama.
affix-gadi.bs.affix Taatee kun osoo elementiin hin maxxanfamin-gadi battalumatti dhukaasa.
affixed-bottom.bs.maqaa maxxanfame Taatee kun erga elementiin affixed-bottom ta'ee booda dhukaafama.