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

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

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

Saanitaayizarii

Tooltips fi Popovers filannoowwan HTML fudhatan qulqulleessuuf sanitizer keenya ijaarame fayyadamu.

Gatiin durtii whiteListkan armaan gadiiti:

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

Yoo gatiiwwan haaraa durtii kana irratti dabaluu barbaadde whiteListkanneen armaan gadii gochuu dandeessa:

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

Yoo sanitizer keenya bira darbuu barbaadde sababiin isaas mana kitaabaa addaa fayyadamuu filatte, fakkeenyaaf DOMPurify , kanneen armaan gadii gochuu qabda:

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

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

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.

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.

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>

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

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

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

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

Qabiyyee moodaalii garaagarummaa qaree kaka'umsaa irratti hundaa'uun

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

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

Malawwan

.modal(options)

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

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

.modal('toggle')

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

.modal('show')

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

.modal('hide')

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

.modal('handleUpdate')

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.

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

Gadi bu'oota dropdown.js

Fakkeenyaaf

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

Fayyadama

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

Filannoowwan

Homaa

Malawwan

$().dropdown('toggle')

Sajoo tarree navbar kennamee ykn qajeelcha caancalaa jijjiira.

Taateewwan

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

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

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

Fayyadama

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

Taateewwan

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

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.

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

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>

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

Filannoowwan

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

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 dura gara waamichaatti deebi'a (jechuunis durahidden.bs.tooltip taatee hin uumamin dura)Kun 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

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

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

Fakkeenyaaf

Poopover kan hin jijjiiramne

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

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 .

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

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 dhokatiin dura gara bilbileetti deebi'a (jechuunis osoo thehidden.bs.popover taatee 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

$('#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 kan .fadefi.in elementii irratti argaman, akeekkachiisni osoo hin haqamin dura ni bada.

Taateewwan

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

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

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.

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

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

Tokkicha toggle

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

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Checkbox 3
  </label>
</div>

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

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

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.

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

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

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

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.

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

Kaarooseelii kaarooseelii.js

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

Fakkeenyaaf

Kan duraa Kan itti aanu

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

Asxaa islaayidii jalqabaa

Nulla vitae elit libero, kan jedhamtu kan namatti tolu.

Asxaa islaayidii lammaffaa

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit.

Asxaa islaayidii sadaffaa

Praesent commodo cursus magna, vel scelerisque nisl consectetur jedhamuun beekama.

Kan duraa Kan itti aanu

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

Fayyadama

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

Filannoowwan

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

Malawwan

.carousel(options)

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

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

.carousel('cycle')

Meeshaalee karooseelii keessaa bitaa gara mirgaatti marsaa.

.carousel('pause')

Kaarooseeliin meeshaalee keessa akka hin biskileetii hin deemne ni dhaaba.

.carousel(number)

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

.carousel('prev')

Gara wanta duraatti marsaa.

.carousel('next')

Gara wanta itti aanutti marsaa.

Taateewwan

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.

$('#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, ifteessaan .affix-topelementiin 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. Ijaa'inni amaloota deetaa ykn filannoo JaavaScript fayyadama elementii achi irraa eessatti akka kaa'amu murteessuuf.

Filannoowwan 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 tokkoo jijjiirtu 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".

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.