ጃቫስክሪፕት · ቡትስትራፕ ብቋንቋ ትግርኛ

ውልቃዊ ወይ ዝተጠርነፈ

ፕላጊናት ብውልቂ (ናይ ቡትስትራፕ ውልቃዊ *.jsፋይላት ብምጥቃም)፣ ወይ ኩሎም ብሓንሳብ (ብምጥቃም bootstrap.jsወይ ዝተቐነሰ bootstrap.min.js) ክካተቱ ይኽእሉ።

ነቲ ዝተጠርነፈ ጃቫስክሪፕት ብምጥቃም

ክልቲኦምን ኩሎም ፕላጊናት ኣብ ሓደ ፋይል ዝሓዙን እዮም bootstrap.js። bootstrap.min.jsሓደ ጥራይ ኣካትት።

ጽግዕተኛታት ፕላግ-ኢን

ገለ ፕላጊናትን CSS ኣካላትን ኣብ ካልኦት ፕላጊናት ይምርኮሱ። ፕላጊናት ብውልቂ እንተ ኣካቲትካዮም፡ ነዞም ጽግዕተኛታት ኣብቲ docs ምፍታሽካ ኣረጋግጽ። ከምኡ ውን ኩሎም ፕላጊናት ኣብ jQuery ከም ዝምርኮሱ ኣስተውዕል (እዚ ማለት jQuery ቅድሚ እቶም ፕላግ-ኢን ፋይላት ክካተት ኣለዎ )። ኣየኖት ስሪት ናይ jQuery ከም ዝድገፉ ንምርኣይ ናትና ተወከሱ ።bower.json

ናይ ዳታ ባህርያት

ኩሎም Bootstrap plugins ጽሩይ ብመንገዲ markup API ክትጥቀመሎም ትኽእል ኢኻ ሓንቲ መስመር ጃቫስክሪፕት ከይጸሓፍካ። እዚ ናይ Bootstrap ቀዳማይ ደረጃ API ኮይኑ ፕላግ-ኢን ክትጥቀም ከለኻ ቀዳማይ ኣብ ግምት ከተእትዎ ይግባእ።

እዚ ክበሃል ከሎ፡ ኣብ ገለ ኩነታት ነዚ ተግባር ምጥፋእ ተመራጺ ክኸውን ይኽእል እዩ። ስለዚ፡ ንኹሎም ኣብቲ ብስም ዝተቐመጠ ሰነድ ዝርከቡ ፍጻመታት ብምፍታሕ፡ ነቲ ናይ ዳታ ባህሪ ኤፒኣይ ናይ ምዕጻው ዓቕሚ እውን ንህብ data-api። እዚ ከምዚ ይመስል፤

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

ከም ኣማራጺ፡ ንሓደ ፍሉይ ፕላግ-ኢን ዕላማ ንምግባር፡ ስም ናይቲ ፕላግ-ኢን ከም ቦታ ስም ምስቲ data-api namespace ከምዚ ዝኣመሰለ ጥራይ ኣካትትዎ፤

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

ብመንገዲ ዳታ ባህርያት ኣብ ነፍሲ ወከፍ ባእታ ሓደ ፕላግ-ኢን ጥራይ

ካብ ብዙሓት ፕላጊናት ኣብ ሓደ ባእታ ዝመጽእ ናይ ዳታ ባህርያት ኣይትጠቐም። ንኣብነት ሓደ መጠወቒ ክልቲኡ ቱልቲፕ ክህልዎን ሞዳል ክቕይርን ኣይክእልን እዩ። ነዚ ንምፍጻም ድማ መጠቕለሊ ባእታ ተጠቐም።

ፕሮግራማዊ ኤፒኣይ

ብተወሳኺ ንኹሎም Bootstrap plugins ብጃቫስክሪፕት ኤፒኣይ ጥራይ ኣቢልካ ክትጥቀመሎም ክትክእል ኣለካ ኢልና ንኣምን። ኩሎም ህዝባዊ ኤፒኣይታት ንጽል፣ ብሰንሰለት ዝእሰሩ ኣገባባት እዮም፣ ከምኡውን ነቲ ዝተዋስአሉ እኽብካብ ይመልሱ።

$('.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 plugins ምስ ካልኦት UI frameworks ምጥቃም የድሊ። ኣብ ከምዚ ኩነታት፡ ሓሓሊፉ ናይ ስም ቦታ ምግጫው ከጋጥም ይኽእል። .noConflictእዚ እንተ ኣጋጢሙ ፡ ነቲ ዋጋኡ ክትመልሶ እትደሊ ፕላግ-ኢን ክትድውለሉ ትኽእል ኢኻ።

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

ፍጻሜታት

ቡትስትራፕ ንመብዛሕትኦም ፍሉያት ተግባራት ፕላጊናት ብሕታዊ ፍጻመታት ይህብ። ብሓፈሻ እዚኦም ብዘይውዳእን ሕሉፍ ረባሕታውን መልክዕ ይመጹ - ኣብዚ እቲ ዘይውዳእ (ex. show) ኣብ መጀመርታ ናይ ሓደ ፍጻመ ይብገስ፣ ሕሉፍ ረባሕታኡ መልክዑ (ex. shown) ድማ ምስ ምዝዛም ሓደ ተግባር ይብገስ።

ካብ 3.0.0 ጀሚሩ ኩሎም ናይ ቡትስትራፕ ፍጻመታት ብስም ዝተፈላለዩ እዮም።

ኩሎም ዘይውዳእ ፍጻመታት 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>፡ ነቲ ኩነታት ንምግላጽ (ከምኡ’ውን ከመይ ጌርካ ጃቫስክሪፕት ዳግማይ ከም እተኽእሎ) ንተጠቀምትኻ ንምግላጽ፡ ከምኡ’ውን/ወይ ናይ ገዛእ ርእስኻ ብሕታዊ ምምላስ ንምውሳኽ ተጠቐም።

ናይ ሳልሳይ ወገን ቤተ መጻሕፍቲ

ቡትስትራፕ ከም ፕሮቶታይፕ ወይ jQuery UI ዝኣመሰሉ ናይ ሳልሳይ ወገን ጃቫስክሪፕት ቤተ-መጻሕፍቲ ብወግዒ ኣይድግፍን እዩ ። ዋላ እኳ .noConflictእንተሃለዉን ብስም ዝተቐመጡን ፍጻመታት፡ ባዕልኻ ክትእርሞም ዘለካ ናይ ምትእስሳር ጸገማት ክህልዉ ይኽእሉ እዮም።

ብዛዕባ ምስግጋር

ንቐሊል ናይ ምስግጋር ውጽኢታት transition.js፡ ሓንሳብ ጎኒ ጎኒ እቶም ካልኦት JS ፋይላት ኣካትት። ነቲ ዝተጠርነፈ (ወይ ዝተቐነሰ) ትጥቀም እንተኾንካ bootstrap.js፡ ነዚ ምሕዋስ ኣየድልን እዩ-ድሮ ኣሎ።

ኣብ ውሽጢ እንታይ ኣሎ።

Transition.js ንፍጻመታት መሰረታዊ ሓጋዚ transitionEndከምኡ’ውን ናይ CSS መሰጋገሪ ኤሙለተር እዩ። እቶም ካልኦት ፕላጊናት ንናይ CSS ምስግጋር ደገፍ ንምፍታሽን ንዝተሰቕሉ ምስግጋራት ንምሓዝን ይጥቀሙሉ።

ምስግጋራት ምዕጻው

ምስግጋራት ብዓለም ደረጃ ነዚ ዝስዕብ ቁንጣሮ ጃቫስክሪፕት ተጠቒምካ ክስረዝ ይኽእል እዩ፣ እዚ ድሕሪ transition.js(ወይ bootstrap.jsወይ bootstrap.min.js፣ ከም ኣድላይነቱ) ምጽዓኑ ክመጽእ ኣለዎ፤

$.support.transition = false

ሞዳላት ስሉጥ፡ ግን ከኣ ተዓጻጻፊ፡ ዝወሓደ ዘድሊ ተግባርን ብልሒ ዘለዎ ነባሪን ዘለዎም ናይ ዝርርብ ምሕጽንታታት እዮም።

ብዙሓት ክፉታት ሞዳላት ኣይድገፉን።

ካልእ ገና እናተራእየ ከሎ ሞዳል ዘይምኽፋትካ ኣረጋግጽ። ኣብ ሓደ እዋን ካብ ሓደ ንላዕሊ ሞዳል ምርኣይ ብሕታዊ ኮድ የድሊ።

HTML5 ትርጉሙ ብኸመይ ከም ዝገልጾ ምኽንያት፡ እቲ autofocusHTML ባህሪ ኣብ ቡትስትራፕ ሞዳላት ዝኾነ ጽልዋ የብሉን። ተመሳሳሊ ውጽኢት ንምርካብ ገለ ብሕታዊ ጃቫስክሪፕት ተጠቐም፤

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

ኣማራጺ ዓቐናት

ሞዳላት ክልተ ኣማራጺ ዓቐናት ኣለዎም፣ ብመንገዲ መቐየሪ ክፍልታት ኣብ ሓደ ንኽቕመጡ ይርከቡ .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>

ስርዓት ሽቦ ብምጥቃም

.rowኣብ ውሽጢ ሓደ ሞዳል ንዘሎ Bootstrap grid system ንምጥቃም ፡ ኣብ ውሽጢ the s ጥራይ nest .modal-bodyድሕሪኡ ንቡር grid system classes ተጠቐም።

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

ኩሎም ሓደ ዓይነት ሞዳል ዝጅምሩ ዕስለ መጠወቒታት ኣለዉኻ፣ ቁሩብ ዝተፈላለየ ትሕዝቶ ጥራይ ዘለዎም? ትሕዝቶ ናይቲ ሞዳል ከከምቲ ዝተጠወቐ መጠወቒ ንምቕያር ባህርያትን HTMLevent.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>to override default scrolling behavior ይውስኽን .modal-backdropካብቲ ሞዳል ወጻኢ ክትጥውቕ ከለኻ ንዝተራእዩ ሞዳላት ንምብራር ናይ ጠውቂ ቦታ ንምሃብ a ይፈጥርን።

ብመንገዲ ባህርያት ዳታ

ጃቫስክሪፕት ከይጸሓፍካ ሞዳል ኣንቀሳቕሶ። ኣብ ሓደ ተቖጻጻሪ ባእታ ኣቐምጥ data-toggle="modal"፣ ከም መጠወቒ፣ ምስ ሓደ data-target="#foo"ወይ href="#foo"ንሓደ ፍሉይ ሞዳል ንምዕላም ንምቕያር።

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

ብመንገዲ ጃቫስክሪፕት።

ንሓደ ሞዳል ምስ id myModalብሓደ መስመር ጃቫስክሪፕት ጸውዑ፤

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

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-backdrop="".

ሽም	ዓይነት	ትሑዝ	መግለፂ
ድሕረ ባይታ	boolean ወይ ድማ እቲ ሕብረ ቃላት`'static'`	ሓቂ	ሞዳል-ባክድሮፕ ባእታ ዘጠቓልል እዩ። ከም ኣማራጺ `static`፡ ነቲ ሞዳል ኣብ ጠውቂ ዘይዓጽዎ ድሕረ ባይታ ግለጽ።
ቁልፊ ሰሌዳ	ቡልያን ዝብል እዩ።	ሓቂ	መፍትሕ ምህዳም ምስ ዝጽቀጥ ነቲ ሞዳል ይዓጽዎ።
አርኢ	ቡልያን ዝብል እዩ።	ሓቂ	ሞዳል ኣብ ዝጅምረሉ እዋን የርኢ።
መቆፃፀሪ	መንገዲ	ሓሶት	እዚ ኣማራጺ ካብ v3.3.0 ጀሚሩ ተኣልዩ ኣብ v4 ተኣልዩ ኣሎ። ኣብ ክንድኡ ብወገን ዓሚል ቅጥዒ ወይ ዳታ መእሰሪ ፍሬምዎርክ ክትጥቀም ንመክር፣ ወይ ባዕልኻ jQuery.load ክትጽውዕ ። ርሑቕ URL እንተተዋሂቡ ፡ ትሕዝቶ ብመንገዲ jQuery's ሜላ ሓደ ግዜ`load` ይጽዓንን ኣብቲ `.modal-content`div ክውጋእን እዩ። ነቲ data-api ትጥቀም እንተኾንካ፡ ከም ኣማራጺ ነቲ `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">).

ዓይነት ፍጻመ	መግለፂ
show.bs.modal ዝብል ጽሑፍ ኣሎ።	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ። ብሰንኪ ጠውቂ ዝመጽእ እንተኾይኑ፡ እቲ ዝተጠውቐ ባእታ ከም `relatedTarget`ንብረት ናይቲ ፍጻመ ይርከብ።
ዝተራእየ.bs.modal	እዚ ክስተት ዝትኮስ እቲ ሞዳል ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (CSS ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)። ብሰንኪ ጠውቂ ዝመጽእ እንተኾይኑ፡ እቲ ዝተጠውቐ ባእታ ከም `relatedTarget`ንብረት ናይቲ ፍጻመ ይርከብ።
hide.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>

URLs ብናይ ምትእስሳር መጠወቒታት ከምዘይተበላሸዉ ንምሕላው፡ ኣብ 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-api ትጥቀም ብዘየገድስ data-toggle="dropdown"፡ ኩሉ ግዜ ኣብቲ ንቑልቁል ዝወርድ መበገሲ ባእታ ህልው ክህሉ ይግደድ።

ኣማራጺታት

ዋላ ሓደ

ኣገባባት

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

ናይ ሓደ ዝተዋህበ ናቭባር ወይ ትቦ ዘለዎ ምድህሳስ ንቑልቁል ዝወርድ ዝርዝር ይቕይሮ።

ፍጻሜታት

ኩሎም ንቑልቁል ዝወርድ ፍጻመታት ኣብቲ .dropdown-menu's ወላዲ ባእታ ይትኮሱ።

ኩሎም ንቑልቁል ዝወርድ ፍጻመታት ሓደ relatedTargetንብረት ኣለዎም፣ ዋጋኡ ድማ እቲ ዝቕይር መልህቕ ባእታ እዩ።

ዓይነት ፍጻመ	መግለፂ
show.bs.dropdown ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ show instance ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ።
shown.bs.dropdown ዝብል ጽሑፍ ኣሎ።	እዚ ክስተት ዝትኮስ እቲ ንቑልቁል ዝወርድ ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (ክሳብ CSS ምስግጋራት ክጽበ እዩ፣ ክሳብ ዝዛዘም)።
hide.bs.dropdown ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ hide instance method ምስ ተጸውዐ ብቕጽበት ይትኮስ።
hidden.bs.dropdown ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ ንቑልቁል ዝወርድ ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ ዝትኮስ (ንCSS ምስግጋራት ክጽበ እዩ፣ ክሳብ ዝዛዘም)።

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

ኣብነት ኣብ navbar

እቲ ScrollSpy ዝበሃል ፕላግ-ኢን ኣብ ስክሮል ኣቀማምጣ ተመርኲስካ ንኣውቶማቲክ ዕላማታት nav ንምዕራፍ ዝዓለመ እዩ። ኣብ ትሕቲ navbar ዘሎ ቦታ ስክሮል ብምግባር ነቲ ንጡፍ ክፍሊ ለውጢ ርአ። እቶም ንቑልቁል ዝወርድ ንኡሳን ነገራት እውን ክጎልሑ እዮም።

@ረጒድ

ኣድ ሌጊንስ keytar, ብርንች id ስነ ጥበብ ፓርቲ dolor labore. ፒችፎርክ yr enim lo-fi ቅድሚ ምሻጦም qui. Tumblr ካብ ሕርሻ ናብ ጠረጴዛ መሰል ብሽክለታ ዝኾነ ይኹን። ኣኒም ከፊየህ ካርለስ ካርዲጋን። Velit seitan mcsweeney ናይ ስእሊ ዳስ 3 ዝብኢ ወርሒ irure. ኮስቢ ስዊተር ሎሞ ጂን ሓጺር ስረ፡ ዊልያምስበርግ ሁዲ ሚኒክ ኪ ምናልባት ብዛዕባኦም ኣይሰማዕኩምን ኢኹም et cardigan trust fund culpa biodiesel wes anderson aesthetic. ኒሂል ንቕሳት accusamus, cred ኢሮኒ ባዮዲዘል keffiyeh ስነ ጥበባዊ ኡላምኮ consequat.

@mdo ዝብል ጽሑፍ ኣሎ።

ቬንያም ማርፋ ጭሕሚ ስኬትቦርድ፣ adipisicing ፉጂያት ቬሊት ፒችፎርክ ጭሕሚ። ፍሪጋን ጭሕሚ ኣሊክዋ ኩፒዳታት mcsweeney's vero. ኩፒዳታት ኣርባዕተ ሎኮ ኒሲ፡ ኢኣ ሄልቨቲካ ኑላ ካርለስ። ንቕሳት ዘለዋ ኮስቢ ስዊተር ናይ መግቢ ናይ ጽዕነት መኪና፣ mcsweeney's quis non freegan vinyl. ሎ-ፋይ ዌስ ኣንደርሰን +1 ሳርቶርያል። ካርለስ ዘይ ስነ-ጽባቐ ምውስዋስ ኣካላት quis gentrify. ብሩክሊን adipisicing ኢደ ጥበብ ቢራ ምክትል keytar deserunt.

ሓደ

ኦካኤካት ኮሞዶ ኣሊክዋ ዲሌክቱስ. ፋፕ ኢደ ጥበብ ቢራ deserunt ስኬትቦርድ ea. ሎሞ ብሽክለታ መሰል adipisicing banh mi, velit ea sunt ቀጻሊ ደረጃ locavore ንጽል-መበቆል ቡን ኣብ ማግና ቬኒያም. ልዑል ህይወት id ቪኒል, መቓልሕ ፓርክ consequat quis aliquip banh mi ፒችፎርክ. ቨሮ ቪኤችኤስ ኤስት ኣዲፒሲሲንግ። Consectetur nisi DIY ዝተሓተ መልእኽተኛ ቦርሳ። Cred ex ኣብ, ዘላቒ delectus consectetur ፋኒ ፓክ 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 blog, culpa መልእኽተኛ ቦርሳ ማርፋ ዝኾነ ይኹን ዲሌክቱስ መግቢ ናይ ጽዕነት መኪና. ሳፒየንተ ሲንት id ኣሱመንዳ። Locavore sed helvetica cliche irony, ነጎዳታት ምናልባት ዘይሰማዕካዮም consequat hoodie ካብ ግሉተን ነጻ ዝኾነ lo-fi fap aliquip. Labore elit placeat ቅድሚ ምሻጦም ምውዳኦም፣ ቴሪ ሪቻርድሰን proident ብርንች nesciunt quis cosby ስዊተር pariatur keffiyeh ut helvetica ስነ ጥበባዊ. ካርዲጋን ኢደ ጥበብ ቢራ seitan ድሉው velit. ቪኤችኤስ ቻምብራይ ላቦሪስ ቴምፖር ቬኒያም። ኣኒም ሞሊት ሚኒም ኮሞዶ ኡላምኮ ነጎዳታት።

ኣጠቓቕማ

Bootstrap nav የድልዮ

ኣብዚ እዋን እዚ Scrollspy ንጡፋት መላግቦታት ብግቡእ ንምድማቕ Bootstrap nav component ምጥቃም የድሊ ።

ፍታሕ ዝግበረሎም ናይ መለለዪ መንነት ዕላማታት የድሊ

ናቭባር ሊንክታት ዝፍታሕ id ዕላማታት ክህልዎም ኣለዎ። ንኣብነት a <a href="#home">home</a>ምስ ገለ ኣብ DOM ከም <div id="home"></div>.

ዕላማ ዘይኮኑ `:visible`ባእታታት ዕሽሽ ተባሂሎም

:visibleብመሰረት jQuery ዘይኮኑ ዕላማ ዝገበሩ ባእታታት ዕሽሽ ክበሃሉን ተዛመድቲ nav ነገራት ፈጺሞም ኣይድመቑን እዮም።

ኣንጻራዊ ኣቀማምጣ ይሓትት።

ኣገባብ ኣተገባብራ ብዘየገድስ፡ scrollspy ኣብቲ ትስልዮ position: relative;ዘለኻ ባእታ ምጥቃም የድሊ። ኣብ መብዛሕትኡ እዋን እዚ እቲ <body>. ካብ ባእታታት ወጻኢ ኣብ ካልእ ባእታታት ክትሽክርክር ከለኻ ፡ ስብስብ ምህላውካን ምትግባርካን <body>ኣረጋግጽ ።heightoverflow-y: scroll;

ብመንገዲ ባህርያት ዳታ

ብቐሊሉ ስክሮልስፒ ባህሪ ኣብ ላዕለዋይ ባር ምድህሳስካ ንምውሳኽ፡ ኣብቲ ክትስልዮ data-spy="scroll"እትደሊ ባእታ ወስኸሉ (ብብዝሒ እዚ እቲ ምኾነ <body>)። ድሕሪኡ ነቲ data-targetባህሪ ምስቲ ID ወይ class ናይቲ ወላዲ ባእታ ናይ ዝኾነ Bootstrap .navcomponent ንውስኸሉ።

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;ብመንገዲ ጃቫስክሪፕት ናብቲ scrollspy ደውልሉ፤

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

ኣገባባት

`.scrollspy('refresh')`

scrollspy ምስ ምውሳኽ ወይ ምእላይ ባእታታት ካብ DOM ተተሓሒዙ ክትጥቀመሉ ከለኻ፡ ነቲ ናይ ምሕዳስ ሜላ ከምዚ ጌርካ ክትጽውዖ ከድልየካ እዩ፤

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

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-offset="".

ሽም	ዓይነት	ትሑዝ	መግለፂ
ኦፍሴት ዝበሃል ምዃኑ’ዩ።	ቑጽሪ	10.	ኣቀማምጣ ስክሮል ኣብ እትሕሰብሉ እዋን ካብ ላዕሊ ክትቅይሩ እትኽእሉ ፒክሰላት።

ፍጻሜታት

ዓይነት ፍጻመ	መግለፂ
activate.bs.scrollspy ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ ሓድሽ ኣቕሓ ብስክሮልስፒ ኣብ ዝንቀሳቐሰሉ እዋን ይትኩስ።

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

ኣብነት ትቦታት

ቅልጡፍን ዳይናሚክን ናይ ትብ ተግባር ብመንገዲ መስኮታት ናይ ከባብያዊ ትሕዝቶ ንምስግጋር ወስኸሉ፣ ዋላ ብመንገዲ ንቑልቁል ዝወርድ ምልክታታት። ዝተሰቕሉ ትቦታት ኣይድገፉን እዮም።

ጥረ ዲኒም ምናልባት ዘይሰማዕካዮም ጂን ሓጺር ኦስቲን። Nesciunt ቶፉ stumptown aliqua, ሬትሮ ሲንት ማስተር ጽሬት. ጭሕሚ ክሊሸ ግዝያዊ፡ ዊልያምስበርግ ካርለስ ቪጋን ሄልቨቲካ። Reprehenderit ስጋ ሬትሮ ኬፊየህ ሕልሚ ዝሕዝ ሲንት. ኮስቢ ስዊተር eu banh mi, qui irure ቴሪ ሪቻርድሰን ኤክስ ስኩዊድ. Aliquip placeat ሳልቭያ ሲሉም ኣይፎን. Seitan aliquip quis ካርዲጋን ኣሜሪካዊ ኣልባሳት፣ ስጋ ዝሸይጥ 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.

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ን and nav-tabsclasses ኣብቲ ትብ ምውሳኽ ን ulBootstrap tab stylingnav ክትግብር ’ ዩ ፣ and classes ምውሳኽ ድማ pill stylingnav-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`

ንሓደ ናይ ትብ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። Tab ኣብ DOM ወይ a 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.taband hidden.bs.tabevents ኣይክተኮስን እዩ።

ዓይነት ፍጻመ	መግለፂ
show.bs.tab ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`
shown.bs.tab ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`
hide.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ን opt-in እዮም፡ ማለት ባዕልኻ ክትጅምሮም ኣለካ ።

ሓደ ካብቲ ኣብ ሓደ ገጽ ንዘሎ ኩሉ ምኽርታት መሳርሒታት ንምጅማር ዝሕግዝ መንገዲ ብባህርያቶም ምምራጽ ምኾነ data-toggle፤

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

ኣጠቓቕማ

እቲ ናይ መሳርሒ ምኽሪ ፕላግ-ኢን ትሕዝቶን ምልክትን ብመሰረት ጠለብ የፍሪ፣ ብነባሪ ድማ ድሕሪ እቲ መበገሲ ባእታኦም መተሓሳሰቢ መሳርሒታት የቐምጥ።

ነቲ ናይ መሳርሒ ምኽሪ ብመንገዲ ጃቫስክሪፕት ኣበግሶ፤

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

ምልክት ምግባር

ንሓደ መሳርሒ ምኽሪ ዘድሊ ምልክት dataባህሪ ጥራይ ኮይኑ titleኣብቲ HTML ባእታ ምኽሪ መሳርሒ ክህልወካ ትደሊ። እቲ ዝፍጠር ምልክት ናይ ሓደ መሳርሒ ምኽሪ ምናልባት ቀሊል እዩ፣ ዋላ እኳ ቦታ ዝሓትት እንተኾነ (ብነባሪ፣ 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 እንተተጨኒቕካ ጽሑፍ ተጠቐም።
ምምዳብ	ሕብረ ቃላት \| ተግባር	'ላዕለዋይ'	ከመይ ጌርና ንመሳርሒ ምኽሪ ነቐምጦ - top \| ታሕተዋይ ክፋል \| ጸጋም \| ትኽክል \| ኣውቶማቲክ። "auto" ምስ ዝግለጽ፡ ነቲ መሳርሒ ምኽሪ ብዳይናሚክ ዳግማይ ከቕንዖ እዩ። ንኣብነት ምቕማጥ "ኣውቶ ጸጋም" እንተኾይኑ፡ እቲ መሳርሒ ምኽሪ ብዝተኻእለ መጠን ንጸጋም ክረአ እዩ፡ እንተዘይኮይኑ ንየማን ክረአ እዩ። ሓደ ፋንክሽን ንኣቀማምጣ ንምውሳን ኣብ ዝጥቀመሉ እዋን፡ ቱልቲፕ DOM ኖድ ከም ቀዳማይ ሞጎተኡ፡ እቲ ትሪግሪንግ ኤለመንት DOM ኖድ ድማ ከም ካልኣይ ጌሩ ይጽዋዕ። እቲ `this`ዓውዲ ናብቲ ናይ መሳርሒ ምኽሪ ምሳሌ ይቕመጥ።
መምረጺ	ገመድ	ሓሶት	ሓደ መምረጺ እንተተዋሂቡ፡ ናይ መሳርሒ ምኽሪ ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም። ብተግባር እዚ ዳይናሚክ ኤችቲኤምኤል ትሕዝቶ መሳርሒታት ምኽሪ ንኽውሰኽ ንምኽኣል ይጥቀመሉ። ነዚን መሃሪ ኣብነትን ርአ ።
ቅጥዒ	ገመድ	`'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'`	ንመሳርሒ ምኽሪ ክትፈጥር ከለኻ ክትጥቀመሉ እትደሊ HTML መሰረት ግበር። እቲ tooltip's `title`ኣብቲ `.tooltip-inner`. `.tooltip-arrow`ናይቲ መሳርሒ ፍላጻ ክኸውን እዩ። እቲ ደጋዊ ዝኾነ መጠቕለሊ ባእታ `.tooltip`ክፍሊ ክህልዎ ይግባእ።
ርእሲ	ሕብረ ቃላት \| ተግባር	'' ።	`title`ባህሪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ ። ሓደ ፋንክሽን እንተተዋሂቡ `this`፡ መወከሲኡ ምስቲ መሳርሒ ቲፕ ዝተተሓሓዘሉ ባእታ ሒዙ ክጽዋዕ እዩ።
ምልዕዓል	ገመድ	'ሆቨር ፎኮስ' ዝብል ጽሑፍ ኣሎ።	ከመይ ጌሩ tooltip ይጅምር - \| ጠውቕ hover \| ትኹረት \| ናይ ኢድ. ብዙሓት መበገሲታት ክትሓልፍ ትኽእል ኢኻ፤ ብነጥቢ ፍለዮም። `manual`ምስ ዝኾነ ካልእ መበገሲ ክውሃሃድ ኣይክእልን።
viewport ዝብል ጽሑፍ ኣሎ።	ሕብረ ቃላት \| ኣቕሓ \| ተግባር	{ መምረጺ: 'ኣካል', መሸፈኒ: 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.tooltipወይ hidden.bs.tooltipፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ። እዚ ከም "ብኢድ" ምብጋስ ናይቲ መሳርሒ ምኽሪ ይቑጸር።

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

`.tooltip('destroy')`

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይሓብኦን የጥፍኦን። ውክልና ዝጥቀሙ ምኽርታት መሳርሒታት ( እቲ selectorኣማራጺ ተጠቒሞም ዝፍጠሩ ) ኣብ ዘርኢ መበገሲ ባእታታት ብውልቂ ክጠፍኡ ኣይክእሉን።

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

ፍጻሜታት

ዓይነት ፍጻመ	መግለፂ
show.bs.tooltip ዝብል ጽሑፍ ኣሎ።	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
shown.bs.tooltip ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ዝትኮስ እቲ ምኽሪ መሳርሒ ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (CSS ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
hide.bs.tooltip ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ ናይ `hide`ምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
hidden.bs.tooltip ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ መሳርሒ ምኽሪ ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ ዝትኮስ (ምስግጋር CSS ክሳብ ዝዛዘም ክጽበ እዩ)።
inserted.bs.tooltip ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ድሕሪ እቲ `show.bs.tooltip`ፍጻመ ዝትኮስ እቲ ናይ መሳርሒ ምኽሪ ቅጥዒ ናብ DOM ምስ ተወሰኸ እዩ።

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

ንኣሽቱ ምድብላቕ ትሕዝቶታት፡ ከምቲ ኣብ iPad ዘሎ፡ ኣብ ዝኾነ ባእታ ካልኣዊ ሓበሬታ ንምቕማጥ ወስኸሉ።

ኣርእስቶምን ትሕዝቶኦምን ዜሮ ንውሓት ዘለዎም ፖፖቨርስ ፈጺሞም ኣይርኣዩን እዮም።

ናይ ምምራጽ ተግባር

ብሰንኪ ኣፈጻጽማ ምኽንያት፡ እቶም Tooltipን Popover data-apisን opt-in እዮም፡ ማለት ባዕልኻ ክትጅምሮም ኣለካ ።

ሓደ ካብቲ ንኹሎም ኣብ ሓደ ገጽ ዝርከቡ ፖፖቨርስ ንምጅማር ዝሕግዝ መንገዲ ብባህርያቶም ምምራጽ ምኾነ 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.	ምድንጓይ ምርኣይን ምሕባእን ፖፖቨር (ms) - ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ። ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር ኣቃውማ ኣቕሓ፤`delay: { "show": 500, "hide": 100 }`
html ዝብል ጽሑፍ ኣሎ።	ቡልያን ዝብል እዩ።	ሓሶት	ኣብቲ ፖፖቨር ኤችቲኤምኤል ኣእትዉ። ሓሶት እንተኾይኑ፡ ናይ jQuery `text`ሜላ ትሕዝቶ ናብ DOM ንምእታው ክጥቀም እዩ። ብዛዕባ መጥቃዕቲ XSS እንተተጨኒቕካ ጽሑፍ ተጠቐም።
ምምዳብ	ሕብረ ቃላት \| ተግባር	'ትኽክል'	ከመይ ጌርና ፖፖቨር ንቕመጦ - top \| ታሕተዋይ ክፋል \| ጸጋም \| ትኽክል \| ኣውቶማቲክ። "auto" ምስ ዝግለጽ፡ ነቲ ፖፖቨር ብዳይናሚክ ዳግማይ ኣንፈት ክህቦ እዩ። ንኣብነት ምቕማጥ "ኣውቶ ጸጋም" እንተኾይኑ፡ እቲ ፖፖቨር ብዝተኻእለ መጠን ንጸጋም ክረአ እዩ፡ እንተዘይኮይኑ ንየማን ክረአ እዩ። ሓደ ፋንክሽን ነቲ ኣቀማምጣ ንምውሳን ክጥቀመሉ ከሎ፡ እቲ ፖፖቨር DOM ኖድ ከም ቀዳማይ ሞጎተኡ፡ እቲ ትሪግሪንግ ኤለመንት DOM ኖድ ድማ ከም ካልኣይ ኰይኑ ይጽዋዕ። እቲ `this`ዓውዲ ናብቲ popover instance ይቕመጥ።
መምረጺ	ገመድ	ሓሶት	ሓደ መምረጺ እንተተዋሂቡ፡ ፖፖቨር ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም። ብተግባር እዚ ዳይናሚክ ኤችቲኤምኤል ትሕዝቶ ፖፖቨርስ ክውሰኽ ንምኽኣል ይጥቀመሉ። ነዚን መሃሪ ኣብነትን ርአ ።
ቅጥዒ	ገመድ	`'<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`፡ መወከሲኡ ምስቲ ፖፖቨር ዝተተሓሓዘሉ ባእታ ተሰሪዑ ክጽዋዕ እዩ።
ምልዕዓል	ገመድ	'ጠውቕ'።	ፖፖቨር ብኸመይ ይጅምር - \| ጠውቕ hover \| ትኹረት \| ናይ ኢድ. ብዙሓት መበገሲታት ክትሓልፍ ትኽእል ኢኻ፤ ብነጥቢ ፍለዮም። `manual`ምስ ዝኾነ ካልእ መበገሲ ክውሃሃድ ኣይክእልን።
viewport ዝብል ጽሑፍ ኣሎ።	ሕብረ ቃላት \| ኣቕሓ \| ተግባር	{ መምረጺ: 'ኣካል', መሸፈኒ: 0 }	ነቲ ፖፖቨር ኣብ ውሽጢ ደረት ናይዚ ባእታ ይሕዞ። ኣብነት `viewport: '#viewport'`፡ ወይ`{ "selector": "#viewport", "padding": 0 }` ሓደ ፋንክሽን እንተተዋሂቡ፡ ነቲ መበገሲ ባእታ DOM node ከም እንኮ ሞጎተኡ ሒዙ ይጽዋዕ። እቲ `this`ዓውዲ ናብቲ popover instance ይቕመጥ።

ኣገባባት

`$().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`ምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ.ብስ.ድኻ	እዚ ፍጻመ እዚ እቲ ፖፖቨር ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ ዝትኮስ (ምስግጋር CSS ክሳብ ዝዛዘም ክጽበ እዩ)።
ኣእትዩ.bs.popover ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ ድሕሪ እቲ `show.bs.popover`ፍጻመ ዝስጎግ እቲ popover template ኣብ DOM ምስ ተወሰኸ እዩ።

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

ኣብነት መጠንቀቕታታት

በዚ ፕላግ-ኢን ኣብ ኩሎም ናይ መጠንቀቕታ መልእኽትታት ናይ ምብራር ተግባር ወስኹ።

ሓደ .closeመጠወቒ ክትጥቀም ከለኻ፡ ቀዳማይ ውላድ ናይቲ ክኸውን ኣለዎ፡ ኣብቲ ምልክት .alert-dismissibleድማ ዝኾነ ናይ ጽሑፍ ትሕዝቶ ቅድሚኡ ክመጽእ ኣይክእልን እዩ።

ቅዱስ ጓካሞል! Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።

ኣየ ስናፕ! ጌጋ ረኺብካ!

እዚን እቲን ቀይርካ እንደገና ፈትን። ዱይስ ሞሊስ፡ ኤስት ኖን ኮሞዶ ሉክቱስ፡ ኒሲ ኤራት ፖርቲቶር ሊጉላ፡ ኤጌት ላሲንያ ኦዲዮ ሴም ኔክ ኤሊት። ክራስ ማቲስ ኮንሰክተተር ፑሩስ ኮፍ ኣሜት ፈርመንተም።

ኣጠቓቕማ

በቃ ኣብቲ ናይ ምዕጻው መጠወቒኻ ወስኸሉ data-dismiss="alert"ብኣውቶማቲክ ናይ መጠንቀቕታ ምዕጻው ተግባር ክትህብ። ንሓደ መጠንቀቕታ ምዕጻው ካብ DOM የወግዶ።

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

.fadeመጠንቀቕታታትካ ኣብ ዝዕጸዉሉ እዋን ኣኒሜሽን ንኽጥቀሙ፡ እቲ and ከም ዘለዎም ኣረጋግጽ.inመጠንቀቕታታትካ ኣብ ዝዕጸዉሉ እዋን ኣኒሜሽን ንኽጥቀሙ ፡ ድሮ ኣብ ልዕሊኦም ዝተተግበሩን ክፍልታትን

ኣገባባት

`$().alert()`

ሓደ መጠንቀቕታ ኣብ ልዕሊ ዘርኢ ባእታታት ንዝፍጠሩ ናይ ጠውቂ ፍጻመታት ክሰምዕ ይገብሮ እቶም data-dismiss="alert"ባህሪ ዘለዎም። (ናይ ዳታ-ኣፒ ኣውቶ-ኢኒሽያላይዜሽን ኣብ እትጥቀመሉ እዋን ኣድላዪ ኣይኮነን።)

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

ንሓደ መጠንቀቕታ ካብ DOM ብምእላይ ይዓጽዎ። ኣብቲ ባእታ እቶም .fadeand .inክፍልታት እንተሃልዮም፡ እቲ መጠንቀቕታ ቅድሚ ምእላዩ ክሃስስ እዩ።

ፍጻሜታት

ናይ Bootstrap ናይ መጠንቀቕታ ፕላግ-ኢን ናብ ናይ መጠንቀቕታ ተግባር ንምትእስሳር ውሑዳት ፍጻመታት የቃልዕ።

ዓይነት ፍጻመ	መግለፂ
close.bs.alert ዝብል ጽሑፍ ኣሎ።	`close`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ዕጹው.bs.alert ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ መጠንቀቕታ ምስ ተዓጽወ እዩ ዝትኮስ (መሰጋገሪታት 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>

ንቐሊል ናይ ምቕያር ባህሪ ብኣጻብዕ ዝቑጸሩ ክፍልታት ዝጥቀም ተዓጻጻፊ ፕላግ-ኢን።

ጽግዕተኛነት ፕላግ-ኢን።

ምዕጻፍ ኣብ ስሪት ቡትስትራፕካ እቲ ናይ ምስግጋር ፕላግ-ኢን ክካተት የድሊ።

ኣብነት

ካልእ ባእታ ብመንገዲ ለውጢ ክፍሊ ንምርኣይን ንምሕባእን ኣብ ታሕቲ ዘለዉ መጠወቒታት ጠውቑ፤

.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 ልዑል ህይወት accusamus ቴሪ ሪቻርድሰን ኣድ ስኩዊድ. 3 ዝብኢ ወርሒ officia aute, ዘይ cupidat ስኬትቦርድ dolor ብርንች. ናይ መግቢ ናይ ጽዕነት መኪና quinoa nesciunt laborum eiusmod. ብርንች 3 ዝብኢ ወርሒ tempor, sunt aliqua ዑፍ ኣብ ልዕሊኡ ኣቐሚጡ ስኩዊድ ንጽል-መበቆል ቡን nulla assumenda shoreditch et. ኒሂል ኣኒም ኬፊየህ ሄልቨቲካ፡ ኢደ ጥበብ ቢራ ላቦረ ዌስ ኣንደርሰን ክሬድ ነስቺውንት ሳፒየንተ ኢኣ ፕሮይደንት። ኣድ ቪጋን ብዘይካ ስጋ ምክትል ሎሞ። ሌጊንስ occaecat ኢደ ጥበብ ቢራ ሕርሻ-ናብ-ጠረጴዛ, ጥረ ዲኒም ስነ-ጽባቐ synth nesciunt ምናልባት ብዛዕባኦም accusamus labore ዘላቒ VHS ዘይሰማዕካዮም።

ተዓጻጻፊ ናይ ጉጅለ ኣቕሓ #2

Anim pariatur cliche reprehenderit, enim eiusmod ልዑል ህይወት accusamus ቴሪ ሪቻርድሰን ኣድ ስኩዊድ. 3 ዝብኢ ወርሒ officia aute, ዘይ cupidat ስኬትቦርድ dolor ብርንች. ናይ መግቢ ናይ ጽዕነት መኪና quinoa nesciunt laborum eiusmod. ብርንች 3 ዝብኢ ወርሒ tempor, sunt aliqua ዑፍ ኣብ ልዕሊኡ ኣቐሚጡ ስኩዊድ ንጽል-መበቆል ቡን nulla assumenda shoreditch et. ኒሂል ኣኒም ኬፊየህ ሄልቨቲካ፡ ኢደ ጥበብ ቢራ ላቦረ ዌስ ኣንደርሰን ክሬድ ነስቺውንት ሳፒየንተ ኢኣ ፕሮይደንት። ኣድ ቪጋን ብዘይካ ስጋ ምክትል ሎሞ። ሌጊንስ occaecat ኢደ ጥበብ ቢራ ሕርሻ-ናብ-ጠረጴዛ, ጥረ ዲኒም ስነ-ጽባቐ synth nesciunt ምናልባት ብዛዕባኦም accusamus labore ዘላቒ VHS ዘይሰማዕካዮም።

ተዓጻጻፊ ናይ ጉጅለ ኣቕሓ #3

Anim pariatur cliche reprehenderit, enim eiusmod ልዑል ህይወት accusamus ቴሪ ሪቻርድሰን ኣድ ስኩዊድ. 3 ዝብኢ ወርሒ officia aute, ዘይ cupidat ስኬትቦርድ dolor ብርንች. ናይ መግቢ ናይ ጽዕነት መኪና quinoa nesciunt laborum eiusmod. ብርንች 3 ዝብኢ ወርሒ tempor, sunt aliqua ዑፍ ኣብ ልዕሊኡ ኣቐሚጡ ስኩዊድ ንጽል-መበቆል ቡን nulla assumenda shoreditch et. ኒሂል ኣኒም ኬፊየህ ሄልቨቲካ፡ ኢደ ጥበብ ቢራ ላቦረ ዌስ ኣንደርሰን ክሬድ ነስቺውንት ሳፒየንተ ኢኣ ፕሮይደንት። ኣድ ቪጋን ብዘይካ ስጋ ምክትል ሎሞ። ሌጊንስ occaecat ኢደ ጥበብ ቢራ ሕርሻ-ናብ-ጠረጴዛ, ጥረ ዲኒም ስነ-ጽባቐ synth nesciunt ምናልባት ብዛዕባኦም accusamus labore ዘላቒ 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።

ተዓጻጻፊ ዝርዝር ጉጅለ

ቡትፕላይ
ሓደ ኢትሙስ ኤሲ ፋሲሊን።
ካልኣይ ኤሮስ

እግረ ጽሑፍ

ናይ ምስፍሕፋሕ/ምፍራስ መቆጻጸሪታት ተበጻሕቲ ምግባር

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

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-parent="".

ሽም	ዓይነት	ትሑዝ	መግለፂ
ወላዲ	መምረጺ	ሓሶት	ሓደ መምረጺ እንተተዋሂቡ፡ ሽዑ ኩሎም ኣብ ትሕቲ እቲ ዝተወሰነ ወላዲ ዝዕጸፉ ባእታታት እዚ ዝዕጸፍ ኣቕሓ ምስ ዝረአ ክዕጸዉ እዮም። `panel`(ምስ ባህላዊ ባህሪ ኣኮርድዮን ዝመሳሰል - እዚ ኣብቲ ክፍሊ ዝምርኮስ እዩ )
toggle ምግባር	ቡልያን ዝብል እዩ።	ሓቂ	ኣብ ምጽዋዕ ነቲ ዝዕጾ ባእታ ይቕይሮ

ኣገባባት

`.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`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
shown.bs.collapse ዝብል ጽሑፍ ኣሎ።	እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ንተጠቃሚ ርኡይ ምስ ተገይሩ እዩ (ምስግጋር CSS ክሳብ ዝዛዘም ክጽበ እዩ)።
hide.bs.collapse ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ `hide`ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ.bs.collapse ዝብል ጽሑፍ ኣሎ።	እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ካብ ተጠቃሚ ምስ ተሓብአ እዩ (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>

ጉዳይ ተበፃሕነት

እቲ ካሮሰል ክፍሊ ብሓፈሻ ምስ ደረጃታት ተበጻሕነት ዝሰማማዕ ኣይኮነን። ምኽባር ዘድልየካ እንተኾይኑ፡ በጃኻ ትሕዝቶኻ ንምቕራብ ካልእ ኣማራጺታት ኣብ ግምት ኣእቱ።

ኣብ ኢንተርነት ኤክስፕሎረር 8 & 9 ዘይድገፉ ናይ ምስግጋር ተንቀሳቐስቲ ስእልታት

ቡትስትራፕ ንኣኒሜሽንታቱ CSS3 ጥራይ እዩ ዝጥቀም፡ ኢንተርነት ኤክስፕሎረር 8 & 9 ግን ዘድልዩ ናይ CSS ባህርያት ኣይድግፉን እዮም። በዚ ኸምዚ፡ ነዞም ዳህሰስቲ ኣብ እንጥቀመሉ እዋን፡ ናይ ስላይድ መሰጋገሪ ተንቀሳቓሲ ስእልታት የለን። ንመሰጋገሪታት ኣብ jQuery ዝተመርኮሰ ፎልባክስ ከይነካትት ኮነ ኢልና ወሲንና ኣለና።

ናይ መጀመርታ ንጡፍ ባእታ የድሊ

እቲ .activeክፍሊ ኣብ ሓደ ካብቶም ስላይድ ክውሰኽ ኣለዎ። እንተዘይኮይኑ እቲ ካሮሰል ኣይክረአን እዩ።

ናይ ግሊፊኮን ምልክታት ኣድላዪ ኣይኮነን።

እቶም .glyphicon .glyphicon-chevron-leftand .glyphicon .glyphicon-chevron-rightclasses ንመቆጻጸሪታት ናይ ግድን ኣየድልዩን እዮም። ቡትስትራፕ ይህብን .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ይቕበል ፣ እዚ ድማ ነቲ ናይ ስላይድ ቦታ ብተዛማዲ ምስቲ ሕጂ ዘለዎ ቦታ ይቕይሮ። ከም ኣማራጺ ፡ ጥረ ስላይድ ኢንዴክስ ናብቲ ካሮሰል ንምሕላፍ ተጠቐም ፣ እዚ ድማ ነቲ ስላይድ ቦታ ናብ ፍሉይ ኢንዴክስ ብ ዝጅምር የሰጋግሮ ።prevnextdata-slide-todata-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')`

ናብቲ ዝቕጽል ኣቕሓ ዑደት ይገብር።

ፍጻሜታት

ቡትስትራፕ ናይ ካሮሰል ክፍሊ ክልተ ፍጻመታት ንካሮሰል ተግባር ምትእስሳር የቃልዕ።

ክልቲኦም ፍጻመታት እዞም ዝስዕቡ ተወሳኺ ባህርያት ኣለዎም፤

direction: እቲ ካሮሰል ዝንሳፈፈሉ ዘሎ ኣንፈት (ወይ "left"ወይ "right").
relatedTarget: እቲ ከም ንጡፍ ኣቕሓ ናብ ቦታኡ ዝንሳፈፍ ዘሎ DOM ባእታ።

ኩሎም ናይ ካሮሰል ፍጻመታት ኣብቲ ካሮሰል ባዕሉ (ማለት ኣብቲ <div class="carousel">).

ዓይነት ፍጻመ	መግለፂ
ስላይድ.ቢኤስ.ካሮሰል	`slide`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ስላይድ.ቢኤስ.ካሮሰል	እዚ ፍጻመ እዚ ዝትኮስ እቲ ካሮሰል ስላይድ ምስግጋሩ ምስ ወድአ እዩ።

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

ኣብነት

እቲ ናይ ምትሕውዋስ ተወሰኽቲ ፕላግ-ኢን ይውላዕን ይጠፍእን position: fixed;፣ ነቲ ብ ዝተረኽበ ውጽኢት ይመስል position: sticky;። ኣብ የማን ዘሎ ንኡስ ምድህሳስ ናይቲ ኣፊክስ ፕላግ-ኢን ቀጥታዊ ምርኢት እዩ።

ኣጠቓቕማ

ነቲ affix plugin ብመንገዲ data attributes ወይ ብኢድካ ብናይ ገዛእ ርእስኻ ጃቫስክሪፕት ተጠቐመሉ። ኣብ ክልቲኡ ኩነታት፡ ንኣቀማምጣን ስፍሓትን ናይቲ ዝተለጠፈ ትሕዝቶኻ CSS ክትህብ ኣለካ።

መተሓሳሰቢ፡ ብሰንኪ ናይ ሳፋሪ ምቕራብ ስሕተት ኣብ ብተዛማዲ ኣብ ዝርከብ ባእታ ዝርከብ ባእታ፡ ከም ዝተሰሓበ ወይ ዝተደፍአ ዓምዲ፡ ነቲ ናይ ምትሕውዋስ ተወሰኽቲ ኣይትጠቐመሉ ።

ብመንገዲ CSS ኣቀማምጣ ምሃብ

እቲ ኣፊክስ ፕላግ-ኢን ኣብ መንጎ ሰለስተ ክፍልታት ይቕይር፣ ነፍሲ ወከፎም ንሓደ ፍሉይ ኩነታት ይውክሉ: .affix, .affix-top, ከምኡውን .affix-bottom. ነቶም ቅዲታት ክትህቦም ኣለካ፣ ብዘይካ position: fixed;on .affix፣ ነዞም ክፍልታት ባዕልኻ (ካብዚ ፕላግ-ኢን ነጻ ኮይኑ) ነቶም ጭቡጣት ቦታታት ንምሕላው።

እቲ affix plugin ከመይ ከም ዝሰርሕ ኣብዚ ኣሎ፤

ንምጅማር፡ እቲ ፕላግ-ኢን ይውስኽ.affix-top እቲ ባእታ ኣብቲ ዝለዓለ ቦታኡ ከምዘሎ ንምምልካት ይውስኽ። ኣብዚ እዋን እዚ ዝኾነ ናይ CSS ኣቀማምጣ ኣየድልን።
ነቲ ክትልጠፎ እትደሊ ባእታ ሓሊፍካ ምዝዋር ነቲ ጭቡጥ ምልጣፍ ከበግሶ ይግባእ። እዚ ቦታ እዚ እዩ .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 plugin ናብ affix functionality ንምትእስሳር ዝሕግዙ ውሑዳት ፍጻመታት የቃልዕ።

ዓይነት ፍጻመ	መግለፂ
affix.bs.ኣፊክስ ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ ቅድሚ እቲ ባእታ ምልጣፉ ብቕጽበት ይትኩስ።
ዝተለጠፈ.bs.ተተሓሒዙ	እዚ ፍጻመ እዚ እቲ ባእታ ምስ ተለጠፈ እዩ ዝትኮስ።
affix-top.bs.ኣፊክስ ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ ቅድሚ እቲ ባእታ-top ምልጣፉ ብቕጽበት ይትኩስ።
affixed-top.bs.ተለጢፉ ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ እቲ ባእታ-top ምስ ተለጠፈ እዩ ዝትኮስ።
affix-bottom.bs.ኣፊክስ ዝብል ጽሑፍ ኣሎ።	እዚ ፍጻመ እዚ ቅድሚ እቲ ባእታ ምልጣፉ-ታሕቲ ብቕጽበት ይትኩስ።
ዝተለጠፈ-ታሕተዋይ.bs.ተተሓሒዙ	እዚ ፍጻመ እዚ እቲ ባእታ-ታሕተዋይ ምስ ተለጠፈ እዩ ዝትኮስ።

ጃቫስክሪፕት።

ሓፈሻዊ ትሕዝቶ

ውልቃዊ ወይ ዝተጠርነፈ

ነቲ ዝተጠርነፈ ጃቫስክሪፕት ብምጥቃም

ጽግዕተኛታት ፕላግ-ኢን

ናይ ዳታ ባህርያት

ብመንገዲ ዳታ ​​ባህርያት ኣብ ነፍሲ ወከፍ ባእታ ሓደ ፕላግ-ኢን ጥራይ

ፕሮግራማዊ ኤፒኣይ

ነባሪ ቅጥዕታት

ግርጭት የለን

ፍጻሜታት

ቁጽሪ ስሪት።

ጃቫስክሪፕት ምስ ዝስረዝ ፍሉይ ምምላስ የለን

ናይ ሳልሳይ ወገን ቤተ መጻሕፍቲ

መሰጋገሪታት transition.js

ብዛዕባ ምስግጋር

ኣብ ውሽጢ እንታይ ኣሎ።

ምስግጋራት ምዕጻው

ሞዳላት modal.js

ብዙሓት ክፉታት ሞዳላት ኣይድገፉን።

ሞዳል ማርካፕ ምቕማጥ

ናይ ሞባይል መሳርሒ መጠንቀቕታታት

ኣብነታት

ስታትቲካዊ ኣብነት

ቀጥታዊ ዲሞ

ሞዳላት ተበጻሕቲ ምግባር

ናይ ዩቱብ ቪድዮታት ምትእትታው

ኣማራጺ ዓቐናት

ኣኒሜሽን ምእላይ

ስርዓት ሽቦ ብምጥቃም

ኣብ ትሪግር መጠወቒ ዝተመርኮሰ ሞዳል ትሕዝቶ ምቕያር

ኣጠቓቕማ

ብመንገዲ ባህርያት ዳታ

ብመንገዲ ጃቫስክሪፕት።

ኣማራጺታት

ኣገባባት

.modal(options)

.modal('toggle')

.modal('show')

.modal('hide')

.modal('handleUpdate')

ፍጻሜታት

ድሮፕዳውንድስ dropdown.js

ኣብነታት

ኣብ ውሽጢ ሓደ ናቭባር

ኣብ ውሽጢ ከኒናታት

ኣጠቓቕማ

ብመንገዲ ባህርያት ዳታ

ብመንገዲ ጃቫስክሪፕት።

data-toggle="dropdown"ሕጂ’ውን ኣድላዪ እዩ።

ኣማራጺታት

ኣገባባት

$().dropdown('toggle')

ፍጻሜታት

ስክሮልስፓይ 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')`