Dulmar

Shakhsi ama la ururiyey

Plugins-ka si gaar ah ayaa loogu dari karaa (iyadoo la isticmaalayo *.jsfaylalka gaarka ah ee Bootstrap), ama dhammaan hal mar (adoo la isticmaalayo bootstrap.jsama la yareeyay bootstrap.min.js).

Sifooyinka xogta

Waxaad isticmaali kartaa dhammaan Bootstrap plugins adiga oo isticmaalaya API calaamadaynta adiga oo aan qorin hal xariiq oo JavaScript ah. Kani waa API-ga fasalka koowaad ee Bootstrap waana inuu noqdaa tixgelintaada ugu horreysa markaad isticmaalayso plugin.

Taasi waxay tidhi, xaaladaha qaarkood waxa laga yaabaa in la jeclaysto in la damiyo shaqadan. Sidaa darteed, waxaanu sidoo kale bixinaa awooda lagu curyaaminayo sifada xogta API anagoo ka saarayna dhammaan dhacdooyinka dukumeentiga ku magacaaban data-api. Tani waxay u egtahay sidan:

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

Haddii kale, si loo beegsado plugin gaar ah, kaliya ku dar magaca plugin-ka oo ah meel magac ah oo ay la socoto xogta-api namespace sidan oo kale:

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

API Programmatic

Waxaan sidoo kale aaminsanahay inaad awood u leedahay inaad isticmaasho dhammaan Bootstrap plugins iyada oo keliya JavaScript API. Dhammaan API-yada dadwaynaha waa hal, habab la silsiladi karo, oo soo celi ururinta lagu dhaqmay.

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

Dhammaan hababka waa in ay aqbalaan shay ikhtiyaari ikhtiyaari ah, xadhig bartilmaameed u ah hab gaar ah, ama waxba (kaas oo bilaabaya plugin leh dabeecad aan caadi ahayn):

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

Plugin kasta waxa kale oo uu soo bandhigaa dhisaha ceeriin ee Constructorguriga: $.fn.popover.Constructor. Haddii aad jeclaan lahayd inaad hesho tusaale plugin gaar ah, si toos ah uga soo celi curiyaha: $('[rel="popover"]').data('popover').

Dejinta asalka ah

Waxaad ka beddeli kartaa habaynta caadiga ah ee plugin adiga oo wax ka beddelaya Constructor.DEFAULTSshayga plugin:

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

Khilaaf ma jiro

Mararka qaarkood waa lagama maarmaan in la isticmaalo bootstrap plugins oo leh qaabab kale oo UI ah. Duruufahaan, isku dhacyada meel magac ayaa marmar dhici kara. Haddii tani dhacdo, waxaad wici .noConflictkartaa plugin-ka aad rabto inaad dib u soo celiso qiimaha.

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

Dhacdooyinka

Bootstrap waxay siisaa dhacdooyin caado u ah inta badan ficilada gaarka ah ee plugins. Guud ahaan, kuwani waxay ku yimaadaan qaab aan dhammaad lahayn oo hore uga qayb-qaatay-halkaas oo aan dhammaad lahayn (tusaale ahaan show) uu kiciyo bilawga dhacdada, iyo qaabkeedii hore ee ka qaybqaadashada (tus. shown) uu kiciyo marka ficilku dhammeeyo.

Laga bilaabo 3.0.0, dhammaan dhacdooyinka Bootstrap waa la magacaabay.

Dhammaan dhacdooyinka aan dhamaadka lahayn waxay bixiyaan preventDefaultshaqeyn Tani waxay siinaysaa awoodda lagu joojinayo fulinta ficilka ka hor inta uusan bilaaban.

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

Nadiifiye

Aaladaha iyo Popovers waxay isticmaalaan nadiifiyaha ku dhex dhisan si ay u nadiifiyaan xulashooyinka aqbalaya HTML.

Qiimaha caadiga whiteListah waa kan soo socda:

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: []
}

Haddii aad rabto inaad ku darto qiyam cusub default this whiteListwaxaad samayn kartaa kuwan soo socda:

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)

Haddii aad rabto inaad dhaafto nadaafaddayada sababtoo ah waxaad doorbideysaa inaad isticmaasho maktabad gaar ah, tusaale ahaan DOMPurify , waa inaad sameyso waxyaabaha soo socda:

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

Nambarada nooca

Nooca mid kasta oo ka mid ah Bootstrap's jQuery plugins waxaa laga geli karaa VERSIONhantida dhisaha plugin. Tusaale ahaan, plugin tip-ka:

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

Ma jiro dib-u-dhac gaar ah marka JavaScript naafo yahay

Bootstrap's plugins si gaar ah dib uguma soo noqdaan marka JavaScript naafo yahay. Haddii aad danaynayso khibrada isticmaalaha kiiskan, isticmaal <noscript>si aad u sharaxdo xaalada (iyo sida dib loogu soo celiyo JavaScript) isticmaalayaashaada, iyo/ama ku darso dib-u-dhacyadaada caadada ah.

Kala -guurka kala -guurka.js

Ku saabsan kala-guurka

Saamaynta kala-guurka fudud, ku dar transition.jshal mar oo ay la socdaan faylalka kale ee JS. Haddii aad isticmaalayso kuwa la soo ururiyey (ama la yareeyey) bootstrap.js, looma baahna in lagu daro tan-horay ayay u jirtaa.

Maxaa gudaha ku jira

Transition.js waa kaaliyaha aasaasiga ah ee transitionEnddhacdooyinka iyo sidoo kale ku dayashada kala guurka CSS. Waxa isticmaala plugins-yada kale si ay u hubiyaan taageerada kala-guurka ee CSS iyo inay qabtaan kala-guurka ka laadlaadda.

Curyaaminta kala-guurka

Kala-guurka waxaa si caalami ah loo curyaami karaa iyadoo la isticmaalayo jajabka JavaScript ee soo socda, kaas oo ay tahay inuu yimaado ka dib transition.js( bootstrap.jsama bootstrap.min.js, sida ay xaaladdu noqon karto) la raray:

$.support.transition = false

Hababka modal.js

Hababka waa la habeeyey, laakiin dabacsanaan, waxay kiciyaan wada hadal oo leh shaqada ugu yar ee loo baahan yahay iyo khaladaad caqli gal ah.

Sababtoo ah sida HTML5 u qeexdo semantic-keeda, autofocussifada HTML wax saameyn ah kuma laha hababka Bootstrap. Si loo gaaro saameyn isku mid ah, isticmaal qaar ka mid ah JavaScript caadadii:

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

Tusaalooyinka

Tusaale taagan

Hab la sameeyay oo leh madax, jidh, iyo hab ficil oo ku jira lugta.

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

Muujinta tooska ah

U beddel habka JavaScript adoo gujinaya badhanka hoose. Hoos ayay u soo degi doontaa oo waxay ka soo geli doontaa xagga sare ee bogga.

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

Cabbirrada ikhtiyaariga ah

Moodooyinka waxay leeyihiin laba cabbir oo ikhtiyaari ah, oo lagu heli karo fasallada wax ka beddelka si loogu dhejiyo .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>

Ka saar animation

Qaababka si fudud u muuqda halkii ay ka libdhi lahaayeen si loo eego, ka saar .fadefasalka calaamadaynta qaabkaaga.

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

Isticmaalka nidaamka grid

Si aad uga faa'iidaysato nidaamka xariijimaha Bootstrap gudaha modal, kaliya buul .rowgudaha dhex .modal-bodygal ka dibna isticmaal fasalada nidaamka xariijinta caadiga ah.

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

Kala duwanaanta nuxurka qaabka ku salaysan badhanka kiciya

Hayso farabadan badhamada kuwaas oo dhamaantood kicinaya qaab isku mid ah, oo leh waxyaabo yar oo kala duwan? Isticmaal event.relatedTargetiyo sifooyinka HTMLdata-* (laga yaabo iyada oo loo marayo jQuery ) si loo kala beddelo waxa ku jira habka iyadoo ku xiran badhanka la gujiyay. Fiiri dukumeentiyada Dhacdooyinka Modal wixii faahfaahin ah 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)
})

Isticmaalka

Plugin-ka moodeelku wuxuu beddelaa macluumaadkaaga qarsoon ee baahida, iyada oo loo marayo sifooyinka xogta ama JavaScript. Waxa kale oo ay ku darsataa .modal-openin ay meesha <body>ka saarto hab-dhaqanka duubista caadiga ah waxayna soo saartaa a .modal-backdropsi ay u bixiso aag gujis ah oo lagu eryo moodooyinka la soo bandhigay marka la gujinayo meel ka baxsan habka.

Iyada oo loo marayo sifooyinka xogta

Dhaqdhaqaaqa modal adigoon qorin JavaScript. Deji curiyaha data-toggle="modal"kontoroolka, sida badhan, oo ay la socoto a data-target="#foo"ama href="#foo"si aad u beegsato hab gaar ah si aad u leexiso.

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

Iyadoo loo marayo JavaScript

Wac modal leh id myModalleh hal xariiq oo JavaScript ah:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-backdrop="".

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

Hababka

.modal(options)

Waxay u hawlgelisaa macluumaadkaaga qaab habaysan. Aqbala ikhtiyaarka ikhtiyaariga ah object.

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

.modal('toggle')

Gacanta ayaa u roga modal Ku soo noqda qofka soo wacay ka hor inta aan habka dhabta ah la muujin ama aan la qarin (tusaale ka hor inta aanay dhicin shown.bs.modalama hidden.bs.modaldhacdada).

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

.modal('show')

Gacanta ayaa u fura modal Ku soo noqoshada soo wacaha ka hor inta aan qaabka dhabta ah loo muujin (tusaale ka hor intaanay shown.bs.modaldhacdada dhicin).

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

.modal('hide')

Gacanta ayaa u qarisa habka. Ku soo noqoshada soo wacaha ka hor inta aan habka dhabta ah la qarin (ie ka hor intaanay hidden.bs.modaldhacdada dhicin).

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

.modal('handleUpdate')

Waxa uu hagaajiyaa meelaynta modal-ka si uu uga hortago baararka-rogid haddii ay dhacdo in mid ka mid ahi soo baxo, taas oo ka dhigaysa habku u boodo bidix.

Kaliya loo baahan yahay marka dhererka modalku isbeddelo inta uu furan yahay.

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

Dhacdooyinka

Bootstrap's modal class wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay in lagu xidho shaqaynta modal.

Dhammaan dhacdooyinka modal waxa lagu eryaa habka laftiisa (ie at the <div class="modal">).

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

Hoos u dhigida.js

Tusaalooyinka

Ku dar liiska hoos-u-dhaca wax kasta oo leh plugin-kan fudud, oo ay ku jiraan navbar, tabs, iyo kaniiniyada.

Gudaha navbar

Kiniinnada gudahooda

Isticmaalka

Iyada oo loo marayo sifooyinka xogta ama JavaScript, plugin-ka hoos-u-dhaca wuxuu beddelaa nuxurka qarsoon (menus-ka-soo-celinta) isagoo beddelaya .openfasalka shayga liiska waalidka.

Aaladaha mobilada, furista hoos u dhaca waxay ku dartaa meel .dropdown-backdroptuubada ah oo lagu xidho liiska hoos u dhaca marka la taabanayo meel ka baxsan liiska, shuruuda taageerada saxda ah ee iOS. Tani waxay ka dhigan tahay ka beddelashada liiska hoos u dhaca ee furan una beddelo liiska hoos-u-dhaca kale waxay u baahan tahay taabasho dheeri ah oo ku saabsan mobilada.

Fiiro gaar ah: data-toggle="dropdown"Sifada waxa lagu tiirsadaa xidhitaanka liiska hoos-u-dhaca ee heer codsi, marka waa fikrad wanaagsan in had iyo jeer la isticmaalo.

Iyada oo loo marayo sifooyinka xogta

Ku dar data-toggle="dropdown"xiriiriye ama badhan si aad u beddesho hoos u dhaca.

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

Si aad URL-yada ugu ilaaliso badhamada isku xidhka, isticmaal data-targetsifada halkii aad ka isticmaali lahayd 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>

Iyadoo loo marayo JavaScript

Hoos ka wac JavaScript:

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

Ikhtiyaarada

Midna

Hababka

$().dropdown('toggle')

Wuxuu rogaa liiska hoos-u-dhaca ee navbar la bixiyay ama navigation tab.

Dhacdooyinka

Dhammaan dhacdooyinka hoos u dhaca waxaa lagu eryaa xubinta .dropdown-menuwaalidka.

Dhammaan dhacdooyinka hoos u dhaca waxay leeyihiin relatedTargethanti, qiimihiisu waa curiyaha barroosinka roganaya.

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

Tusaale ahaan navbar

Plugin-ka ScrollSpy waxaa loogu talagalay in si toos ah loo cusboonaysiiyo bartilmaameedyada nav ee ku saleysan booska duubista. U rog aagga navbar ka hooseeya oo daawo isbeddelka fasalka firfircoon. Qodobada hoos u dhaca ayaa sidoo kale la iftiimin doonaa.

Isticmaalka

Waxay u baahan tahay meelayn qaraabo ah

Si kastaba ha ahaatee habka hirgelinta, scrollspy waxay u baahan tahay isticmaalka position: relative;walxaha aad basaaseyso. Inta badan tani waa tan <body>. Markaad ku duuduubto canaasiirta aan ahayn kan <body>, hubi inaad haysato meel heightla isku dhejiyo oo overflow-y: scroll;codso.

Iyada oo loo marayo sifooyinka xogta

Si aad si fudud ugu darto habdhaqanka scrollspy to your topbar navigation, data-spy="scroll"ku dar walxaha aad rabto in aad basaasto (inta badan tani waxay noqonaysaa <body>). Ka dib ku dar data-targetsifada aqoonsiga ama fasalka xubinta waalidka ee qayb kasta oo Bootstrap .navah.

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>

Iyadoo loo marayo JavaScript

Ka dib markaad ku position: relative;darto CSS-gaaga, wac qoraalka qoraalka JavaScript:

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

Hababka

.scrollspy('refresh')

Markaad isticmaalayso scrollspy iyadoo lala kaashanayo ku darista ama ka saarida walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta sida:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset="".

Dhacdooyinka

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Tabaha la rogi karo tab.js

Tusaalaha tabs

Ku dar hawlqabad tab degdeg ah, firfircoon si aad ugu gudubto muraayadaha nuxurka gudaha, xitaa iyada oo loo marayo menus-hoosaadka. Tabaha buulka ah lama taageero

Isticmaalka

U oggolow tab tabsiyada JavaScript-ka (tabo kastaa waxay u baahan tahay in si gaar ah loo hawlgeliyo):

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

Waxaad u dhaqaajin kartaa tabs shaqsiyeed dhowr siyaabood:

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

Calaamadayn

Waxaad dhaqaajin kartaa tab ama kaniiniga navigation adoon qorin wax JavaScript ah adiga oo si fudud u qeexaya data-toggle="tab"ama data-toggle="pill"shay. Ku darista naviyo nav-tabsxiisadaha tab waxay dabaqi doontaa habaynta tabkaul Bootstrap , halka ku darida iyo fasaladu ay dabaqi doonaan habaynta kiniinkanavnav-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>

Saamaynta libdhi

Si aad tabsku u libdhaan, ku dar .fademid kasta .tab-pane. Shabakadda ugu horreysa waa inay sidoo kale ka .indhigtaa nuxurka bilowga ah mid muuqda.

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

Hababka

$().tab

Wuxuu hawlgeliyaa curiyaha tab iyo weelka ka kooban. Tabku waa inuu lahaadaa mid data-targetama meel la hrefbeegsanayo noodhka weelka ee DOM. Tusaalooyinka kor ku xusan, tabsku waa <a>s leh data-toggle="tab"sifooyin.

.tab('show')

Waxay doorataa tab la siiyay oo waxay muujisaa waxa ku jira. Tabo kasta oo kale oo hore loo doortay waxa ay noqotaa mid aan la dooran oo waxa la xidhiidha way qarsoon tahay. Ku soo noqda soo wacaha ka hor inta aan la tusin muraayadda tab (tusaale ka horshown.bs.tab dhacdada dhicin).

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

Dhacdooyinka

Marka la tuso tab cusub, dhacdooyinku waxay u dabcaan sida soo socota:

1. hide.bs.tab(ku yaal tab firfircoon ee hadda)
2. show.bs.tab(ku yaal tabka lagu soo bandhigi doono)
3. hidden.bs.tab(ee tabtii hore ee firfircoonayd, oo la mid ah hide.bs.tabdhacdada)
4. shown.bs.tab(oo ku yaal tab cusub oo firfircoon, oo la mid ah show.bs.tabdhacdada)

Haddi aanu tab hore u shaqayn, markaa dhacdooyinka hide.bs.tabiyo hidden.bs.tabdhacdooyinka lama eryi doono.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Tilmaamaha Qalabka tooltip.js

Waxaa dhiirigeliyay plugin jQuery.tipsy ee aad u wanaagsan oo uu qoray Jason Frame; Tilmaamaha qalabku waa nooc la cusboonaysiiyay, kaas oo aan ku tiirsanayn sawirada, u isticmaal CSS3 animations, iyo xogta sifada kaydinta cinwaanka maxaliga ah.

Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.

Tusaalooyinka

Ka dul rog xiriirka hoose si aad u aragto qalabyada:

Qalabka taagan

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.

Afar jiho

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

Isticmaalka

Plugin-ka Tooltip wuxuu soo saaraa nuxur iyo calaamadayn baahida, iyo sida caadiga ah wuxuu meeleeyaa tilmaamo qalab ka dib cunsurkooda kiciya.

Ku kiciya tilmaanta aalada JavaScript:

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

Calaamadayn

Calaamadeynta loo baahan yahay ee qalab-tireedku waa datasifo kaliya oo titleqaybta HTML ee aad rabto inaad haysato qalab. Astaanta la soo saaray ee tilmaanta qalabku waa mid fudud, in kasta oo ay u baahan tahay boos (sida caadiga ah, oo loo dejiyay topplugin).

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Hababka

$().tooltip(options)

Wuxuu ku lifaaqaa gacan hayaha qalab ururinta walxaha.

.tooltip('show')

Waxay daaha ka qaadaysaa aaladda curiyaha Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin (tusaale ka hor intaanay shown.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta qalabka. Tilmaamaha qalabka leh cinwaanno eber ah weligood lama soo bandhigin.

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

.tooltip('hide')

Wuxuu qariyaa calaamadda curiyaha. Ku soo noqda qofka soo wacay ka hor inta aan la qarin qalabka wax lagu qoro (tusaale ka hor intaanay hidden.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta qalabka.

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

.tooltip('toggle')

Beddelayaa shay raadka. Ku soo noqda qofka soo wacay ka hor inta aan aalada qalabku dhab ahaan la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.tooltipama hidden.bs.tooltipdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta qalabka.

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

.tooltip('destroy')

Qariyaa oo baabi'iyaa aaladda curiyaha. Aaladaha adeegsada ergada (kuwaaso la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

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

Dhacdooyinka

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

Popovers popover.js

Ku dar waxyaabo yaryar oo dulsaaran, sida kuwa iPad-ka, shay kasta oo loogu talagalay macluumaadka labaad ee guriyeynta.

Popovers oo ciwaanka iyo nuxurkooduba yihiin eber-dherer weligood lama soo bandhigin.

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

Tusaalooyinka

popover taagan

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix oo toosan.

Muujinta tooska ah

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

Afar jiho

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

Ka saar marka xigta guji

Isticmaal focuskiciyeyaasha si aad u tirtirto popovers marka xigta ee isticmaaluhu sameeyo.

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

Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-animation="".

Hababka

$().popover(options)

Wuxuu u bilaabaa popovers ururinta curiyaha.

.popover('show')

Waxay daaha ka qaadaysaa soo boodada curiyaha Ku soo noqoshada soo wacaha ka hor inta aan si dhab ah loo muujin popover (ie ka hor intaanay shown.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover. Popovers oo ciwaanka iyo nuxurkooduba yihiin eber-dherer weligood lama soo bandhigin.

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

.popover('hide')

Wuxuu qariyaa boodboodka curiyaha. Ku soo noqoshada soo wacaha ka hor inta aan la qarinin popover-ka (tusaale ka horhidden.bs.popover dhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.

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

.popover('toggle')

Beddelaa soo boodada curiyaha Ku soo noqda qofka soo wacaya ka hor inta aan bood-boodka dhab ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.popoverama hidden.bs.popoverdhacdada dhicin). Tan waxa loo tixgaliyaa "buuga" kicinta popover.

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

.popover('destroy')

Qariyaa oo baabi'iyaa popover element. Popovers isticmaala ergada (kuwaas oo la abuuray iyadoo la isticmaalayo ikhtiyaarka selector) si gaar ah looma baabi'in karo walxaha kiciya faraca.

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

Dhacdooyinka

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

Farriimaha digniinta digniinta.js

Tusaale ahaan digniinaha

Ku dar shaqada ka eryida dhammaan fariimaha digniinta leh ee plugin this.

Marka la isticmaalayo .closebadhanka, waa in uu ahaado ubadka ugu horreeya ee .alert-dismissiblewax qoraal ah lagama yaabo inuu ka hor yimaado calaamadaynta.

Isticmaalka

Kaliya ku dar data-dismiss="alert"badhanka ku dhow si aad si toos ah u siiso hawlgelinta heeganka dhow. Xiritaanka digniinta waxay ka saartaa DOM

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

Si aad digniinahaagu u isticmaalaan animation marka la xidhayo, hubi inay haystaan .fade​​​​iyo .infasaladii hore loogu dabaqay iyaga.

Hababka

$().alert()

Wuxuu ka dhigaa digniin inuu dhegeysto dhacdooyinka gujinta ee walxaha faraca leh ee leh data-dismiss="alert"sifada. ( Looma baahna marka la isticmaalayo xogta-api si toos ah u bilaabay.)

$().alert('close')

Xidhaa digniinta adoo ka saaraya DOM Haddii fasalada .fadeiyo .infasaladu ay ku jiraan curiyaha, digniintu way libdhi doontaa ka hor intaan la saarin.

Dhacdooyinka

Bootstrap's alert plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta digniinta.

$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

badhanka badhanka.js

Wax badan ku samee badhamada. Xakamaynta badhanka ayaa sheegaysa ama samee kooxo badhamada qaybo badan sida qalabyada.

Dawlad leh

Ku dar data-loading-text="Loading..."si aad u isticmaasho xaalad rarid badhanka.

Sifadan waa la tirtiray ilaa v3.3.5 waxaana laga saaray v4.

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

Kelida beddelka

Ku dar data-toggle="button"si aad dhaqaajiso togging hal badhan.

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

Sanduuqa Hubinta / Raadiyaha

Ku dar sanduuqa hubinta ama agabka raadiyaha data-toggle="buttons"si .btn-groupaad awood ugu yeelatid ku-rogid qaababkooda.

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

Hababka

$().button('toggle')

Beddelayaa gobolka riix Siinaya badhanka muuqaalka in la hawlgeliyay.

$().button('reset')

Dib u dajinaysaa xaalada badhanka - waxay ku badashaa qoraalka qoraalka asalka ah. Habkani waa mid isku mid ah oo soo noqda ka hor inta aan dib-u-dejintu dhammayn.

$().button(string)

Ku beddela qoraalka xaalad kasta oo qoraal ah oo qeexan.

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

Burburka dumay.js

Plugin dabacsan oo ka faa'iidaysa muggeed oo fasallo ah hab-dhaqan sahlan.

Tusaale

Guji badhamada hoose si aad u muujiso oo aad u qariso shay kale adigoo isticmaalaya isbeddelada fasalka:

• .collapseqariyaa waxa ku jira
• .collapsingwaxaa lagu dabaqaa xilliga kala-guurka
• .collapse.inwaxay muujinaysaa nuxurka

Waxaad isticmaali kartaa xiriiriye leh hrefsifada, ama badhan sifada leh data-target. Labada xaaladoodba, data-toggle="collapse"waa loo baahan yahay.

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

Tusaale ahaan Accordion

Kordhi habdhaqanka burburka caadiga ah si aad u abuurto accordion oo leh qaybta guddida.

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

Waxa kale oo suurtogal ah in lagu beddelo .panel-bodys .list-group.

Isticmaalka

Plugin-ka burburku wuxuu isticmaalaa dhawr fasal si uu u maareeyo qaadista culus:

• .collapseqariya waxa ku jira
• .collapse.inwaxay muujinaysaa nuxurka
• .collapsingwaxa lagu daraa marka kala guurku bilaabmo, lagana saaro marka uu dhamaado

Fasaladaan waxaa laga heli karaacomponent-animations.less .

Iyada oo loo marayo sifooyinka xogta

Kaliya ku dar data-toggle="collapse"oo a data-targetcuriyaha si si toos ah loogu qoondeeyo xakamaynta shay burburi kara. Sifadu data-targetwaxay aqbashaa xulashada CSS si loogu dabaqo burburka. U hubso inaad fasalka ku darto collapsewalxaha duminaya. Haddii aad rabto in uu furmo, ku dar fasalka dheeraadka ah in.

Si loogu daro maamulka kooxda accordion u eg kantaroolka burburi kara, ku dar xogta sifada data-parent="#selector". Tixraac demo si aad u aragto tan ficil ahaan

Iyadoo loo marayo JavaScript

Ku oggolow gacanta:

$('.collapse').collapse()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-parent="".

Hababka

.collapse(options)

Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaariga ah object.

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

.collapse('toggle')

U rogaa shay burburi kara si loo muujiyo ama loo qariyo. Ku soo noqda qofka soo wacay ka hor inta aan la muujin ama la qarin walxaha burburi kara (tusaale ka hor intaanay dhacdada shown.bs.collapseama hidden.bs.collapsedhacdada dhicin).

.collapse('show')

Wuxuu muujiyaa shay burburi kara. Ku soo noqda qofka soo wacaya ka hor inta aan dhab ahaantii la muujin walxaha burburi kara (tusaale ka hor intaanay shown.bs.collapseshilku dhicin).

.collapse('hide')

Qariyaa shay burburi kara. Ku soo noqda qofka soo wacay ka hor inta aan la qarin walxaha burburi kara (tusaale ka hor intaanay hidden.bs.collapseshilku dhicin).

Dhacdooyinka

Fasalka burburka Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta burburka.

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

Carousel carousel.js

Qayb musalsal ah oo loogu talagalay baaskiil wadida walxaha, sida carousel-ka. Carousels buul leh lama taageero.

Tusaalooyinka

Hore Xiga

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

Qoraallo ikhtiyaari ah

Ku dar qoraallada boggagaaga si fudud oo leh .carousel-captioncuriyaha ku jira mid kasta .item. Dhig HTML kasta oo ikhtiyaari ah halkaas oo si toos ah ayaa loo toosin doonaa oo loo qaabayn doonaa.

Summada slide ee ugu horreysa

Nulla vitae elit libero, a pharetra augue mollis interdum.

Summada slide slide labaad

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Summada slide slide saddexaad

Preesent commodo cursus magna, vel scelerisque nisl consectetur.

Hore Xiga

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

Isticmaalka

Carousels badan

Karooselsku waxay u baahan yihiin isticmaalka idweelka bannaanka ugu dambeeya (the .carousel) si kontaroolada carouselku si habboon u shaqeeyaan. Markaad ku darto carousels badan, ama markaad beddesho carousel's id, hubi inaad cusboonaysiiso kontaroolada khuseeya.

Iyada oo loo marayo sifooyinka xogta

Isticmaal sifada xogta si aad si fudud u xakamayso booska carouselka. data-slideaqbala ereyada furaha prevama next, kaas oo beddela booska slide marka loo eego booska uu hadda joogo. Haddii kale, isticmaal data-slide-tosi aad u gudbiso tusmaynta slide ceeriin ee carousel data-slide-to="2", kaas oo u beddelaya booska slide tusme gaar ah oo ka bilaabmaya 0.

Sifada data-ride="carousel"waxa loo isticmaalaa in lagu calaamadiyo carousel-ka sida firfircoon ee ka bilaabmaya culayska bogga. Looma isticmaali karo marka lagu daro (kaadiraan iyo aan loo baahnayn) bilawga JavaScript cad ee isla carouselka.

Iyadoo loo marayo JavaScript

Si gacanta ah ula wac carousel:

$('.carousel').carousel()

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-interval="".

Hababka

.carousel(options)

Waxay ku bilawday carousel-ka ikhtiyaar ikhtiyaari ah objectoo bilaabay inuu ku dhex wado alaabta.

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

.carousel('cycle')

Wareegtada dhex mara alaabta carouselka bidix ilaa midig.

.carousel('pause')

Karoosalka ka joojiya in uu baaskiil ku dhex maro alaabta.

.carousel(number)

Wareega karooselka si uu u sameeyo jir gaar ah (0 ku salaysan, oo la mid ah array).

.carousel('prev')

Wareegto shayga hore

.carousel('next')

Wareegto shayga xiga

Dhacdooyinka

Fasalka carousel ee Bootstrap wuxuu daaha ka qaadaa laba dhacdo oo loogu talagalay in lagu xidho shaqeynta carousel.

Labada dhacdoba waxay leeyihiin waxyaabo dheeraad ah oo soo socda:

• direction: Jihada uu carouselku u sii jeedo (ama "left"ama "right").
• relatedTarget: Cunsurka DOM ee meesha lagu sibiibi sida shayga firfircoon.

Dhammaan dhacdooyinka carousel-ka waxaa lagu ridaa carouselka laftiisa (ie at the <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Ku dheji.js

Tusaale

Plugin position: fixed;-ku wuu daaraa oo demi doonaa, isagoo ku dayanaya saamaynta lagu helay position: sticky;. Subnavigation-ka dhanka midig waa muujinta tooska ah ee plugin lifaaqa ah.

Isticmaalka

Isticmaal plugin-ka lifaaqa ah adigoo isticmaalaya sifooyinka xogta ama gacanta adoo isticmaalaya JavaScript adiga kuu gaar ah. Labada xaaladoodba, waa inaad bixisa CSS meelaynta iyo ballaca macluumaadkaaga ku lifaaqan.

Fiiro gaar ah: Ha u isticmaalin plugin-ka ku lifaaqan shay ka kooban shay meel yar, sida tiir la jiiday ama la riixay, sababtuna tahay dhiqlaha samaynta Safari .

Ku meelaynta iyada oo loo marayo CSS

Plugin-ka lifaaqa ah wuxuu u dhexeeyaa saddex fasal, mid walbana wuxuu matalaa gobol gaar ah: .affix, .affix-top, iyo .affix-bottom. Waa inaad bixisaa qaababka, marka laga reebo position: fixed;on .affix, waayo, fasalada naftaada (madax banaan plugin this) si ay u maareeyaan boosaska dhabta ah.

Waa kan sida uu u shaqeeyo affix-ku:

1. Si loo bilaabo, pluginku wuxuu ku darayaa .affix-topsi uu u muujiyo curiyaha inuu ku jiro booska ugu sarreeya. Halkaa marka ay marayso meelaynta CSS looma baahna.
2. U guurista ee dhaafta walxaha aad rabto in lagu dhejiyo waa in ay kicisaa ku dhejinta dhabta ah. Tani waa halka lagu .affixbeddelo .affix-topoo lagu dejiyo position: fixed;(waxaa bixiyay Bootstrap's CSS).
3. Haddii gundhigga hoose la qeexo, la dhaafi karo waa in lagu .affixbeddelaa .affix-bottom. Maaddaama ay dhimisyadu yihiin ikhtiyaari, dejinta mid waxay kaaga baahan tahay inaad dejiso CSS-da ku habboon. Xaaladdan, ku dar position: absolute;marka loo baahdo. Plugin waxa ay isticmaashaa sifada xogta ama ikhtiyaarka JavaScript si loo go'aamiyo meesha meesha laga dhigo curiyaha.

Raac tillaabooyinka kore si aad u dejiso CSS-gaaga mid ka mid ah fursadaha isticmaalka ee hoose.

Iyada oo loo marayo sifooyinka xogta

Si aad si fudud ugu darto habdhaqanka ku dhejinta shay kasta, kaliya ku dardata-spy="affix" walxaha aad rabto in aad basaasto. Isticmaal offsets si aad u qeexdo goorta la beddelayo ku dhejinta curiyaha.

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

Iyadoo loo marayo JavaScript

Ka wac plugin ku lifaaqan JavaScript:

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-offset-top="200".

Hababka

.affix(options)

Waxay u hawlgelisaa macluumaadkaaga sidii nuxur ku dheggan. Aqbala ikhtiyaarka ikhtiyaariga ah object.

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

.affix('checkPosition')

Waxay dib u xisaabisaa xaaladda lifaaqa iyadoo ku saleysan cabbirka, booska, iyo booska duubka ee walxaha khuseeya. Fasalada .affix, .affix-top, iyo .affix-bottomfasalada ayaa lagu daraa ama laga saaray nuxurka ku lifaaqan si waafaqsan gobolka cusub. Habkani wuxuu u baahan yahay in loo yeedho mar kasta oo cabbirada nuxurka ku dhejisan ama curiyaha bartilmaameedka la beddelo, si loo hubiyo meelaynta saxda ah ee nuxurka ku dheggan.

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

Dhacdooyinka

Bootstrap's affix plugin wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta lifaaqa.