ઝાંખી

વ્યક્તિગત અથવા સંકલિત

પ્લગઈનો વ્યક્તિગત રીતે (બૂટસ્ટ્રેપની વ્યક્તિગત *.jsફાઈલોનો ઉપયોગ કરીને) અથવા એક જ સમયે ( bootstrap.jsઅથવા મિનિફાઈડનો ઉપયોગ કરીને bootstrap.min.js) સમાવેશ કરી શકાય છે.

સંકલિત JavaScript નો ઉપયોગ કરીને

બંને bootstrap.jsઅને bootstrap.min.jsએક જ ફાઈલમાં બધા પ્લગઈનો સમાવે છે. ફક્ત એક જ શામેલ કરો.

પ્લગઇન અવલંબન

કેટલાક પ્લગઇન્સ અને CSS ઘટકો અન્ય પ્લગઇન્સ પર આધાર રાખે છે. જો તમે વ્યક્તિગત રીતે પ્લગઇન્સનો સમાવેશ કરો છો, તો દસ્તાવેજમાં આ નિર્ભરતાઓ તપાસવાનું સુનિશ્ચિત કરો. એ પણ નોંધ કરો કે બધા પ્લગઇન્સ jQuery પર આધાર રાખે છે (આનો અર્થ એ છે કે પ્લગઇન ફાઇલો પહેલાં jQuery શામેલ હોવી આવશ્યક છે ). jQuery ના કયા વર્ઝન સપોર્ટેડ છે તે જોવા માટે અમારી સલાહ લો .bower.json

ડેટા લક્ષણો

તમે JavaScript ની એક પણ લાઇન લખ્યા વિના માર્કઅપ API દ્વારા તમામ બુટસ્ટ્રેપ પ્લગિન્સનો ઉપયોગ કરી શકો છો. આ બુટસ્ટ્રેપનું ફર્સ્ટ-ક્લાસ API છે અને પ્લગઇનનો ઉપયોગ કરતી વખતે તમારી પ્રથમ વિચારણા હોવી જોઈએ.

તેણે કહ્યું, કેટલીક પરિસ્થિતિઓમાં આ કાર્યક્ષમતાને બંધ કરવાનું ઇચ્છનીય હોઈ શકે છે. તેથી, અમે સાથે સાથે દસ્તાવેજ નેમસ્પેસ પર તમામ ઇવેન્ટ્સને અનબાઈન્ડ કરીને ડેટા એટ્રિબ્યુટ API ને અક્ષમ કરવાની ક્ષમતા પણ પ્રદાન કરીએ છીએ data-api. આ આના જેવું દેખાય છે:

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

વૈકલ્પિક રીતે, ચોક્કસ પ્લગઇનને લક્ષ્ય બનાવવા માટે, ફક્ત પ્લગઇનનું નામ નેમસ્પેસ તરીકે ડેટા-એપીઆઈ નેમસ્પેસની સાથે આ રીતે શામેલ કરો:

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

ડેટા વિશેષતાઓ દ્વારા તત્વ દીઠ માત્ર એક પ્લગઇન

એક જ તત્વ પર બહુવિધ પ્લગિન્સમાંથી ડેટા વિશેષતાઓનો ઉપયોગ કરશો નહીં. ઉદાહરણ તરીકે, બટનમાં ટુલટીપ અને મોડલને ટૉગલ કરી શકાતું નથી. આ પરિપૂર્ણ કરવા માટે, રેપિંગ તત્વનો ઉપયોગ કરો.

પ્રોગ્રામેટિક API

અમે એમ પણ માનીએ છીએ કે તમે JavaScript API દ્વારા તમામ બુટસ્ટ્રેપ પ્લગિન્સનો સંપૂર્ણ ઉપયોગ કરી શકશો. તમામ સાર્વજનિક API એકલ, સાંકળવા યોગ્ય પદ્ધતિઓ છે અને તેના પર કાર્ય કરેલ સંગ્રહ પરત કરે છે.

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

બધી પદ્ધતિઓએ વૈકલ્પિક વિકલ્પો ઑબ્જેક્ટ સ્વીકારવી જોઈએ, એક સ્ટ્રિંગ જે કોઈ ચોક્કસ પદ્ધતિને લક્ષ્ય બનાવે છે, અથવા કંઈ નથી (જે ડિફૉલ્ટ વર્તન સાથે પ્લગઇન શરૂ કરે છે):

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

Constructorદરેક પ્લગઇન તેના કાચા કન્સ્ટ્રક્ટરને પ્રોપર્ટી પર પણ એક્સપોઝ કરે છે : $.fn.popover.Constructor. જો તમે કોઈ ચોક્કસ પ્લગઇન દાખલા મેળવવા માંગતા હો, તો તેને એક ઘટકમાંથી સીધા જ પુનઃપ્રાપ્ત કરો: $('[rel="popover"]').data('popover').

મૂળભૂત સુયોજનો

Constructor.DEFAULTSતમે પ્લગઇનના ઑબ્જેક્ટમાં ફેરફાર કરીને પ્લગઇન માટે ડિફૉલ્ટ સેટિંગ્સ બદલી શકો છો :

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

કોઈ સંઘર્ષ નથી

કેટલીકવાર અન્ય UI ફ્રેમવર્ક સાથે બુટસ્ટ્રેપ પ્લગિન્સનો ઉપયોગ કરવો જરૂરી છે. આ સંજોગોમાં, નેમસ્પેસની અથડામણ અવારનવાર થઈ શકે છે. .noConflictજો આવું થાય, તો તમે જે પ્લગઇનનું મૂલ્ય પાછું લાવવા માંગો છો તેના પર કૉલ કરી શકો છો.

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

ઘટનાઓ

બુટસ્ટ્રેપ મોટાભાગના પ્લગિન્સની અનન્ય ક્રિયાઓ માટે કસ્ટમ ઇવેન્ટ્સ પ્રદાન કરે છે. સામાન્ય રીતે, આ અનંત અને ભૂતકાળના પાર્ટિસિપલ સ્વરૂપમાં આવે છે - જ્યાં showઘટનાની શરૂઆતમાં અનંત (ઉદા. ) ટ્રિગર થાય છે, અને તેના ભૂતકાળના પાર્ટિસિપલ ફોર્મ (ઉદા. shown) ક્રિયા પૂર્ણ થવા પર ટ્રિગર થાય છે.

3.0.0 મુજબ, બધી બુટસ્ટ્રેપ ઇવેન્ટ નેમસ્પેસમાં છે.

બધી અનંત ઘટનાઓ preventDefaultકાર્યક્ષમતા પ્રદાન કરે છે. આ ક્રિયા શરૂ થાય તે પહેલાં તેના અમલને રોકવાની ક્ષમતા પૂરી પાડે છે.

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

સંસ્કરણ નંબરો

VERSIONદરેક બુટસ્ટ્રેપના jQuery પ્લગઈન્સનું વર્ઝન પ્લગઈનના કન્સ્ટ્રક્ટરની પ્રોપર્ટી દ્વારા એક્સેસ કરી શકાય છે . ઉદાહરણ તરીકે, ટૂલટિપ પ્લગઇન માટે:

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

જ્યારે JavaScript અક્ષમ હોય ત્યારે કોઈ ખાસ ફોલબેક નહીં

જ્યારે JavaScript અક્ષમ હોય ત્યારે બુટસ્ટ્રેપના પ્લગઈન્સ ખાસ કરીને આકર્ષક રીતે પાછા પડતા નથી. જો તમે આ કિસ્સામાં વપરાશકર્તાના અનુભવની કાળજી લેતા હો, તો તમારા વપરાશકર્તાઓને <noscript>પરિસ્થિતિ (અને કેવી રીતે JavaScript ફરીથી સક્ષમ કરવું) સમજાવવા અને/અથવા તમારા પોતાના કસ્ટમ ફૉલબેક્સ ઉમેરવા માટે ઉપયોગ કરો.

તૃતીય-પક્ષ પુસ્તકાલયો

બુટસ્ટ્રેપ પ્રોટોટાઇપ અથવા jQuery UI જેવી તૃતીય-પક્ષ JavaScript લાઇબ્રેરીઓને સત્તાવાર રીતે સમર્થન આપતું નથી . .noConflictઇવેન્ટ્સ અને નામ સ્થાન હોવા છતાં , ત્યાં સુસંગતતા સમસ્યાઓ હોઈ શકે છે જેને તમારે તમારા પોતાના પર ઠીક કરવાની જરૂર છે.

સંક્રમણો transition.js

સંક્રમણો વિશે

સરળ સંક્રમણ પ્રભાવો માટે, transition.jsઅન્ય JS ફાઇલોની સાથે એકવાર શામેલ કરો. જો તમે કમ્પાઈલ કરેલ (અથવા મિનિફાઈડ) નો ઉપયોગ કરી રહ્યાં છો bootstrap.js, તો આને સામેલ કરવાની કોઈ જરૂર નથી—તે પહેલેથી જ છે.

અંદર શું છે

Transition.js એ ઇવેન્ટ્સ માટે મૂળભૂત સહાયક transitionEndતેમજ CSS ટ્રાન્ઝિશન ઇમ્યુલેટર છે. તેનો ઉપયોગ અન્ય પ્લગઈનો દ્વારા CSS ટ્રાન્ઝિશન સપોર્ટની તપાસ કરવા અને હેંગિંગ ટ્રાન્ઝિશનને પકડવા માટે થાય છે.

સંક્રમણોને અક્ષમ કરી રહ્યાં છીએ

નીચેના JavaScript સ્નિપેટનો ઉપયોગ કરીને સંક્રમણોને વૈશ્વિક સ્તરે અક્ષમ કરી શકાય છે, જે લોડ થયા પછી transition.js(અથવા bootstrap.js, bootstrap.min.jsકેસ હોઈ શકે છે) આવવું જોઈએ:

$.support.transition = false

મોડલ્સ modal.js

મોડલ્સ સુવ્યવસ્થિત છે, પરંતુ લવચીક છે, ન્યૂનતમ જરૂરી કાર્યક્ષમતા અને સ્માર્ટ ડિફોલ્ટ્સ સાથે સંવાદ સંકેત આપે છે.

બહુવિધ ઓપન મોડલ સમર્થિત નથી

જ્યારે બીજું દૃશ્યમાન હોય ત્યારે મોડલ ન ખોલવાની ખાતરી કરો. એક સમયે એક કરતાં વધુ મોડલ બતાવવા માટે કસ્ટમ કોડની જરૂર છે.

મોડલ માર્કઅપ પ્લેસમેન્ટ

મોડલના દેખાવ અને/અથવા કાર્યક્ષમતાને અસર કરતા અન્ય ઘટકોને ટાળવા માટે હંમેશા તમારા દસ્તાવેજમાં મોડલના HTML કોડને ટોચના સ્તરની સ્થિતિમાં મૂકવાનો પ્રયાસ કરો.

મોબાઇલ ઉપકરણ ચેતવણીઓ

મોબાઇલ ઉપકરણો પર મોડલ્સનો ઉપયોગ કરવા અંગે કેટલીક ચેતવણીઓ છે. વિગતો માટે અમારા બ્રાઉઝર સપોર્ટ દસ્તાવેજો જુઓ .

HTML5 તેના અર્થશાસ્ત્રને કેવી રીતે વ્યાખ્યાયિત કરે છે તેના કારણે, autofocusબુટસ્ટ્રેપ મોડલમાં HTML વિશેષતાની કોઈ અસર થતી નથી. સમાન અસર પ્રાપ્ત કરવા માટે, કેટલીક કસ્ટમ JavaScript નો ઉપયોગ કરો:

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

ઉદાહરણો

સ્થિર ઉદાહરણ

હેડર, બોડી અને ફૂટરમાં ક્રિયાઓના સેટ સાથે રેન્ડર કરેલ મોડલ.

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

લાઈવ ડેમો

નીચેના બટનને ક્લિક કરીને JavaScript દ્વારા મોડલને ટૉગલ કરો. તે પૃષ્ઠની ટોચ પરથી નીચે સ્લાઇડ થશે અને ઝાંખું થઈ જશે.

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

મોડલ્સને સુલભ બનાવો

મોડલ શીર્ષકનો સંદર્ભ આપતાં, માટે અને પોતે role="dialog"ઉમેરવાની ખાતરી કરો .aria-labelledby="...".modalrole="document".modal-dialog

aria-describedbyવધુમાં, તમે ચાલુ સાથે તમારા મોડલ સંવાદનું વર્ણન આપી શકો છો .modal.

YouTube વિડિઓઝ એમ્બેડ કરવું

મોડલમાં YouTube વિડિઓઝને એમ્બેડ કરવા માટે પ્લેબેક અને વધુને આપમેળે બંધ કરવા માટે વધારાની JavaScript જરૂરી છે જે બુટસ્ટ્રેપમાં નથી. વધુ માહિતી માટે આ મદદરૂપ સ્ટેક ઓવરફ્લો પોસ્ટ જુઓ .

વૈકલ્પિક માપો

મોડલ્સમાં બે વૈકલ્પિક કદ હોય છે, જે મોડિફાયર વર્ગો દ્વારા ઉપલબ્ધ છે .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>

એનિમેશન દૂર કરો

જોવા માટે ઝાંખા પડવાને બદલે ખાલી દેખાતા મોડલ્સ માટે, .fadeતમારા મોડલ માર્કઅપમાંથી વર્ગને દૂર કરો.

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

ગ્રીડ સિસ્ટમનો ઉપયોગ કરીને

મોડલની અંદર બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમનો લાભ લેવા માટે, ફક્ત .rows નેસ્ટ કરો .modal-bodyઅને પછી સામાન્ય ગ્રીડ સિસ્ટમ વર્ગોનો ઉપયોગ કરો.

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

થોડી અલગ સામગ્રીઓ સાથે, બધા સમાન મોડલને ટ્રિગર કરતા બટનોનો સમૂહ છે? કયા બટન પર ક્લિક કરવામાં આવ્યું હતું તેના આધારે મોડલની સામગ્રીમાં ફેરફાર કરવા માટે (સંભવતઃ jQuery દ્વારા ) HTML લક્ષણોનો ઉપયોગ event.relatedTargetકરો . પર વિગતો માટે મોડલ ઇવેન્ટ્સ ડોક્સ જુઓ ,data-*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)
})

ઉપયોગ

મોડલ પ્લગઇન ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા માંગ પર તમારી છુપાયેલી સામગ્રીને ટૉગલ કરે છે. તે ડિફૉલ્ટ સ્ક્રોલિંગ વર્તણૂકને ઓવરરાઇડ .modal-openકરવા માટે પણ ઉમેરે છે અને મોડલની બહાર ક્લિક કરતી વખતે બતાવેલ મોડલ્સને કાઢી નાખવા માટે ક્લિક વિસ્તાર પ્રદાન કરવા માટે જનરેટ કરે છે.<body>.modal-backdrop

ડેટા લક્ષણો દ્વારા

JavaScript લખ્યા વિના મોડલ સક્રિય કરો. કંટ્રોલર એલિમેન્ટ પર સેટ કરો data-toggle="modal", જેમ કે બટન, સાથે data-target="#foo"અથવા href="#foo"ટૉગલ કરવા માટે ચોક્કસ મોડલને લક્ષ્ય બનાવવા માટે.

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

જાવાસ્ક્રિપ્ટ દ્વારા

myModalJavaScript ની એક લીટી સાથે id સાથે મોડલને કૉલ કરો :

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

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-backdrop="".

નામ પ્રકાર મૂળભૂત વર્ણન
પૃષ્ઠભૂમિ બુલિયન અથવા શબ્દમાળા'static' સાચું મોડલ-બેકડ્રોપ ઘટકનો સમાવેશ થાય છે. વૈકલ્પિક રીતે, staticબેકડ્રોપ માટે સ્પષ્ટ કરો કે જે ક્લિક પર મોડલ બંધ કરતું નથી.
કીબોર્ડ બુલિયન સાચું જ્યારે એસ્કેપ કી દબાવવામાં આવે ત્યારે મોડલ બંધ કરે છે
બતાવો બુલિયન સાચું જ્યારે પ્રારંભ થાય ત્યારે મોડલ બતાવે છે.
દૂરસ્થ માર્ગ ખોટું

આ વિકલ્પ v3.3.0 થી નાપસંદ છે અને v4 માં દૂર કરવામાં આવ્યો છે. અમે તેને બદલે ક્લાયંટ-સાઇડ ટેમ્પ્લેટિંગ અથવા ડેટા બાઈન્ડિંગ ફ્રેમવર્કનો ઉપયોગ કરવાની અથવા jQuery.load જાતે કૉલ કરવાની ભલામણ કરીએ છીએ.

જો રિમોટ URL આપવામાં આવે છે, તો સામગ્રીને jQuery ની પદ્ધતિ દ્વારા એકવાર લોડ કરવામાં આવશે અને div loadમાં ઇન્જેક્ટ કરવામાં આવશે . .modal-contentજો તમે ડેટા-એપીઆઈનો ઉપયોગ કરી રહ્યાં છો, તો તમે hrefરિમોટ સ્ત્રોતનો ઉલ્લેખ કરવા માટે વૈકલ્પિક રીતે એટ્રિબ્યુટનો ઉપયોગ કરી શકો છો. આનું ઉદાહરણ નીચે બતાવેલ છે:

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

પદ્ધતિઓ

તમારી સામગ્રીને મોડલ તરીકે સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object.

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

મૉડલને મેન્યુઅલી ટૉગલ કરે છે. મોડલ વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે ​​કે ઘટના shown.bs.modalઅથવા hidden.bs.modalઘટના બને તે પહેલાં).

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

મેન્યુઅલી મોડલ ખોલે છે. મોડલ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે ​​કે shown.bs.modalઘટના બને તે પહેલાં).

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

મેન્યુઅલી મોડલ છુપાવે છે. મોડલ વાસ્તવમાં છુપાયેલું હોય તે પહેલાં (એટલે ​​કે hidden.bs.modalઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે.

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

જો સ્ક્રોલબાર દેખાય તો તેનો સામનો કરવા માટે મોડલની સ્થિતિને ફરીથી ગોઠવે છે, જે મોડલને ડાબી તરફ જમ્પ કરશે.

જ્યારે મોડલ ખુલ્લું હોય ત્યારે તેની ઊંચાઈ બદલાય ત્યારે જ જરૂરી છે.

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

ઘટનાઓ

બુટસ્ટ્રેપનો મોડલ ક્લાસ મોડલ કાર્યક્ષમતામાં જોડાવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

તમામ મોડલ ઇવેન્ટ્સ મોડલ પર જ ફાયર કરવામાં આવે છે (એટલે ​​​​કે <div class="modal">).

ઇવેન્ટનો પ્રકાર વર્ણન
show.bs.modal showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે. જો ક્લિકને કારણે થયું હોય, તો ક્લિક કરેલ ઘટક relatedTargetઇવેન્ટની મિલકત તરીકે ઉપલબ્ધ છે.
બતાવેલ.bs.modal જ્યારે મોડલ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે). જો ક્લિકને કારણે થયું હોય, તો ક્લિક કરેલ ઘટક relatedTargetઇવેન્ટની મિલકત તરીકે ઉપલબ્ધ છે.
hide.bs.modal hideજ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.modal જ્યારે મોડલ વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
loaded.bs.modal remoteજ્યારે મોડલ વિકલ્પનો ઉપયોગ કરીને સામગ્રી લોડ કરે છે ત્યારે આ ઇવેન્ટને બરતરફ કરવામાં આવે છે .
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

ડ્રોપડાઉન dropdown.js

નવબાર, ટૅબ્સ અને ગોળીઓ સહિત આ સરળ પ્લગઇન વડે લગભગ કોઈપણ વસ્તુમાં ડ્રોપડાઉન મેનૂ ઉમેરો.

નવબારની અંદર

ગોળીઓ અંદર

ડેટા એટ્રિબ્યુટ્સ અથવા JavaScript દ્વારા, ડ્રોપડાઉન પ્લગઇન .openપિતૃ સૂચિ આઇટમ પર વર્ગને ટૉગલ કરીને છુપાયેલ સામગ્રી (ડ્રોપડાઉન મેનૂ) ને ટૉગલ કરે છે.

મોબાઇલ ઉપકરણો પર, ડ્રોપડાઉન ખોલવાથી .dropdown-backdropમેનૂની બહાર ટેપ કરતી વખતે ડ્રોપડાઉન મેનૂ બંધ કરવા માટે ટેપ વિસ્તાર તરીકે ઉમેરાય છે, યોગ્ય iOS સપોર્ટ માટેની આવશ્યકતા. આનો અર્થ એ છે કે ખુલ્લા ડ્રોપડાઉન મેનૂમાંથી અલગ ડ્રોપડાઉન મેનૂ પર સ્વિચ કરવા માટે મોબાઇલ પર વધારાના ટેપની જરૂર છે.

નોંધ: data-toggle="dropdown"એટ્રિબ્યુટ એપ્લીકેશન લેવલ પર ડ્રોપડાઉન મેનુ બંધ કરવા માટે આધાર રાખે છે, તેથી તેનો હંમેશા ઉપયોગ કરવો એ સારો વિચાર છે.

ડેટા લક્ષણો દ્વારા

data-toggle="dropdown"ડ્રોપડાઉનને ટૉગલ કરવા માટે લિંક અથવા બટનમાં ઉમેરો .

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

લિંક બટનો સાથે URL ને અકબંધ રાખવા માટે, data-targetની જગ્યાએ વિશેષતાનો ઉપયોગ કરો 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>

જાવાસ્ક્રિપ્ટ દ્વારા

JavaScript દ્વારા ડ્રોપડાઉનને કૉલ કરો:

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

data-toggle="dropdown"હજુ પણ જરૂરી છે

ભલે તમે JavaScript દ્વારા તમારા ડ્રોપડાઉનને કૉલ કરો અથવા તેના બદલે data-api નો ઉપયોગ કરો, data-toggle="dropdown"ડ્રોપડાઉનના ટ્રિગર તત્વ પર હંમેશા હાજર રહેવું જરૂરી છે.

કોઈ નહિ

આપેલ નેવબાર અથવા ટેબ કરેલ નેવિગેશનના ડ્રોપડાઉન મેનૂને ટોગલ કરે છે.

તમામ ડ્રોપડાઉન ઇવેન્ટ્સ .dropdown-menuના પેરેન્ટ એલિમેન્ટ પર ફાયર કરવામાં આવે છે.

તમામ ડ્રોપડાઉન ઇવેન્ટ્સમાં એક relatedTargetપ્રોપર્ટી હોય છે, જેનું મૂલ્ય ટૉગલિંગ એન્કર એલિમેન્ટ છે.

ઇવેન્ટનો પ્રકાર વર્ણન
show.bs.ડ્રોપડાઉન જ્યારે શો ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવેલ.bs.ડ્રોપડાઉન જ્યારે ડ્રોપડાઉન વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
hide.bs.ડ્રોપડાઉન જ્યારે હાઇડ ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.dropdown જ્યારે ડ્રોપડાઉન વપરાશકર્તાથી છુપાવવાનું સમાપ્ત થઈ જાય ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ScrollSpy scrollspy.js

નવબારમાં ઉદાહરણ

ScrollSpy પ્લગઇન સ્ક્રોલ સ્થિતિના આધારે નેવી લક્ષ્યોને આપમેળે અપડેટ કરવા માટે છે. નેવબારની નીચેનો વિસ્તાર સ્ક્રોલ કરો અને સક્રિય વર્ગમાં ફેરફાર જુઓ. ડ્રોપડાઉન પેટા વસ્તુઓ તેમજ હાઇલાઇટ કરવામાં આવશે.

@ચરબી

એડ લેગિંગ્સ કીટાર, બ્રંચ આઈડી આર્ટ પાર્ટી ડોલર લેબર. Pitchfork yr enim lo-fi પહેલાં તેઓ qui વેચાઈ ગયા. Tumblr ફાર્મ-ટુ-ટેબલ સાયકલ અધિકારો ગમે તે હોય. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. કોસ્બી સ્વેટર લોમો જીન શોર્ટ્સ, વિલિયમ્સબર્ગ હૂડી મિનિમ ક્વિ તમે કદાચ તેમના વિશે સાંભળ્યું નથી અને કાર્ડિગન ટ્રસ્ટ ફંડ કુલ્પા બાયોડીઝલ વેસ એન્ડરસન એસ્થેટિક. નિહિલ ટેટૂ એક્યુસેમસ, ક્રેડ ઈરોની બાયોડીઝલ કેફીયેહ કારીગર ઉલમકો પરિણામ.

@mdo

વેનિઅમ માર્ફા મૂછો સ્કેટબોર્ડ, એડિપિસિસિંગ ફ્યુગિયાટ વેલીટ પિચફોર્ક દાઢી. ફ્રીગન બીયર્ડ એલીક્વા કપિડેટેટ મેક્સવીની વેરો. ક્યુપિડેટટ ફોર લોકો નિસી, ઇએ હેલ્વેટિકા નુલ્લા કાર્લેસ. ટેટૂ કોસ્બી સ્વેટર ફૂડ ટ્રક, mcsweeney's quis non freegan vinyl. લો-ફાઇ વેસ એન્ડરસન +1 સાર્ટોરિયલ. કાર્લેસ નોન એસ્થેટિક એક્સરસિટેશન ક્વિસ નમ્રતા. બ્રુકલિન એડિપીસીસિંગ ક્રાફ્ટ બીયર વાઇસ કીટાર ડેઝરન્ટ.

એક

Occaecat commodo aliqua delectus. Fap ક્રાફ્ટ બીયર ડેઝરન્ટ સ્કેટબોર્ડ ea. લોમો સાયકલ રાઇટ્સ એડિપીસીસિંગ બન્હ મી, વેલીટ ઇએ સન નેક્સ્ટ લેવલ લોકાવોર સિંગલ-ઓરિજિન કોફી ઇન મેગ્ના વેનિઆમ. હાઇ લાઇફ આઇડી વિનાઇલ, ઇકો પાર્ક કન્ઝક્વેટ ક્વિસ એલિક્વિપ બન્હ મી પિચફોર્ક. વેરો VHS એ એડિપિસિસિંગ છે. DIY ન્યૂનતમ મેસેન્જર બેગ સાથે જોડો. Cred ex in, ટકાઉ ડેલેકટસ કોન્સેક્ટેટુર ફેની પેક આઇફોન.

બે

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

three

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

કીટાર ટ્વી બ્લોગ, કુલ્પા મેસેન્જર બેગ માર્ફા ગમે તે ડિલેકટસ ફૂડ ટ્રક. Sapiente synth id ધારણા. Locavore sed helvetica cliche irony, thundercats તમે કદાચ તેમના વિશે સાંભળ્યું ન હોય પરિણામે હૂડી ગ્લુટેન-ફ્રી lo-fi fap aliquip. તેઓ વેચાઈ જાય તે પહેલાં લેબોર એલિટ પ્લેસિટ, ટેરી રિચર્ડસન પ્રોડેન્ટ બ્રંચ નેસિયન્ટ ક્વિસ કોસ્બી સ્વેટર પેરિયાતુર કેફિયેહ યુટ હેલ્વેટિકા આર્ટિસન. કાર્ડિગન ક્રાફ્ટ બીયર સીટન રેડીમેડ વેલીટ. VHS ચેમ્બ્રે લેબરિસ ટેમ્પર વેનિઅમ. એનિમ મોલીટ મિનિમ કોમોડો ઉલમકો થંડરકેટ્સ.

ઉપયોગ

બુટસ્ટ્રેપ નેવી જરૂરી છે

સક્રિય લિંક્સના યોગ્ય હાઇલાઇટિંગ માટે સ્ક્રોલસ્પાયને હાલમાં બુટસ્ટ્રેપ એનએવી ઘટકનો ઉપયોગ કરવાની જરૂર છે.

ઉકેલી શકાય તેવા ID લક્ષ્યો જરૂરી છે

Navbar લિંક્સમાં ઉકેલી શકાય તેવા id લક્ષ્યો હોવા આવશ્યક છે. ઉદાહરણ તરીકે, <a href="#home">home</a>DOM માં કંઈક અનુરૂપ હોવું જોઈએ જેમ કે <div id="home"></div>.

બિન- :visibleલક્ષ્ય તત્વો અવગણવામાં

:visiblejQuery અનુસાર ન હોય તેવા લક્ષ્ય તત્વોને અવગણવામાં આવશે અને તેમની અનુરૂપ નેવી આઇટમ્સ ક્યારેય હાઇલાઇટ કરવામાં આવશે નહીં.

સંબંધિત સ્થિતિની જરૂર છે

position: relative;અમલીકરણ પદ્ધતિથી કોઈ ફરક પડતો નથી, સ્ક્રોલસ્પાય માટે તમે જે તત્વની જાસૂસી કરી રહ્યાં છો તેના ઉપયોગની જરૂર છે . મોટા ભાગના કિસ્સાઓમાં આ છે <body>. જ્યારે આ સિવાયના તત્વો પર સ્ક્રોલસ્પી કરી રહ્યા <body>હોય, ત્યારે ખાતરી કરો કે heightસેટ અને overflow-y: scroll;લાગુ કરો.

ડેટા લક્ષણો દ્વારા

તમારા ટોપબાર નેવિગેશનમાં સરળતાથી સ્ક્રોલસ્પી વર્તન ઉમેરવા data-spy="scroll"માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ઉમેરો (મોટાભાગે આ હશે <body>). પછી data-targetકોઈપણ બુટસ્ટ્રેપ ઘટકના પેરેંટ એલિમેન્ટના ID અથવા વર્ગ સાથે વિશેષતા ઉમેરો .nav.

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

જાવાસ્ક્રિપ્ટ દ્વારા

તમારા CSS માં ઉમેર્યા પછી position: relative;, JavaScript દ્વારા scrollspy ને કૉલ કરો:

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

પદ્ધતિઓ

.scrollspy('refresh')

DOM માંથી ઘટકો ઉમેરવા અથવા દૂર કરવા સાથે સ્ક્રોલસ્પીનો ઉપયોગ કરતી વખતે, તમારે રિફ્રેશ પદ્ધતિને આના જેવી કૉલ કરવાની જરૂર પડશે:

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

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-offset="".

નામ પ્રકાર મૂળભૂત વર્ણન
ઓફસેટ સંખ્યા 10 સ્ક્રોલની સ્થિતિની ગણતરી કરતી વખતે ઉપરથી ઓફસેટ કરવા માટેના પિક્સેલ્સ.

ઘટનાઓ

ઇવેન્ટનો પ્રકાર વર્ણન
activate.bs.scrollspy જ્યારે પણ સ્ક્રોલસ્પી દ્વારા નવી આઇટમ સક્રિય થાય છે ત્યારે આ ઇવેન્ટ ફાયર થાય છે.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

ટૉગલ કરી શકાય તેવી ટૅબ્સ tab.js

ઉદાહરણ ટૅબ્સ

ડ્રોપડાઉન મેનૂ દ્વારા પણ, સ્થાનિક સામગ્રીના ફલક દ્વારા સંક્રમણ કરવા માટે ઝડપી, ગતિશીલ ટેબ કાર્યક્ષમતા ઉમેરો. નેસ્ટેડ ટૅબ્સ સમર્થિત નથી.

કાચો ડેનિમ તમે કદાચ તેમને જીન શોર્ટ્સ ઓસ્ટિન વિશે સાંભળ્યું નથી. Nesciunt tofu stumptown aliqua, retro synth master cleanse. મૂછ ક્લિચ ટેમ્પોર, વિલિયમ્સબર્ગ કાર્લેસ વેગન હેલ્વેટિકા. Reprehenderit butcher retro keffiyeh dreamcatcher synth. કોસ્બી સ્વેટર ઇયુ બાન મી, ક્વિ ઇર ટેરી રિચર્ડસન ભૂતપૂર્વ સ્ક્વિડ. એલિક્વિપ પ્લેસેટ સાલ્વીયા સિલમ આઇફોન. Seitan aliquip quis cardigan American apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

ટૅબ કરેલ નેવિગેશનને વિસ્તૃત કરે છે

આ પ્લગઇન ટેબેબલ વિસ્તારો ઉમેરવા માટે ટેબ કરેલ નેવિગેશન ઘટકને વિસ્તૃત કરે છે.

ઉપયોગ

જાવાસ્ક્રિપ્ટ દ્વારા ટેબેબલ ટેબ્સને સક્ષમ કરો (દરેક ટેબને વ્યક્તિગત રીતે સક્રિય કરવાની જરૂર છે):

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

તમે વ્યક્તિગત ટેબને ઘણી રીતે સક્રિય કરી શકો છો:

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

માર્કઅપ

તમે કોઈ પણ જાવાસ્ક્રિપ્ટ લખ્યા વિના ટેબ અથવા પિલ નેવિગેશનને ફક્ત સ્પષ્ટ કરીને data-toggle="tab"અથવા data-toggle="pill"તત્વ પર સક્રિય કરી શકો છો. navટેબમાં અને nav-tabsવર્ગો ઉમેરવાથી ulબુટસ્ટ્રેપ ટેબ સ્ટાઇલ લાગુ થશે , જ્યારે navઅને nav-pillsવર્ગો ઉમેરવાથી પિલ સ્ટાઇલ લાગુ થશે .

<div>

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

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

</div>

ફેડ અસર

ટૅબ્સને ફેડ ઇન કરવા માટે, .fadeદરેકમાં ઉમેરો .tab-pane. પ્રથમ ટ���બ ફલકમાં પણ .inપ્રારંભિક સામગ્રી દૃશ્યમાન હોવી આવશ્યક છે.

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

પદ્ધતિઓ

$().tab

ટેબ ઘટક અને સામગ્રી કન્ટેનર સક્રિય કરે છે. ટૅબમાં DOM માં કન્ટેનર નોડને લક્ષિત કરવા માટે એક data-targetઅથવા એક હોવું જોઈએ. hrefઉપરોક્ત ઉદાહરણોમાં, ટેબ એ એટ્રિબ્યુટ્સ <a>સાથે s છે.data-toggle="tab"

.tab('show')

આપેલ ટેબ પસંદ કરે છે અને તેની સાથે સંકળાયેલ સામગ્રી દર્શાવે છે. કોઈપણ અન્ય ટેબ કે જે અગાઉ પસંદ કરવામાં આવી હતી તે નાપસંદ થઈ જાય છે અને તેની સાથે સંકળાયેલ સામગ્રી છુપાયેલ છે. ટેબ પેન વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે ​​કે shown.bs.tabઇવેન્ટ થાય તે પહેલાં).

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

ઘટનાઓ

નવી ટેબ બતાવતી વખતે, ઇવેન્ટ્સ નીચેના ક્રમમાં ફાયર થાય છે:

  1. hide.bs.tab(વર્તમાન સક્રિય ટેબ પર)
  2. show.bs.tab(બતાવવાના ટેબ પર)
  3. hidden.bs.tab(અગાઉના સક્રિય ટૅબ પર, hide.bs.tabઇવેન્ટની જેમ જ)
  4. shown.bs.tab(નવા-સક્રિય-હમણાં-બતાવેલ ટેબ પર, show.bs.tabઇવેન્ટની જેમ જ)

જો કોઈ ટેબ પહેલાથી જ સક્રિય ન હોય, તો પછી hide.bs.tabઅને hidden.bs.tabઇવેન્ટ્સને ફાયર કરવામાં આવશે નહીં.

ઇવેન્ટનો પ્રકાર વર્ણન
show.bs.tab આ ઇવેન્ટ ટેબ શો પર ફાયર થાય છે, પરંતુ નવી ટેબ બતાવવામાં આવે તે પહેલાં. અનુક્રમે સક્રિય ટેબ અને અગાઉના સક્રિય ટેબ (જો ઉપલબ્ધ હોય તો) નો ઉપયોગ કરો event.targetઅને તેને લક્ષ્ય બનાવો.event.relatedTarget
બતાવેલ.bs.tab આ ઇવેન્ટ ટેબ બતાવ્યા પછી ટેબ શો પર ફાયર થાય છે. અનુક્રમે સક્રિય ટેબ અને અગાઉના સક્રિય ટેબ (જો ઉપલબ્ધ હોય તો) નો ઉપયોગ કરો event.targetઅને તેને લક્ષ્ય બનાવો.event.relatedTarget
hide.bs.tab જ્યારે નવી ટેબ બતાવવાની હોય ત્યારે આ ઇવેન્ટ ફાયર થાય છે (અને આમ અગાઉની સક્રિય ટેબ છુપાવવાની હોય છે). અનુક્રમે વર્તમાન સક્રિય ટેબ અને નવા ટૂંક સમયમાં સક્રિય થનારી ટેબનો ઉપયોગ કરો event.targetઅને લક્ષ્યાંકિત કરો.event.relatedTarget
hidden.bs.tab નવી ટેબ દર્શાવ્યા પછી આ ઇવેન્ટ ફાયર થાય છે (અને આમ અગાઉની સક્રિય ટેબ છુપાયેલ છે). અનુક્રમે અગાઉના સક્રિય ટેબ અને નવા સક્રિય ટેબનો ઉપયોગ કરો event.targetઅને તેને લક્ષ્ય બનાવો.event.relatedTarget
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

ટૂલટિપ્સ tooltip.js

જેસન ફ્રેમ દ્વારા લખાયેલા ઉત્તમ jQuery.tipsy પ્લગઇનથી પ્રેરિત; ટૂલટિપ્સ એ અપડેટેડ વર્ઝન છે, જે ઈમેજીસ પર આધાર રાખતું નથી, એનિમેશન માટે CSS3 અને સ્થાનિક શીર્ષક સ્ટોરેજ માટે ડેટા-એટ્રીબ્યુટ્સનો ઉપયોગ કરે છે.

શૂન્ય-લંબાઈના શીર્ષકો સાથેની ટૂલટિપ્સ ક્યારેય પ્રદર્શિત થતી નથી.

ઉદાહરણો

ટૂલટિપ્સ જોવા માટે નીચેની લિંક્સ પર હોવર કરો:

ચુસ્ત પેન્ટ આગામી સ્તર keffiyeh તમે કદાચ તેમના વિશે સાંભળ્યું નથી. ફોટો બૂથ દાઢી કાચી ડેનિમ લેટરપ્રેસ વેગન મેસેન્જર બેગ સ્ટમ્પટાઉન. ફાર્મ-ટુ-ટેબલ સીટન, મેક્સવીની ફિક્સી સસ્ટેનેબલ ક્વિનોઆ 8-બીટ અમેરિકન એપેરલમાં ટેરી રિચર્ડસન વિનાઇલ ચેમ્બ્રે છે . દાઢી સ્ટમ્પટાઉન, કાર્ડિગન્સ બન્હ મી લોમો થંડરકેટ્સ. ટોફુ બાયોડીઝલ વિલિયમ્સબર્ગ માર્ફા, ચાર લોકો મેક્સવીની ક્લીન્સ વેગન ચેમ્બ્રે. એક ખરેખર માર્મિક કારીગર ગમે તે કીતાર , સીનસ્ટર ફાર્મ-ટુ-ટેબલ બેંકસી ઓસ્ટિન ટ્વિટર હેન્ડલ ફ્રીગન ક્રેડ રો ડેનિમ સિંગલ-ઓરિજિન કોફી વાયરલ.

સ્ટેટિક ટુલટિપ

ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત.

ચાર દિશાઓ

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

ઑપ્ટ-ઇન કાર્યક્ષમતા

પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે, એટલે કે તમારે તેમને જાતે જ પ્રારંભ કરવું પડશે .

પૃષ્ઠ પરની તમામ ટૂલટિપ્સને આરંભ કરવાની એક રીત એ છે કે તેમને તેમની data-toggleવિશેષતા દ્વારા પસંદ કરવી:

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

ઉપયોગ

ટૂલટિપ પ્લગઇન માંગ પર સામગ્રી અને માર્કઅપ જનરેટ કરે છે અને ડિફૉલ્ટ રૂપે તેમના ટ્રિગર ઘટક પછી ટૂલટિપ્સ મૂકે છે.

JavaScript દ્વારા ટૂલટિપને ટ્રિગર કરો:

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

માર્કઅપ

ટૂલટિપ માટે જરૂરી માર્કઅપ માત્ર એક dataવિશેષતા છે અને titleHTML એલિમેન્ટ પર તમે ટૂલટિપ રાખવા માંગો છો. ટૂલટિપનું જનરેટ કરેલ માર્કઅપ એકદમ સરળ છે, જો કે તેને પોઝિશનની જરૂર છે (ડિફૉલ્ટ રૂપે, topપ્લગઇન દ્વારા સેટ કરેલ છે).

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

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

બહુવિધ-લાઇન લિંક્સ

કેટલીકવાર તમે હાયપરલિંકમાં ટૂલટિપ ઉમેરવા માંગો છો જે બહુવિધ રેખાઓને આવરિત કરે છે. ટૂલટિપ પ્લગઇનનું ડિફોલ્ટ વર્તન તેને આડા અને ઊભી રીતે કેન્દ્રમાં રાખવાનું છે. white-space: nowrap;આને ટાળવા માટે તમારા એન્કરમાં ઉમેરો .

બટન જૂથો, ઇનપુટ જૂથો અને કોષ્ટકોમાં ટૂલટિપ્સને વિશિષ્ટ સેટિંગની જરૂર છે

.btn-groupજ્યારે a અથવા an .input-group, અથવા ટેબલ-સંબંધિત તત્વો ( <td>, <th>, <tr>, , <thead>, <tbody>, ) ની અંદરના ઘટકો પર ટૂલટિપ્સનો ઉપયોગ કરતી વખતે, તમારે અનિચ્છનીય આડઅસરો (જેમ કે તત્વ વ્યાપકપણે વધતા અને/) ટાળવા <tfoot>માટે વિકલ્પ (નીચે દસ્તાવેજીકૃત) નો ઉલ્લેખ કરવો પડશે. container: 'body'અથવા જ્યારે ટૂલટિપ ટ્રિગર થાય ત્યારે તેના ગોળાકાર ખૂણા ગુમાવે છે).

છુપાયેલા તત્વો પર ટૂલટિપ્સ બતાવવાનો પ્રયાસ કરશો નહીં

$(...).tooltip('show')જ્યારે લક્ષ્ય તત્વ હોય ત્યારે બોલાવવાથી display: none;ટૂલટિપ ખોટી રીતે સ્થિત થશે.

કીબોર્ડ અને સહાયક તકનીક વપરાશકર્તાઓ માટે સુલભ ટૂલટિપ્સ

tabindex="0"કીબોર્ડ વડે નેવિગેટ કરતા વપરાશકર્તાઓ અને ખાસ કરીને સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ માટે, તમારે ફક્ત કીબોર્ડ-ફોકસેબલ તત્વો જેમ કે લિંક્સ, ફોર્મ કંટ્રોલ અથવા એટ્રિબ્યુટ સાથે કોઈપણ મનસ્વી ઘટકમાં ટૂલટિપ્સ ઉમેરવી જોઈએ .

અક્ષમ તત્વો પરની ટૂલટિપ્સને રેપર તત્વોની જરૂર છે

disabledએક અથવા તત્વમાં ટૂલટિપ ઉમેરવા માટે .disabled, a ની અંદર તત્વ મૂકો અને તેના બદલે <div>ટૂલટિપ લાગુ કરો .<div>

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-animation="".

નામ પ્રકાર ડિફૉલ્ટ વર્ણન
એનિમેશન બુલિયન સાચું ટૂલટિપ પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો
કન્ટેનર શબ્દમાળા | ખોટું ખોટું

ચોક્કસ તત્વ સાથે ટૂલટિપ જોડે છે. ઉદાહરણ container: 'body':. આ વિકલ્પ ખાસ કરીને ઉપયોગી છે કારણ કે તે તમને ટ્રિગરિંગ એલિમેન્ટની નજીકના દસ્તાવેજના પ્રવાહમાં ટૂલટિપને સ્થાન આપવા માટે પરવાનગી આપે છે - જે વિન્ડો રિસાઇઝ દરમિયાન ટ્રિગરિંગ એલિમેન્ટથી ટૂલટિપને તરતી અટકાવશે.

વિલંબ નંબર | પદાર્થ 0

ટૂલટિપ (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી

જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે

ઑબ્જેક્ટ માળખું છે:delay: { "show": 500, "hide": 100 }

html બુલિયન ખોટું ટૂલટીપમાં HTML દાખલ કરો. textજો ખોટું હોય, તો DOM માં સામગ્રી દાખલ કરવા માટે jQuery ની પદ્ધતિનો ઉપયોગ કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો.
પ્લેસમેન્ટ શબ્દમાળા | કાર્ય 'ટોચ'

ટૂલટીપને કેવી રીતે સ્થાન આપવું - ટોચ | નીચે | ડાબે | અધિકાર | ઓટો
જ્યારે "ઓટો" નો ઉલ્લેખ કરવામાં આવે છે, ત્યારે તે ટૂલટીપને ગતિશીલ રીતે પુનઃપ્રાગિત કરશે. ઉદાહરણ તરીકે, જો પ્લેસમેન્ટ "ઓટો લેફ્ટ" હોય, તો જ્યારે શક્ય હોય ત્યારે ટૂલટીપ ડાબી તરફ પ્રદર્શિત થશે, અન્યથા તે જમણે પ્રદર્શિત થશે.

જ્યારે પ્લેસમેન્ટ નક્કી કરવા માટે ફંક્શનનો ઉપયોગ કરવામાં આવે છે, ત્યારે તેને ટૂલટિપ DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ thisટૂલટિપ ઉદાહરણ પર સેટ કરેલ છે.

પસંદગીકાર તાર ખોટું જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો ટૂલટિપ ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ ટૂલટિપ્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. અને એક માહિતીપ્રદ ઉદાહરણ જુઓ .
નમૂનો તાર '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ટૂલટિપ બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML.

ટૂલટીપને titleમાં ઇન્જેક્ટ કરવામાં આવશે .tooltip-inner.

.tooltip-arrowટૂલટીપનું તીર બનશે.

સૌથી બહારના રેપર તત્વમાં .tooltipવર્ગ હોવો જોઈએ.

શીર્ષક શબ્દમાળા | કાર્ય ''

titleજો વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ શીર્ષક મૂલ્ય .

જો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને તે તત્વ સાથે તેના thisસંદર્ભ સાથે બોલાવવામાં આવશે જેની સાથે ટૂલટીપ જોડાયેલ છે.

ટ્રિગર તાર 'હોવર ફોકસ' ટૂલટિપ કેવી રીતે ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. manualઅન્ય કોઈપણ ટ્રિગર સાથે જોડી શકાતું નથી.
વ્યુપોર્ટ શબ્દમાળા | પદાર્થ | કાર્ય { પસંદગીકાર: 'બોડી', પેડિંગ: 0 }

આ તત્વની સીમામાં ટૂલટીપ રાખે છે. ઉદાહરણ: viewport: '#viewport'અથવા{ "selector": "#viewport", "padding": 0 }

જો ફંક્શન આપવામાં આવે છે, તો તેને ટ્રિગરિંગ એલિમેન્ટ DOM નોડ સાથે તેની એકમાત્ર દલીલ તરીકે કહેવામાં આવે છે. સંદર્ભ thisટૂલટિપ ઉદાહરણ પર સેટ કરેલ છે.

વ્યક્તિગત ટૂલટિપ્સ માટે ડેટા લક્ષણો

વ્યક્તિગત ટૂલટિપ્સ માટેના વિકલ્પો વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.

પદ્ધતિઓ

$().tooltip(options)

તત્વ સંગ્રહમાં ટૂલટિપ હેન્ડલર જોડે છે.

.tooltip('show')

તત્વની ટૂલટિપ દર્શાવે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે ​​કે shown.bs.tooltipઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે. શૂન્ય-લંબાઈના શીર્ષકો સાથેની ટૂલટિપ્સ ક્યારેય પ્રદર્શિત થતી નથી.

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

.tooltip('hide')

તત્વની ટૂલટિપ છુપાવે છે. ટૂલટિપ વાસ્તવમાં છુપાઈ જાય તે પહેલાં (એટલે ​​કે hidden.bs.tooltipઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે.

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

.tooltip('toggle')

તત્વની ટૂલટિપને ટૉગલ કરે છે. ટૂલટિપ વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે ​​કે ઘટના shown.bs.tooltipઅથવા hidden.bs.tooltipઘટના બને તે પહેલાં). આને ટૂલટિપનું "મેન્યુઅલ" ટ્રિગરિંગ ગણવામાં આવે છે.

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

.tooltip('destroy')

તત્વની ટૂલટિપ છુપાવે છે અને નાશ કરે છે. ટૂલટિપ્સ કે જે પ્રતિનિધિમંડળનો ઉપયોગ કરે છે (જે વિકલ્પનો ઉપયોગ કરીનેselector બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતી નથી.

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

ઘટનાઓ

ઇવેન્ટનો પ્રકાર વર્ણન
show.bs.ટૂલટિપ showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવેલ.bs.ટૂલટિપ જ્યારે ટૂલટિપ વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
hide.bs.tooltip hideજ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.tooltip જ્યારે ટૂલટિપ વપરાશકર્તાથી છુપાયેલું સમાપ્ત થઈ જાય ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
inserted.bs.tooltip show.bs.tooltipજ્યારે ટૂલટિપ ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

Popovers popover.js

હાઉસિંગ ગૌણ માહિતી માટે કોઈપણ ઘટકમાં, iPad પરની જેમ સામગ્રીના નાના ઓવરલે ઉમેરો.

પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લંબાઈના હોય તે ક્યારેય પ્રદર્શિત થતા નથી.

પ્લગઇન નિર્ભરતા

પોપોવર્સને બુટસ્ટ્રેપના તમારા સંસ્કરણમાં ટૂલટિપ પ્લગઇન શામેલ કરવાની જરૂર છે.

ઑપ્ટ-ઇન કાર્યક્ષમતા

પ્રદર્શનના કારણોસર, ટૂલટિપ અને પોપઓવર ડેટા-એપીસ પસંદ કરવામાં આવે છે, એટલે કે તમારે તેમને જાતે જ પ્રારંભ કરવું પડશે .

પૃષ્ઠ પરના તમામ પોપોવર્સને પ્રારંભ કરવાની એક રીત એ છે કે તેમને તેમની data-toggleવિશેષતા દ્વારા પસંદ કરવી:

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

બટન જૂથો, ઇનપુટ જૂથો અને કોષ્ટકોમાં પોપોવર્સને વિશિષ્ટ સેટિંગની જરૂર છે

.btn-groupજ્યારે a અથવા an .input-group, અથવા ટેબલ-સંબંધિત તત્વો ( <td>, <th>, <tr>, , <thead>, <tbody>, ) ની અંદરના તત્વો પર પોપોવર્સનો ઉપયોગ કરતી વખતે, તમારે અનિચ્છનીય આડ અસરોને ટાળવા <tfoot>માટે વિકલ્પ (નીચે દસ્તાવેજીકૃત) નો ઉલ્લેખ કરવો પડશે (જેમ કે તત્વ વધુ વ્યાપક અને/ container: 'body'અથવા જ્યારે પોપઓવર ટ્રિગર થાય ત્યારે તેના ગોળાકાર ખૂણા ગુમાવે છે).

છુપાયેલા તત્વો પર પોપોવર્સ બતાવવાનો પ્રયાસ કરશો નહીં

$(...).popover('show')જ્યારે લક્ષ્ય તત્વ હોય ત્યારે બોલાવવાથી પોપઓવર display: none;ખોટી રીતે સ્થિત થશે.

અક્ષમ તત્વો પરના પોપોવર્સને રેપર તત્વોની જરૂર છે

disabledએક અથવા તત્વમાં પોપઓવર ઉમેરવા માટે .disabled, તત્વને a ની અંદર મૂકો અને તેના બદલે તેના <div>પર પોપઓવર લાગુ કરો .<div>

બહુવિધ-લાઇન લિંક્સ

કેટલીકવાર તમે હાઇપરલિંકમાં પોપઓવર ઉમેરવા માંગો છો જે બહુવિધ લાઇનોને આવરિત કરે છે. પોપઓવર પ્લગઈનની ડિફોલ્ટ વર્તણૂક તેને આડી અને ઊભી રીતે કેન્દ્રમાં રાખવાની છે. white-space: nowrap;આને ટાળવા માટે તમારા એન્કરમાં ઉમેરો .

ઉદાહરણો

સ્થિર પોપઓવર

ચાર વિકલ્પો ઉપલબ્ધ છે: ઉપર, જમણે, નીચે અને ડાબે સંરેખિત.

પોપઓવર ટોપ

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

પોપઓવર અધિકાર

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

પોપઓવર તળિયે

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

પોપઓવર બાકી છે

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

લાઈવ ડેમો

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

ચાર દિશાઓ

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

આગલી ક્લિક પર કાઢી નાખો

focusવપરાશકર્તા કરે છે તે આગલી ક્લિક પર પોપઓવરને કાઢી નાખવા માટે ટ્રિગરનો ઉપયોગ કરો .

ડિસમિસ-ઓન-નેક્સ્ટ-ક્લિક માટે ચોક્કસ માર્કઅપ જરૂરી છે

યોગ્ય ક્રોસ-બ્રાઉઝર અને ક્રોસ-પ્લેટફોર્મ વર્તણૂક માટે, તમારે ટૅગનો ઉપયોગ કરવો જોઈએ <a>, ટૅગનો નહીં<button> , અને તમારે role="button"અને tabindexવિશેષતાઓનો પણ સમાવેશ કરવો જોઈએ.

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

ઉપયોગ

JavaScript દ્વારા પોપોવર્સ સક્ષમ કરો:

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

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-animation="".

નામ પ્રકાર ડિફૉલ્ટ વર્ણન
એનિમેશન બુલિયન સાચું પોપઓવર પર CSS ફેડ ટ્રાન્ઝિશન લાગુ કરો
કન્ટેનર શબ્દમાળા | ખોટું ખોટું

પોપઓવરને ચોક્કસ તત્વ સાથે જોડે છે. ઉદાહરણ container: 'body':. આ વિકલ્પ ખાસ કરીને ઉપયોગી છે કારણ કે તે તમને ટ્રિગરિંગ એલિમેન્ટની નજીકના ડોક્યુમેન્ટના ફ્લોમાં પોપઓવરને પોઝિશન કરવાની મંજૂરી આપે છે - જે વિન્ડો રિસાઈઝ દરમિયાન પોપઓવરને ટ્રિગરિંગ એલિમેન્ટથી દૂર જતા અટકાવશે.

સામગ્રી શબ્દમાળા | કાર્ય ''

data-contentજો વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ સામગ્રી મૂલ્ય .

thisજો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને પોપઓવર સાથે જોડાયેલ તત્વ સાથે તેના સંદર્ભ સેટ સાથે બોલાવવામાં આવશે .

વિલંબ નંબર | પદાર્થ 0

પોપઓવર (ms) બતાવવામાં અને છુપાવવામાં વિલંબ - મેન્યુઅલ ટ્રિગર પ્રકાર પર લાગુ થતો નથી

જો નંબર પૂરો પાડવામાં આવે છે, તો છુપાવો/શો બંને માટે વિલંબ લાગુ પડે છે

ઑબ્જેક્ટ માળખું છે:delay: { "show": 500, "hide": 100 }

html બુલિયન ખોટું પોપઓવરમાં HTML દાખલ કરો. textજો ખોટું હોય, તો DOM માં સામગ્રી દાખલ કરવા માટે jQuery ની પદ્ધતિનો ઉપયોગ કરવામાં આવશે. જો તમે XSS હુમલાઓ વિશે ચિંતિત હોવ તો ટેક્સ્ટનો ઉપયોગ કરો.
પ્લેસમેન્ટ શબ્દમાળા | કાર્ય 'જમણું'

કેવી રીતે પોપઓવર - ટોપ | નીચે | ડાબે | અધિકાર | ઓટો
જ્યારે "ઓટો" નો ઉલ્લેખ કરવામાં આવે છે, ત્યારે તે પોપઓવરને ગતિશીલ રીતે પુનઃપ્રાપ્ત કરશે. ઉદાહરણ તરીકે, જો પ્લેસમેન્ટ "ઓટો લેફ્ટ" હોય, તો પોપઓવર શક્ય હોય ત્યારે ડાબી તરફ પ્રદર્શિત થશે, અન્યથા તે જમણે પ્રદર્શિત થશે.

જ્યારે ફંક્શનનો ઉપયોગ પ્લેસમેન્ટ નક્કી કરવા માટે થાય છે, ત્યારે તેને પોપઓવર DOM નોડ સાથે તેની પ્રથમ દલીલ તરીકે અને ટ્રિગરિંગ ઘટક DOM નોડને તેના બીજા તરીકે કહેવામાં આવે છે. સંદર્ભ thisપોપઓવર દાખલા પર સેટ કરેલ છે.

પસંદગીકાર તાર ખોટું જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો પોપઓવર ઑબ્જેક્ટ્સ ઉલ્લેખિત લક્ષ્યોને સોંપવામાં આવશે. વ્યવહારમાં, આનો ઉપયોગ પોપોવર્સ ઉમેરવા માટે ગતિશીલ HTML સામગ્રીને સક્ષમ કરવા માટે થાય છે. અને એક માહિતીપ્રદ ઉદાહરણ જુઓ .
નમૂનો તાર '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

પોપઓવર બનાવતી વખતે ઉપયોગ કરવા માટે બેઝ HTML.

પોપઓવરને titleમાં ઇન્જેક્ટ કરવામાં આવશે .popover-title.

પોપઓવરને contentમાં ઇન્જેક્ટ કરવામાં આવશે .popover-content.

.arrowપોપઓવરનું તીર બની જશે.

સૌથી બહારના રેપર તત્વમાં .popoverવર્ગ હોવો જોઈએ.

શીર્ષક શબ્દમાળા | કાર્ય ''

titleજો વિશેષતા હાજર ન હોય તો ડિફૉલ્ટ શીર્ષક મૂલ્ય .

thisજો કોઈ ફંક્શન આપવામાં આવ્યું હોય, તો તેને પોપઓવર સાથે જોડાયેલ તત્વ સાથે તેના સંદર્ભ સેટ સાથે બોલાવવામાં આવશે .

ટ્રિગર તાર 'ક્લિક કરો' પોપઓવર કેવી રીતે ટ્રિગર થાય છે - ક્લિક કરો | હોવર | ફોકસ | મેન્યુઅલ તમે બહુવિધ ટ્રિગર્સ પસાર કરી શકો છો; તેમને જગ્યા સાથે અલગ કરો. manualઅન્ય કોઈપણ ટ્રિગર સાથે જોડી શકાતું નથી.
વ્યુપોર્ટ શબ્દમાળા | પદાર્થ | કાર્ય { પસંદગીકાર: 'બોડી', પેડિંગ: 0 }

પોપઓવરને આ તત્વની સીમામાં રાખે છે. ઉદાહરણ: viewport: '#viewport'અથવા{ "selector": "#viewport", "padding": 0 }

જો ફંક્શન આપવામાં આવે છે, તો તેને ટ્રિગરિંગ એલિમેન્ટ DOM નોડ સાથે તેની એકમાત્ર દલીલ તરીકે કહેવામાં આવે છે. સંદર્ભ thisપોપઓવર દાખલા પર સેટ કરેલ છે.

વ્યક્તિગત પોપોવર્સ માટે ડેટા લક્ષણો

વ્યક્તિગત પોપોવર્સ માટેના વિકલ્પોને વૈકલ્પિક રીતે ડેટા એટ્રિબ્યુટ્સના ઉપયોગ દ્વારા સ્પષ્ટ કરી શકાય છે, જેમ ઉપર સમજાવ્યું છે.

પદ્ધતિઓ

$().popover(options)

તત્વ સંગ્રહ માટે પોપોવર્સનો પ્રારંભ કરે છે.

.popover('show')

તત્વના પોપઓવરને દર્શાવે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે તે પહેલાં કોલરને પરત કરે છે (એટલે ​​કે shown.bs.popoverઘટના બને તે પહેલાં). આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે. પોપોવર કે જેનું શીર્ષક અને સામગ્રી બંને શૂન્ય-લંબાઈના હોય તે ક્યારેય પ્રદર્શિત થતા નથી.

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

.popover('hide')

તત્વના પોપઓવરને છુપાવે છે. પોપઓવર વાસ્તવમાં છુપાયેલ હોય તે પહેલાં (એટલે ​​કે hidden.bs.popoverઘટના બને તે પહેલાં) કોલર પાસે પરત આવે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.

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

.popover('toggle')

તત્વના પોપઓવરને ટૉગલ કરે છે. પોપઓવર વાસ્તવમાં બતાવવામાં આવે અથવા છુપાવવામાં આવે તે પહેલાં (એટલે ​​કે ઘટના shown.bs.popoverઅથવા hidden.bs.popoverઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે. આને પોપઓવરનું "મેન્યુઅલ" ટ્રિગરિંગ માનવામાં આવે છે.

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

.popover('destroy')

તત્વના પોપઓવરને છુપાવે છે અને તેનો નાશ કરે છે. ડેલિગેશનનો ઉપયોગ કરતા પોપોવર્સ (જે વિકલ્પનો ઉપયોગ કરીનેselector બનાવવામાં આવે છે ) વંશજ ટ્રિગર તત્વો પર વ્યક્તિગત રીતે નાશ કરી શકાતા નથી.

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

ઘટનાઓ

ઇવેન્ટનો પ્રકાર વર્ણન
show.bs.popover showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
દર્શાવવામાં આવ્યું છે.bs.popover જ્યારે પોપઓવર વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
hide.bs.popover hideજ્યારે ઇન્સ્ટન્સ મેથડ બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.popover જ્યારે પોપઓવર વપરાશકર્તાથી છુપાવવાનું સમાપ્ત કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
inserted.bs.popover show.bs.popoverજ્યારે પોપઓવર ટેમ્પલેટ DOM માં ઉમેરવામાં આવ્યું હોય ત્યારે આ ઇવેન્ટને ઇવેન્ટ પછી ફાયર કરવામાં આવે છે.
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})

ચેતવણી સંદેશાઓ alert.js

ઉદાહરણ ચેતવણીઓ

આ પ્લગઇન સાથેના તમામ ચેતવણી સંદેશાઓમાં ડિસમિસ કાર્યક્ષમતા ઉમેરો.

બટનનો ઉપયોગ કરતી વખતે .close, તે પ્રથમ બાળક હોવું જોઈએ .alert-dismissibleઅને માર્કઅપમાં તેની પહેલાં કોઈ ટેક્સ્ટ સામગ્રી આવી શકશે નહીં.

ઉપયોગ

data-dismiss="alert"આપમેળે ચેતવણી બંધ કાર્યક્ષમતા આપવા માટે ફક્ત તમારા બંધ બટનમાં ઉમેરો . ચેતવણી બંધ કરવાથી તે DOM માંથી દૂર થાય છે.

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

તમારી ચેતવણીઓ બંધ કરતી વખતે એનિમેશનનો ઉપયોગ કરવા માટે, ખાતરી કરો કે તેમની પાસે પહેલાથી જ .fadeઅને .inવર્ગો લાગુ છે.

પદ્ધતિઓ

$().alert()

data-dismiss="alert"એટ્રિબ્યુટ ધરાવતા વંશજ તત્વો પર ક્લિક ઇવેન્ટ્સ માટે ચેતવણી સાંભળે છે . (ડેટા-એપીઆઈના સ્વતઃ-પ્રારંભિકરણનો ઉપયોગ કરતી વખતે જરૂરી નથી.)

$().alert('close')

ચેતવણીને DOM માંથી દૂર કરીને બંધ કરે છે. જો .fadeઅને .inવર્ગો તત્વ પર હાજર હોય, તો તેને દૂર કરવામાં આવે તે પહેલાં ચેતવણી ઝાંખી થઈ જશે.

ઘટનાઓ

બુટસ્ટ્રેપનું ચેતવણી પ્લગઇન ચેતવણી કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

ઇવેન્ટનો પ્રકાર વર્ણન
બંધ.બીએસ.એલર્ટ closeજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બંધ.બીએસ.એલર્ટ જ્યારે ચેતવણી બંધ કરવામાં આવી હોય ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})

બટનો button.js

બટનો સાથે વધુ કરો. કંટ્રોલ બટન જણાવે છે અથવા ટૂલબાર જેવા વધુ ઘટકો માટે બટનોના જૂથો બનાવો.

ક્રોસ બ્રાઉઝર સુસંગતતા

ફાયરફોક્સ સમગ્ર પૃષ્ઠ લોડ પર નિયંત્રણ સ્થિતિઓ (અક્ષમતા અને તપાસ) ચાલુ રાખે છે . આ માટેનો ઉપાય વાપરવાનો છે autocomplete="off". મોઝિલા બગ #654072 જુઓ .

સ્ટેટફુલ

data-loading-text="Loading..."બટન પર લોડિંગ સ્થિતિનો ઉપયોગ કરવા માટે ઉમેરો .

આ સુવિધા v3.3.5 થી દૂર કરવામાં આવી છે અને v4 માં દૂર કરવામાં આવી છે.

તમને ગમે તે રાજ્યનો ઉપયોગ કરો!

આ પ્રદર્શન ખાતર, અમે ઉપયોગ કરી રહ્યા છીએ data-loading-textઅને $().button('loading'), પરંતુ તે એકમાત્ર રાજ્ય નથી જેનો તમે ઉપયોગ કરી શકો. દસ્તાવેજીકરણમાં નીચે આના પર વધુ જુઓ$().button(string) .

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

સિંગલ ટૉગલ

data-toggle="button"એક બટન પર ટોગલીંગ સક્રિય કરવા માટે ઉમેરો .

પ્રી-ટોગલ કરેલ બટનોની જરૂર છે .activeઅનેaria-pressed="true"

પ્રી-ટૉગલ કરેલા બટનો માટે, તમારે .activeક્લાસ અને aria-pressed="true"એટ્રિબ્યુટ તમારામાં ઉમેરવું આવશ્યક છે button.

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

ચેકબોક્સ / રેડિયો

તેમની સંબંધિત શૈલીમાં ટૉગલિંગને સક્ષમ કરવા માટે ધરાવતા ચેકબોક્સ અથવા રેડિયો ઇનપુટ્સમાં data-toggle="buttons"ઉમેરો ..btn-group

પહેલાથી પસંદ કરેલા વિકલ્પોની જરૂર છે.active

પૂર્વપસંદ કરેલ વિકલ્પો માટે, તમારે જાતે .activeજ ઇનપુટમાં વર્ગ ઉમેરવો પડશે.label

વિઝ્યુઅલ ચેક કરેલી સ્થિતિ ફક્ત ક્લિક પર અપડેટ થાય છે

જો ચેકબૉક્સ બટનની ચેક કરેલ સ્થિતિ બટન clickપર ઇવેન્ટને ફાયર કર્યા વિના અપડેટ કરવામાં આવે છે (દા.ત. ઇનપુટની પ્રોપર્ટી <input type="reset">સેટ કરીને અથવા મારફતે ), તમારે ઇનપુટના જાતે ક્લાસને checkedટૉગલ કરવાની જરૂર પડશે ..activelabel

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

પદ્ધતિઓ

$().button('toggle')

ટૉગલ પુશ સ્ટેટ. બટનને એવો દેખાવ આપે છે કે તે સક્રિય થઈ ગયું છે.

$().button('reset')

બટન સ્થિતિ રીસેટ કરે છે - ટેક્સ્ટને મૂળ ટેક્સ્ટમાં સ્વેપ કરે છે. આ પદ્ધતિ અસુમેળ છે અને રીસેટિંગ વાસ્તવમાં પૂર્ણ થાય તે પહેલાં પરત કરે છે.

$().button(string)

કોઈપણ ડેટા વ્યાખ્યાયિત ટેક્સ્ટ સ્ટેટમાં ટેક્સ્ટને સ્વેપ કરે છે.

<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
  ...
</button>

<script>
  $('#myStateButton').on('click', function () {
    $(this).button('complete') // button text will be "finished!"
  })
</script>

Collapse.js સંકુચિત કરો

લવચીક પ્લગઇન જે સરળ ટૉગલ વર્તન માટે મુઠ્ઠીભર વર્ગોનો ઉપયોગ કરે છે.

પ્લગઇન નિર્ભરતા

સંકુચિત કરવા માટે તમારા બુટસ્ટ્રેપના સંસ્કરણમાં સંક્રમણ પ્લગઇન શામેલ કરવાની જરૂર છે.

ઉદાહરણ

વર્ગ ફેરફારો દ્વારા અન્ય ઘટક બતાવવા અને છુપાવવા માટે નીચેના બટનો પર ક્લિક કરો:

  • .collapseસામગ્રી છુપાવે છે
  • .collapsingસંક્રમણો દરમિયાન લાગુ કરવામાં આવે છે
  • .collapse.inસામગ્રી બતાવે છે

તમે hrefએટ્રિબ્યુટ સાથેની લિંક અથવા એટ્રિબ્યુટ સાથેના બટનનો ઉપયોગ કરી શકો છો data-target. બંને કિસ્સાઓમાં, data-toggle="collapse"તે જરૂરી છે.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

એકોર્ડિયન ઉદાહરણ

પેનલ ઘટક સાથે એકોર્ડિયન બનાવવા માટે ડિફોલ્ટ સંકુચિત વર્તનને વિસ્તૃત કરો.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 વુલ્ફ મૂન ઑફિસિયા ઓટ, નોન કપિડેટેટ સ્કેટબોર્ડ ડોલર બ્રંચ. ફૂડ ટ્રક quinoa nesciunt laborum eiusmod. બ્રંચ 3 વુલ્ફ મૂન ટેમ્પોર, સનટ એલિક્વા તેના પર એક પક્ષી મૂકે છે સ્ક્વિડ સિંગલ-ઓરિજિન કોફી નુલ્લા એસુમેન્ડા શોરેડિચ એટ. નિહિલ એનિમ કેફીયેહ હેલ્વેટિકા, ક્રાફ્ટ બીયર લેબર વેસ એન્ડરસન ક્રેડ નેસિયન્ટ સેપિએન્ટ ઇએ પ્રોડેન્ટ. એડ વેગન સિવાય કસાઈ વાઇસ લોમો. લેગિંગ્સ occaecat ક્રાફ્ટ બીયર ફાર્મ-ટુ-ટેબલ, કાચો ડેનિમ સૌંદર્યલક્ષી સિન્થ nesciunt જે તમે કદાચ તેમના વિશે સાંભળ્યું નહીં હોય.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 વુલ્ફ મૂન ઑફિસિયા ઓટ, નોન કપિડેટેટ સ્કેટબોર્ડ ડોલર બ્રંચ. ફૂડ ટ્રક quinoa nesciunt laborum eiusmod. બ્રંચ 3 વુલ્ફ મૂન ટેમ્પોર, સનટ એલિક્વા તેના પર એક પક્ષી મૂકે છે સ્ક્વિડ સિંગલ-ઓરિજિન કોફી નુલ્લા એસુમેન્ડા શોરેડિચ એટ. નિહિલ એનિમ કેફીયેહ હેલ્વેટિકા, ક્રાફ્ટ બીયર લેબર વેસ એન્ડરસન ક્રેડ નેસિયન્ટ સેપિએન્ટ ઇએ પ્રોડેન્ટ. એડ વેગન સિવાય કસાઈ વાઇસ લોમો. લેગિંગ્સ occaecat ક્રાફ્ટ બીયર ફાર્મ-ટુ-ટેબલ, કાચો ડેનિમ સૌંદર્યલક્ષી સિન્થ nesciunt જે તમે કદાચ તેમના વિશે સાંભળ્યું નહીં હોય.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry richardson ad squid. 3 વુલ્ફ મૂન ઑફિસિયા ઓટ, નોન કપિડેટેટ સ્કેટબોર્ડ ડોલર બ્રંચ. ફૂડ ટ્રક quinoa nesciunt laborum eiusmod. બ્રંચ 3 વુલ્ફ મૂન ટેમ્પોર, સનટ એલિક્વા તેના પર એક પક્ષી મૂકે છે સ્ક્વિડ સિંગલ-ઓરિજિન કોફી નુલ્લા એસુમેન્ડા શોરેડિચ એટ. નિહિલ એનિમ કેફીયેહ હેલ્વેટિકા, ક્રાફ્ટ બીયર લેબર વેસ એન્ડરસન ક્રેડ નેસિયન્ટ સેપિએન્ટ ઇએ પ્રોડેન્ટ. એડ વેગન સિવાય કસાઈ વાઇસ લોમો. લેગિંગ્સ occaecat ક્રાફ્ટ બીયર ફાર્મ-ટુ-ટેબલ, કાચો ડેનિમ સૌંદર્યલક્ષી સિન્થ nesciunt જે તમે કદાચ તેમના વિશે સાંભળ્યું નહીં હોય.
<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>

.panel-bodys ને s સાથે સ્વેપ કરવું પણ શક્ય છે .list-group.

  • બુટપ્લાય
  • એક ઇટમસ એસી ફેસિલિન
  • બીજા ઇરોસ

વિસ્તરણ/સંકુચિત નિયંત્રણોને ઍક્સેસિબલ બનાવો

aria-expandedનિયંત્રણ તત્વ ઉમેરવાની ખાતરી કરો . આ વિશેષતા સ્ક્રીન રીડર્સ અને સમાન સહાયક તકનીકો માટે સંકુચિત તત્વની વર્તમાન સ્થિતિને સ્પષ્ટપણે વ્યાખ્યાયિત કરે છે. જો સંકુચિત તત્વ મૂળભૂત રીતે બંધ હોય, તો તેનું મૂલ્ય હોવું જોઈએ aria-expanded="false". inજો તમે વર્ગનો ઉપયોગ કરીને સંકુચિત તત્વને ડિફૉલ્ટ રૂપે ખોલવા માટે સેટ કર્યું હોય , aria-expanded="true"તો તેના બદલે નિયંત્રણ પર સેટ કરો. સંકુચિત તત્વ ખોલવામાં આવ્યું છે કે બંધ કરવામાં આવ્યું છે કે નહીં તેના આધારે પ્લગઇન આ લક્ષણને આપમેળે ટૉગલ કરશે.

વધુમાં, જો તમારું નિયંત્રણ તત્વ એક જ સંકુચિત તત્વને લક્ષ્ય બનાવી રહ્યું છે - એટલે કે data-targetવિશેષતા પસંદગીકાર તરફ નિર્દેશ કરી રહી છે - તો તમે સંકુચિત તત્વને સમાવતા નિયંત્રણ ઘટકમાં idવધારાની વિશેષતા ઉમેરી શકો છો . આધુનિક સ્ક્રીન રીડર્સ અને સમાન સહાયક તકનીકો વપરાશકર્તાઓને સંકુચિત તત્વ પર સીધા જ નેવિગેટ કરવા માટે વધારાના શૉર્ટકટ્સ પ્રદાન કરવા માટે આ વિશેષતાનો ઉપયોગ કરે છે.aria-controlsid

ઉપયોગ

પતન પ્લગઇન ભારે લિફ્ટિંગને હેન્ડલ કરવા માટે કેટલાક વર્ગોનો ઉપયોગ કરે છે:

  • .collapseસામગ્રી છુપાવે છે
  • .collapse.inસામગ્રી બતાવે છે
  • .collapsingજ્યારે સંક્રમણ શરૂ થાય ત્યારે ઉમેરવામાં આવે છે, અને જ્યારે તે સમાપ્ત થાય ત્યારે દૂર કરવામાં આવે છે

આ વર્ગો માં મળી શકે છે component-animations.less.

ડેટા લક્ષણો દ્વારા

સંકુચિત તત્વનું નિયંત્રણ આપમેળે સોંપવા માટે ઘટકમાં ફક્ત data-toggle="collapse"અને a ઉમેરો . data-targetસંકુચિતતા data-targetલાગુ કરવા માટે વિશેષતા CSS પસંદગીકારને સ્વીકારે છે. collapseસંકુચિત તત્વમાં વર્ગ ઉમેરવાની ખાતરી કરો . જો તમે તેને ડિફોલ્ટ ખોલવા માંગતા હો, તો વધારાનો વર્ગ ઉમેરો in.

સંકુચિત નિયંત્રણમાં એકોર્ડિયન જેવા જૂથ સંચાલન ઉમેરવા માટે, ડેટા વિશેષતા ઉમેરો data-parent="#selector". આને ક્રિયામાં જોવા માટે ડેમોનો સંદર્ભ લો.

જાવાસ્ક્રિપ્ટ દ્વારા

આની સાથે મેન્યુઅલી સક્ષમ કરો:

$('.collapse').collapse()

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-parent="".

નામ પ્રકાર મૂળભૂત વર્ણન
પિતૃ પસંદગીકાર ખોટું જો પસંદગીકાર પ્રદાન કરવામાં આવે, તો જ્યારે આ સંકુચિત આઇટમ બતાવવામાં આવે ત્યારે ઉલ્લેખિત પેરેન્ટ હેઠળના તમામ સંકુચિત ઘટકો બંધ થઈ જશે. (પરંપરાગત એકોર્ડિયન વર્તન જેવું જ - આ panelવર્ગ પર આધારિત છે)
ટૉગલ બુલિયન સાચું ઇન્વોકેશન પર સંકુચિત ઘટકને ટૉગલ કરે છે

પદ્ધતિઓ

.collapse(options)

સંકુચિત તત્વ તરીકે તમારી સામગ્રીને સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object.

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

.collapse('toggle')

સંકુચિત તત્વને બતાવવામાં અથવા છુપાવવા માટે ટૉગલ કરે છે. સંકુચિત તત્વ વાસ્તવમાં બતાવવામાં આવે અથવા છુપાયેલ હોય તે પહેલાં કૉલર પર પાછા ફરે છે (એટલે ​​કે ઘટના shown.bs.collapseઅથવા hidden.bs.collapseઘટના બને તે પહેલાં).

.collapse('show')

સંકુચિત તત્વ બતાવે છે. સંકુચિત તત્વ વાસ્તવમાં બતાવવામાં આવે તે પહેલાં (એટલે ​​કે shown.bs.collapseઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે.

.collapse('hide')

સંકુચિત તત્વ છુપાવે છે. સંકુચિત તત્વ વાસ્તવમાં છુપાયેલું હોય તે પહેલાં (એટલે ​​કે hidden.bs.collapseઘટના બને તે પહેલાં) કૉલર પર પાછા ફરે છે.

ઘટનાઓ

બુટસ્ટ્રેપનો પતન વર્ગ સંકુચિત કાર્યક્ષમતામાં હૂક કરવા માટે કેટલીક ઘટનાઓને ઉજાગર કરે છે.

ઇવેન્ટનો પ્રકાર વર્ણન
show.bs.collapse showજ્યારે ઇન્સ્ટન્સ પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
બતાવવામાં આવ્યું.bs.collaps જ્યારે સંકુચિત ઘટક વપરાશકર્તાને દૃશ્યક્ષમ બનાવવામાં આવે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
hide.bs.collapse hideજ્યારે પદ્ધતિને બોલાવવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ કાઢી નાખવામાં આવે છે.
hidden.bs.collapse જ્યારે સંકુચિત ઘટક વપરાશકર્તાથી છુપાયેલ હોય ત્યારે આ ઇવેન્ટ ફાયર કરવામાં આવે છે (CSS સંક્રમણો પૂર્ણ થવાની રાહ જોશે).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

કેરોયુઝલ carousel.js

કેરોયુઝલ જેવા તત્વો દ્વારા સાયકલ ચલાવવા માટેનો સ્લાઇડશો ઘટક. નેસ્ટેડ કેરોયુસેલ્સ સપોર્ટેડ નથી.

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

વૈકલ્પિક કૅપ્શન્સ

.carousel-captionકોઈપણ ની અંદર તત્વ સાથે સરળતાથી તમારી સ્લાઇડ્સમાં કૅપ્શન્સ ઉમેરો .item. ત્યાં લગભગ કોઈપણ વૈકલ્પિક HTML મૂકો અને તે આપમેળે સંરેખિત અને ફોર્મેટ થઈ જશે.

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

બહુવિધ હિંડોળા

કેરોયુઝલને યોગ્ય રીતે કાર્ય કરવા માટે કેરોયુઝલ નિયંત્રણો માટે idસૌથી બહારના કન્ટેનર (the ) નો ઉપયોગ કરવાની જરૂર છે . .carouselબહુવિધ કેરોયુઝલ ઉમેરતી વખતે, અથવા કેરોયુઝલ બદલતી વખતે id, સંબંધિત નિયંત્રણોને અપડેટ કરવાની ખાતરી કરો.

ડેટા લક્ષણો દ્વારા

કેરોયુઝલની સ્થિતિને સરળતાથી નિયંત્રિત કરવા માટે ડેટા વિશેષતાઓનો ઉપયોગ કરો. data-slideકીવર્ડ્સ સ્વીકારે છે prevઅથવા next, જે સ્લાઇડની સ્થિતિને તેની વર્તમાન સ્થિતિની તુલનામાં બદલે છે. વૈકલ્પિક રીતે, data-slide-toકાચા સ્લાઇડ ઇન્ડેક્સને કેરોયુઝલમાં પસાર કરવા માટે ઉપયોગ કરો data-slide-to="2", જે સ્લાઇડની સ્થિતિને ચોક્કસ અનુક્રમણિકામાં શિફ્ટ કરે છે0 .

data-ride="carousel"એટ્રિબ્યુટનો ઉપયોગ કેરોયુઝલને પૃષ્ઠ લોડથી શરૂ કરીને એનિમેટિંગ તરીકે ચિહ્નિત કરવા માટે થાય છે . તેનો ઉપયોગ સમાન કેરોયુઝલના (અનર્થક અને બિનજરૂરી) સ્પષ્ટ JavaScript આરંભ સાથે સંયોજનમાં કરી શકાતો નથી.

જાવાસ્ક્રિપ્ટ દ્વારા

કેરોયુઝલને મેન્યુઅલી આની સાથે કૉલ કરો:

$('.carousel').carousel()

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-interval="".

નામ પ્રકાર મૂળભૂત વર્ણન
અંતરાલ સંખ્યા 5000 આઇટમને આપમેળે સાયકલ ચલાવવામાં વિલંબ થવાનો સમય. જો ખોટુ હોય, તો કેરોયુઝલ આપમેળે ચક્રમાં આવશે નહીં.
વિરામ શબ્દમાળા | નલ "હોવર" જો પર સેટ કરેલ હોય "hover", તો કેરોયુઝલની સાયકલિંગ ચાલુને થોભાવે છે અને કેરોયુઝલની mouseenterસાયકલ ચાલુ કરવાનું ફરી શરૂ કરે છે mouseleave. જો પર સેટ કરેલ હોય null, તો કેરોયુઝલ પર હોવર કરવાથી તે થોભાવશે નહીં.
લપેટી બુલિયન સાચું કેરોયુઝલ સતત સાયકલ ચલાવવું જોઈએ કે સખત સ્ટોપ હોવું જોઈએ.
કીબોર્ડ બુલિયન સાચું કેરોયુઝલ કીબોર્ડ ઇવેન્ટ્સ પર પ્રતિક્રિયા આપવી જોઈએ કે કેમ.

વૈકલ્પિક વિકલ્પો સાથે કેરોયુઝલની શરૂઆત કરે છે objectઅને વસ્તુઓ દ્વારા સાયકલ ચલાવવાનું શરૂ કરે છે.

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

કેરોયુઝલ આઇટમ દ્વારા ડાબેથી જમણે સાયકલ કરો.

કેરોયુઝલને વસ્તુઓ દ્વારા સાયકલ ચલાવવાથી રોકે છે.

કેરોયુઝલને ચોક્કસ ફ્રેમ પર સાયકલ કરે છે (0 આધારિત, એરેની જેમ).

પાછલી આઇટમ પર ચક્ર.

આગલી આઇટમ પર સાયકલ.

બુટસ્ટ્રેપનો કેરોયુઝલ વર્ગ કેરોયુઝલ કાર્યક્ષમતામાં હૂક કરવા માટે બે ઘટનાઓને ઉજાગર કરે છે.

બંને ઇવેન્ટ્સમાં નીચેના વધારાના ગુણધર્મો છે:

  • direction: કેરોયુઝલ જે દિશામાં સરકતું હોય તે દિશામાં (ક્યાં તો "left"અથવા "right").
  • relatedTarget: DOM ઘટક કે જે સક્રિય આઇટમ તરીકે સ્થાને સરકવામાં આવી રહ્યું છે.

તમામ કેરોયુઝલ ઇવેન્ટ્સ કેરોયુઝલ પર જ ફાયર કરવામાં આવે છે (એટલે ​​​​કે <div class="carousel">).

ઇવેન્ટનો પ્રકાર વર્ણન
slide.bs.carousel slideજ્યારે ઇન્સ્ટન્સ પદ્ધતિનો ઉપયોગ કરવામાં આવે ત્યારે આ ઇવેન્ટ તરત જ ફાયર થાય છે.
slid.bs.carousel જ્યારે કેરોયુઝલ તેનું સ્લાઇડ સંક્રમણ પૂર્ણ કરે છે ત્યારે આ ઇવેન્ટને ફાયર કરવામાં આવે છે.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

affix.js _

ઉદાહરણ

એફિક્સ પ્લગઇન position: fixed;સાથે મળેલી અસરનું અનુકરણ કરીને ચાલુ અને બંધ ટૉગલ કરે છે position: sticky;. જમણી બાજુએ સબનેવિગેશન એ એફિક્સ પ્લગઇનનો જીવંત ડેમો છે.


ઉપયોગ

ડેટા એટ્રિબ્યુટ્સ દ્વારા અથવા તમારી પોતાની JavaScript સાથે મેન્યુઅલી એફિક્સ પ્લગઇનનો ઉપયોગ કરો.બંને પરિસ્થિતિઓમાં, તમારે તમારી જોડેલી સામગ્રીની સ્થિતિ અને પહોળાઈ માટે CSS પ્રદાન કરવું આવશ્યક છે.

નોંધ: Safari રેન્ડરિંગ બગને કારણે, ખેંચાયેલ અથવા દબાણ કરેલ કૉલમ જેવા પ્રમાણમાં સ્થિત ઘટકમાં સમાવિષ્ટ ઘટક પર affix પ્લગઇનનો ઉપયોગ કરશો નહીં .

CSS દ્વારા પોઝિશનિંગ

એફિક્સ પ્લગઇન ત્રણ વર્ગો વચ્ચે ટૉગલ કરે છે, દરેક ચોક્કસ રાજ્યનું પ્રતિનિધિત્વ કરે છે: .affix, .affix-top, અને .affix-bottom. વાસ્તવિક સ્થિતિને હેન્ડલ કરવા માટે તમારે આ વર્ગો માટે (આ ​​પ્લગઇનથી સ્વતંત્ર) position: fixed;પરના અપવાદ સાથે, શૈલીઓ પ્રદાન કરવી આવશ્યક છે ..affix

અફિક્સ પ્લગઇન કેવી રીતે કાર્ય કરે છે તે અહીં છે:

  1. શરૂ કરવા માટે, પ્લગઇન ઉમેરે છે.affix-top છે કે ઘટક તેની ટોચની સ્થિતિમાં છે. આ બિંદુએ કોઈ CSS પોઝિશનિંગ જરૂરી નથી.
  2. તમે જે તત્વને જોડવા માંગો છો તેમાંથી પસાર થવાથી વાસ્તવિક જોડાણને ટ્રિગર કરવું જોઈએ. આ તે છે જ્યાં .affixબદલાય છે .affix-topઅને સેટ કરે છે position: fixed;(બૂટસ્ટ્રેપના CSS દ્વારા પ્રદાન કરવામાં આવે છે).
  3. જો તળિયે ઑફસેટ વ્યાખ્યાયિત કરવામાં આવે છે, તો ભૂતકાળમાં સ્ક્રોલ કરીને તેને .affixસાથે બદલવું જોઈએ .affix-bottom. ઑફસેટ્સ વૈકલ્પિક હોવાથી, એક સેટ કરવા માટે તમારે યોગ્ય CSS સેટ કરવાની જરૂર છે. આ કિસ્સામાં, position: absolute;જ્યારે જરૂરી હોય ત્યારે ઉમેરો. પ્લગઇન ડેટા એટ્રિબ્યુટ અથવા JavaScript વિકલ્પનો ઉપયોગ કરે છે તે નક્કી કરવા માટે કે તત્વને ત્યાંથી ક્યાં સ્થાન આપવું.

નીચેના કોઈપણ ઉપયોગ વિકલ્પો માટે તમારા CSS સેટ કરવા માટે ઉપરોક્ત પગલાં અનુસરો.

ડેટા લક્ષણો દ્વારા

કોઈપણ તત્વમાં સરળતાથી affix વર્તણૂક ઉમેરવા data-spy="affix"માટે, તમે જે તત્વની જાસૂસી કરવા માંગો છો તેમાં ફક્ત ઉમેરો. એલિમેન્ટના પિનિંગને ક્યારે ટૉગલ કરવું તે નિર્ધારિત કરવા માટે ઑફસેટ્સનો ઉપયોગ કરો.

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

જાવાસ્ક્રિપ્ટ દ્વારા

JavaScript દ્વારા affix પ્લગઇનને કૉલ કરો:

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

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-offset-top="200".

નામ પ્રકાર મૂળભૂત વર્ણન
ઓફસેટ નંબર | કાર્ય | પદાર્થ 10 સ્ક્રોલની સ્થિતિની ગણતરી કરતી વખતે સ્ક્રીનમાંથી ઑફસેટ કરવા માટે પિક્સેલ્સ. જો એક જ નંબર આપવામાં આવે છે, તો ઑફસેટ ઉપર અને નીચે બંને દિશામાં લાગુ કરવામાં આવશે. અનન્ય, નીચે અને ટોચની ઑફસેટ પ્રદાન કરવા માટે ફક્ત ઑબ્જેક્ટ પ્રદાન કરો offset: { top: 10 }અથવા offset: { top: 10, bottom: 5 }. જ્યારે તમારે ઑફસેટની ગતિશીલ રીતે ગણતરી કરવાની જરૂર હોય ત્યારે ફંક્શનનો ઉપયોગ કરો.
લક્ષ્ય પસંદગીકાર | નોડ | jQuery તત્વ windowપદાર્થ _ એફિક્સના લક્ષ્ય તત્વને સ્પષ્ટ કરે છે.

પદ્ધતિઓ

.affix(options)

તમારી સામગ્રીને જોડેલી સામગ્રી તરીકે સક્રિય કરે છે. વૈકલ્પિક વિકલ્પો સ્વીકારે છે object.

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

.affix('checkPosition')

સંબંધિત ઘટકોના પરિમાણો, સ્થિતિ અને સ્ક્રોલ સ્થિતિના આધારે જોડાણની સ્થિતિની પુનઃ ગણતરી કરે છે. , .affix, .affix-topઅને .affix-bottomવર્ગો નવી સ્થિતિ અનુસાર જોડાયેલ સામગ્રીમાં ઉમેરવામાં અથવા દૂર કરવામાં આવે છે. આ પદ્ધતિને જ્યારે પણ જોડવામાં આવેલ સામગ્રીના પરિમાણો અથવા લક્ષ્ય તત્વ બદલવામાં આવે ત્યારે બોલાવવાની જરૂર છે, જેથી ચોંટેલી સામગ્રીની સાચી સ્થિતિ સુનિશ્ચિત કરી શકાય.

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

ઘટનાઓ

બુટસ્ટ્રેપનું એફિક્સ પ્લગઇન એફિક્સ કાર્યક્ષમતા સાથે જોડાવા માટે કેટલીક ઇવેન્ટ્સને ઉજાગર કરે છે.

ઇવેન્ટનો પ્રકાર વર્ણન
affix.bs.affix આ ઘટના તત્વને ચોંટાડવામાં આવે તે પહેલાં તરત જ ફાયર થાય છે.
affixed.bs.affix તત્વ ચોંટાડ્યા પછી આ ઇવેન્ટને બરતરફ કરવામાં આવે છે.
affix-top.bs.affix આ ઘટના તત્વને ટોચ પર ચોંટાડવામાં આવે તે પહેલાં તરત જ ફાયર થાય છે.
affixed-top.bs.affix તત્વને ટોચ પર ચોંટાડવામાં આવ્યા પછી આ ઇવેન્ટને બરતરફ કરવામાં આવે છે.
affix-bottom.bs.affix આ ઘટના તત્વને ચોંટાડવામાં આવે તે પહેલાં તરત જ ફાયર થાય છે.
affixed-bottom.bs.affix તત્વ ચોંટી ગયા પછી આ ઇવેન્ટને બરતરફ કરવામાં આવે છે.