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

ፕላጊናት ብውልቂ (ዋላ እኳ ገሊኦም ጽግዕተኛታት ዘድልዮም እንተኾኑ)፣ ወይ ኩሎም ብሓንሳብ ክካተቱ ይኽእሉ። ክልቲኦም bootstrap.js ን bootstrap.min.js ን ኩሎም ፕላጊናት ኣብ ሓደ ፋይል ዝሓዙ እዮም።

ናይ ዳታ ባህርያት

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

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

$ ( 'ኣካል' ). off ( '.ዳታ-ኣፒ' ) ።

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

$ ( 'ኣካል' ). off ( '.alert.data-api' ) ዝብል ጽሑፍ ኣሎ።

ፕሮግራማዊ ኤፒኣይ

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

$ ( ".btn.ሓደጋ" ). መጠወቒ ( "ምቕያር" ). addClass ( "ስብሒ" ) ።

ኩሎም ሜላታት ኣማራጺ ኣማራጺታት ነገራት ክቕበሉ ኣለዎም፣ ንፍሉይ ሜላ ዝዓለመ ሕብረ ቃላት፣ ወይ ዋላ ሓንቲ (ብነባሪ ባህሪ ፕላግ-ኢን ዘበግስ)፦

$ ( "#ሞዳለይ" ). modal () // ብነባሪ ተጀሚሩ።                       
$ ( "#ሞዳለይ" ). modal ({ keyboard : false }) // ብዘይ ቁልፊ ሰሌዳ ተጀሚሩ።     
$ ( "#ሞዳለይ" ). modal ( 'show' ) // show ብቕጽበት የበግሶን ይጽውዕን።                

ነፍሲ ወከፍ ፕላግ-ኢን ንጥረ ሃናጺኡ ኣብ `Constructor` ንብረት እውን የቃልዕ: $.fn.popover.Constructor. ፍሉይ ናይ ተወሰኽቲ ምሳሌ ክትረክብ እንተደሊኻ፡ ብቐጥታ ካብ ሓደ ባእታ ውሰዶ $('[rel=popover]').data('popover')፡ .

ግጭት የለን

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

var bootstrapመጠወቒ = $ . fn . ዝብል ቁልፊ . noConflict () // $.fn.button ናብቲ ኣቐዲሙ ዝተመደበ ዋጋ ምምላስ 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn ናይ ቡትስትራፕ ተግባር ምሃብ

ፍጻሜታት

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

ኩሎም ዘይውዳእ ፍጻመታት preventDefault ተግባር ይህቡ። እዚ ድማ ቅድሚ ምጅማሩ ምፍጻም ሓደ ተግባር ደው ናይ ምባል ዓቕሚ ይህብ።

$ ( '#ሞዳለይ' ). on ( 'ኣርእዩ' , ተግባር ( e ) {   
    if (! ዳታ ) ምምላስ ሠ . preventDefault () // ሞዳል ካብ ምርኣይ ደው የብሎ   
}) ።

ብዛዕባ ምስግጋር

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

ኬዝ ተጠቐም

ገለ ኣብነታት ናይቲ ናይ ምስግጋር ፕላግ-ኢን፤

• ኣብ ሞዳላት ምዝንባል ወይ ምድምሳስ
• ምድምሳስ ትቦታት
• ምድምሳስ መጠንቀቕታታት
• ስላይድ ካሮሰል ፓነስ

ኣብነታት

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

ስታትቲካዊ ኣብነት

ኣብ እግረ ጽሑፍ ርእሲ፣ ኣካልን ስብስብ ተግባራትን ዘለዎ ዝተቐርጸ ሞዳል።

<div class = "ሞዳል ምሕባእ ምድምሳስ" > 
  <div class = "ሞዳል-ርእሲ" > 
    < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "ዕጾ" data-dismiss = "ሞዳል" aria-hidden = "ሓቂ" > × </መጠወቒ>    
    <h3> ሞዳል ርእሲ </h3>
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ሞዳል-ኣካል" > 
    <p> ሓደ ረቂቕ ኣካል... </p>
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ሞዳል-እግሪ" > 
    <a href = "#" class = "btn" > ዕጸዎ </a>  
    <a href = "#" class = "btn btn-primary" > ለውጢ ምዕቃብ </a>  
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ቀጥታዊ ዲሞ

ኣብ ታሕቲ ዘሎ መጠወቒ ብምጥዋቕ ብመንገዲ ጃቫስክሪፕት ንሓደ ሞዳል ምቕያር። ንታሕቲ ተንሳፊፉ ካብ ላዕሊ ገጽ ክሃስስ እዩ።

<!-- ሞዳል ንምብጋስ ዝሕግዝ መጠወቒ -->
<a href = "#myModal" ተራ = "መጠወቒ" ክፍሊ = "btn" data-toggle = "ሞዳል" > ዲሞ ሞዳል ምጅማር </a>    
 
<!-- ሞዳል -->
<div id = "myModal" class = "ሞዳል ምሕባእ ምድምሳስ" tabindex = "-1" ተራ = "ዘተ" aria-labelledby = "myModalLabel" aria-hidden = "ሓቂ" >      
  <div class = "ሞዳል-ርእሲ" > 
    < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "ዕጾ" data-dismiss = "ሞዳል" aria-hidden = "ሓቂ" > × </መጠወቒ>    
    <h3 id = "myModalLabel" > ርእሲ ሞዳል </h3> 
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ሞዳል-ኣካል" > 
    <p> ሓደ ረቂቕ ኣካል... </p>
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ሞዳል-እግሪ" > 
    <button class = "btn" data-dismiss = "ሞዳል" aria-hidden = "ሓቂ" > ዕጸዎ </መጠወቒ>   
    <button class = "btn btn-primary" > ለውጢ ምዕቃብ </button> 
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣጠቓቕማ

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

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

<button type = "button" data-toggle = "ሞዳል" ዳታ-ዕላማ = "#myModal" > ሞዳል ምጅማር </button>   

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

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

$ ( '#ሞዳለይ' ). ሞዳል ( ኣማራጺታት ) .

ኣማራጺታት

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

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

ኣገባባት

.modal(ኣማራጺታት) .

ትሕዝቶኻ ከም ሞዳል የነቓቕሖ። ሓደ ኣማራጺ ኣማራጺታት ይቕበል object.

$ ( '#ሞዳለይ' ). ሞዳል ({
  keyboard : ሓሶት እዩ። 
}) ።

.modal('ምቕያር')

ብኢድ ንሓደ ሞዳል ይቕይሮ።

$ ( '#ሞዳለይ' ). ሞዳል ( 'ምቕያር' ) ።

.modal('ኣርእዩ')

ብኢድ ሞዳል ይኸፍት።

$ ( '#ሞዳለይ' ). modal ( 'ምርኣይ' ) ።

.modal('ሕባእ')

ብኢድ ንሓደ ሞዳል ይሓብኦ።

$ ( '#ሞዳለይ' ). ሞዳል ( 'ሕባእ' ) ።

ፍጻሜታት

ቡትስትራፕ ሞዳል ክላስ ንገለ ውሑዳት ፍጻመታት ናብ ሞዳል ተግባር ምትእስሳር የቃልዕ።

$ ( '#ሞዳለይ' ). on ( 'ሕቡእ' , ተግባር () {   
  // ገለ ግበር...
}) ።

ኣብነታት

በዚ ቀሊል ፕላግ-ኢን ዳርጋ ኣብ ዝኾነ ነገር ንቑልቁል ዝወርድ ምልክታታት ምውሳኽ፡ እንተላይ ንናቭባር፡ ትቦታትን ከኒናታትን።

ኣብ ውሽጢ ሓደ ናቭባር

ኣብ ውሽጢ ትቦታት

ኣጠቓቕማ

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

data-toggle="dropdown"ንሓደ ንቑልቁል ዝወርድ ንቑልቁል ንምቕያር ናብ ሓደ ሊንክ ወይ መጠወቒ ወስኹ ።

<div class = "ንቑልቁል ዝወርድ" > 
  <a class = "dropdown-toggle" data-toggle = "ንቑልቁል ዝወርድ" href = "#" > ንቑልቁል ዝወርድ መበገሲ </a>   
  <ul class = "ንቑልቁል ዝወርድ-ምልክት" ተራ = "ምልክት" aria-labelledby = "dLabel" >   
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

URLs ከምዘይተበላሸዉ ንምሕላው፡ ኣብ data-targetክንዲ ፡ ነቲ ባህሪ ተጠቐም href="#"።

<div class = "ንቑልቁል ዝወርድ" > 
  <a class = "ንቑልቁል ዝወርድ-ምቕያር" id = "dLabel" ተራ = "መጠወቒ" ዳታ-ምቕያር = "ንቑልቁል ዝወርድ" ዳታ-ዕላማ      = "#" href = "/ገጽ.html" > 
    ንቑልቁል ዝወርድ
    <ለ  class = "ሓልዮት" </b>
  </a>
  <ul class = "ንቑልቁል ዝወርድ-ምልክት" ተራ = "ምልክት"።   aria-labelledby = "dLabel" >
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

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

ብመንገዲ ጃቫስክሪፕት ናብቶም ንቑልቁል ዝወርድ ደውሉ፤

$ ( '.ንቑልቁል ዝወርድ-ምቕያር' ). ንቑልቁል ዝወርድ ()

ኣማራጺታት

ዋላ ሓደ

ኣገባባት

$().dropdown('ምቕያር')

ንዝተዋህበ navbar ወይ tabbed navigation ዝኸውን ምልክታታት ንምቕያር ዝሕግዝ ፕሮግራማዊ api።

ኣብነት ኣብ navbar

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

ኣጠቓቕማ

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

ብቐሊሉ ኣብ topbar navigationካ scrollspy ባህሪ ንምውሳኽ፡ በቃ ኣብቲ ክትስልዮ data-spy="scroll"እትደሊ ባእታ ወስኸሉ (ብብዝሒ እዚ ኣካል ምኾነ) ከምኡ’ውን data-target=".navbar"ኣየናይ nav ክትጥቀም ከም ዘለካ ምምራጽ። .navscrollspy ምስ ሓደ ክፍሊ ክትጥቀም ክትደሊ ኢኻ ።

<body data-spy = "ስክሮል" ዳታ-ዕላማ = ".ናቭባር" > ... </body>  

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

ብመንገዲ ጃቫስክሪፕት ናብቲ ስክሮልስፒ ደውሉ፤

$ ( '#ናቭባር' ). ስክሮልስፒ ()

ኣገባባት

.scrollspy('ምሕዳስ')

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

$ ( '[ዳታ-ስላይ="ስክሮል"]' ). ነፍሲ ወከፍ ( ተግባር () { .  
  var $spy = $ ( እዚ ) ዝብል ጽሑፍ ኣሎ። scrollspy ( 'ምሕዳስ' ) ።
});

ኣማራጺታት

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

ፍጻሜታት

ኣብነት ትቦታት

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

ኣጠቓቕማ

ብመንገዲ ጃቫስክሪፕት ንዝተፈላለዩ ትቦታት ኣንቅሑ (ነፍሲ ወከፍ ትብ ብውልቂ ክነጥፍ ኣለዎ)፦

$ ( '#ናይ ታብ ኣ' ). ጠውቕ ( ተግባር ( e ) { .  
  ሠ . ምክልኻልነባሪ ();
  $ ( እዚ ). tab ( 'ኣርእይ' );
}) ።

ንውልቀ ትብታት ብዝተፈላለየ መንገዲ ከተነቓቕሖም ትኽእል ኢኻ፤

$ ( '#myTab ሓደ[href="#ፕሮፋይል"]' ). tab ( 'ኣርእይ' ); // ትብ ብስም ምረጽ 
$ ( '#myTab a:ቀዳማይ' ). tab ( 'ኣርእይ' ); // ቀዳማይ ትብ ምረጽ 
$ ( '#myTab a:ናይ መወዳእታ' ). tab ( 'ኣርእይ' ); // ናይ መወዳእታ ትብ ምረጽ 
$ ( '#myTab li:eq(2) a' ). tab ( 'ኣርእይ' ); // ሳልሳይ ትብ ምረጽ (0-indexed) 

ምልክት ምግባር

ዝኾነ ጃቫስክሪፕት ከይጸሓፍካ ንሓደ ባእታ ብምግላጽ data-toggle="tab"ወይ data-toggle="pill"ኣብ ልዕሊ ሓደ ባእታ ጥራይ ብምግላጽ ንሓደ ትብ ወይ ከኒና ምድህሳስ ከተነቓቕሖ ትኽእል ኢኻ። navነቲ and nav-tabsclasses ኣብቲ ትብ ምውሳኽ ነቲ ulBootstrap tab styling ኣብ ግብሪ ክውዕል እዩ።

<ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ። 
  <li><a href = "#ገዛ" data-toggle = "ትብ" > ገዛ </a></li>  
  <li><a href = "#ፕሮፋይል" data-toggle = "ትብ" > ፕሮፋይል </a></li>  
  <li><a href = "#messages" data-toggle = "ትብ" > መልእኽትታት </a></li>  
  <li><a href = "#settings" data-toggle = "ትብ" > ቅጥዕታት </a></li>  
</ul> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

$().tab ዝብል ጽሑፍ ኣሎ።

ንሓደ ናይ ትብ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። Tab ኣብ DOM ወይ a data-targetወይ ንሓደ hrefመትሓዚ መስመር ዕላማ ዝገበረ ክህልዎ ኣለዎ።

<ul class = "nav nav-tabs" id = "ናይ ናተይ ትብ" >  
  <li class = "ንጡፍ" ><a href = "#ገዛ" > ገዛ </a></li>  
  <li><a href = "#ፕሮፋይል" > ፕሮፋይል </a></li> 
  <li><a href = "#messages" > መልእኽትታት </a></li> 
  <li><a href = "#settings" > ቅጥዕታት </a></li> 
</ul> ዝብል ጽሑፍ ኣሎ።
 
<div class = "ትሕዝቶ-ትብ" > 
  <div class = "ታብ-ፓን ንጡፍ" id = "ገዛ" > ... </div>  
  <div class = "tab-pane" id = "ፕሮፋይል" > ... </div> ዝብል ጽሑፍ ኣሎ።  
  <div class = "tab-pane" id = "መልእኽትታት" > ... </div>  
  <div class = "tab-pane" id = "ቅጥዕታት" > ... </div>  
</div> ዝብል ጽሑፍ ኣሎ።
 
<ስክሪፕት> ዝብል ጽሑፍ ኣሎ።
  $ ( ተግባር () { .  
    $ ( '#myTab a:ናይ መወዳእታ' ). tab ( 'ኣርእይ' );
  }) ።
</script> ዝብል ጽሑፍ ኣሎ።

ፍጻሜታት

$ ( 'a[ዳታ-ምቕያር="ትብ"]' ). on ( 'ተራእዩ' , function ( e ) { .   
  ሠ . ዕላማ // ዝተንቀሳቐሰ ትብ
  ሠ . relatedTarget // ዝሓለፈ ትብ
}) ።

ኣብነታት

ብጄሰን ፍሬም ዝተጻሕፈ ብሉጽ jQuery.tipsy ፕላግ-ኢን ዝተደፋፍአ፤ ምኽሪ መሳርሒታት ዝተመሓየሸ ስሪት እዩ፣ ኣብ ምስልታት ዘይምርኮስ፣ ንተንቀሳቓሲ ስእልታት CSS3 ዝጥቀሙ፣ ንመኽዘን ከባብያዊ ኣርእስቲ ድማ ዳታ-ባህርያት ዝጥቀሙ።

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

ምኽሪ መሳርሒታት ንምርኣይ ኣብዞም ኣብ ታሕቲ ዘለዉ ሊንክታት ምልክት ግበር፤

ኣርባዕተ ኣንፈታት

ምኽሪ መሳርሒታት ኣብ ጉጅለታት እታዎት።

containerምስ ናይ Bootstrap ምእታው ጉጅለታት ምኽሪ መሳርሒታትን ፖፖቨርን ክትጥቀም ከለኻ ፡ ዘይተደልየ ጎናዊ ሳዕቤናት ንኸይፍጠር ፡ ነቲ (ኣብ ታሕቲ ተሰኒዱ ዘሎ) ኣማራጺ ከተቐምጦ ክትግደድ ኢኻ ።

ኣጠቓቕማ

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

$ ( '#ኣብነት' ). tooltip ( ኣማራጺታት ) .

ኣማራጺታት

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

ምልክት ምግባር

<a href = "#" data-toggle = "መሳርሒ ምኽሪ" title = "ቀዳማይ ምኽሪ መሳርሒ" > ኣብ ልዕለይ ተንቀሳቐስ </a>   

ኣገባባት

$().መሳርሒ ምኽሪ(ኣማራጺታት)

ንሓደ ናይ መሳርሒ ምኽሪ መትሓዚ ምስ ሓደ ናይ ባእታ እኽብካብ የተሓሕዞ።

.tooltip('ኣርእይ')

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይገልጽ።

$ ( '#ባእታ' ). tooltip ( 'ኣርእዩ' )

.tooltip('ሕባእ')

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይሓብእ።

$ ( '#ባእታ' ). tooltip ( 'ሕባእ' ) ።

.tooltip('ምቕያር')

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይቕይሮ።

$ ( '#ባእታ' ). tooltip ( 'ምቕያር' )

.tooltip('ምጥፋእ')

ናይ ሓደ ባእታ መሳርሒ ምኽሪ ይሓብኦን የጥፍኦን።

$ ( '#ባእታ' ). tooltip ( 'ምጥፋእ' )

ኣብነታት

ንኣሽቱ ምድብላቕ ትሕዝቶታት፡ ከምቲ ኣብ iPad ዘሎ፡ ኣብ ዝኾነ ባእታ ካልኣዊ ሓበሬታ ንምቕማጥ ወስኸሉ። ነቲ ፖፖቨር ንምብጋስ ኣብ ልዕሊ እቲ መጠወቒ ምትእስሳር። Tooltip ክካተት ይጠልብ ።

ስታትቲክ ፖፖቨር

ኣርባዕተ ኣማራጺታት ኣለዉ፡ ላዕለዋይ፡ የማን፡ ታሕተዋይን ጸጋምን ተሰሪዖም።

ከም ፖፖቨርስ ዝረአ ምልክት የለን ካብ ጃቫስክሪፕትን ትሕዝቶ ኣብ ውሽጢ ሓደ dataባህርን ኣይፍጠርን።

ቀጥታዊ ዲሞ

ኣርባዕተ ኣንፈታት

ኣጠቓቕማ

ብመንገዲ ጃቫስክሪፕት ፖፖቨርስ ኣንቅሕ፤

$ ( '#ኣብነት' ). popover ( ኣማራጺታት ) .

ኣማራጺታት

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

ምልክት ምግባር

ብሰንኪ ኣፈጻጽማ ምኽንያት፡ እቶም Tooltipን Popover data-apisን opt in እዮም።ክትጥቀሙሎም እንተደሊኹም ናይ መምረጺ ኣማራጺ ጥራይ ግለጹ።

ኣገባባት

$().popover(ኣማራጺታት)

ንሓደ ባእታ ምትእኽኻብ ፖፖቨርስ የበግስ።

.popover('ኣርእዩ')

ሓደ ባእታታት ፖፖቨር ይገልጽ።

$ ( '#ባእታ' ). popover ( 'ምርኣይ' ) ።

.popover('ሕባእ')

ሓደ ባእታታት ፖፖቨር ይሓብእ።

$ ( '#ባእታ' ). popover ( 'ሕባእ' ) ።

.popover('ምቕያር')

ንሓደ ባእታታት ፖፖቨር ይቕይሮ።

$ ( '#ባእታ' ). popover ( 'ምቕያር' ) ።

.popover('ምጥፋእ')

ናይ ሓደ ባእታ ፖፖቨር ይሓብእን የጥፍእን እዩ።

$ ( '#ባእታ' ). popover ( 'ምጥፋእ' ) ።

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

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

ኣጠቓቕማ

ብመንገዲ ጃቫስክሪፕት ንሓደ መጠንቀቕታ ምብራር ኣንቅሕ፤

$ ( ".መጠንቀቕታ" ). መጠንቀቕታ ()

ምልክት ምግባር

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

<a class = "ዕጾ" data-dismiss = "መጠንቀቕታ" href = "#" > × </a>   

ኣገባባት

$().መጠንቀቕታ()

ንኹሉ መጠንቀቕታታት ብቐረባ ተግባር ይጠቕልሎ። .fadeናትካ መጠንቀቕታታት ምስ ተዓጽዉ ህያው ንኽኾኑ፡ ድሮ እቲ and .inclass ከም ዝተተግበረሎም ኣረጋግጽ ።

.alert('ዕጾ')

ንሓደ መጠንቀቕታ ይዓጽዎ።

$ ( ".መጠንቀቕታ" ). alert ( 'ዕጾ' ) ።

ፍጻሜታት

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

$ ( '#ናተይ-መጠንቀቕታ' ). bind ( 'ዕጹው' , ተግባር () {   
  // ገለ ግበር...
}) ።

ኣብነት ይጥቀም

ብመጠወቒታት ዝያዳ ግበር። ቁጽጽር መጠወቒ ይገልጽ ወይ ጉጅለታት መጠወቒታት ንዝያዳ ኣካላት ከም መሳርሒታት ባር ይፈጥር።

መንግስታዊ ዝኾነ

data-loading-text="Loading..."ኣብ ሓደ መጠወቒ ናይ ምጽዓን ኩነታት ንምጥቃም ምውሳኽ ።

< ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" data-loading-text = "ምጽዓን..." > ኩነታት ምጽዓን </button>   

ንጽል ምቕያር

data-toggle="button"ኣብ ሓደ መጠወቒ ምቕያር ንምንቅስቓስ ምውሳኽ ።

< ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" data-toggle = "መጠወቒ" > ንጽል ምቕያር </መጠወቒ>   

ሳጹን ምልክት

data-toggle="buttons-checkbox"ንናይ ምልክት ሳጹን ቅዲ ምቕያር ኣብ btn-group ወስኹሉ ።

<div class = "btn-ጉጅለ" ዳታ-መቐያየሪ = "መጠወቒታት-መፈተሺ ሳጹን" >  
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" > ጸጋማይ </መጠወቒ>  
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" > ማእከላይ </መጠወቒ>  
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" > የማናይ </መጠወቒ>  
</div> ዝብል ጽሑፍ ኣሎ።

ሬድዮ

data-toggle="buttons-radio"ንሬድዮ ቅዲ ምቕያር ኣብ btn-group ወስኹሉ ።

<div class = "btn-ጉጅለ" ዳታ-ምቕያር = "መጠወቒታት-ሬድዮ" >  
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" > ጸጋማይ </መጠወቒ>  
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" > ማእከላይ </መጠወቒ>  
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-primary" > የማናይ </መጠወቒ>  
</div> ዝብል ጽሑፍ ኣሎ።

ኣጠቓቕማ

ብመንገዲ ጃቫስክሪፕት መጠወቒታት ኣንቅሑ፤

$ ( '.nav-tabs' ) ዝብል ጽሑፍ ኣሎ። መጠወቒ ()

ምልክት ምግባር

ናይ ዳታ ባህርያት ናይቲ መጠወቒ ፕላግ-ኢን ዘይነጻጸል እዩ። ዝተፈላለዩ ዓይነታት ምልክት ኣብ ታሕቲ ዘሎ ኣብነት ኮድ ርአ።

ኣማራጺታት

ዋላ ሓደ

ኣገባባት

$().መጠወቒ('ምቕያር')

ንናይ ምድፋእ ኩነታት ይቕይር። ነቲ መጠወቒ ከም ዝተንቀሳቐሰ መልክዕ ይህቦ።

< ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn" data-toggle = "መጠወቒ" > ... </መጠወቒ>    

$().button('ምጽዓን')

ኩነታት መጠወቒ ናብ ምጽዓን የቐምጦ - መጠወቒ የሰናኽልን ጽሑፍ ናብ ምጽዓን ጽሑፍ ይቕይሮን። ጽሑፍ ምጽዓን ኣብቲ ናይ መጠወቒ ባእታ ነቲ ናይ ዳታ ባህሪ ተጠቒምካ ክግለጽ ኣለዎ data-loading-text።

<መጠወቒ ዓይነት = "መጠወቒ" ክፍሊ = "btn" ዳታ-ጽዕነት-ጽሑፍ = "ነገራት ምጽዓን..." > ... </መጠወቒ>    

$().መጠወቒ('ዳግመ-ምትዕርራይ')

ንኹነታት መጠወቒ ዳግማይ ይቕይሮ - ጽሑፍ ናብ መበቆላዊ ጽሑፍ ይቕይሮ።

$().መጠወቒ(ሕብረ ቃላት)

ንኹነታት መጠወቒ ዳግማይ ይቕይሮ - ጽሑፍ ናብ ዝኾነ ዳታ ዝተገልጸ ኩነታት ጽሑፍ ይቕይሮ።

< ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn" ዳታ-ምሉእ-ጽሑፍ = "ተዛዚሙ!" > ... </መጠወቒ>    
<ስክሪፕት> ዝብል ጽሑፍ ኣሎ።
  $ ( '.btn' ) ዝብል ጽሑፍ ኣሎ። መጠወቒ ( 'ምሉእ' )
</script> ዝብል ጽሑፍ ኣሎ።

ብዝዕባ

መሰረታዊ ቅዲታትን ተዓጻጻፊ ደገፍን ንዝተዓጻጸፉ ኣካላት ከም ኣኮርድዮንን ናቪጌሽንን ርኸብ።

* ናይ መሰጋገሪታት ፕላግ-ኢን ክሕወስ የድሊ።

ኣብነት ኣኮርድዮን

ነቲ collapse plugin ብምጥቃም፡ ቀሊል ኣኮርድዮን ቅዲ ዊጀት ሰሪሕና፤

<div class = "ኣኮርድዮን" id = "ኣኮርድዮን2" >  
  <div class = "ኣኮርድዮን-ጉጅለ" > 
    <div class = "ኣኮርድዮን-ኣርእስቲ" > 
      <a class = "ኣኮርድዮን-ምቕያር" data-toggle = "ምዕራስ" ዳታ-ወላዲ = "#ኣኮርድዮን2" href = "#ምዕጽዋ ሓደ" >    
        ተዓጻጻፊ ናይ ጉጅለ ኣቕሓ #1
      </a>
    </div> ዝብል ጽሑፍ ኣሎ።
    <div id = "collapseOne" class = "ኣኮርድዮን-ኣካል ምፍራስ ኣብ" >  
      <div class = "ኣኮርድዮን-ውሽጣዊ" > 
        ኣኒም ፓርያቱር ክሊሸ...
      </div> ዝብል ጽሑፍ ኣሎ።
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class = "ኣኮርድዮን-ጉጅለ" > 
    <div class = "ኣኮርድዮን-ኣርእስቲ" > 
      <a class = "ኣኮርድዮን-ምቕያር" data-toggle = "ምዕራፍ" ዳታ-ወላዲ = "#ኣኮርድዮን2" href = "#ምዕራፍክልተ" >    
        ተዓጻጻፊ ናይ ጉጅለ ኣቕሓ #2
      </a>
    </div> ዝብል ጽሑፍ ኣሎ።
    <div id = "collapseTwo" class = "ኣኮርድዮን-ኣካል ምፍራስ" >  
      <div class = "ኣኮርድዮን-ውሽጣዊ" > 
        ኣኒም ፓርያቱር ክሊሸ...
      </div> ዝብል ጽሑፍ ኣሎ።
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።
...

ብዘይ ናይ ኣኮርድዮን ምልክት እውን ነቲ ፕላግ-ኢን ክትጥቀመሉ ትኽእል ኢኻ። ሓደ መጠወቒ ንኻልእ ባእታ ምግፋሕን ምፍራስን ከም ዝቕይሮ ግበር።

< ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "btn btn-ሓደጋ" data-toggle = "ምዕራፍ" ዳታ-ዕላማ = "#ዲሞ" >    
  ቀሊል ዝዕጸፍ
</መጠወቒ>
 
<div id = "demo" class = "ኣብ ውሽጢ ምፍራስ" > ... </div>  

ኣጠቓቕማ

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

በቃ add data-toggle="collapse"and a data-targetto element ብኣውቶማቲክ ቁ���ጽር ናይ ሓደ ዝዕጾ ባእታ ንምምዳብ። እቲ data-targetባህሪ ነቲ ምዕጻፍ ንምትግባር ዝሕግዝ css መምረጺ ይቕበል። collapseነቲ ክፍሊ ኣብቲ ዝዕጾ ባእታ ምውሳኽካ ኣረጋግጽ ። ብነባሪ ክኽፈት እንተደሊኻ፡ ነቲ ተወሳኺ ክፍሊ ወስኸሉ in።

ኣኮርድዮን ዝመስል ምሕደራ ጉጅለ ናብ ዝዕጾ ቁጽጽር ንምውሳኽ፡ ነቲ ናይ ዳታ ባህሪ ወስኸሉ data-parent="#selector"። ነዚ ብተግባር ንምርኣይ ኣብቲ ዲሞ ተወከሱ።

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

ብኢድካ ምስ ኣንቅሕ፤

$ ( ".ምፍራስ" ). ምፍራስ () ።

ኣማራጺታት

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

ኣገባባት

.collapse(ኣማራጺታት) .

ትሕዝቶኻ ከም ዝዕጾ ባእታ ይንቀሳቐስ። ሓደ ኣማራጺ ኣማራጺታት ይቕበል object.

$ ( '#ናተይ ዝዕጾ' ). ምፍራስ ({
  toggle : ሓሶት እዩ። 
}) ።

.collapse('ምቕያር')

ንሓደ ዝዕጾ ባእታ ናብ ዝተራእየ ወይ ዝተሓብአ ይቕይሮ።

.collapse('ኣርእይ')

ዝዕጾ ባእታ የርኢ።

.collapse('ሕባእ')

ዝዕጾ ባእታ ይሓብእ።

ፍጻሜታት

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

$ ( '#ናተይ ዝዕጾ' ). on ( 'ሕቡእ' , ተግባር () {   
  // ገለ ግበር...
}) ።

ኣብነት ካሮሰል

ኣብ ታሕቲ ዘሎ ስላይድ ሾው ከም ካሮሰል ዝኣመሰሉ ባእታታት ንብሽክለታ ዝኸውን ሓፈሻዊ ፕላግ-ኢንን ባእታን የርኢ።

ቀዳማይ ንእሽቶ ስእሊ ምልክት

ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ። › ።

<div id = "myCarousel" class = "ካሮሰል ስላይድ" >  
  <ol class = "ካሮሰል-መመልከቲታት" > 
    <li data-target = "#myCarousel" ዳታ-ስላይድ-ናብ = "0" ክፍሊ = "ንጡፍ" ></li>   
    <li data-target = "#myCarousel" ዳታ-ስላይድ-ናብ = "1" ></li>  
    <li data-target = "#myCarousel" ዳታ-ስላይድ-ናብ = "2" ></li>  
  </ol> ዝብል ጽሑፍ ኣሎ።
  <!-- ናይ ካሮሰል ኣቑሑት -->
  <div class = "ካሮሰል-ውሽጣዊ" > 
    <div class = "ንጡፍ ኣቕሓ" > ... </div> 
    <div class = "ኣቕሓ" > ... </div> ዝብል ጽሑፍ ኣሎ። 
    <div class = "ኣቕሓ" > ... </div> ዝብል ጽሑፍ ኣሎ። 
  </div> ዝብል ጽሑፍ ኣሎ።
  <!-- ካሮሰል ናቭ -->
  <a class = "ካሮሰል-ምቁጽጻር ጸጋም" href = "#ካሮሰለይ" data-slide = "ቅድሚ ሕጂ" > ‹ </a>   
  <a class = "ካሮሰል-መቆጻጸሪ መሰል" href = "#ካሮሰለይ" data-slide = "ዝቕጽል" > › </a>   
</div> ዝብል ጽሑፍ ኣሎ።

ኣጠቓቕማ

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

ንኣቀማምጣ ናይቲ ካሮሰል ብቐሊሉ ንምቁጽጻር ናይ ዳታ ባህርያት ተጠቐም። ነቶም ቁልፊ ቃላት ወይ ፣ data-slideይቕበል ፣ እዚ ድማ ነቲ ናይ ስላይድ ቦታ ብተዛማዲ ምስቲ ናይ ሕጂ ቦታኡ ይቕይሮ። ከም ኣማራጺ ፡ ንሓደ ጥረ ስላይድ ኢንዴክስ ናብቲ ካሮሰል ንምሕላፍ ተጠቐም ፣ እዚ ድማ ነቲ ስላይድ ቦታ ናብ ሓደ ብ ዝጅምር ፍሉይ ኢንዴክስ ይዘልል ።prevnextdata-slide-todata-slide-to="2"0

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

ንካሮሰል ​​ብኢድካ ብ፤

$ ( '.ካሮሰል' ). ካሮሰል ()

ኣማራጺታት

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

ኣገባባት

.ካሮሰል(ኣማራጺታት) .

ነቲ ካሮሰል ብኣማራጺ ኣማራጺታት የበግሶን ብኣቑሑት objectኣቢሉ ብሽክለታ ይጅምርን።

$ ( '.ካሮሰል' ). ካሮሰል ({
  ፍልልይ : 2000 ዓ.ም 
}) ።

.ካሮሰል('ዑደት')

ካብ ጸጋም ናብ የማን ብመንገዲ እቶም ናይ ካሮሰል ኣቑሑት ዑደት ይገብር።

.ካሮሰል('ዕረፍቲ')

እቲ ካሮሰል ብኣቑሑት ኣቢሉ ካብ ብሽክለታ ከይዝውር ደው የብሎ።

.ካሮሰል(ቁጽሪ)

ነቲ ካሮሰል ናብ ሓደ ፍሉይ ፍሬም ይዘውሮ (0 መሰረት ዝገበረ፣ ምስ ስርዓት ዝመሳሰል)።

.ካሮሰል('ቅድሚኡ')

ናብቲ ዝሓለፈ ኣቕሓ ዑደት ይገብር።

.ካሮሰል('ዝቕጽል')

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

ፍጻሜታት

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

ኣብነት

መሰረታዊ ዝኾነ ብቐሊሉ ዝዝርጋሕ ፕላግ-ኢን ብቕልጡፍ ውቁብ typeaheads ምስ ዝኾነ ቅጥዒ ጽሑፍ ምእታው ንምፍጣር።

< ዓይነት ምእታው = "ጽሑፍ" data-provide = "typeahead" >  

autocomplete="off"ነባሪ ናይ መርበብ ሓበሬታ ምልክታታት ኣብ ልዕሊ እቲ Bootstrap typeahead ዝብል ንቑልቁል ዝወርድ ንኸይረኣዩ ከተቐምጦም ክትደሊ ኢኻ ።

ኣጠቓቕማ

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

ከምቲ ኣብ ላዕሊ ዘሎ ኣብነት ዝተገልጸ ሓደ ባእታ ምስ typeahead functionality ንምምዝጋብ data attributes ምውሳኽ።

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

ነቲ typeahead ብኢድካ ደውሉሉ፤

$ ( '.ቅድሚት ምጽሓፍ' ). typeahead () ዝብል ጽሑፍ ኣሎ።

ኣማራጺታት

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

ኣገባባት

.typeahead(ኣማራጺታት) .

ንሓደ እታው ብ typeahead የበግሶ።

ኣብነት

ኣብ ጸጋም ዘሎ ንኡስ ምድህሳስ ናይቲ ኣፊክስ ፕላግ-ኢን ቀጥታዊ ምርኢት እዩ።

ኣጠቓቕማ

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

ኣብ ዝኾነ ባእታ ብቐሊሉ ናይ ምትሕንፋጽ ባህሪ ንምውሳኽ data-spy="affix"፡ ኣብቲ ክትስልዮ እትደሊ ባእታ ጥራይ ምውሳኽ። ድሕሪኡ ንፒኒንግ ናይ ሓደ ባእታ መዓስ ከም እትቕይሮ ንምግላጽ ኦፍሴት ተጠቐም።

<div data-spy = "ኣፊክስ" ዳታ-ኦፍሴት-ላዕለዋይ = "200" > ... </div>  

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

ብመንገዲ ጃቫስክሪፕት ናብቲ ኣፊክስ ፕላግ-ኢን ደውሉ፤

$ ( '#ናቭባር' ). affix () ዝብል ምልክት ግበር።

ኣማራጺታት

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