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

Isticmaalka JavaScript-ka la soo ururiyey

Labaduba waxay bootstrap.jska bootstrap.min.jskooban yihiin dhammaan plugins hal fayl. Ku dar hal kaliya.

Ku tiirsanaanta plugin

Qaybaha qaar iyo qaybaha CSS waxay ku xidhan yihiin plugins kale. Haddii aad si gaar ah ugu darto plugins, hubi inaad hubiso waxyaalahan ku-tiirsanaanta dukumentiyada. Sidoo kale ogow in dhammaan pluginsku ay ku xiran yihiin jQuery (taasi waxay ka dhigan tahay jQuery waa in lagu daraa ka hor faylasha plugin). Kala tashobower.json si aad u aragto noocyada jQuery ee la taageeray.

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

Kaliya hal plugin halkii element iyada oo loo marayo sifooyinka xogta

Ha isticmaalin sifada xogta laga soo qaatay plugins badan oo isku mid ah. Tusaale ahaan, badhanku labaduba ma yeelan karaan qalab wax lagu xidho oo beddelaan modal. Si taas loo gaaro, isticmaal walxaha duubista.

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

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

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

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.

Maktabadaha xisbiga saddexaad

Bootstrap si rasmi ah uma taageerto qaybta saddexaad ee JavaScript maktabadaha sida Prototype ama jQuery UI. In kasta .noConflictoo ay jiraan dhacdooyin magacyo kala duwan leh, waxaa laga yaabaa inay jiraan dhibaatooyin iswaafajin oo aad u baahan tahay inaad keligaa hagaajiso.

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.

Hababka furan ee badan lama taageero

Hubi inaadan furin modal inta mid kale weli muuqanayo. Muujinta in ka badan hal qaab markiiba waxay u baahan tahay kood gaar ah.

Meelaynta calaamadaynta qaabka

Had iyo jeer isku day inaad dhigato modal code HTML meel heer sare ah dukumeentigaaga si aad uga fogaato qaybaha kale ee saameeya muuqaalka iyo/ama shaqeynta qaabka.

Digniinaha qalabka moobilka

Waxaa jira digniino ku saabsan isticmaalka modal-ka aaladaha mobilada. Faahfaahinta ka eeg dokumentiyada taageerada browserkayaga .

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>

Samee qaababka la heli karo

Hubi inaad ku darto role="dialog"iyo , tixraaca aria-labelledby="..."cinwaanka qaab-dhismeedka , .modal, iyo laftiisa.role="document".modal-dialog

Intaa waxaa dheer, waxaad ku siin kartaa sharaxaad ku saabsan wada-hadalka qaab- aria-describedbydhismeedka .modal.

Ku darida fiidiyowyada YouTube

Ku darista fiidiyowyada YouTube ee moodooyinka waxay u baahan tahay JavaScript dheeraad ah oo aan ku jirin Bootstrap si ay si toos ah u joojiso dib-u-ciyaarista iyo wax ka badan. Fiiri qoraalkan waxtarka leh ee Stack Overflow wixii macluumaad dheeraad ah.

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

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

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

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

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,

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

Magaca nooca default sharaxaad
dib-u-dhac boolean ama xadhig'static' run Waxaa ka mid ah curiyaha qaab-dhabeedka. Beddelkeeda, sheeg staticmeel-dambe oo aan xidhin habka gujiska.
kiiboodhka booliyan run Wuxuu xidhaa habka marka furaha baxsadka la riixo
show booliyan run Muujinaya habka marka la bilaabay.
fogaan waddo been ah

Doorashadan waa la joojiyay ilaa v3.3.0 waxaana laga saaray v4. Waxaan kugula talineynaa taa beddelkeeda isticmaalka qaabaynta dhinaca macmiilka ama qaab-dhismeedka xogta, ama wac jQuery.load naftaada.

Haddii URL fog la bixiyo, waxa ku jira waxa lagu shubi doonaa hal mar habka jQuery loadwaxaana lagu duri doonaa .modal-contentdiv. Haddii aad isticmaalayso data-api, waxa kale oo aad isticmaali kartaa hrefsifada si aad u cadayso isha fog. Tusaalaha tan ayaa lagu muujiyay hoos:

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

Nooca Dhacdada Sharaxaada
show.bs.modal Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo. Haddi ay keento gujis, cunsurka la gujiyay ayaa diyaar u ah relatedTargethantida dhacdada.
tusay.bs.modal Dhacdadan waxa la eryaa marka habka loo muujiyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ku wareejinayo dhamaystirka). Haddi ay keento gujis, cunsurka la gujiyay ayaa diyaar u ah relatedTargethantida dhacdada.
qari.bs.modal Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon.bs.modal Dhacdadan waxa la eryaa marka modalku dhammeeyo in laga qariyo isticmaalaha (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
raran.bs.modal Dhacdadan ayaa la eryaa marka modalku soo buuxiyo nuxurka iyadoo la adeegsanayo remoteikhtiyaarka.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

Hoos u dhigida.js

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

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

data-toggle="dropdown"weli loo baahan yahay

Iyadoo aan loo eegin haddii aad ugu wacdo hoos u dhigistaada JavaScript ama aad isticmaasho xogta-api, data-toggle="dropdown"had iyo jeer waxaa looga baahan yahay inaad ku jirto qaybta kicinta ee hoos u dhaca.

Midna

$().dropdown('toggle')

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

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

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

Nooca Dhacdada Sharaxaada
show.bs.hoos u dhac Dhacdadani waxay isla markiiba gubtaa marka habka tusaalaha bandhigga la yiraahdo.
la tusay.bs.hoos u dhac Dhacdadan ayaa la eryaa marka hoos u dhigista laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa kala-guurka CSS, si loo dhamaystiro).
qari.bs.hoos u dhac Dhacdadan ayaa isla markiiba la eryaa marka habka dhuumashada la waco.
qarsoon.bs. hoos u dhac Dhacdadan waxa la eryaa marka ay dhammaato hoos u dhigista laga qarinayo isticmaalaha (waxa ay sugi doontaa kala-guurka CSS, si loo dhamaystiro).
$('#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.

@ buuran

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi ka hor inta aysan iibin qui. Tumblr beer-ilaa-miiska xuquuqda baaskiilka wax kasta ha ahaatee. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby funaanad lomo Jean shorts, williamsburg hoodie minim qui waxaa laga yaabaa inaadan maqlin iyaga iyo cardigan Trust fund culpa biodiesel wes anderson bilicda. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa shaarib skateboard, oo leh gadhka fugiat velit gadhka. Gadhka xorta ah aliqua cupidatat mcsweeney's vero. Cupidatat afar loko nisi, iyo helvetica nulla carles. Gaariga cuntada ee shaabada leh ee cosby funaanad, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non bilicsan jimicsi quis gentrify. Brooklyn adipisicing craft biir ku xigeenka keytar deserunt.

mid

Occaecat commodo aliqua delectus. Beerka farsamada gacanta ee deserunt skateboard ea. Xuquuqda baaskiilka Lomo adipisicing banh mi, velit ea sunt heerka xiga locavore kafee-kaliya ee magna veniam. Nolosha sare id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim boorsada fariinta. Cred ex in, waarta delectus consectetur fanny pack iphone.

laba

Inciddunt echo park, officia deserunt mcsweeney's master-ka caanka ah ayaa nadiifiya thundercats sapiente veniam. Marka laga reebo VHS elit, shoreditch caan ah +1 biodiesel laborum biirka farsamada. Wadfarers kafeega asal ahaan ka soo jeeda irure afar loko, cupidatat Terry Richardson master cleanse. Ka soo qaad in ay u badan tahay in aadan maqlin iyaga xirmo faneedka fannaanka, tattooed nulla cardigan tempor ad. yeey aad u caan ah oo sartorial keffiyeh eu banh mi waara. Elit wolf voluptate, lo-fi ea portland ka hor inta aysan iibin afar loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

saddex

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi ka hor inta aysan iibin qui. Tumblr beer-ilaa-miiska xuquuqda baaskiilka wax kasta ha ahaatee. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby funaanad lomo Jean shorts, williamsburg hoodie minim qui waxaa laga yaabaa inaadan maqlin iyaga iyo cardigan Trust fund culpa biodiesel wes anderson bilicda. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa wax alla wixii gaari cunto ah oo delectus ah. Sapiente synth id la qaatay. Locavore sed helvetica cliche bir ah, onkod laga yaabo inaadan maqlin iyaga oo keenaya hoodie gluten-free lo-fi fap aliquip. Labore elit placeat ka hor inta aysan iibin, Terry Richardson oo aad u cad cad brunch nesciunt quis cosby funaanad pariatur keffiyeh ut helvetica artisan. Beerka farsamada gacanta ee Cardigan seitan velit diyaarsan. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco onkod.

Isticmaalka

Wuxuu u baahan yahay Bootstrap nav

Scrollspy hadda waxay u baahan tahay isticmaalka qayb nav Bootstrap ah si loo muujiyo saxda ah ee xiriiriyeyaasha firfircoon.

Bartilmaameedyada aqoonsiga ee la xallin karo ayaa loo baahan yahay

Xidhiidhiyayaasha Navbar waa inay lahaadaan bartilmaameedyada id la xallin karo. Tusaale ahaan, <a href="#home">home</a>waa inuu u dhigmaa wax ku jira DOM sida <div id="home"></div>.

Waxyaabaha aan :visiblebartilmaameedka ahayn waa la iska indhatiray

Walxaha bartilmaameedka ah ee aan :visiblewaafaqsanayn jQuery waa la iska indha tiraayaa oo shayada badda ee u dhigma weligood lama iftiimin doono.

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

Magaca nooca default sharaxaad
dhimis tirada 10 Pixels in laga bilaabo xagga sare marka la xisaabinayo booska rogid.

Dhacdooyinka

Nooca Dhacdada Sharaxaada
firfircooni.bs.scrollspy Dhacdadani waxay dab kacaysaa mar kasta oo shay cusub uu hawl galo duubista.
$('#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

Denim cayriin waxaa laga yaabaa inaadan maqlin iyaga Jean-gaaban Austin. Nesciunt tofu stumptown aliqua, retro synth master nadiifinta. Shaarubaha cliche tempor, williamsburg carles vegan helvetica. Reprehenderit hiliblaha retro keffiyeh dreamcatcher synth. Cosby funaanad eu banh mi, qui irure terry richardson ex squid. Sida loo sameeyo salvia cillum iphone. Seitan aliquip quis cardigan dharka mareykanka, hiliblaha voluptate nisi qui.

Gaariga cuntada fixie locavore, accusamus mcsweeney's marfa nulla squid qaxwaha hal asal ah. Jimicsiga +1 shaqada, blog sartorial PBR leggings heerka xiga wes anderson artisan afar loko beer-ilaa-miiska biirka farsamada gacanta. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean gaaban ullamco ad vinyl cillum PBR. Homo nostrud organic, waxay u malaynayaan in shaqada bilicsanaanta magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, jean gaaban gadhka waara iyo DIY anshaxa culpa Terry Richardson biodiesel. Goobta xaflada fanka stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Waxay kordhisaa navigation tabbeded

Plugin -gani waxa uu fidinayaa qaybta hagidda tabbeded si loogu daro meelaha la taabtay.

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 xiisadaha lagu dabaqi doono habaynta kiniinka .navnav-pills

<div>

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

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

</div>

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 qofka soo wacay ka hor inta aan la soo bandhigin muraayadda tab (tusaale ka hor intaanay shown.bs.tabdhacdada 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.

Nooca Dhacdada Sharaxaada
show.bs.tab Dhacdadani waxay ku socotaa bandhigga tab, laakiin ka hor intaan tab cusub la muujin. Isticmaal event.targetoo event.relatedTargetaad beegsato tab firfircooni iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.
tusay.bs.tab Dhacdadani waxay ku gubanaysaa bandhiga tab ka dib marka tab la tuso. Isticmaal event.targetoo event.relatedTargetaad beegsato tab firfircooni iyo tabtii hore ee firfircoonayd (haddii la heli karo) siday u kala horreeyaan.
qari.bs.tab Dhacdadani waxay dab kacaysaa marka tab cusub la muujinayo (oo sidaas awgeed tabtii hore ee firfircoonayd waa in la qariyaa). Isticmaal event.targetoo event.relatedTargetaad beegsato tab firfircoon ee hadda iyo ta cusub ee dhawaan-wax-qaban doona, siday u kala horreeyaan.
qarsoon.bs.tab Dhacdadani waxay dabaysaa ka dib marka tab cusub la muujiyo (oo sidaas awgeed tabtii hore ee firfircoonayd ayaa qarsoon). Isticmaal event.targetoo event.relatedTargetaad beegsato tabtii hore ee firfircoonayd iyo tab cusub ee firfircoon, siday u kala horreeyaan.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

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

Surwaal dhagan keffiyeh malaha ma aadan maqlin iyaga. Photo booth gadhka cayriin denim warqad-press vegan messenger bag stumptown. Beer-ilaa-miiska seitan, mcsweeney's fixie sustainable quinoa 8-bit dharka maraykanku waxay leeyihiin terry Richardson vinyl chambray. Gadhka stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, afar loko mcsweeney's chambray vegan nadiif ah. Farsamoyaqaan dhab ah oo biro ah wax kasta oo keytar , scenester farm-to-table banksy Austin twitter handle freegan cred denim ceeriin hal-asalka kafeega viral.

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>

Shaqaynta doorashadu

Sababaha wax qabad dartood, Tooltip iyo Popover data-apis waa gaabsan yihiin, taasoo la macno ah inaad adigu bilawdo .

Hal dariiqo oo lagu bilaabi karo dhammaan qalabyada bogga waxay noqon kartaa in lagu xusho data-togglesifadooda:

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

Xiriirinta khadadka badan

Mararka qaarkood waxaad dooneysaa inaad ku darto qalab xiriiriye hyperlink kaas oo ku duubaya khadadka badan. Habdhaqanka caadiga ah ee plugin tip-ka qalabku waa inuu u dhexeeyo si toosan iyo toosan. Ku dar white-space: nowrap;barroosinnadaada si aad taas uga fogaato.

Tilmaamaha qalabka ee kooxaha badhanka, kooxaha wax gelinta, iyo miisaska waxay u baahan yihiin goob gaar ah

Markaad isticmaalayso tibaaxaha walxaha ku jira a .btn-groupama a .input-group, ama walxaha la xidhiidha miiska ( <td>, <th>, <tr>, <thead>, ) <tbody>, <tfoot>waa inaad qeexdaa ikhtiyaarka container: 'body'( hoos ku qoran) si aad uga fogaato waxyeelooyinka aan loo baahnayn (sida curiyaha sii kordhaya iyo/ ama luminaya geesaheeda wareegsan marka qalabku kiciyo).

Ha isku dayin inaad tusto tilmaamo ku saabsan walxaha qarsoon

U yeedhida $(...).tooltip('show')marka cunsurka bartilmaameedku yahay waxa display: none;ay sababi doontaa in tip-ka qalabku si khaldan loo dhigo.

Aaladaha la heli karo ee kiiboodhka iyo isticmaalayaasha tignoolajiyada caawiya

Isticmaalayaasha ku dhex wareegaya kiiboodhka, iyo gaar ahaan isticmaalayaasha tignoolajiyada caawinta, waa inaad kaliya ku dartaa tilmaamo qalab kiiboodhka walxaha diirada saari kara sida isku xidhka, kontaroolada foomka, ama shay kasta oo aan sabab lahayn oo leh tabindex="0"sifo.

Tilmaamaha aaladaha curyaamiinta waxay u baahan yihiin walxaha duuban

Si aad tibaaxaha ugu darto shay disabledama .disabledcuriye, geli curiyaha gudaha a <div>oo ku dabaq aalada taas <div>bedelkeeda.

Ikhtiyaarada

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

Magaca Nooca Asal ahaan Sharaxaada
animation booliyan run Codso u gudbida libdhicida CSS ilaa aaladda
weel xadhig | been ah been ah

Waxay ku dhejisaa caarada aaladda shay gaar ah. Tusaale container: 'body':. Doorashadani waxay si gaar ah faa'iido u leedahay in ay kuu ogolaato inaad ku dhejiso qalabka wax lagu duubo ee qulqulka dukumeentiga u dhow curiyaha kiciya - taas oo ka ilaalin doonta qalabku inuu ka sabbeeyo xubinta kicinta inta lagu jiro cabbirka daaqada.

dib u dhac lambarka | walax 0

Daahinta muujinta iyo qarinta aaladda (ms) - kuma khusayso nooca kiciya gacanta

Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba

Qaab dhismeedka shaygu waa:delay: { "show": 500, "hide": 100 }

html booliyan been ah Geli HTML galka qalabka Haddii ay been tahay, texthabka jQuery ayaa loo isticmaali doonaa in la geliyo macluumaadka DOM. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.
meelaynta xadhig | shaqayn 'sare'

Sida loo dhigo tip-tip-top | hoose | bidix | xaq | baabuur.
Marka "auto" la cayimo, waxay si firfircoon dib u habayn doontaa tibaaxaha qalabka. Tusaale ahaan, haddii meelayntu tahay "bidix toos ah", qalabku wuxuu soo bandhigi doonaa bidix marka ay suurtogal tahay, haddii kale waxay soo bandhigi doontaa midig.

Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxa loogu yeedhaa qalabka DOM node oo ah doodiisa koowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha thisguud waxa loo dejiyay tusaalaha tibaaxaha.

dooriye xadhig been ah Haddii la bixiyo doorasho, walxaha tibaaxaha ah waxaa loo igman doonaa bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa loo istcimaalaa in lagu suurtageliyo nuxurka HTML ee firfircoon in lagu daro aaladaha. Bal u fiirso tan iyo tusaale wargelin ah .
qaab-dhismeedka xadhig '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML saldhig si aad u isticmaasho marka la abuurayo tip-ka.

Tilmaamaha qalabka titleayaa lagu duri doonaa .tooltip-inner.

.tooltip-arrowwaxay noqon doontaa fallaadho tibta aalada.

Cutubka duubka ugu dambeeya waa inuu lahaadaa .tooltipfasalka.

horyaalka xadhig | shaqayn ''

Qiimaha cinwaanka caadiga ah haddii titlesifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha ay tip-ku ku dheggan tahay.

kicin xadhig 'fiirsashada dulsaarka' Sida aaladda loo kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; kala saar meel bannaan. manuallaguma dari karo kiciye kale.
daawasho xadhig | shay | shaqayn {door: 'jirka', suufka: 0}

Waxay ku ilaalisaa caarada aaladda gudaha xudduudaha cunsurkan. Tusaale: viewport: '#viewport'ama{ "selector": "#viewport", "padding": 0 }

Haddii shaqo la bixiyo, waxaa loogu yeeraa curiyaha DOM node oo ah dooda keliya. Macnaha thisguud waxa loo dejiyay tusaalaha tibaaxaha.

Sifooyinka xogta ee aaladaha gaarka ah

Ikhtiyaarada aaladaha gaarka ah waxaa lagu qeexi karaa iyadoo la adeegsanayo sifooyinka xogta, sida kor lagu sharaxay.

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

Nooca Dhacdada Sharaxaada
show.bs.tooltip Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
tusay.bs.tooltip Dhacdadan waxa la eryaa marka tip-tip-ka loo dhigay mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
qari.bs.tooltip Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon.bs.tooltip Dhacdadan waxa la eryaa marka qalabku dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
la geliyey.bs.tooltip Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.tooltipmarka qaabka qalabaynta lagu daro DOM.
$('#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.

Ku tiirsanaanta plugin

Popovers waxay u baahan yihiin plugin tip-ka in lagu daro nooca Bootstrap kaaga.

Shaqaynta doorashadu

Sababaha wax qabad dartood, Tooltip iyo Popover data-apis waa gaabsan yihiin, taasoo la macno ah inaad adigu bilawdo .

Hal dariiqo oo lagu bilaabi karo dhammaan popovers bogga waxay noqon kartaa in lagu xusho data-togglesifadooda:

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

Popovers ee kooxaha badhanka, kooxaha wax gelinta, iyo miisaska waxay u baahan yihiin goob gaar ah

Markaad isticmaalayso popovers walxaha ku jira a .btn-groupama a .input-group, ama miiska la xidhiidha walxaha ( <td>, <th>, <tr>, <thead>, <tbody>, <tfoot>), waa inaad qeexdaa ikhtiyaarka container: 'body'( hoos ku qoran) si aad uga fogaato waxyeelooyinka aan loo baahnayn (sida curiyaha sii kordhaya iyo/ ama luminaya geesaheeda wareegsan marka popover uu kiciyo).

Ha isku dayin inaad tusto popovers walxaha qarsoon

U yeedhida $(...).popover('show')marka cunsurka bartilmaameedku yahay waxa display: none;ay sababi doontaa in popover-ka si khaldan loo dhigo.

Popovers ee canaasiirta naafada ah waxay u baahan yihiin xubno duub ah

Si aad ugu darto popover a disabledama .disabledelement, geli curiyaha gudaha a <div>oo ku dabaq popover taas <div>bedelkeeda.

Xiriirinta khadadka badan

Mararka qaarkood waxaad rabtaa inaad popover ku darto hyperlink kaas oo ku duudduubay khadadka badan. Dabeecadda caadiga ah ee plugin popover-ka ayaa ah in uu u dhexeeyo si toosan iyo toosan. Ku dar white-space: nowrap;barroosinnadaada si aad taas uga fogaato.

Tusaalooyinka

popover taagan

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

Korka sare

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

Midig popover

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

Hooska popover

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

Popover bidix

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

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.

Calaamadayn gaar ah ayaa loo baahan yahay si loo joojiyo-ku-xigta-guji

Si aad u hesho hab-dhaqan iskutallaab ah oo sax ah iyo hab-dhaqan-madal-madal ah, waa inaad isticmaashaa <a>summada, ma aha summada , <button>sidoo kale waa inaad ku dartaa sifooyinka role="button"iyo tabindexsifooyinka.

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

Magaca Nooca Asal ahaan Sharaxaada
animation booliyan run Codso u gudbida libdhicida CSS ilaa popover
weel xadhig | been ah been ah

Ku dhejinta popover-ka shay gaar ah. Tusaale container: 'body':. Doorashadani waxay si gaar ah faa'iido u leedahay inay kuu ogolaato inaad ku dhejiso qulqulka qulqulka dukumeentiga u dhow curiyaha kiciya - kaas oo ka ilaalin doona popover inuu ka sababbeeyo walxaha kiciya inta lagu jiro cabbirka daaqada.

nuxurka xadhig | shaqayn ''

Qiimaha nuxurka asalka ah haddii data-contentsifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha popover-ku ku dheggan yahay.

dib u dhac lambarka | walax 0

Dib u dhigista muujinta iyo qarinta popover (ms) - kuma khusayso nooca kiciya gacanta

Haddii nambar la keeno, dib u dhac ayaa lagu dabaqayaa qarinta/muujinta labadaba

Qaab dhismeedka shaygu waa:delay: { "show": 500, "hide": 100 }

html booliyan been ah Geli HTML-ka popover-ka Haddii ay been tahay, texthabka jQuery ayaa loo isticmaali doonaa in la geliyo macluumaadka DOM. Isticmaal qoraal haddii aad ka welwelsan tahay weerarrada XSS.
meelaynta xadhig | shaqayn 'sax'

Sida loo dhigo popover - top | hoose | bidix | xaq | baabuur.
Marka "auto" la cayimo, waxay si firfircoon dib u habayn doontaa popover-ka. Tusaale ahaan, haddii meelayntu tahay "bidix toos ah", popover-ku wuxuu u soo muuqan doonaa bidix marka ay suurtogal tahay, haddii kale waxay soo bandhigi doontaa midig.

Marka hawl loo isticmaalo si loo go'aamiyo meelaynta, waxaa lagu magacaabaa node popover DOM oo ah dooddeeda kowaad iyo curiyaha DOM node oo ah kan labaad. Macnaha thisguud waxa loo dejiyay tusaale popover.

dooriye xadhig been ah Haddii doorasho la bixiyo, shayada soo-bandhigista waxa loo igmaday bartilmaameedyada la cayimay. Ficil ahaan, tan waxaa loo istcimaalaa in lagu suurtageliyo nuxurka HTML ee firfircoon in lagu daro popovers. Bal u fiirso tan iyo tusaale wargelin ah .
qaab-dhismeedka xadhig '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

HTML saldhig si loo isticmaalo marka la abuurayo popover.

Popover's titleayaa lagu duri doonaa .popover-title.

Popover's contentayaa lagu duri doonaa .popover-content.

.arrowwaxay noqon doontaa fallaadha popover.

Cutubka duubka ugu dambeeya waa inuu lahaadaa .popoverfasalka.

horyaalka xadhig | shaqayn ''

Qiimaha cinwaanka caadiga ah haddii titlesifadu aanay jirin.

Haddii shaqo la bixiyo, waxa loo yeedhi doonaa iyada oo thistixraaceeda loo dejiyey curiyaha popover-ku ku dheggan yahay.

kicin xadhig 'guji' Sida popover u kiciyo - guji | dullid | diiradda | buug-gacmeedka. Waxaad ka gudbi kartaa kiciyeyaasha badan; kala saar meel bannaan. manuallaguma dari karo kiciye kale.
daawasho xadhig | shay | shaqayn {door: 'jirka', suufka: 0}

Waxay ku ilaalisaa popover-ka gudaha xudduudaha cunsurkan. Tusaale: viewport: '#viewport'ama{ "selector": "#viewport", "padding": 0 }

Haddii shaqo la bixiyo, waxaa loogu yeeraa curiyaha DOM node oo ah dooda keliya. Macnaha thisguud waxa loo dejiyay tusaale popover.

Sifooyinka xogta ee popovers shaqsi

Ikhtiyaarada popovers shakhsi ahaan waxaa lagu qeexi karaa iyada oo la isticmaalayo sifooyin xogta, sida kor lagu sharaxay.

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 bood-boodka dhab ahaantii la qarin (ie ka hor intaanay hidden.bs.popoverdhacdada 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

Nooca Dhacdada Sharaxaada
show.bs.popover Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
la tusay.bs.popover Dhacdadan waxa la eryaa marka popover-ka laga dhigo mid la arki karo isticmaaluhu (waxay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
qari.bs.popover Dhacdadan ayaa isla markaaba la eryaa marka hidehabka tusaale ahaan loo waco.
qarsoon.bs.popover Dhacdadan waxa la eryaa marka popover uu dhammeeyo in laga qariyo isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
la geliyey.bs.popover Dhacdadan ayaa la eryaa dhacdada ka dib show.bs.popovermarka qaabka popover lagu daray DOM.
$('#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.

Nooca Dhacdada Sharaxaada
dhow.bs. heegan Dhacdadani waxay isla markaaba gubataa marka closehabka tusaalaha la yiraahdo.
xiran.bs. feejignaan Dhacdadan waxa la eryaa marka digniinta la xidho (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

Badhamada badhanka.js

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

Waafaqsanaanta browser-ka

Firefox waxay ku sii socotaa qaabka xakamaynta (naafada iyo hubinta) guud ahaan culaysyada bogga . Habka xalinta tani waa in la isticmaalo autocomplete="off". Eeg bug Mozilla #654072 .

Dawlad leh

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

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

Isticmaal gobol kasta oo aad jeceshahay!

Bannaanbaxan dartiis, waxaan isticmaaleynaa data-loading-textiyo $().button('loading'), laakiin taasi maaha gobolka kaliya ee aad isticmaali karto. Hoos ka arag wax badan oo arrintan ku saabsan $().button(string)dukumeentiyada .

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

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

Kelida beddelka

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

Badhamada hore loo rogay ayaa u baahan .activeiyoaria-pressed="true"

Badhamada horay loo-rogmaday, waa inaad kudartaa .activefasalka iyo aria-pressed="true"sifada buttonnaftaada.

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

Doorashooyin hore loo doortay ayaa u baahan.active

Ikhtiyaarada hore loo doortay, waa in aad ku darto .activefasalka labellaftaadu wax galinta.

Xaaladda muuqaalka la hubiyay ayaa kaliya lagu cusboonaysiiyay guji

Haddii xaaladda la hubiyay ee badhanka sanduuqa jeeggu la cusboonaysiiyo iyada oo aan la ridin clickdhacdo badhanka (tusaale iyada oo la adeegsanayo <input type="reset">ama la samaynayo habaynta checkedhantida gelinta), waxa aad u baahan doontaa in aad .activefasalka ku beddesho qaybta wax-gelinta label.

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

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" autocomplete="off">
  ...
</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.

Ku tiirsanaanta plugin

Burburku wuxuu u baahan yahay furaha wareejinta in lagu daro nooca Bootstrap kaaga.

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.

Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

Tusaale ahaan Accordion

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

Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. 3 xafiis dayax yeey aute, non cupidatat skateboard dolor brunch. Gaariga cuntada quinoa nesciunt laborum eiusmod. Brunch 3 yeey dayax tempor, sunt aliqua waxay dul saartay shimbir squid kafee hal asal ah nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident. Ad vegan marka laga reebo hiliblaha ku xigeenka lomo. Leggings occaecat beer-farshaxan beer-la-miis, denim cayriin bilicsanaanta synth nesciunt malaha ma aadan maqlin iyaga oo ku eedeeyay VHS waarta.
Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. 3 xafiis dayax yeey aute, non cupidatat skateboard dolor brunch. Gaariga cuntada quinoa nesciunt laborum eiusmod. Brunch 3 yeey dayax tempor, sunt aliqua waxay dul saartay shimbir squid kafee hal asal ah nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident. Ad vegan marka laga reebo hiliblaha ku xigeenka lomo. Leggings occaecat beer-farshaxan beer-la-miis, denim cayriin bilicsanaanta synth nesciunt malaha ma aadan maqlin iyaga oo ku eedeeyay VHS waarta.
Anim pariatur cliche reprehenderit, anim eiusmod nolosha sare eedeeymo Terry Richardson iyo squid. 3 xafiis dayax yeey aute, non cupidatat skateboard dolor brunch. Gaariga cuntada quinoa nesciunt laborum eiusmod. Brunch 3 yeey dayax tempor, sunt aliqua waxay dul saartay shimbir squid kafee hal asal ah nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, biirka farsamada gacanta wes anderson cred nesciunt sapiente ea proident. Ad vegan marka laga reebo hiliblaha ku xigeenka lomo. Leggings occaecat beer-farshaxan beer-la-miis, denim cayriin bilicsanaanta synth nesciunt malaha ma aadan maqlin iyaga oo ku eedeeyay VHS waarta.
<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.

  • Bootply
  • Mid ka mid ah itmus ac facilin
  • eros labaad

Samee balaarin/burbur kontaroolada la heli karo

Hubi inaad ku darto aria-expandedqaybta xakamaynta. Sifadani waxay si cad u qeexaysaa xaaladda hadda jirta ee cunsurka la dumin karo si loo eego akhristayaasha iyo tignoolajiyada la midka ah ee caawinta. Haddii curiyaha dumaya uu si caadi ah u xidhan yahay, waa inuu lahaadaa qiime aria-expanded="false". Haddii aad dejisay curiyaha dumin kara inuu si caadi ah u furmo adoo isticmaalaya infasalka, dhigaria-expanded="true" kontaroolada. Plugin-ku si toos ah ayuu u rogi doonaa sifadan iyadoo lagu salaynayo in walxaha burburi kara la furay ama la xidhay iyo in kale.

Intaa waxaa dheer, haddii qaybta kontoroolka ay beegsanayso hal unug oo dumin kara - tusaale ahaan data-targetsifadu waxay tilmaamaysaa iddoore - waxa aad ku dari kartaa aria-controlssifo dheeraad ah qaybta kontoroolka, oo ay ku jirto idcuriyaha burburi kara. Akhristayaasha shaashada casriga ah iyo tignoolajiyada la midka ah ee caawinta ayaa isticmaala sifadan si ay u siiyaan isticmaalayaasha habab gaagaaban oo dheeri ah si ay si toos ah ugu socdaan walxaha burburi kara laftiisa.

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

Magaca nooca default sharaxaad
waalid dooriye been ah Haddii la bixiyo doore, markaas dhammaan walxaha burburi kara ee hoos yimaada waalidka la cayimay waa la xidhi doonaa marka shaygan la tuso. (oo la mid ah hab-dhaqanka wadajirka ah ee dhaqanka - tani waxay ku xiran tahay panelfasalka)
leexleex booliyan run Wuxuu beddelaa cunsurka burburi kara marka la codsado

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.

Nooca Dhacdada Sharaxaada
show.bs.burbur Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
la tusay.bs.burbur Dhacdadan waxa la eryaa marka curiyaha burburay loo muujiyo isticmaalaha (waxay sugi doontaa inta CSS ka wareejinta la dhamaystirayo).
qari.bs.burbur Dhacdadan ayaa isla markiiba la eryaa marka hidehabka loo waco.
qarsoon.bs.burbur Dhacdadan waxa la eryaa marka walxaha burburay laga qariyay isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka).
$('#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.

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

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

Carousels badan

Karooselsku waxay u baahan yihiin isticmaalka idweelka bannaanka ugu dambeeya (the .carousel) si kontaroolada carouselku si habboon u shaqeeyaan. Marka lagu daro carousels badan, ama marka la beddelo carousel eeid , 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 index gaar ah oo ka bilaabma0 .

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 waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-, sida ku jira data-interval="".

Magaca nooca default sharaxaad
dhexda tirada 5000 Qadarka wakhtiga dib u dhigista udhaxaysa si toos ah shay baaskiil wadida. Haddii ay been tahay, carousel si toos ah uma wareegeyso.
hakad xadhig | waxba "hoos u dhac" Haddii la dejiyo "hover", waxay hakisaa baaskiil wadida karouselka oo daaran mouseenterdib u bilaabaya baaskiilka carouselka mouseleave. Haddii la dejiyo null, dul heehaabista karoosalka ma joojin doonto.
duub booliyan run Haddii carouselku si joogto ah u wareego ama uu yeesho joogsi adag.
kiiboodhka booliyan run Haddii carouselku uu ka falcelinayo dhacdooyinka kiiboodhka.

.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

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

Nooca Dhacdada Sharaxaada
slide.bs.carousel Dhacdadani waxay isla markiiba gubtaa marka slidehabka tusaale ahaan loo yeedho.
slid.bs.carousel Dhacdadan waxa la eryaa marka carouselku dhammeeyo kala-guurka slide-ka.
$('#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 affix-ka shay ku jira qayb meelaysan, sida tiir la jiiday ama la riixay, sababtuna tahay bug 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 meesha .affixbeddelka .affix-topiyo dejintaposition: fixed; (waxaa bixiyay Bootstrap's CSS).
  3. Haddii gundhigga hoose la qeexo, dul-rogid ee dhaafi 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 sahal ah ugu darto habdhaqanka lifaaqa shay kasta, kaliya ku dar data-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".

Magaca nooca default sharaxaad
dhimis lambarka | shaqada | walax 10 Pixels si looga saaro shaashadda marka la xisaabinayo booska duudduuban. Haddii hal nambar la bixiyo, kabista waxa lagu dabaqi doonaa jihooyinka sare iyo kuwa hooseba. Si aad u bixiso mid gaar ah, hoose iyo sare kaliya bixi shay offset: { top: 10 }ama offset: { top: 10, bottom: 5 }. Isticmaal shaqo marka aad u baahan tahay inaad si firfircoon u xisaabiso dhimista.
bartilmaameed xule | noodhka | element jQuery windowshayga _ Wuxuu qeexayaa qaybta la beegsanayo ee lifaaqa.

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.

Nooca Dhacdada Sharaxaada
ku dhejis.bs.dhabar Dhacdadani waxay isla markiiba gubataa ka hor inta aan curiyaha lagu dhejin.
ku dhejisan.bs.dhabar Dhacdadan ayaa la eryaa ka dib marka curiyaha lagu dhejiyo.
ku dhejin-sare.bs.ku dhejin Dhacdadani waxay isla markiiba gubataa ka hor intaan curiyaha lagu dhejin-sare.
ku dhejisan-sare.bs. ku dhejisan Dhacdadan ayaa la eryaa ka dib marka curiyaha lagu dhejiyo-sare.
ku dheji-hoos.bs.ku dhejin Dhacdadani waxay dab ka kacaysaa isla markiiba ka hor inta aan curiyaha lagu dhejin hoosta.
ku dhejisan-hoos.bs Dhacdadan ayaa la eryaa ka dib marka curiyaha lagu dhejiyo hoosta.