JavaScript · Bootstrap በአማርኛ

የግለሰብ ወይም የተጠናቀረ

ተሰኪዎች በተናጥል ሊካተቱ ይችላሉ (የ Bootstrapን ነጠላ *.jsፋይሎችን በመጠቀም) ወይም ሁሉንም በአንድ ጊዜ ( bootstrap.jsየተቀነሰውን ወይም በመጠቀም bootstrap.min.js)።

የተቀናበረውን ጃቫስክሪፕት በመጠቀም

ሁለቱንም bootstrap.jsእና bootstrap.min.jsሁሉንም ተሰኪዎች በአንድ ፋይል ውስጥ ይይዛሉ። አንድ ብቻ ያካትቱ።

የተሰኪ ጥገኛዎች

አንዳንድ ተሰኪዎች እና የሲኤስኤስ ክፍሎች በሌሎች ተሰኪዎች ላይ ይወሰናሉ። ፕለጊኖችን ለየብቻ ካካተትክ፣ እነዚህን ጥገኞች በሰነዶቹ ውስጥ ማረጋገጥህን አረጋግጥ። እንዲሁም ሁሉም ተሰኪዎች በ jQuery ላይ የተመሰረቱ መሆናቸውን ልብ ይበሉ (ይህ ማለት jQuery ከፕለጊን ፋይሎች በፊት መካተት አለበት )። የትኞቹ የ jQuery ስሪቶች እንደሚደገፉ ለማየት የእኛን ያማክሩ ።bower.json

የውሂብ ባህሪያት

ሁሉንም የ Bootstrap ፕለጊኖች አንድ ነጠላ የጃቫስክሪፕት መስመር ሳይጽፉ በማርክ ማፕ ኤፒአይ ብቻ መጠቀም ይችላሉ። ይህ የBootstrap የመጀመሪያ ደረጃ ኤፒአይ ነው እና ተሰኪን ሲጠቀሙ የመጀመሪያ ግምት ውስጥ መግባት አለበት።

ያ ማለት፣ በአንዳንድ ሁኔታዎች ይህንን ተግባር ማጥፋት ሊፈለግ ይችላል። ስለዚህ፣ በሰነዱ ላይ ያለውን የስም ቦታ ሁሉንም ክስተቶች በማላቀቅ የውሂብ አይነታ ኤፒአይን የማሰናከል ችሎታን እናቀርባለን data-api። ይህ ይህን ይመስላል።

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

በአማራጭ፣ አንድን የተወሰነ ፕለጊን ዒላማ ለማድረግ፣ የተሰኪውን ስም እንደ የስም ቦታ ብቻ ከዳታ-ኤፒ የስም ቦታ ጋር እንደዚህ ያካትቱ።

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

በአንድ አካል አንድ ፕለጊን በመረጃ ባህሪያት በኩል ብቻ

በተመሳሳይ ኤለመንት ላይ ከበርካታ ተሰኪዎች የተውጣጡ የውሂብ ባህሪያትን አይጠቀሙ። ለምሳሌ፣ አንድ አዝራር ሁለቱም የመሳሪያ ቲፕ ሊኖራቸው እና ሞዳል መቀያየር አይችሉም። ይህንን ለማድረግ, የመጠቅለያ አካል ይጠቀሙ.

ፕሮግራማዊ ኤፒአይ

እንዲሁም ሁሉንም የBootstrap ፕለጊኖች በጃቫስክሪፕት ኤፒአይ ብቻ መጠቀም መቻል እንዳለቦት እናምናለን። ሁሉም ይፋዊ ኤፒአይዎች ነጠላ፣ በሰንሰለት ሊታለፉ የሚችሉ ዘዴዎች ናቸው፣ እና የተግባርን ስብስብ ይመለሳሉ።

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

ግጭት የለም።

አንዳንድ ጊዜ የ Bootstrap ፕለጊኖችን ከሌሎች የUI ማዕቀፎች ጋር መጠቀም አስፈላጊ ነው። በነዚህ ሁኔታዎች፣ የስም ቦታ ግጭቶች አልፎ አልፎ ሊከሰቱ ይችላሉ። ይህ ከተከሰተ .noConflictእሴቱን ለመመለስ የሚፈልጉትን ፕለጊን መደወል ይችላሉ።

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

ክስተቶች

Bootstrap ለአብዛኛዎቹ ተሰኪዎች ልዩ ድርጊቶች ብጁ ክስተቶችን ያቀርባል። በጥቅሉ፣ እነዚህ ወደ ፍጻሜ የለሽ እና ያለፈ ተካፋይ መልክ ይመጣሉ - መጨረሻው (ለምሳሌ show) በክስተቱ መጀመሪያ ላይ የሚቀሰቀስበት እና ያለፈው አካል ቅርፅ (ለምሳሌ shown) የሚቀሰቀሰው ድርጊት ሲጠናቀቅ ነው።

ከ 3.0.0 ጀምሮ ሁሉም የBootstrap ክስተቶች በስም ተከፍለዋል።

ሁሉም ማለቂያ የሌላቸው ክስተቶች preventDefaultተግባራዊነት ይሰጣሉ. ይህ እርምጃ ከመጀመሩ በፊት አፈፃፀምን የማቆም ችሎታ ይሰጣል።

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

የስሪት ቁጥሮች

VERSIONየእያንዳንዱ የBootstrap jQuery ፕለጊኖች ስሪት በተሰኪው ገንቢ ንብረት በኩል ሊደረስበት ይችላል ። ለምሳሌ፣ ለመሳሪያ ምክር ተሰኪ፡-

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

ጃቫ ስክሪፕት ሲሰናከል ምንም ልዩ ውድቀት የለም።

ጃቫ ስክሪፕት ሲሰናከል የቡትስትራፕ ተሰኪዎች በጸጋ ወደ ኋላ አይመለሱም። በዚህ ጉዳይ ላይ ስለተጠቃሚው ልምድ የሚጨነቁ ከሆነ፣ <noscript>ሁኔታውን (እና ጃቫ ስክሪፕትን እንዴት እንደገና ማንቃት እንደሚችሉ) ለተጠቃሚዎችዎ ለማስረዳት ይጠቀሙ እና/ወይም የራስዎን ብጁ ውድቀት ያክሉ።

የሶስተኛ ወገን ቤተ-መጻሕፍት

Bootstrap እንደ ፕሮቶታይፕ ወይም jQuery UI ያሉ የሶስተኛ ወገን ጃቫ ስክሪፕት ቤተ-መጻሕፍትን በይፋ አይደግፍም ። ምንም እንኳን .noConflictእና በስም የተከፋፈሉ ክስተቶች፣ እርስዎ እራስዎ ማስተካከል የሚፈልጓቸው የተኳኋኝነት ችግሮች ሊኖሩ ይችላሉ።

ስለ ሽግግሮች

ለቀላል የሽግግር ውጤቶች፣ transition.jsአንድ ጊዜ ከሌሎች JS ፋይሎች ጋር ያካትቱ። የተቀናበረውን (ወይም የተቀነሰውን) እየተጠቀሙ ከሆነ bootstrap.js፣ ይህንን ማካተት አያስፈልግም—ቀድሞውኑ አለ።

ውስጥ ያለው

Transition.js ለክስተቶች መሰረታዊ አጋዥ transitionEndእና እንዲሁም የሲኤስኤስ ሽግግር ኢምፔላተር ነው። የCSS ሽግግር ድጋፍን ለመፈተሽ እና የተንጠለጠሉ ሽግግሮችን ለመያዝ በሌሎች ተሰኪዎች ጥቅም ላይ ይውላል።

ሽግግሮችን በማሰናከል ላይ

በሚከተለው የጃቫ ስክሪፕት ቅንጣቢ በመጠቀም ሽግግሮች በአለምአቀፍ ደረጃ ሊሰናከሉ ይችላሉ፣ እሱም ከተጫነ transition.js(ወይም bootstrap.jsእንደሁኔታው bootstrap.min.js) መምጣት አለበት

$.support.transition = false

ሞዳሎች የተስተካከሉ፣ ግን ተለዋዋጭ፣ የመገናኛ ጥያቄዎች በትንሹ የሚፈለገው ተግባር እና ብልጥ ነባሪዎች ናቸው።

በርካታ ክፍት ሞዳል አይደገፍም።

ሌላ በሚታይበት ጊዜ ሞዳል አለመክፈትዎን እርግጠኛ ይሁኑ። በአንድ ጊዜ ከአንድ በላይ ሞዳል ማሳየት ብጁ ኮድ ያስፈልገዋል።

ኤችቲኤምኤል 5 የትርጓሜውን ትርጉም እንዴት እንደሚገልፅ ምክንያት የኤችቲኤምኤል ባህሪው autofocusበ Bootstrap ሞዳሎች ላይ ምንም ተጽእኖ የለውም። ተመሳሳዩን ውጤት ለማግኘት አንዳንድ ብጁ ጃቫስክሪፕት ይጠቀሙ፡

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

የቀጥታ ማሳያ

ከታች ያለውን አዝራር ጠቅ በማድረግ ሞዳልን በጃቫስክሪፕት ይቀያይሩ። ወደ ታች ይንሸራተታል እና ከገጹ አናት ላይ ይደበዝዛል።

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

አማራጭ መጠኖች

ሞዳሎች ሁለት የአማራጭ መጠኖች አሏቸው፣ በ a ላይ ለማስቀመጥ በማሻሻያ ክፍሎች በኩል ይገኛሉ .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>

የፍርግርግ ስርዓቱን በመጠቀም

በሞዳል ውስጥ ያለውን የBootstrap ፍርግርግ ስርዓት ለመጠቀም፣ በ ውስጥ ብቻ ጎጆ ያድርጉ .rowእና .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 -->

ሁሉም ተመሳሳይ ሞዳል የሚቀሰቅሱ፣ ትንሽ ለየት ያሉ ይዘቶች ያሉት ብዙ አዝራሮች ይኑርዎት? የሞዳሉን ይዘቶች በየትኛው ቁልፍ እንደተጫኑ ለመቀየር የኤችቲኤምኤልevent.relatedTarget ባህሪያትን ይጠቀሙ (ምናልባትም በ jQuery )። በ ላይ ለዝርዝሮች የሞዳል ክስተቶች ሰነዶችን ይመልከቱ ፣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)
})

አጠቃቀም

የሞዳል ፕለጊን ድብቅ ይዘትዎን በፍላጎት ፣በመረጃ ባህሪዎች ወይም በጃቫስክሪፕት በኩል ይቀየራል። እንዲሁም ነባሪ የማሸብለል ባህሪን ለመሻር ይጨምራል እና .modal-openከሞዳል ውጭ ጠቅ ሲያደርጉ የሚታዩ ሞዳሎችን ለማሰናበት የጠቅ ቦታን ያመነጫል።<body>.modal-backdrop

በውሂብ ባህሪያት በኩል

ጃቫ ስክሪፕት ሳይጽፉ ሞዳልን ያግብሩ። አንድን ወይም የተወሰነ ሞዳል ለመቀያየር ዒላማ ለማድረግ በተቆጣጣሪ data-toggle="modal"አካል ላይ እንደ አዝራር ያቀናብሩ ።data-target="#foo"href="#foo"

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

በጃቫስክሪፕት በኩል

myModalከአንድ የጃቫ ስክሪፕት መስመር ጋር አንድ ሞዳል መታወቂያ ይደውሉ

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-backdrop=""።

ስም	ዓይነት	ነባሪ	መግለጫ
ዳራ	ቡሊያን ወይም ሕብረቁምፊው`'static'`	እውነት ነው።	ሞዳል-backdrop አባልን ያካትታል። በአማራጭ፣ `static`ጠቅ ሲደረግ ሞዳልን የማይዘጋው ለbackdrop ይግለጹ።
የቁልፍ ሰሌዳ	ቡሊያን	እውነት ነው።	የማምለጫ ቁልፍ ሲጫን ሞዳልን ይዘጋል።
አሳይ	ቡሊያን	እውነት ነው።	ሲጀመር ሞዳልን ያሳያል።
የሩቅ	መንገድ	የውሸት	ይህ አማራጭ ከv3.3.0 ጀምሮ ተቋርጧል እና v4 ውስጥ ተወግዷል። በምትኩ ከደንበኛ-ጎን ቴምፕሊንግ ወይም የውሂብ ማሰሪያ ማዕቀፍ ወይም jQuery.load እራስዎ በመደወል እንመክራለን። የርቀት ዩአርኤል ከተሰጠ፣ ይዘቱ አንድ ጊዜ በjQuery `load`ዘዴ ተጭኖ ወደ `.modal-content`ዲቪው ውስጥ ይገባል። ዳታ-ኤፒን እየተጠቀሙ ከሆነ `href`የርቀት ምንጩን ለመጥቀስ እንደ አማራጭ ባህሪውን መጠቀም ይችላሉ። የዚህ ምሳሌ ከዚህ በታች ይታያል። `<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>`

ዘዴዎች

`.modal(options)`

ይዘትዎን እንደ ሞዳል ያነቃል። አማራጭ አማራጮችን ይቀበላል object።

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

`.modal('toggle')`

ሞዳልን በእጅ ይቀየራል። ሞጁሉ በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደshown.bs.modal ደዋዩ ይመለሳል hidden.bs.modal።

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

`.modal('show')`

ሞዳልን በእጅ ይከፍታል። ሞጁሉ ከመታየቱ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ።shown.bs.modal

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

`.modal('hide')`

ሞዳልን በእጅ ይደብቃል። ሞዳል በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.modalክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል።

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

`.modal('handleUpdate')`

አንድ ብቅ ካለ ለማሸብለል የሞዳል አቀማመጥን ያስተካክላል፣ ይህም ሞዳል ወደ ግራ እንዲዘል ያደርገዋል።

ክፍት በሚሆንበት ጊዜ የሞዳል ቁመቱ ሲቀየር ብቻ ያስፈልጋል።

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

ክስተቶች

የቡትስትራፕ ሞዳል ክፍል ወደ ሞዳል ተግባር ለመጠመድ ጥቂት ክስተቶችን ያጋልጣል።

ሁሉም የሞዳል ሁነቶች የሚተኮሱት በራሱ ሞዳል ላይ ነው (ማለትም በ <div class="modal">)።

የክስተት አይነት	መግለጫ
አሳይ.bs.ሞዳል	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል . በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ `relatedTarget`የዝግጅቱ ንብረት ይገኛል።
የሚታየው.bs.modal	ይህ ክስተት ሞጁሉ ለተጠቃሚው እንዲታይ ከተደረገ (የ CSS ሽግግሮች እስኪጠናቀቅ ድረስ ይጠብቃል) ይባረራል። በአንድ ጠቅታ ከተከሰተ፣ ጠቅ የተደረገው አካል እንደ `relatedTarget`የዝግጅቱ ንብረት ይገኛል።
ደብቅ.bs.modal	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs.modal	ሞዱሉ ከተጠቃሚው ተደብቆ ሲጠናቀቅ ይህ ክስተት የሚነድ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ተጭኗል.bs.modal	`remote`ሞጁሉ አማራጩን በመጠቀም ይዘቱን ሲጭን ይህ ክስተት ይባረራል ።

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

ምሳሌዎች

ተቆልቋይ ሜኑዎችን በዚህ ቀላል ተሰኪ ወደ ማንኛውም ነገር ያክሉ፣ ናቭባር፣ ታብ እና እንክብሎችን ጨምሮ።

በክኒኖች ውስጥ

አጠቃቀም

በመረጃ ባህሪያት ወይም ጃቫስክሪፕት በኩል ተቆልቋይ ተሰኪው የተደበቀ ይዘትን (የተቆልቋይ ምናሌዎችን) .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>

ዩአርኤሎችን በአገናኝ አዝራሮች ለማቆየት ከ 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>

በጃቫስክሪፕት በኩል

ተቆልቋዮቹን በጃቫስክሪፕት ይደውሉ፡-

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

`data-toggle="dropdown"`አሁንም ያስፈልጋል

ተቆልቋይዎን በጃቫ ስክሪፕት ቢደውሉም ሆነ በምትኩ ዳታ-ኤፒውን ቢጠቀሙ data-toggle="dropdown"ሁል ጊዜ በተቆልቋዩ ቀስቅሴ ክፍል ላይ መገኘት አለባቸው።

አማራጮች

ምንም

ዘዴዎች

`$().dropdown('toggle')`

የተሰጠውን የአሳሽ አሞሌ ወይም የታጠፈ አሰሳ ተቆልቋይ ሜኑ ይቀየራል።

ክስተቶች

ሁሉም የተቆልቋይ ክስተቶች .dropdown-menuበወላጅ አካል ላይ ነው የሚተኮሱት።

ሁሉም የተቆልቋይ ክስተቶች relatedTargetንብረት አላቸው፣ እሴታቸው የሚቀያየር መልህቅ አካል ነው።

የክስተት አይነት	መግለጫ
አሳይ.bs.dropdown	የማሳያ ምሳሌ ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል.
የሚታየው.bs.dropdown	ይህ ክስተት የሚቃጠለው ተቆልቋዩ ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮችን እስኪጠናቀቅ ድረስ ይጠብቃል)።
ደብቅ.bs.dropdown	ይህ ክስተት የመደበቅ ምሳሌ ዘዴ ሲጠራ ወዲያውኑ ይቃጠላል።
የተደበቀ.bs.dropdown	ይህ ክስተት የሚቀጣጠለው ተቆልቋዩ ከተጠቃሚው ተደብቆ ሲጠናቀቅ ነው (የ CSS ሽግግሮችን እስኪጠናቀቅ ድረስ ይጠብቃል)።

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

ምሳሌ በ navbar ውስጥ

የ ScrollSpy ፕለጊን በማሸብለል አቀማመጥ ላይ በመመስረት የናቪ ኢላማዎችን በራስ-ሰር ለማዘመን ነው። ከአሳሹ በታች ያለውን ቦታ ያሸብልሉ እና የነቃውን የክፍል ለውጥ ይመልከቱ። የተቆልቋዩ ንዑስ ንጥሎችም ይደምቃሉ።

@ ስብ

የማስታወቂያ ሌጊግስ ኪታር፣ ብሩች መታወቂያ አርት ፓርቲ ዶሎር ጉልበት። Pitchfork yr enim lo-fi qui ከመሸጡ በፊት። Tumblr ከእርሻ ወደ ጠረጴዛ የብስክሌት መብቶች ምንም ይሁን። Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. ኮዝቢ ሹራብ ሎሞ ዣን ቁምጣ፣ ዊሊያምስበርግ ሁዲ ሚኒም ኩዊ ምናልባት ስለነሱ አልሰማህም et cardigan Trust fund culpa biodiesel Wes Anderson aesthetic. ኒሂል የተነቀሰ አክሳመስ፣ cred irony biodiesel keffiyeh artisan ullamco consequat።

@mdo

ቬኒአም ማርፋ የጢም መንሸራተቻ ሰሌዳ፣ አድፒሲሲንግ fugiat velit ፒችፎርክ ጢም። የፍሪጋን ጢም አሊካ ኩፒዳታት የማሲስዊኒ ቬሮ። ኩፒዳታት አራት ሎኮ ኒሲ፣ ኤ ሄልቬቲካ ኑላ ካርልስ። የተነቀሰ የኮስቢ ሹራብ የምግብ መኪና፣ የማሲስዊኒ ክዊስ ፍሪጋን ያልሆነ ቪኒል። Lo-fi wes anderson +1 sartorial. ካርልስ ውበት የሌለው የአካል ብቃት እንቅስቃሴ ጓንትነት። ብሩክሊን adipisicing ክራፍት ቢራ ምክትል keytar desrunt.

አንድ

Occaecat commodo aliqua delectus. ፋፕ ክራፍት ቢራ deserunt skateboard e. የሎሞ የብስክሌት መብቶች adipisicing banh mi, velit ea sunt next level locavore ነጠላ መነሻ ቡና በማግና ቬኒየም። ከፍተኛ ህይወት መታወቂያ ቪኒል፣ echo park consequat quis aliquip banh mi ፕትፎርክ። Vero VHS est adipisicing. Consectetur nisi DIY minim messenger ቦርሳ። Cred ex in, ዘላቂ delectus consectetur fanny ጥቅል iphone.

ሁለት

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

three

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

Keytar twee ብሎግ፣ culpa messenger ቦርሳ ማርፋ ምንም አይነት የዲሌክቶስ ምግብ መኪና። ሳፒየንተ ሲንት ኢድ ግምትንዳ። Locavore sed helvetica cliche አስቂኝ፣ ነጎድጓዳማ ድመቶች ስለነሱ ሰምተህ የማታውቀው ሁዲ ከግሉተን ነፃ የሆነ ሎ-ፋይ ፋፕ አሊኩፕ ያስከተለ ነው። Labore elit placeat ወደ ውጭ ከመሸጣቸው በፊት፣ ቴሪ ሪቻርድሰን ታዋቂው ብሩች ኒሲዩንት ኩይስ ኮስቢ ሹራብ pariatur keffiyeh ut helvetica artisan። የካርዲጋን ክራፍት ቢራ ሴታን ዝግጁ የተሰራ ቬሊት። VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco ነጎድጓዳማ ድመቶች።

አጠቃቀም

Bootstrap nav ያስፈልገዋል

Scrollspy በአሁኑ ጊዜ ንቁ አገናኞችን በትክክል ለማድመቅ የ Bootstrap nav ክፍልን መጠቀም ይፈልጋል።

ሊፈቱ የሚችሉ መታወቂያዎች ያስፈልጋሉ።

የናቭባር አገናኞች ሊፈቱ የሚችሉ የመታወቂያ ዒላማዎች ሊኖራቸው ይገባል። ለምሳሌ፣ አንድ <a href="#home">home</a>በ DOM ውስጥ ካለ ነገር ጋር መዛመድ አለበት እንደ <div id="home"></div>.

ኢላማ ያልሆኑ `:visible`አካላት ችላ ተብለዋል።

:visibleበ jQuery መሠረት ያልሆኑ የዒላማ አካላት ችላ ይባላሉ እና የእነሱ ተዛማጅ የባህር ኃይል ዕቃዎች በጭራሽ አይደምቁም።

አንጻራዊ አቀማመጥ ያስፈልገዋል

የአተገባበር ዘዴ ምንም ቢሆን፣ Scrollspy እየሰለሉበት position: relative;ያለውን አካል መጠቀምን ይጠይቃል። በአብዛኛዎቹ ሁኔታዎች ይህ ነው <body>. ከ ከ ሌሎች ንጥረ ነገሮች ላይ በሚሸብቡበት ጊዜ ስብስብ እንዳለዎት እርግጠኛ <body>ይሁኑ ።heightoverflow-y: scroll;

በውሂብ ባህሪያት በኩል

በቀላሉ የማሸብለል ባህሪን ወደ ላይኛው አሞሌ አሰሳ ለመጨመር፣ data-spy="scroll"ለመሰለል ወደሚፈልጉት አካል ያክሉ (በተለምዶ ይሄ ነው <body>)። ከዚያ data-targetባህሪውን ከማንኛውም የቡትስትራፕ .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>

በጃቫስክሪፕት በኩል

በእርስዎ ሲኤስኤስ ውስጥ ካከሉ በኋላ position: relative;፣ በጃቫስክሪፕት ወደ ጥቅልል ስፓይ ይደውሉ

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

ዘዴዎች

`.scrollspy('refresh')`

ከ DOM አባሎችን ከመጨመር ወይም ከማስወገድ ጋር በማጣመር scrollspy ን ሲጠቀሙ የማደስ ዘዴውን እንደሚከተለው መደወል ያስፈልግዎታል፡-

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset=""።

ስም	ዓይነት	ነባሪ	መግለጫ
ማካካሻ	ቁጥር	10	የማሸብለል ቦታን ሲያሰሉ ከላይ የሚካካሱ ፒክሰሎች።

ክስተቶች

የክስተት አይነት	መግለጫ
አግብር.bs.scrollspy	ይህ ክስተት አዲስ ንጥል በጥቅል ስፓይ ሲነቃ ይቃጠላል።

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

ምሳሌ ትሮች

በአካባቢያዊ ይዘት ክፍሎች ውስጥ ለመሸጋገር ፈጣን፣ ተለዋዋጭ የትር ተግባርን ያክሉ፣ በተቆልቋይ ምናሌዎችም ቢሆን። የጎጆ ትሮች አይደገፉም።

ጥሬ ጂንስ ምናልባት ስለነሱ ጂን ቁምጣ አውስቲን ሰምተህ አታውቅም። Nesciunt ቶፉ stumptown aliqua፣ retro synth master cleanse። ፂም ክሊች ቴምፕር፣ ዊሊያምስበርግ ካርልስ ቪጋን ሄልቬቲካ። Reprehenderit ሉካንዳ retro keffiyeh dreamcatcher synth. ኮዝቢ ሹራብ eu banh mi, qui irure ቴሪ ሪቻርድሰን የቀድሞ ስኩዊድ። Aliquip placeat salvia cillum iphone. ሴይታን አሊኩፕ ኩይስ ካርዲጋን አሜሪካዊ አልባሳት፣ ሥጋ ሥጋ ቆራጭ ቮልፕቴት ኒሲ ኪ።

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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

የታረመ አሰሳን ያራዝማል

ይህ ፕለጊን ሊታዩ የሚችሉ ቦታዎችን ለመጨመር የታረመ ዳሰሳ ክፍልን ያራዝመዋል።

አጠቃቀም

በጃቫስክሪፕት በኩል ሊታዩ የሚችሉ ትሮችን ያንቁ (እያንዳንዱ ትር በተናጥል መንቃት አለበት)

$('#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የ Bootstrap ትር ስታይልን ይተገበራል ፣ እና ክፍሎቹን ሲጨምሩ 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')

ክስተቶች

አዲስ ትር ሲያሳዩ ክስተቶቹ በሚከተለው ቅደም ተከተል ይቃጠላሉ፡

hide.bs.tab(በአሁኑ ንቁ ትር ላይ)
show.bs.tab(በሚታየው ትር ላይ)
hidden.bs.tab(በቀደመው ንቁ ትር ላይ፣ hide.bs.tabከዝግጅቱ ጋር አንድ አይነት)
shown.bs.tab(በአዲሱ የነቃ ትር ላይ፣ show.bs.tabከዝግጅቱ ጋር አንድ አይነት)

ምንም ትር አስቀድሞ ገባሪ ካልሆነ፣ ከዚያ ክስተቶቹ hide.bs.tabእና hidden.bs.tabክስተቶቹ አይባረሩም።

የክስተት አይነት	መግለጫ
አሳይ.bs.tab	ይህ ክስተት በትር ትዕይንት ላይ ይቃጠላል፣ ነገር ግን አዲሱ ትር ከመታየቱ በፊት። `event.target`ገባሪውን ትር እና `event.relatedTarget`የቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
የሚታየው.bs.tab	ትር ከታየ በኋላ ይህ ክስተት በትር ትርኢት ላይ ይቀጣጠላል። `event.target`ገባሪውን ትር እና `event.relatedTarget`የቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
ደብቅ.bs.tab	ይህ ክስተት የሚቀጣጠለው አዲስ ትር በሚታይበት ጊዜ ነው (እና ስለዚህ የቀደመው ገቢር ትር መደበቅ አለበት)። እንደቅደም ተከተላቸው የአሁኑን ገቢር ትር እና አዲሱን በቅርቡ የሚሠራውን ትር ይጠቀሙ `event.target`እና ለማነጣጠር።`event.relatedTarget`
የተደበቀ.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
})

በጄሰን ፍሬም በተፃፈው ምርጥ jQuery.tipsy ፕለጊን አነሳሽነት; የመሳሪያ ምክሮች በምስሎች ላይ የማይመሰረቱ፣ CSS3ን ለአኒሜሽን እና ለአካባቢያዊ የርዕስ ማከማቻ ዳታ-ባህሪያትን የማይጠቀሙ የተዘመነ ስሪት ናቸው።

ዜሮ-ርዝመት አርእስቶች ያላቸው የመሳሪያ ምክሮች በጭራሽ አይታዩም።

ምሳሌዎች

የመሳሪያ ምክሮችን ለማየት ከታች ባሉት ማገናኛዎች ላይ ያንዣብቡ፡-

አራት አማራጮች አሉ፡ ከላይ፣ በቀኝ፣ ከታች እና በግራ የተሰለፉ።

አራት አቅጣጫዎች

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

መርጦ የመግባት ተግባር

በአፈጻጸም ምክንያቶች፣ Tooltip እና Popover data-apis መርጠው ገብተዋል፣ ይህ ማለት እርስዎ እራስዎ ማስጀመር አለብዎት ።

በአንድ ገጽ ላይ ያሉትን ሁሉንም የመሳሪያ ምክሮች የማስጀመር አንዱ መንገድ በባህሪያቸው መምረጥ data-toggleነው፡-

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

አጠቃቀም

የ Tooltip ፕለጊን ይዘትን ያመነጫል እና በፍላጎት ላይ ምልክት ያደርጋል፣ እና በነባሪነት የመሳሪያ ምክሮችን ከቀስቀሳቸው ኤለመንት በኋላ ያስቀምጣል።

በጃቫስክሪፕት በኩል የመሳሪያውን ጥቆማ ያስነሱ፡

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

ምልክት ማድረጊያ

ለመሳሪያ ጫፍ የሚፈለገው ምልክት ማድረጊያ dataባህሪ ብቻ ነው እና titleበኤችቲኤምኤል ኤለመንት ላይ የመሳሪያ ጥቆማ እንዲኖርዎት ይፈልጋሉ። የመነጨው የመሳሪያ ጫፍ ቀላል ነው፣ ምንም እንኳን ቦታ ቢፈልግም (በነባሪ፣ 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>

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-animation=""።

ስም	ዓይነት	ነባሪ	መግለጫ
አኒሜሽን	ቡሊያን	እውነት ነው።	የ CSS ደብዝዝ ሽግግር ወደ መሳሪያ ጫፍ ተግብር
መያዣ	ሕብረቁምፊ \| የውሸት	የውሸት	የመሳሪያውን ጫፍ ከአንድ የተወሰነ አካል ጋር ያያይዙታል። ምሳሌ `container: 'body'`፡. ይህ አማራጭ በተለይ ጠቃሚ ነው, ይህም የመሳሪያውን ጫፍ በማስነሻ አካል አቅራቢያ በሰነዱ ፍሰት ውስጥ እንዲያስቀምጡ ያስችልዎታል - ይህም የመሳሪያውን ጫፍ በመስኮት መጠን በሚቀይርበት ጊዜ ከሚቀሰቀሰው አካል ላይ እንዳይንሳፈፍ ይከላከላል.
መዘግየት	ቁጥር \| ነገር	0	የመሳሪያውን ጫፍ (ms) ማሳየት እና መደበቅ መዘግየት - በእጅ ቀስቅሴ አይነት ላይ አይተገበርም። ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል። የእቃው መዋቅር የሚከተለው ነው-`delay: { "show": 500, "hide": 100 }`
html	ቡሊያን	የውሸት	ኤችቲኤምኤልን በመሳሪያው ጫፍ ውስጥ ያስገቡ። ውሸት ከሆነ፣ የjQuery `text`ዘዴ ይዘትን ወደ DOM ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
አቀማመጥ	ሕብረቁምፊ \| ተግባር	'ከላይ'	የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ከላይ \| የታችኛው \| ግራ \| ትክክል \| አውቶማቲክ. “ራስ-ሰር” ሲገለጽ፣ የመሳሪያውን ጫፍ በተለዋዋጭ መንገድ አቅጣጫ ያስቀምጣል። ለምሳሌ, አቀማመጥ "በራስ-ግራ" ከሆነ, የመሳሪያው ጫፍ በሚቻልበት ጊዜ በግራ በኩል ይታያል, አለበለዚያ ግን ቀኝ ይታያል. አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ ሲውል ከመሳሪያ ጫፍ DOM node ጋር እንደ መጀመሪያው መከራከሪያ እና ቀስቃሽ ኤለመንት DOM ኖድ እንደ ሁለተኛው ይባላል። ዐውደ- ጽሑፉ `this`የተቀናበረው በመሳሪያ ምክር ምሳሌ ላይ ነው።
መራጭ	ሕብረቁምፊ	የውሸት	መራጭ ከቀረበ፣የመሳሪያ ምክር ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ ተለዋዋጭ የኤችቲኤምኤል ይዘት የመሳሪያ ምክሮች እንዲጨመሩ ለማድረግ ይጠቅማል። ይህንን እና ጠቃሚ ምሳሌን ይመልከቱ ።
አብነት	ሕብረቁምፊ	`'<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 node ጋር እንደ ብቸኛ መከራከሪያው ይባላል። ዐውደ- ጽሑፉ `this`የተቀናበረው በመሳሪያ ምክር ምሳሌ ላይ ነው።

ዘዴዎች

`$().tooltip(options)`

የመሳሪያ ቲፕ ተቆጣጣሪን ከአንድ ንጥረ ነገር ስብስብ ጋር ያያይዛል።

`.tooltip('show')`

የአንድ ንጥረ ነገር መሣሪያ ጫፍን ያሳያል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። shown.bs.tooltipይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል. ዜሮ-ርዝመት አርእስቶች ያላቸው የመሳሪያ ምክሮች በጭራሽ አይታዩም።

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

`.tooltip('hide')`

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይደብቃል። የመሳሪያ ጥቆማው በትክክል ከመደበቅ በፊት (ማለትም hidden.bs.tooltipክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.

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

`.tooltip('toggle')`

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይቀያይራል። የመሳሪያ ጥቆማው በትክክል ከመታየቱ ወይም ከመደበቅ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። ይህ የመሳሪያውን ጫፍ እንደ "በእጅ" ማነሳሳት ይቆጠራል.shown.bs.tooltiphidden.bs.tooltip

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

`.tooltip('destroy')`

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይደብቃል እና ያጠፋል። የውክልና ጥቆማዎችን የሚጠቀሙ (አማራጩን በመጠቀም የተፈጠሩ ) selectorበተወለዱ ቀስቃሽ አካላት ላይ በተናጠል ሊጠፉ አይችሉም።

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

ክስተቶች

የክስተት አይነት	መግለጫ
አሳይ.bs.tooltip	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የሚታየው.bs.tooltip	ይህ ክስተት የሚቃጠለው የመሳሪያ ጥቆማው ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ደብቅ.bs.tooltip	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs.tooltip	ይህ ክስተት የሚተኮሰው የመሳሪያ ጥቆማው ከተጠቃሚው ተደብቆ ሲጠናቀቅ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ገብቷል.bs.tooltip	`show.bs.tooltip`የመሳሪያ ምክር አብነት ወደ DOM ከተጨመረ ይህ ክስተት ከክስተቱ በኋላ ተቃጥሏል።

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

ለሁለተኛ ደረጃ መረጃ ለማንኛውም ኤለመንት በ iPad ላይ እንዳሉት ትናንሽ ተደራቢዎችን ያክሉ።

ሁለቱም ርዕስ እና ይዘታቸው ዜሮ ርዝመት የሆኑ ፖፖቨር በጭራሽ አይታዩም።

መርጦ የመግባት ተግባር

በአፈጻጸም ምክንያቶች፣ Tooltip እና Popover data-apis መርጠው ገብተዋል፣ ይህ ማለት እርስዎ እራስዎ ማስጀመር አለብዎት ።

በአንድ ገጽ ላይ ሁሉንም ብቅ-ባዮችን የማስጀመር አንዱ መንገድ እነሱን በባህሪያቸው መምረጥ data-toggleነው፡-

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

ምሳሌዎች

አራት አማራጮች አሉ፡ ከላይ፣ በቀኝ፣ ከታች እና በግራ የተሰለፉ።

የቀጥታ ማሳያ

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

አጠቃቀም

በጃቫስክሪፕት በኩል ብቅ-ባዮችን አንቃ፡-

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-animation=""።

ስም	ዓይነት	ነባሪ	መግለጫ
አኒሜሽን	ቡሊያን	እውነት ነው።	የ CSS ደብዝዝ ሽግግር ወደ ፖፖቨር ይተግብሩ
መያዣ	ሕብረቁምፊ \| የውሸት	የውሸት	ፖፖውን ከአንድ የተወሰነ አካል ጋር ያያይዘዋል። ምሳሌ `container: 'body'`፡. ይህ አማራጭ በጣም ጠቃሚ ነው, በተለይም በመስታወቱ ወቅት ከሚያስከትሉት ቀስቅሴ ንጥረ ነገር እንዳይቀላቀል የሚከለክለው ፖፖቨር ላይ ከሚያስከትለው ንጥረ ነገር እንዳይቀንስ ይፈቅድለታል.
ይዘት	ሕብረቁምፊ \| ተግባር	''	ባህሪው ከሌለ ነባሪ የይዘት ዋጋ `data-content`። አንድ ተግባር ከተሰጠ `this`ፖፑቨር ከተገጠመለት ንጥረ ነገር ጋር በማጣቀሻው ይጠራል.
መዘግየት	ቁጥር \| ነገር	0	Pooover (MSON) መደበቅ እና መደበቅ - ለትላልቅ የመርከብ አይነት አይተገበርም ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል። የእቃው መዋቅር የሚከተለው ነው-`delay: { "show": 500, "hide": 100 }`
html	ቡሊያን	የውሸት	ኤችቲኤምኤልን ወደ ፖፖቨር አስገባ። ውሸት ከሆነ፣ የjQuery `text`ዘዴ ይዘትን ወደ DOM ለማስገባት ስራ ላይ ይውላል። ስለ XSS ጥቃቶች የሚጨነቁ ከሆነ ጽሑፍ ይጠቀሙ።
አቀማመጥ	ሕብረቁምፊ \| ተግባር	'ቀኝ'	ፖፖውን እንዴት እንደሚቀመጥ - ከላይ \| የታችኛው \| ግራ \| ትክክል \| አውቶማቲክ. “ራስ-ሰር” ሲገለጽ፣ ብቅ ባይን በተለዋዋጭ መንገድ አቅጣጫ ይለውጠዋል። ለምሳሌ አቀማመጥ "በራስ ግራ" ከሆነ, ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ማለት ነው. አንድ ተግባር ቦታውን ለመወሰን ጥቅም ላይ ሲውል፣ በፖፖቨር DOM ኖድ እንደ መጀመሪያው መከራከሪያ እና አነቃቂው DOM ኖድ እንደ ሁለተኛው ይባላል። `this`አውድ ወደ ብቅ ባይነት ተቀናብሯል ።
መራጭ	ሕብረቁምፊ	የውሸት	መራጭ ከተሰጠ፣ ብቅ ያሉ ነገሮች ለተገለጹት ኢላማዎች ይላካሉ። በተግባር፣ ይህ ተለዋዋጭ የኤችቲኤምኤል ይዘት ብቅ-ባይ ታክሏል እንዲኖረው ለማድረግ ጥቅም ላይ ይውላል። ይህንን እና ጠቃሚ ምሳሌን ይመልከቱ ።
አብነት	ሕብረቁምፊ	`'<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 node ጋር እንደ ብቸኛ መከራከሪያው ይባላል። `this`አውድ ወደ ብቅ ባይነት ተቀናብሯል ።

ዘዴዎች

`$().popover(options)`

ለአንድ ንጥረ ነገር ስብስብ ብቅ-ባዮችን ያስጀምራል።

`.popover('show')`

የአንድ ንጥረ ነገር ብቅ-ባይ ያሳያል። ብቅ-ባይ ከመታየቱ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል ። shown.bs.popoverይህ እንደ "በእጅ" የፖፖቨር ቀስቅሴ ይቆጠራል። ሁለቱም ርዕስ እና ይዘታቸው ዜሮ ርዝመት የሆኑ ፖፖቨር በጭራሽ አይታዩም።

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

`.popover('hide')`

የአንድን ንጥረ ነገር ብቅ-ባይ ይደብቃል። ብቅ-ባይ ከመደበቅ በፊት (ማለትም ክስተቱ ከመፈጠሩ በፊት) ወደ ደዋዩ ይመለሳል ። hidden.bs.popoverይህ እንደ "በእጅ" የፖፖቨር ቀስቅሴ ይቆጠራል።

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

`.popover('toggle')`

የአንድን ንጥረ ነገር ብቅ-ባይ ይቀያይራል። ብቅ-ባይ ከመታየቱ ወይም ከመደበቁ በፊት (ማለትም ክስተቱ ከመከሰቱ በፊት) ወደ ደዋዩ ይመለሳል። ይህ እንደ "በእጅ" የፖፖቨር ቀስቅሴ ይቆጠራል።shown.bs.popoverhidden.bs.popover

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

`.popover('destroy')`

የአንድን ንጥረ ነገር ብቅ-ባይ ይደብቃል እና ያጠፋል። ውክልና የሚጠቀሙ ፖፖቨር (አማራጩን በመጠቀም የተፈጠሩ ) selectorበተወለዱ ቀስቃሽ አካላት ላይ በተናጠል ሊጠፉ አይችሉም።

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

ክስተቶች

የክስተት አይነት	መግለጫ
አሳይ.bs.popover	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የሚታየው.bs.popover	ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ደብቅ.bs.popover	`hide`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs.popover	ይህ ክስተት የሚቀጣጠለው ብቅ-ባይ ከተጠቃሚው ተደብቆ ሲያልቅ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
ገብቷል.bs.popover	`show.bs.popover`የፖፖቨር አብነት ወደ DOM ከተጨመረ ይህ ክስተት ከክስተቱ በኋላ ተቃጥሏል።

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

ምሳሌ ማንቂያዎች

በዚህ ተሰኪ ለሁሉም የማንቂያ መልእክቶች የስንብት ተግባርን ያክሉ።

አዝራሩን በሚጠቀሙበት ጊዜ .closeየመጀመርያው ልጅ መሆን አለበት .alert-dismissibleእና ምንም አይነት የጽሁፍ ይዘት በምልክቱ ውስጥ ሊመጣ አይችልም.

ቅዱስ guacamole! እራስህን ፈትሽ በጣም ጥሩ አይደለህም።

ኧረ ተው! ስህተት አለብህ!

ይህንን እና ያንን ይለውጡ እና እንደገና ይሞክሩ። Duis mollis፣ est non commodo luctus፣ nisi erat porttitor ligula፣ eget lacinia odio sem nec elit። Cras mattis consectetur purus sit amet fermentum.

አጠቃቀም

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"። (የውሂብ-api ራስ-አስጀማሪን ሲጠቀሙ አስፈላጊ አይደለም።)

`$().alert('close')`

ማንቂያውን ከDOM በማስወገድ ይዘጋል። ክፍሎቹ .fadeእና .inክፍሎቹ በንጥሉ ላይ ካሉ፣ ከመውጣቱ በፊት ማንቂያው ይጠፋል።

ክስተቶች

የቡትስትራፕ ማንቂያ ተሰኪ ወደ ማንቂያ ተግባር ለመግባት ጥቂት ክስተቶችን ያጋልጣል።

የክስተት አይነት	መግለጫ
ዝጋ.bs.ማስጠንቀቂያ	`close`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ተዘግቷል.bs. ማንቂያ	ይህ ክስተት የሚተኮሰው ማንቂያው ሲዘጋ ነው (የ CSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።

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

በአዝራሮች ተጨማሪ ያድርጉ። የቁጥጥር አዝራሩ ሁኔታ ወይም የአዝራሮች ቡድን ፍጠር ለተጨማሪ ክፍሎች እንደ የመሳሪያ አሞሌዎች።

የአሳሽ ተሻጋሪ ተኳኋኝነት

ፋየርፎክስ በገጽ ጭነቶች ላይ የቅጽ ቁጥጥር ሁኔታዎችን (አካል ጉዳተኝነት እና መፈተሽ) ቀጥሏል ። ለዚህ መፍትሄ መጠቀም 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

አመልካች ሳጥን 1 (ቅድመ ምልክት የተደረገበት) አመልካች ሳጥን 2 አመልካች ሳጥን 3

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

ሬዲዮ 1 (የተመረጠ) ሬዲዮ 2 ሬዲዮ 3

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

በቀላሉ ለመቀያየር ባህሪ ጥቂት ክፍሎችን የሚጠቀም ተጣጣፊ ፕለጊን።

የተሰኪ ጥገኝነት

ሰብስብ የሽግግር ፕለጊን በእርስዎ የBootstrap ስሪት ውስጥ እንዲካተት ይፈልጋል።

ለምሳሌ

በክፍል ለውጦች በኩል ሌላ አካል ለማሳየት እና ለመደበቅ ከታች ያሉትን አዝራሮች ጠቅ ያድርጉ፡

.collapseይዘትን ይደብቃል
.collapsingበሽግግር ወቅት ይተገበራል
.collapse.inይዘት ያሳያል

hrefከባህሪው ጋር አገናኝን ወይም ከባህሪው ጋር አዝራርን መጠቀም ይችላሉ data-target. በሁለቱም ሁኔታዎች, data-toggle="collapse"አስፈላጊ ነው.

ከ href ጋር አገናኝ

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>

የአኮርዲዮን ምሳሌ

ከፓነል አካል ጋር አኮርዲዮን ለመፍጠር ነባሪውን የመሰብሰብ ባህሪን ያራዝሙ።

ሊሰበሰብ የሚችል ቡድን ንጥል #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus ቴሪ ሪቻርድሰን ማስታወቂያ ስኩዊድ። 3 ተኩላ ጨረቃ ኦፊሺያ aute፣ non cupidatat skateboard dolor brunch። የምግብ መኪና quinoa nesciunt laborum eiusmod. ብሩች 3 ተኩላ ጨረቃ ጊዜ፣ sunt aliqua ወፍ በላዩ ላይ አኖረ ስኩዊድ ነጠላ ምንጭ ቡና nulla assumenda shoreditch et. ኒሂል አኒ ከፍየህ ሄልቬቲካ፣ ክራፍት ቢራ ላቦሬ ዌስ አንደርሰን ክሬድ ኔስሲዩንት ሳፒየንቴ ኢአ ፕራይደንት። ማስታወቂያ ቪጋን በስተቀር ስጋ ቤት ምክትል ሎሞ። Leggings occaecat ክራፍት ቢራ እርሻ-ወደ-ጠረጴዛ, ጥሬ የዲኒም ውበት synth nesciunt ምናልባት አንተ ስለ እነርሱ ሰምተህ አታውቅም accusamus labour ዘላቂ VHS.

ሊሰበሰብ የሚችል ቡድን ቁጥር 2

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.

ሊሰበሰብ የሚችል ቡድን ቁጥር 3

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

ሊሰበሰብ የሚችል ዝርዝር ቡድን

Bootply
One itmus ac facilin
Second eros

Footer

የማስፋፋት/የሰብስብ መቆጣጠሪያዎች ተደራሽ ያድርጉ

aria-expandedወደ መቆጣጠሪያው አካል መጨመርዎን እርግጠኛ ይሁኑ . ይህ አይነታ በግልፅ አንባቢዎችን እና ተመሳሳይ አጋዥ ቴክኖሎጂዎችን ሊሰበስብ የሚችለውን ኤለመንት ሁኔታ በግልፅ ይገልጻል። ሊሰበሰብ የሚችል ኤለመንት በነባሪነት ከተዘጋ, ዋጋ ሊኖረው ይገባል aria-expanded="false". ክፍሉን ተጠቅመው ሊሰበሰብ የሚችለውን አካል በነባሪነት እንዲከፍት ካቀናበሩት ፣ በምትኩ መቆጣጠሪያውን inያዘጋጁ ። aria-expanded="true"ተሰኪው የሚሰበረው ኤለመንት መከፈቱን ወይም መዘጋቱን መሰረት በማድረግ ይህን ባህሪ በራስ ሰር ይቀየራል።

በተጨማሪም፣ የእርስዎ የቁጥጥር አካል የሚያነጣጥረው ነጠላ ሊሰበሰብ የሚችል አካል ከሆነ - ማለትም data-targetባህሪው ወደ መራጭ የሚያመለክት ከሆነ id- ተጨማሪ aria-controlsባህሪን ወደ መቆጣጠሪያው አካል ማከል ይችላሉ፣ idየሚሰበሰበውን ኤለመንት የያዘ። ዘመናዊ የስክሪን አንባቢዎች እና ተመሳሳይ አጋዥ ቴክኖሎጂዎች ይህንን ባህሪ ለተጠቃሚዎች ተጨማሪ አቋራጮችን ለማቅረብ በቀጥታ ወደ ተሰበሰበው አካል እንዲሄዱ ያደርጋሉ።

አጠቃቀም

የብልሽት ፕለጊን ከባድ ማንሳትን ለመቆጣጠር ጥቂት ክፍሎችን ይጠቀማል፡-

.collapseይዘቱን ይደብቃል
.collapse.inይዘቱን ያሳያል
.collapsingሽግግሩ ሲጀምር ይጨመራል, እና ሲጠናቀቅ ይወገዳል

እነዚህ ክፍሎች በ ውስጥ ሊገኙ ይችላሉ component-animations.less.

በውሂብ ባህሪያት በኩል

በቀላሉ የሚሰበሰብ ኤለመንት ቁጥጥርን ለመመደብ ወደ ኤለመንት data-toggle="collapse"ያክሉ ። data-targetባህሪው data-targetውድቀትን ለመተግበር የ CSS መራጭን ይቀበላል። ክፍሉን collapseወደ ሊሰበሰበው አካል ማከልዎን ያረጋግጡ። በነባሪ እንዲከፈት ከፈለጉ ተጨማሪውን ክፍል ያክሉ in።

አኮርዲዮን የመሰለ የቡድን አስተዳደርን ወደ ሊሰበሰብ የሚችል ቁጥጥር ለመጨመር የውሂብ ባህሪውን ያክሉ data-parent="#selector"። ይህንን በተግባር ለማየት ማሳያውን ይመልከቱ።

በጃቫስክሪፕት በኩል

በእጅ አንቃ በ፦

$('.collapse').collapse()

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ 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ክስተቱ ከመከሰቱ በፊት) ወደ ደዋይ ይመለሳል።

ክስተቶች

የቡትስትራፕ ውድቀት ክፍል ወደ ውድቀት ተግባር ለመያያዝ ጥቂት ክስተቶችን ያጋልጣል።

የክስተት አይነት	መግለጫ
አሳይ.bs. መውደቅ	`show`የምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ታየ.bs.ሰብስብ	ይህ ክስተት የሚተኮሰው የውድቀት አካል ለተጠቃሚው እንዲታይ ከተደረገ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።)
ደብቅ.bs. ሰብስብ	`hide`ዘዴው ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
የተደበቀ.bs. ሰብስብ	ይህ ክስተት የሚተኮሰው የመሰብሰቢያ አካል ከተጠቃሚው ከተደበቀ ነው (የCSS ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።)

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

እንደ ካሮሴል ባሉ ንጥረ ነገሮች ውስጥ ብስክሌት ለመንዳት የተንሸራታች ትዕይንት አካል። የጎጆ ካሮሴሎች አይደገፉም።

ምሳሌዎች

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

የተደራሽነት ጉዳይ

የካሮሴል ክፍል በአጠቃላይ የተደራሽነት ደረጃዎችን አያከብርም. ታዛዥ መሆን ከፈለጉ፣ እባክዎ ይዘትዎን ለማቅረብ ሌሎች አማራጮችን ያስቡ።

በInternet Explorer 8 እና 9 ውስጥ የሽግግር እነማዎች አይደገፉም።

ቡትስትራፕ CSS3ን ለአኒሜሽን ብቻ ነው የሚጠቀመው፣ነገር ግን ኢንተርኔት ኤክስፕሎረር 8 እና 9 አስፈላጊ የሆኑትን የCSS ባህሪያትን አይደግፉም። ስለዚህ እነዚህን አሳሾች ሲጠቀሙ ምንም የስላይድ ሽግግር እነማዎች የሉም። ለሽግግሮች በjQuery ላይ የተመሰረቱ ውድቀቶችን ላለማካተት ሆን ብለን ወስነናል።

የመጀመሪያ ንቁ አካል ያስፈልጋል

.activeክፍሉን ወደ አንዱ ስላይድ መጨመር ያስፈልገዋል . አለበለዚያ ካሮውስ አይታይም.

የ Glyphicon አዶዎች አስፈላጊ አይደሉም

.glyphicon .glyphicon-chevron-leftክፍሎቹ እና ክፍሎቹ የግድ መቆጣጠሪያዎቹ .glyphicon .glyphicon-chevron-rightአያስፈልጉም። Bootstrap ያቀርባል .icon-prevእና .icon-nextእንደ ግልጽ የዩኒኮድ አማራጮች።

አማራጭ መግለጫ ጽሑፎች

.carousel-captionበማንኛውም ውስጥ ካለው አካል ጋር በቀላሉ መግለጫ ጽሑፎችን ወደ ስላይዶችዎ ያክሉ .item። እዚያ ውስጥ ማንኛውንም አማራጭ ኤችቲኤምኤል ያስቀምጡ እና በራስ-ሰር ይደረደራል እና ይቀረፃል።

<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"ከገጽ ጭነት ጀምሮ ካሮሴልን እንደ እነማ ለማመልከት ይጠቅማል። ከተመሳሳይ ካሮሴል (ከተደጋጋሚ እና አላስፈላጊ) ግልጽ ጃቫስክሪፕት ማስጀመሪያ ጋር በማጣመር መጠቀም አይቻልም።

በጃቫስክሪፕት በኩል

ካሮሴልን በእጅ ይደውሉ፡-

$('.carousel').carousel()

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-interval=""።

ስም	ዓይነት	ነባሪ	መግለጫ
ክፍተት	ቁጥር	5000	በንጥል በራስ-ሰር በብስክሌት መካከል የሚዘገይበት ጊዜ። ውሸት ከሆነ ካሮሴል በራስ ሰር አይሽከረከርም።
ለአፍታ አቁም	ሕብረቁምፊ \| ባዶ	"ማንዣበብ"	`"hover"`ከተዋቀረ የካሮሴልን ብስክሌት መንኮራኩሩን ባለበት ያቆማል እና `mouseenter`የካሩሰልን ብስክሌት በ ላይ ይቀጥላል `mouseleave`። ከተዋቀረ በካሩዝል `null`ላይ ማንዣበብ ለአፍታ አያቆመውም።
መጠቅለል	ቡሊያን	እውነት ነው።	ካሮሴሉ ያለማቋረጥ ማሽከርከር ወይም ጠንካራ ማቆሚያዎች ሊኖሩት ይችላል።
የቁልፍ ሰሌዳ	ቡሊያን	እውነት ነው።	ካሮሴሉ ለቁልፍ ሰሌዳ ዝግጅቶች ምላሽ መስጠት እንዳለበት።

ዘዴዎች

`.carousel(options)`

ካሮሴልን በአማራጭ አማራጮች ያስጀምረው objectእና በንጥሎች ውስጥ ብስክሌት መንዳት ይጀምራል።

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

`.carousel('cycle')`

ከግራ ወደ ቀኝ በካሮሴል እቃዎች ውስጥ ዑደቶች.

`.carousel('pause')`

ካሮሴል በንጥሎች ውስጥ በብስክሌት ከመሽከርከር ያቆመዋል።

`.carousel(number)`

ካሮሴሉን ወደ አንድ የተወሰነ ፍሬም (0 ላይ የተመሰረተ፣ ከድርድር ጋር ተመሳሳይ) ያዞራል።

`.carousel('prev')`

ወደ ቀዳሚው ንጥል ዑደቶች።

`.carousel('next')`

ወደ ቀጣዩ ንጥል ዑደቶች።

ክስተቶች

የ Bootstrap's carousel ክፍል ወደ carousel ተግባር ለመያያዝ ሁለት ክስተቶችን ያጋልጣል።

ሁለቱም ክስተቶች የሚከተሉት ተጨማሪ ባህሪያት አሏቸው:

direction: ካሮሴሉ የሚንሸራተትበት አቅጣጫ (ወይ "left"ወይም "right").
relatedTarget: እንደ ገባሪ ንጥል ወደ ቦታው እየተንሸራተተ ያለው የDOM አባል።

ሁሉም የካሮሴል ዝግጅቶች በካሩሴል እራሱ (ማለትም በ <div class="carousel">) ላይ ይቃጠላሉ.

የክስተት አይነት	መግለጫ
ስላይድ.bs.ካሮሴል	`slide`የአብነት ዘዴው ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል።
slid.bs.ካሮሴል	ካሮሴሉ የስላይድ ሽግግሩን ሲያጠናቅቅ ይህ ክስተት ይቃጠላል።

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

ለምሳሌ

የተለጠፈው ተሰኪው ማብራት position: fixed;እና ማጥፋት ሲሆን የተገኘውን ውጤት በመምሰል position: sticky;. በቀኝ በኩል ያለው ንዑስ ዳሰሳ የተለጠፈው ተሰኪ የቀጥታ ማሳያ ነው።

አጠቃቀም

ተጨማሪውን ፕለጊን በመረጃ ባህሪያት ወይም በእጅዎ በጃቫ ስክሪፕት ይጠቀሙ። በሁለቱም ሁኔታዎች፣ ለተለጠፈው ይዘትዎ አቀማመጥ እና ስፋት CSS ማቅረብ አለብዎት።

ማሳሰቢያ፡- በአንፃራዊነት በተቀመጠው ኤለመንት ላይ ለምሳሌ እንደ የተጎተተ ወይም የተገፋ አምድ ውስጥ በተያዘ ኤለመንት ላይ ተጨማሪውን ፕለጊን አይጠቀሙ። Safari አተረጓጎም ስህተት ምክንያት አይጠቀሙ ።

በ CSS በኩል አቀማመጥ

የተለጠፈው ፕለጊን በሶስት ክፍሎች መካከል ይቀየራል፣ እያንዳንዱም የተወሰነ ሁኔታን ይወክላል .affix፡ , .affix-topእና .affix-bottom. ቅጦችን ማቅረብ አለብዎት, በስተቀርposition: fixed;ትክክለኛ ቦታዎችን ለመያዝ .affixለነዚህ ክፍሎች እራስዎ (ከዚህ ፕለጊን የፀዳ)

አባሪ ተሰኪው እንዴት እንደሚሰራ እነሆ፡-

ለመጀመር፣ ተሰኪው ይጨምራል.affix-top ኤለመንቱ ከፍተኛው ቦታ ላይ እንዳለ ለማመልከት ይጨምራል። በዚህ ጊዜ የሲኤስኤስ አቀማመጥ አያስፈልግም.
ለመሰካት ከሚፈልጉት ኤለመንት ማሸብለል ትክክለኛውን መለጠፊያ መቀስቀስ አለበት። ይህ .affixየሚተካበት .affix-topእና የሚዘጋጅበት ነውposition: fixed; (በBootstrap's CSS የቀረበ) ነው።
የታችኛው ማካካሻ ከተገለጸ፣ በማሸብለል መተካት .affixያለበት .affix-bottom። ማካካሻዎች አማራጭ ስለሆኑ፣ አንዱን ማቀናበር ተገቢውን CSS እንዲያዘጋጁ ይጠይቃል። በዚህ ሁኔታ, position: absolute;አስፈላጊ ሆኖ ሲገኝ ይጨምሩ. ፕለጊኑ ኤለመንቱን ከዚያ የት እንደሚያስቀምጥ ለመወሰን የዳታ መለያውን ወይም የጃቫስክሪፕት ምርጫን ይጠቀማል።

የእርስዎን CSS ከታች ላሉት የአጠቃቀም አማራጮች ለማቀናበር ከላይ ያሉትን ደረጃዎች ይከተሉ።

በውሂብ ባህሪያት በኩል

በማንኛውም አካል ላይ በቀላሉ የመለጠፊያ ባህሪን ለመጨመር በቀላሉ ሊሰልሉት data-spy="affix"ወደሚፈልጉት አካል ያክሉ። የአንድን ንጥረ ነገር መሰካት መቼ እንደሚቀያየር ለመወሰን ማካካሻዎችን ይጠቀሙ።

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

በጃቫስክሪፕት በኩል

በጃቫ ስክሪፕት ወደ አባሪ ፕለጊን ይደውሉ፡-

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ 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')

ክስተቶች

የ Bootstrap's affix ፕለጊን ወደ አባሪ ተግባር ለመሰካት ጥቂት ክስተቶችን ያጋልጣል።

የክስተት አይነት	መግለጫ
መለጠፊያ.bs.አባሪ	ይህ ክስተት ኤለመንቱ ከመጨመሩ በፊት ወዲያውኑ ይቃጠላል.
የተለጠፈ.bs.የተለጠፈ	ይህ ክስተት ኤለመንቱን ከተለጠፈ በኋላ ይቃጠላል.
መለጠፊያ-ከላይ.ቢስ	ይህ ክስተት ኤለመንቱ ከላይ ከመለጠፉ በፊት ወዲያውኑ ይቃጠላል።
የተለጠፈ-ከላይ.bs.ተለጣፊ	ይህ ክስተት ኤለመንት-ከላይ ከተለጠፈ በኋላ ይቃጠላል።
መለጠፊያ-ከታች.bs.affix	ይህ ክስተት ኤለመንቱ-ከታች ከመለጠፉ በፊት ወዲያውኑ ይቃጠላል።
የተለጠፈ-ከታች.bs.affix	ይህ ክስተት ኤለመንት-ከታች ከተለጠፈ በኋላ ይቃጠላል።

ጃቫስክሪፕት

አጠቃላይ እይታ

የግለሰብ ወይም የተጠናቀረ

የተቀናበረውን ጃቫስክሪፕት በመጠቀም

የተሰኪ ጥገኛዎች

የውሂብ ባህሪያት

በአንድ አካል አንድ ፕለጊን በመረጃ ባህሪያት በኩል ብቻ

ፕሮግራማዊ ኤፒአይ

ነባሪ ቅንብሮች

ግጭት የለም።

ክስተቶች

የስሪት ቁጥሮች

ጃቫ ስክሪፕት ሲሰናከል ምንም ልዩ ውድቀት የለም።

የሶስተኛ ወገን ቤተ-መጻሕፍት

ሽግግሮች. js

ስለ ሽግግሮች

ውስጥ ያለው

ሽግግሮችን በማሰናከል ላይ

ሞዳል ሞዳል.js

በርካታ ክፍት ሞዳል አይደገፍም።

የሞዳል ምልክት አቀማመጥ

የሞባይል መሳሪያ ማስጠንቀቂያዎች

ምሳሌዎች

የማይንቀሳቀስ ምሳሌ

የቀጥታ ማሳያ

ሞዳሎችን ተደራሽ ያድርጉ

የዩቲዩብ ቪዲዮዎችን በማካተት ላይ

አማራጭ መጠኖች

እነማ አስወግድ

የፍርግርግ ስርዓቱን በመጠቀም

በመቀስቀሻ ቁልፍ ላይ በመመስረት የሞዳል ይዘት መለዋወጥ

አጠቃቀም

በውሂብ ባህሪያት በኩል

በጃቫስክሪፕት በኩል

አማራጮች

ዘዴዎች

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

ክስተቶች

ተቆልቋይ ተቆልቋይ .js

ምሳሌዎች

በናቭባር ውስጥ

በክኒኖች ውስጥ

አጠቃቀም

በውሂብ ባህሪያት በኩል

በጃቫስክሪፕት በኩል

data-toggle="dropdown"አሁንም ያስፈልጋል

አማራጮች

ዘዴዎች

$().dropdown('toggle')

ክስተቶች

ScrollSpy scrollspy.js

ምሳሌ በ navbar ውስጥ

@ ስብ

@mdo

አንድ

ሁለት

three

አጠቃቀም

Bootstrap nav ያስፈልገዋል

ሊፈቱ የሚችሉ መታወቂያዎች ያስፈልጋሉ።

ኢላማ ያልሆኑ :visibleአካላት ችላ ተብለዋል።

አንጻራዊ አቀማመጥ ያስፈልገዋል

በውሂብ ባህሪያት በኩል

በጃቫስክሪፕት በኩል

ዘዴዎች

.scrollspy('refresh')

አማራጮች

ክስተቶች

ሊቀያየሩ የሚችሉ ትሮች tab.js

ምሳሌ ትሮች

የታረመ አሰሳን ያራዝማል

አጠቃቀም

ምልክት ማድረጊያ

ተፅዕኖን አደብዝዝ

ዘዴዎች

$().tab

`.modal(options)`

`.modal('toggle')`

`.modal('show')`

`.modal('hide')`

`.modal('handleUpdate')`

`data-toggle="dropdown"`አሁንም ያስፈልጋል

`$().dropdown('toggle')`

ኢላማ ያልሆኑ `:visible`አካላት ችላ ተብለዋል።

`.scrollspy('refresh')`

`$().tab`

`.tab('show')`

`$().tooltip(options)`

`.tooltip('show')`

`.tooltip('hide')`

`.tooltip('toggle')`

`.tooltip('destroy')`

`$().popover(options)`

`.popover('show')`

`.popover('hide')`

`.popover('toggle')`

`.popover('destroy')`

`$().alert()`

`$().alert('close')`