ጃቫስክሪፕት ን ቡትስትራፕ

ናይ Bootstrap ኣካላት ህይወት ኣምጽእዎም-ሕጂ ምስ 12 ብሕታዊ jQuery ፕላጊናት።

ሞዳላት

ስሉጥ፡ ግን ከኣ ተዓጻጻፊ፡ ነቲ ባህላዊ ጃቫስክሪፕት ሞዳል ፕላግ-ኢን ብውሑድ ዘድሊ ተግባርን በሊሕ ነባሪታትን ጥራይ ምውሳድ።

ድሮፕዳውንድስ

ዳርጋ ኣብ ዝኾነ ነገር ኣብ ቡትስትራፕ በዚ ቀሊል ፕላግ-ኢን ንቑልቁል ዝወርድ ምልክታታት ምውሳኽ። ቡትስትራፕ ምሉእ ንቑልቁል ዝወርድ ዝርዝር ደገፍ ኣብ navbar, tabs, ከምኡውን ከኒናታት ኣለዎ።

ስክሮልስፒ

ኣብ ናቭባርካ ዝርከቡ መላግቦታት ብኣውቶማቲክ ንምዕራፍ scrollspy ተጠቐም እሞ ኣብ ቦታ ስክሮል ተመርኲስካ ነቲ ናይ ሕጂ ንጡፍ መላግቦ ንምርኣይ።

ዝቕየሩ ትቦታት

ነዚ ፕላግ-ኢን ተጠቐመሉ፡ ትቦታትን ከኒናታትን ብመንገዲ ጣብያታት ናይ ከባብያዊ ትሕዝቶታት ክቕይሩ ብምፍቃድ ዝያዳ ጠቐምቲ ንምግባር።

ምኽሪ መሳርሒታት

ሓድሽ ምውሳድ ኣብ jQuery Tipsy ፕላግ-ኢን፣ Tooltips ኣብ ምስልታት ኣይምርኮሱን እዮም-ንኣኒሜሽን CSS3 ከምኡውን ንከባብያዊ ኣርእስቲ መኽዘን ዳታ-ባህርያት ይጥቀሙ።

ፖፖቨርስ *

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

* Tooltips ክካተት ይጠልብ

ናይ መጠንቀቕታ መልእኽትታት

እቲ ናይ መጠንቀቕታ ፕላግ-ኢን ኣብ መጠንቀቕታታት ናይ ቀረባ ተግባር ንምውሳኽ ዝሕግዝ ንእሽቶ ክፍሊ እዩ።

መጠወቒታት

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

ፈረሰ

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

ካሮሰል

ናይ ዝኾነ ትሕዝቶ መስተጋብራዊ ስላይድ ሾው ትሕዝቶ ክትህብ እትደልዮ መዘናግዒ ፍጠረ።

ንቕድሚት ጽሓፍ

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

መሰጋገሪታት * .

ንቐሊል ናይ ምስግጋር ውጽኢታት፡ bootstrap-transition.js ሓንሳብ ኣካትት ኣብ ሞዳላት ክትስሕብ ወይ መጠንቀቕታታት ክትሃስስ።

* ኣብ ፕላጊናት ንዝግበር ኣኒሜሽን የድሊ

ርእሲ ንላዕሊ! ኩሎም ናይ ጃቫስክሪፕት ፕላጊናት ናይ jQuery ናይ መወዳእታ ስሪት የድልዮም።

ብዛዕባ ሞዳላት

ፋይል ኣውርድ

ስታትቲካዊ ኣብነት

ኣብ ታሕቲ ብስታቲካዊ ኣገባብ ዝተሰርሐ ሞዳል ኣሎ።

ቀጥታዊ ዲሞ

ኣብ ታሕቲ ዘሎ ቁልፊ ብምጥዋቕ ብመንገዲ javascript ንሓደ ሞዳል ምቕያር። ንታሕቲ ተንሳፊፉ ካብ ላዕሊ ገጽ ክሃስስ እዩ።

ዲሞ ሞዳል ምጅማር

ቡትስትራፕ-ሞዳል ብምጥቃም

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

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

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ድሕረ ባይታ	ቡልያን ዝብል እዩ።	ሓቂ	ሞዳል-ባክድሮፕ ባእታ ዘጠቓልል እዩ። ከም ኣማራጺ `static`፡ ነቲ ሞዳል ኣብ ጠውቂ ዘይዓጽዎ ድሕረ ባይታ ግለጽ።
ቁልፊ ሰሌዳ	ቡልያን ዝብል እዩ።	ሓቂ	መፍትሕ ምህዳም ምስ ዝጽቀጥ ነቲ ሞዳል ይዓጽዎ።
አርኢ	ቡልያን ዝብል እዩ።	ሓቂ	ሞዳል ኣብ ዝጅምረሉ እዋን የርኢ።

ምልክት ምግባር

ኣብ ገጽካ ሞዳላት ብቐሊሉ ከተነቓቕሖ ትኽእል ኢኻ፡ ሓንቲ መስመር ጃቫስክሪፕት ከይጸሓፍካ። በቃ data-toggle="modal"ኣብ ሓደ ተቖጻጻሪ ባእታ ምስ a data-target="#foo"ወይ href="#foo"ምስ ሞዳል ባእታ id ዝሰማማዕ ኣቐምጥ፣ ምስ ጠወቕካ ድማ ሞዳልካ ክጅምር እዩ።

ከምኡ’ውን፡ ኣማራጺታት ኣብ ሞዳል ምሳሌኻ ንምውሳኽ፡ ከም ተወሳኺ ባህርያት ዳታ ኣብቲ ናይ ምቁጽጻር ባእታ ወይ ኣብቲ ሞዳል ምልክት ባዕሉ ጥራይ ኣካትቶም።

<a class = "btn" data-toggle = "ሞዳል" href = "#myModal" > ሞዳል ምጅማር </a>

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

ርእሲ ንላዕሊ! ሞዳልካ ንውሽጥን ደገን ህያው ክኸውን እንተደሊኻ .fade፡ ኣብቲ ባእታ ሓደ ክፍሊ ጥራይ ወስኸሉ .modal(ነዚ ብተግባር ንምርኣይ ኣብቲ ዲሞ ተወከስ) እሞ bootstrap-transition.js ኣካትት።

ኣገባባት

.modal(ኣማራጺታት) .

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

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

.modal('ምቕያር')

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

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

.modal('ኣርእዩ')

ብኢድ ሞዳል ይኸፍት።

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

.modal('ሕባእ')

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

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

ፍጻሜታት

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

ዝግጅት	መግለፂ
አርኢ	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ተራእዩ እዩ።	እዚ ክስተት ዝትኮስ እቲ ሞዳል ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
ተሓባእ	እዚ ፍጻመ እዚ እቲ ናይ `hide`ምሳሌ ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ	እዚ ክስተት ዝትኮስ እቲ ሞዳል ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።

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

ብዛዕባ ንቑልቁል ዝወርድ

ፋይል ኣውርድ

ኣብነታት

ኣብቲ ኣብ ታሕቲ ዘሎ navbarን ከኒናን ዘሎ dropdown nav links ብምጥዋቕ dropdowns ንምፍታን እዩ።

bootstrap-dropdown.js ምጥቃም

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

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

ምልክት ምግባር

ንዝኾነ ባእታ ብቕልጡፍ ንቑልቁል ዝወርድ ተግባር ንምውሳኽ በቃ ወስኸሉ data-toggle="dropdown"እሞ ዝኾነ ቅኑዕ ቡትስትራፕ ንቑልቁል ብኣውቶማቲክ ክነጥፍ እዩ።

ርእሲ ንላዕሊ! data-target="#fat"ብኣማራጺ ንፍሉይ ንቑልቁል ዝወርድ ወይ ብምጥቃም ዕላማ ክትገብር ትኽእል ኢኻ href="#fat"።

<ul class = "ናቭ ናቭ-ከኒናታት" > 
  <li class = "ንጡፍ" ><a href = "#" > ስሩዕ መላግቦ </a></li>  
  <li class = "ንቑልቁል ዝወርድ" id = "ሜኑ1" >  
    <a class = "ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" href = "#menu1" >   
      ንቑልቁል ዝወርድ
      <b class = "ሓልዮት" </b> 
    </a>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      <li><a href = "#" > ስጉምቲ </a></li> 
      <li><a href = "#" > ካልእ ተግባር </a></li> 
      <li><a href = "#" > ካልእ ኣብዚ </a></li> 
      <li class = "መከፋፈልቲ" </li> 
      <li><a href = "#" > ዝተፈለየ መላግቦ </a></li> 
    </ul> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

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

<ul class = "ናቭ ናቭ-ከኒናታት" > 
  <li class = "ንቑልቁል ዝወርድ" > 
    <a class = "ምውራድ-ምቕያር" data-toggle = "ምውራድ" ዳታ-ዕላማ = "#" href = "መንገዲ/ናብ/ገጽ.html" >    
      ንቑልቁል ዝወርድ
      <b class = "ሓልዮት" </b> 
    </a>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      ...
    </ul> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

$().ንቑልቁል ዝወርድ()

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

እቲ ScrollSpy ዝበሃል ፕላግ-ኢን ኣብ ስክሮል ኣቀማምጣ ተመርኲስካ ንኣውቶማቲክ ዕላማታት nav ንምዕራፍ ዝዓለመ እዩ።

ፋይል ኣውርድ

ኣብነት navbar ምስ scrollspy

ኣብ ታሕቲ ዘሎ ቦታ ስክሮል ብምግባር ነቲ ናይ ምድህሳስ ምዕባለ ርኣዩ። እቶም ንቑልቁል ዝወርድ ንኡሳን ነገራት እውን ክጎልሑ እዮም። ፈትኖ!

@ረጒድ

ኣድ ሌጊንስ 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-scrollspy.js ምጥቃም

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

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

ምልክት ምግባር

ብቐሊሉ ስክሮልስፒ ባህሪ ኣብ ላዕለዋይ ባር ምድህሳስካ ንምውሳኽ፡ በቃ ኣብቲ ክትስልዮ data-spy="scroll"እትደሊ ባእታ ወስኸሉ (ብብዝሒ እዚ ኣካል ምኾነ)።

<body data-spy = "ስክሮል" > ... </body> ዝብል ጽሑፍ ኣሎ።

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

ኣገባባት

.scrollspy('ምሕዳስ')

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

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

ኣማራጺታት

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

ፍጻሜታት

ዝግጅት	መግለፂ
activate ምግባር	እዚ ፍጻመ እዚ ሓድሽ ኣቕሓ ብስክሮልስፒ ኣብ ዝንቀሳቐሰሉ እዋን ይትኩስ።

እዚ ፕላግ-ኢን ብመንገዲ ውሽጣዊ ትሕዝቶ ንምስግጋር ቅልጡፍን ዳይናሚክን ትብን ከኒናን ተግባር ይውስኽ።

ፋይል ኣውርድ

ኣብነት ትቦታት

ኣብ መንጎ ሕቡኣት ሸነኻት ንምቕያር ኣብ ታሕቲ ዘለዉ ትቦታት ጠውቕ፣ ዋላ ብመንገዲ ንቑልቁል ዝወርድ ምልክታታት።

ጥረ ዲኒም ምናልባት ዘይሰማዕካዮም ጂን ሓጺር ኦስቲን። 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.

bootstrap-tab.js ብምጥቃም

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

$ ( '#ናይ ታብ ኣ' ). ጠውቕ ( ተግባር ( 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> ዝብል ጽሑፍ ኣሎ።

ፍጻሜታት

ዝግጅት	መግለፂ
አርኢ	እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`
ተራእዩ እዩ።	እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ `event.target`ንምግባርን ተጠቐም ።`event.relatedTarget`

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

ብዛዕባ ምኽሪ መሳርሒታት

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

ፋይል ኣውርድ

ኣብነት ኣጠቓቕማ Tooltips

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

bootstrap-tooltip.js ብምጥቃም

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

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

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ኣኒሜሽን ምግባር	ቡልያን ዝብል እዩ።	ሓቂ	ኣብቲ tooltip css fade ዝብል ምስግጋር ተግባራዊ ግበር
ምምዳብ	string\|ተግባር	'ላዕለዋይ'	ከመይ ጌርና ንመሳርሒ ምኽሪ ነቐምጦ - top \| ታሕተዋይ ክፋል \| ጸጋም \| ትኽክል
መምረጺ	ገመድ	ሓሶት	ሓደ መምረጺ እንተተዋሂቡ፡ ናይ መሳርሒ ምኽሪ ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም።
ርእሲ	ሕብረ ቃላት \| ተግባር	'' ።	`title` መለለዪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ
ምልዕዓል	ገመድ	'hover' ዝብል ጽሑፍ ኣሎ።	ከመይ ጌሩ tooltip ይጅምር - hover \| ትኹረት \| ናይ ኢድ
ምዝንጋዕ	ቁጽሪ \| ግኡዝ ነገር	0.	ምድንጓይ ምርኣይን ምሕባእን ናይ መሳርሒ ምኽሪ (ms) - ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ። ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር ኣቃውማ ኣቕሓ፤`delay: { show: 500, hide: 100 }`

ርእሲ ንላዕሊ! ኣማራጺታት ንውልቃዊ ምኽርታት መሳርሒታት ብኣማራጺ ብመንገዲ ኣጠቓቕማ ባህርያት ዳታ ክግለጹ ይኽእሉ።

ምልክት ምግባር

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

<a href = "#" rel = "መሳርሒ ምኽሪ" title = "ቀዳማይ ምኽሪ መሳርሒ" > ኣብ ልዕለይ ምሕንባስ </a>

ኣገባባት

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

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

.tooltip('ኣርእይ')

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

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

.tooltip('ሕባእ')

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

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

.tooltip('ምቕያር')

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

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

ብዛዕባ ፖፖቨርስ

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

* Tooltip ክሕወስ ይጠልብ

ፋይል ኣውርድ

ኣብነት ሆቨር ፖፖቨር

ነቲ ፖፖቨር ንምብጋስ ኣብ ልዕሊ እቲ መጠወቒ ምትእስሳር።

ንፖፖቨር ዝኸውን ተንሳፈፍ

bootstrap-popover.js ምጥቃም

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

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

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ኣኒሜሽን ምግባር	ቡልያን ዝብል እዩ።	ሓቂ	ኣብቲ tooltip css fade ዝብል ምስግጋር ተግባራዊ ግበር
ምምዳብ	string\|ተግባር	'ትኽክል'	ከመይ ጌርና ነቲ ፖፖቨር ኣቐምጦ - ላዕለዋይ \| ታሕተዋይ ክፋል \| ጸጋም \| ትኽክል
መምረጺ	ገመድ	ሓሶት	ሓደ መምረጺ እንተተዋሂቡ፡ ናይ መሳርሒ ምኽሪ ነገራት ናብቶም ዝተገልጹ ዕላማታት ክውከሉ እዮም።
ምልዕዓል	ገመድ	'hover' ዝብል ጽሑፍ ኣሎ።	ከመይ ጌሩ tooltip ይጅምር - hover \| ትኹረት \| ናይ ኢድ
ርእሲ	ሕብረ ቃላት \| ተግባር	'' ።	`title` ባህሪ እንተዘይሃልዩ ነባሪ ዋጋ ኣርእስቲ
ትሕዝቶ	ሕብረ ቃላት \| ተግባር	'' ።	`data-content` ባህሪ እንተዘይሃልዩ ነባሪ ትሕዝቶ ዋጋ
ምዝንጋዕ	ቁጽሪ \| ግኡዝ ነገር	0.	ምድንጓይ ምርኣይን ምሕባእን ፖፖቨር (ms) - ንዓይነት ማንዋል ትሪግር ኣይምልከትን እዩ። ቁጽሪ እንተተቐሪቡ፡ ምድንጓይ ኣብ ክልቲኡ ምሕባእ/ምርኣይ ይትግበር ኣቃውማ ኣቕሓ፤`delay: { show: 500, hide: 100 }`

ርእሲ ንላዕሊ! ኣማራጺታት ንውልቀ ፖፖቨርስ ብኣማራጺ ብመንገዲ ኣጠቓቕማ ዳታ ባህርያት ክግለጹ ይኽእሉ።

ምልክት ምግባር

ኣገባባት

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

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

.popover('ኣርእዩ')

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

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

.popover('ሕባእ')

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

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

.popover('ምቕያር')

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

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

ብዛዕባ መጠንቀቕታታት

እቲ ናይ መጠንቀቕታ ፕላግ-ኢን ኣብ መጠንቀቕታታት ናይ ቀረባ ተግባር ንምውሳኽ ዝሕግዝ ንእሽቶ ክፍሊ እዩ።

ምውራድ

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

እቲ ናይ መጠንቀቕታታት ፕላግ-ኢን ኣብ ስሩዕ ናይ መጠንቀቕታ መልእኽትታት ይሰርሕ፣ ከምኡውን መልእኽትታት ይዓግት።

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

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

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

እዚ ስጉምቲ እዚ ውሰድ ወይ ድማ ከምዚ ግበሩ

bootstrap-alert.js ብምጥቃም

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

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

ምልክት ምግባር

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

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

ኣገባባት

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

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

.alert('ዕጾ')

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

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

ፍጻሜታት

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

ዝግጅት	መግለፂ
ዕፁው	`close`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ተዓጽዩ።	እዚ ፍጻመ እዚ እቲ መጠንቀቕታ ምስ ተዓጽወ እዩ ዝትኮስ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።

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

ብዝዕባ

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

ፋይል ኣውርድ

ኣብነት ይጥቀም

ንሃገራትን ንመቐያየሪታትን ዝኸውን ናይ መጠወቒታት ፕላግ-ኢን ተጠቐም።

መንግስታዊ ዝኾነ
ንጽል ምቕያር
ሳጹን ምልክት
ሬድዮ

bootstrap-button.js ብምጥቃም

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

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

ምልክት ምግባር

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

<!-- ኣብ ሓደ መጠወቒ ምቕያር ንምንቅስቓስ data-toggle="button" ወስኹ -->
<button class = "btn" data-toggle = "መጠወቒ" > ንጽል ምቕያር </button>  
 
<!-- ኣብ btn-group --> ንዝግበር ምቕያር ቅዲ ሳጹን ምልክት data-toggle="buttons-checkbox" ወስኸሉ።
<div class = "btn-ጉጅለ" ዳታ-መቐያየሪ = "መጠወቒታት-መፈተሺ ሳጹን" >  
  <button class = "btn" > ጸጋማይ </button> ዝብል ጽሑፍ ኣሎ። 
  <button class = "btn" > ማእከላይ </button> 
  <button class = "btn" > የማናይ </button> 
</div> ዝብል ጽሑፍ ኣሎ።
 
<!-- ኣብ btn-group --> ንዝግበር ምቕያር ቅዲ ሬድዮ data-toggle="buttons-radio" ምውሳኽ
<div class = "btn-ጉጅለ" ዳታ-ምቕያር = "መጠወቒታት-ሬድዮ" >  
  <button class = "btn" > ጸጋማይ </button> ዝብል ጽሑፍ ኣሎ። 
  <button class = "btn" > ማእከላይ </button> 
  <button class = "btn" > የማናይ </button> 
</div> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

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

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

ርእሲ ንላዕሊ! data-toggleነቲ ባህሪ ብምጥቃም ናይ ሓደ መጠወቒ auto toggling ከተኽእሎ ትኽእል ኢኻ ።

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

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

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

<button class = "btn" data-loading-text = "ነገራት ይጽዕን ኣሎ..." > ... </button>

ርእሲ ንላዕሊ! ፋየርፎክስ ነቲ ዝተሰናኸለ ኩነታት ኣብ መላእ ጽዕነት ገጽ ይቕጽል ። ነዚ ዝኸውን መፍትሒ ምጥቃም ’ ዩ autocomplete="off"።

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

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

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

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

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

bootstrap -collapse.js ዝብል ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት

ብዝዕባ

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

ፋይል ኣውርድ

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

ኣብነት ኣኮርድዮን

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

ተዓጻጻፊ ናይ ጉጅለ ኣቕሓ #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

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

bootstrap-collapse.js ምጥቃም

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

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

ኣማራጺታት

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

ምልክት ምግባር

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

<button class = "btn btn-ሓደጋ" ዳታ-ምቕያር = "ምፍራስ" ዳታ-ዕላማ = "#ዲሞ" >   
  ቀሊል ዝዕጸፍ
</መጠወቒ>
 
<div id = "demo" class = "ኣብ ውሽጢ ምፍራስ" > ... </div>

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

ኣገባባት

.collapse(ኣማራጺታት) .

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

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

.collapse('ምቕያር')

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

.collapse('ኣርእይ')

ዝዕጾ ባእታ የርኢ።

.collapse('ሕባእ')

ዝዕጾ ባእታ ይሓብእ።

ፍጻሜታት

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

ዝግጅት	መግለፂ
አርኢ	`show`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ተራእዩ እዩ።	እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።
ተሓባእ	እዚ ፍጻመ እዚ እቲ `hide`ሜላ ምስ ተጸውዐ ብቕጽበት ይትኮስ።
ሕቡእ	እዚ ክስተት ዝትኮስ ሓደ ናይ ምፍራስ ባእታ ካብ ተጠቃሚ ምስ ተሓብአ እዩ (css ምስግጋራት ክሳብ ዝዛዘም ክጽበ እዩ)።

$ ( '#ናተይ ዝዕጾ' ). 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.

‹ ። ›

ርእሲ ንላዕሊ! ነዚ ካሮሰል ኣብ እተተግብርሉ እዋን፡ እቶም ዘቕረብናዮም ምስልታት ኣውጺእኩም ብናትኩም ተክእዎ።

bootstrap-carousel.js ምጥቃም

ብመንገዲ ጃቫስክሪፕት ደውሉ፤

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

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ፍልልይ	ቑጽሪ	5000 ይኸውን	ኣብ መንጎ ብኣውቶማቲክ ንሓደ ኣቕሓ ብሽክለታ ምዝዋር ዘሎ መጠን ግዜ ምድንጓይ። ሓሶት እንተኾይኑ ካሮሰል ብኣውቶማቲክ ዑደት ኣይገብርን እዩ።
ጠጠው ምባል	ገመድ	"ሆቨር" ዝብል እዩ።	ንብሽክለታ ናይቲ ካሮሰል ኣብ mouseenter ደው የብሎ እሞ ንዑደት ናይቲ ካሮሰል ኣብ mouseleave ዳግማይ ይጅምሮ።

ምልክት ምግባር

ናይ ዳታ ባህርያት ንዝሓለፈን ዝቕጽልን ኮንሮል ይጥቀሙ። ኣብ ታሕቲ ዘሎ ኣብነት ምልክት ምልክት ርአ።

<div id = "myCarousel" class = "ካሮሰል ስላይድ" >  
  <!-- ናይ ካሮሰል ኣቑሑት -->
  <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> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

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

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

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

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

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

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

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

.ካሮሰል(ቁጽሪ)

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

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

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

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

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

ፍጻሜታት

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

ዝግጅት	መግለፂ
ገጽታ	`slide`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
ሸተት ኢሉ	እዚ ፍጻመ እዚ ዝትኮስ እቲ ካሮሰል ስላይድ ምስግጋሩ ምስ ወድአ እዩ።

ብዝዕባ

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

ፋይል ኣውርድ

ኣብነት

ውጽኢት typeahead ንምርኣይ ኣብዚ ኣብ ታሕቲ ዘሎ ቦታ ምጽሓፍ ጀምር።

bootstrap-typeahead.js ብምጥቃም

ብመንገዲ javascript ናብ typeahead ደውሉ፤

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

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ፍልፍል	ስርርዕ	[ ] ።	እቲ ኣንጻሩ ክትሓትት ዘለካ ምንጪ ዳታ።
ኣቕሑ	ቑጽሪ	8.	ኣብቲ ንቑልቁል ዝወርድ ንርእዮ ዘለና max ቁጽሪ ነገራት።
መተሓላለፊ	ተግባር	ንዓቢ ፊደል ዘይተሃዋሲ	ሓደ ሕቶ ምስ ሓደ ኣቕሓ ዝሰማማዕ እንተኾይኑ ንምፍላጥ ዝጥቀመሉ ሜላ። ሓደ ሞጎተ ይቕበል፣ እቲ `item`ኣንጻሩ ነቲ ሕቶ ዝፍትኖ። ነቲ ናይ ሕጂ ሕቶ ብ `this.query`. `true`ሕቶ ምትእስሳር እንተኾይኑ ቡልያን ምምላስ ።
መፍለዪ	ተግባር	ልክዕ ምትእስሳር፣ ንዓቢ ፊደል ዝምልከት፣ ንዓቢ ንንእሽቶን ዝምልከት	ውጽኢት ኣውቶኮምፕሊት ንምስራዕ ዝጥቀመሉ ሜላ። ሓደ ሞጎተ ይቕበልን `items`ስፍሓት ናይቲ typeahead instance ኣለዎ። ነቲ ናይ ሕጂ ሕቶ ብ `this.query`.
ድምቀት ዝህብ	ተግባር	ንኹሎም ነባሪ ምትእስሳራት የጉልሕ	ውጽኢት ኣውቶኮምፕሊት ንምጉላሕ ዝጥቀመሉ ሜላ። ሓደ ሞጎተ ይቕበልን `item`ስፍሓት ናይቲ typeahead instance ኣለዎ። html ክመልስ ይግባእ።

ምልክት ምግባር

ንሓደ ባእታ ምስ typeahead ተግባር ንምምዝጋብ ናይ ዳታ ባህርያት ምውሳኽ።

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

ኣገባባት

.typeahead(ኣማራጺታት) .

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

jQuery plugins ንኽትጅምር ደርዘን ዝኾኑ Bootstrap plugins

ፖፖቨርስ *

መሰጋገሪታት * .

ሞዳላት bootstrap-modal.js ዝብል ጽሑፍ ኣሎ።

ብዛዕባ ሞዳላት

ስታትቲካዊ ኣብነት

ሞዳል ርእሲ

ቀጥታዊ ዲሞ

ሞዳል ርእሲ

ጽሑፍ ብሞዳል

ፖፖቨር ኣብ ሞዳል

ምኽሪ መሳርሒታት ኣብ ሞዳል

ኣማራጺ ስክሮልባር ንምርኣይ ዝውሕዝ ጽሑፍ

ቡትስትራፕ-ሞዳል ብምጥቃም

ኣማራጺታት

ምልክት ምግባር

ኣገባባት

.modal(ኣማራጺታት) .

.modal('ምቕያር')

.modal('ኣርእዩ')

.modal('ሕባእ')

ፍጻሜታት

ንቑልቁል ዝወርድ bootstrap- dropdown.js

ብዛዕባ ንቑልቁል ዝወርድ

ኣብነታት

bootstrap-dropdown.js ምጥቃም

ምልክት ምግባር

ኣገባባት

$().ንቑልቁል ዝወርድ()

ስክሮልስፓይ bootstrap-scrollspy.js ዝብል ጽሑፍ ኣሎ።

ኣብነት navbar ምስ scrollspy

@ረጒድ

@mdo ዝብል ጽሑፍ ኣሎ።

ሓደ

ክልተ

three

bootstrap-scrollspy.js ምጥቃም

ምልክት ምግባር

ኣገባባት

.scrollspy('ምሕዳስ')

ኣማራጺታት

ፍጻሜታት

ዝቕየሩ ትቦታት bootstrap-tab.js

ኣብነት ትቦታት

bootstrap-tab.js ብምጥቃም

ምልክት ምግባር

ኣገባባት

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

ፍጻሜታት

ምኽሪ መሳርሒታት bootstrap- tooltip.js

ብዛዕባ ምኽሪ መሳርሒታት

ኣብነት ኣጠቓቕማ Tooltips

bootstrap-tooltip.js ብምጥቃም

ኣማራጺታት

ምልክት ምግባር

ኣገባባት

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

.tooltip('ኣርእይ')

.tooltip('ሕባእ')

.tooltip('ምቕያር')

ፖፖቨርስ bootstrap-popover.js ዝብል ጽሑፍ ኣሎ።

ብዛዕባ ፖፖቨርስ

ኣብነት ሆቨር ፖፖቨር

bootstrap-popover.js ምጥቃም

ኣማራጺታት

ምልክት ምግባር

ኣገባባት

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

.popover('ኣርእዩ')

.popover('ሕባእ')

.popover('ምቕያር')

ናይ መጠንቀቕታ መልእኽትታት bootstrap-alert.js

ብዛዕባ መጠንቀቕታታት

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

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

bootstrap-alert.js ብምጥቃም

ምልክት ምግባር

ኣገባባት

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

.alert('ዕጾ')