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

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

ሞዳላት

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

ድሮፕዳውንድስ

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

ስክሮልስፒ

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

ዝቕየሩ ትቦታት

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

ምኽሪ መሳርሒታት

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

ፖፖቨርስ *

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

* Tooltips ክካተት ይጠልብ

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

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

መጠወቒታት

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

ፈረሰ

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

ካሮሰል

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

ንቕድሚት ጽሓፍ

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

መሰጋገሪታት * .

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

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

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

ብዛዕባ ሞዳላት

ፋይል ኣውርድ

ስታትቲካዊ ኣብነት

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

ቀጥታዊ ዲሞ

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

ዲሞ ሞዳል ምጅማር

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

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

$('#myModal').modal(ኣማራጺታት)

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ድሕረ ባይታ	ቡልያን ዝብል እዩ።	ሓቂ	ሞዳል-ባክድሮፕ ባእታ ዘጠቓልል እዩ።
ቁልፊ ሰሌዳ	ቡልያን ዝብል እዩ።	ሓቂ	መፍትሕ ምህዳም ምስ ዝጽቀጥ ነቲ ሞዳል ይዓጽዎ።

ምልክት ምግባር

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

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

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

<div ክፍሊ="ሞዳል">
  <div class="ሞዳል-ርእሲ">
    <a class="close" data-dismiss="ሞዳል">×</a> ዝብል ጽሑፍ ኣሎ።
    <h3>ሞዳል ርእሲ</h3>
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class="ሞዳል-ኣካል">
    <p>ሓደ ረቂቕ ኣካል...</p>
  </div> ዝብል ጽሑፍ ኣሎ።
  <div class="ሞዳል-እግሪ">
    <a href="#" class="btn btn-primary">ለውጢ ምዕቃብ</a>
    <a href="#" class="btn">ዕጾ</a>
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

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

ኣገባባት

.modal(ኣማራጺታት) .

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

$('#ናይ ሞዳለይ').modal({
  ቁልፊ ሰሌዳ: ሓሶት።
}) ።

.modal('ምቕያር')

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

$('#myModal').modal('ምቕያር')

.modal('ኣርእዩ')

ብኢድ ሞዳል ይኸፍት።

$('#myModal').modal('ኣርእዩ')

.modal('ሕባእ')

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

$('#myModal').modal('ሕባእ') ንዝያዳ ሓበሬታ ኣብዚ ንጠውቅ።

ፍጻሜታት

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

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

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

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

ፋይል ኣውርድ

ኣብነታት

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

bootstrap-dropdown.js ምጥቃም

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

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

ምልክት ምግባር

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

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

<ul class="ናቭ ከኒናታት">
  <li class="active"><a href="#">ስሩዕ መላግቦ</a></li>
  <li class="ንቑልቁል ዝወርድ" id="menu1">
    <a class="ምውራድ-ምቕያር" data-toggle="ምውራድ" href="#menu1">
      ንቑልቁል ዝወርድ
      <b class="caret"></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> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

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

ንዝተዋህበ 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.

ክልተ

ኣብ incididunt መቓልሕ ፓርክ, officia deserunt mcsweeney ናይ proident ጎይታ ነጎዳታት sapiente veniam የጽርዩ። ብዘይካ VHS elit, proident shoreditch +1 ባዮዲዘል ላቦረም ኢደ ጥበብ ቢራ. ንጽል-መበቆል ቡን ዋይፋረርስ irure ኣርባዕተ ሎኮ, cupidat ቴሪ ሪቻርድሰን ጎይታ ምጽራይ. Assumenda ምናልባት ኣይሰማዕኩምን ትኾኑ art party fanny pack, tattooed nulla cardigan tempor ad. ፕሮይደንት ዝብኢ nesciunt ሳርቶርያል ኬፊየህ eu banh mi ዘላቒ። Elit wolf voluptate, lo-fi ea portland ቅድሚ ኣርባዕተ ሎኮ ምሻጦም። ሎካቮረ ኤኒም ኖስትሩድ ምልክሽክ ብሩክሊን ነስቺውንት።

ሰለስተ

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 ምጥቃም

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

$('#navbar').ስክሮልስፒ()

ምልክት ምግባር

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

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

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

ኣማራጺታት

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

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

ፋይል ኣውርድ

ኣብነት ትቦታት

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

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

ናይ መግቢ ናይ ጽዕነት መኪና fixie locavore, accusamus mcsweeney's marfa nulla ንጽል መበቆል ዘለዎ ቡን ስኩዊድ። ምውስዋስ ኣካላት +1 labore velit, ብሎግ ሳርቶርያል PBR leggings ዝቕጽል ደረጃ wes ኣንደርሰን ስነ ጥበባዊ ኣርባዕተ ሎኮ ሕርሻ-ናብ-ጠረጴዛ ኢደ ጥበብ ቢራ ትዊ. Qui ፎቶ ዳስ ሌተርፕረስ፣ ኮሞዶ ኢኒም ኢደ ጥበብ ቢራ mlkshk aliquip ጂን ሓጺር ullamco ad vinyl cillum PBR. ሆሞ ኖስትሩድ ኦርጋኒክ፣ ኣሱመንዳ ላቦረ ስነ-ጽባቐ ማግና ደሌክቱስ ሞሊት። ኬይታር ሄልቨቲካ ቪኤችኤስ ሳልቭያ yr, ቬሮ ማግና ቬሊት ሳፒየንተ ላቦረ ስቱምፕታውን. ቪጋን ፋኒ ፓክ ኦዲዮ ሲሉም ዌስ ኣንደርሰን 8-ቢት፣ ዘላቒ ጂን ሓጺር ጭሕሚ ut DIY ስነ-ምግባራዊ culpa ቴሪ ሪቻርድሰን ባዮዲዘል. ስነ ጥበብ ውድብ scenester stumptown, tumblr ስጋ ቬሮ sint qui sapiente accusamus ንቕሳት መቓልሕ ፓርክ.

Etsy mixtape wayfarers, ስነ-ምግባራዊ ዌስ ኣንደርሰን ቶፉ ቅድሚ ምሻጥ ምውዳኦም mcsweeney ኦርጋኒክ ሎሞ ሬትሮ ፋኒ ፓክ ሎ-ፋይ ሕርሻ-ናብ-መኣዲ ድሉው. መልእኽተኛ ቦርሳ gentrify ፒችፎርክ ንቕሳት ኢደ ጥበብ ቢራ, iphone ስኬትቦርድ locavore ካርለስ etsy ሳልቭያ banksy hoodie helvetica. DIY synth PBR ባንክሲ ስሕተት። ሌጊንስ ጀንትሪፋይ ስኩዊድ 8-ቢት ክሬድ ፒችፎርክ። ዊልያምስበርግ banh mi ዝኾነ ይኹን ካብ ግሉተን ነጻ ዝኾነ, ካርለስ ፒችፎርክ ባዮዲዘል fixie etsy ሬትሮ mlkshk ምክትል ብሎግ. Scenester cred ምናልባት ዘይሰማዕኩምዎም ትኾኑ፣ vinyl craft beer blog stumptown. ፒችፎርክ ዘላቒ ቶፉ ሲንት ቻምብራይ yr.

ትራስት ፋንድ seitan letterpress, keytar ጥረ ዲኒም keffiyeh etsy ስነ ጥበብ ፓርቲ ቅድሚ ምሻጦም ጎይታ ምጽራይ ግሉተን-ነጻ ስኩዊድ scenester freegan ኮስቢ ስዊተር. ፋኒ ፓክ ፖርትላንድ seitan DIY, ስነ ጥበብ ውድብ locavore ዝብኢ ክሊሸ ልዑል ህይወት መቓልሕ ፓርክ ኦስቲን. Cred vinyl keffiyeh DIY salvia PBR, banh mi ቅድሚ ካብ ሕርሻ ናብ ጠረጴዛ VHS ቫይራል locavore cosby ስዊተር ምሻጦም። ሎሞ ዝብኢ ቫይራል፣ ጭሕሚ ድሉው ዝኾነ ነጎዳታት ኬፊየህ ኢደ ጥበብ ቢራ ማርፋ ስነ-ምግባራዊ። ተኹላ ሳልቭያ ፍሪጋን፡ ሳርቶርያል ኬፊየህ መቓልሕ ፓርክ ቪጋን።

bootstrap-tab.js ብምጥቃም

ብመንገዲ ጃቫስክሪፕት ኣቢልካ tabbable tabs ኣንቅሕ፤

$('#myTab').tab('ኣርእይ')

ምልክት ምግባር

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

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

ኣገባባት

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

ንሓደ ናይ ትብ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። Tab ወይ `data-target` ወይ `href` ኣብ dom ንዘሎ ኮንተይነር ኖድ ዝዓለመ ክህልዎ ይግባእ።

<ul class="tabs"> ዝብል ጽሑፍ ኣሎ።
  <li class="ንጡፍ"><a href="#home">ገዛ</a></li>
  <li><a href="#profile">ፕሮፋይል</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> ዝብል ጽሑፍ ኣሎ።

<ስክሪፕት> ዝብል ጽሑፍ ኣሎ።
  $(ተግባር () {
    $('.tabs a:last').tab('ኣርእይ')
  }) ።
</script> ዝብል ጽሑፍ ኣሎ።

ፍጻሜታት

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

$('a[data-toggle="tab"]').on('ተራእዩ', ተግባር (e) {
  e.target // ዝተንቀሳቐሰ ትብ
  e.relatedTarget // ዝሓለፈ ትብ
}) ።

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

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

ፋይል ኣውርድ

ኣብነት ኣጠቓቕማ Tooltips

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

bootstrap-tooltip.js ብምጥቃም

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

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

ኣማራጺታት

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

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

ምልክት ምግባር

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

ኣገባባት

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

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

.tooltip('ኣርእይ')

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

$('#element').tooltip('ኣርእዩ')

.tooltip('ሕባእ')

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

$('#element').tooltip('ሕባእ')

.tooltip('ምቕያር')

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

$('#element').tooltip('ምቕያር')

ብዛዕባ ፖፖቨርስ

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

* Tooltip ክሕወስ ይጠልብ

ፋይል ኣውርድ

ኣብነት ሆቨር ፖፖቨር

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

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

bootstrap-popover.js ምጥቃም

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

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

ኣማራጺታት

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

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

ምልክት ምግባር

ብሰንኪ ኣፈጻጽማ ምኽንያት፡ እቶም Tooltipን Popover data-apisን opt in እዮም።ክትጥቀመሎም እንተደሊኻ በቃ the selector ዝብል ኣማራጺ ግለጽ።

ኣገባባት

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

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

.popover('ኣርእዩ')

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

$('#element').popover('ኣርእዩ')

.popover('ሕባእ')

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

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

.popover('ምቕያር')

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

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

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

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

ምውራድ

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

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

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

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

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

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

bootstrap-alerts.js ምጥቃም

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

$(".alert-መልእኽቲ").alert()

ምልክት ምግባር

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

<a class="close" data-dismiss="ጥንቃቐ" href="#">×</a> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

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

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

.alert('ዕጾ')

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

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

ፍጻሜታት

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

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

$('#my-alert').bind('ተዓጽዩ', ተግባር () {
  // ገለ ግበር...
}) ።

ብዝዕባ

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

ፋይል ኣውርድ

ኣብነት ይጥቀም

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

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

bootstrap-button.js ብምጥቃም

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

$('.tabs').መጠወቒ()

ምልክት ምግባር

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

<!-- ኣብ ሓደ መጠወቒ ምቕያር ንምንቅስቓስ data-toggle="button" ወስኹ -->
<button class="btn" data-toggle="button">ንጽል ምቕያር</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-ጉጅለ" data-toggle="መጠወቒታት-ሬድዮ">
  <button class="btn">ጸጋም</button> ዝብል ጽሑፍ ኣሎ።
  <button class="btn">ማእከላይ</button> ዝብል ጽሑፍ ኣሎ።
  <button class="btn">የማናይ</button> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

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

ንናይ ምድፋእ ኩነታት ይቕይር። btn ተነቒሉ ዝብል መልክዕ ይህቦ።

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

<button class="btn" data-toggle="መጠወቒ" >...</መጠወቒ>

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

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

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

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

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

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

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

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

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

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

$(".collapse").ተዓጽዩ()

ኣማራጺታት

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

ምልክት ምግባር

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

<button class="btn btn-ሓደጋ" data-toggle="ምዕራፍ" ዳታ-ዕላማ="#demo">
  ቀሊል ዝዕጸፍ
</መጠወቒ>

<div id="demo" class="ኣብ"> ... </div> ዝፈርስ

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

ኣገባባት

.collapse(ኣማራጺታት) .

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

$('#myተዓጻጻፊ').collapse({
  toggle: ሓሶት ዝብል እዩ።
}) ።

.collapse('ምቕያር')

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

.collapse('ኣርእይ')

ዝዕጾ ባእታ የርኢ።

.collapse('ሕባእ')

ዝዕጾ ባእታ ይሓብእ።

ፍጻሜታት

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

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

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

ብዝዕባ

ብባእታታት ንዝግበር ዑደት ዝሕግዝ ሓፈሻዊ ፕላግ-ኢን። ሓደ ፍስሃ ዝመልኦ ምዝንጋዕ።

ፋይል ኣውርድ

ኣብነት ካሮሰል

ኣብ ታሕቲ ዘሎ ስላይድ ሾው ርኣዩ።

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

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

ካልኣይ ንእሽቶ ስእሊ ምልክት

ሳልሳይ ንእሽቶ ስእሊ ምልክት

‹ › ።

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

bootstrap-carousel.js ምጥቃም

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

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

ኣማራጺታት

ሽም	ዓይነት	ትሑዝ	መግለፂ
ፍልልይ	ቑጽሪ	5000 ይኸውን	ኣብ መንጎ ብኣውቶማቲክ ንሓደ ኣቕሓ ብሽክለታ ምዝዋር ዘሎ መጠን ግዜ ምድንጓይ።

ምልክት ምግባር

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

<div class="ካሮሰል"> ዝብል ጽሑፍ ኣሎ።
  <!-- ናይ ካሮሰል ኣቑሑት -->
  <div class="ካሮሰል-ውሽጣዊ">
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
  <!-- ካሮሰል ናቭ -->
  <a class="ካሮሰል-ምቁጽጻር ጸጋም" href="#myCarousel" data-slide="ቅድሚት">‹</a>
  <a class="ካሮሰል-ምቁጽጻር መሰል" href="#myCarousel" data-slide="ዝቕጽል">›</a>
</div> ዝብል ጽሑፍ ኣሎ።

ኣገባባት

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

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

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

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

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

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

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

.ካሮሰል(ቁጽሪ)

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

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

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

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

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

ፍጻሜታት

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

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

ብዝዕባ

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

ፋይል ኣውርድ

ኣብነት

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

bootstrap-typeahead.js ብምጥቃም

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

$('.ቅድሚት ምጽሓፍ').ቅድሚት ምጽሓፍ()

ኣማራጺታት

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

ምልክት ምግባር

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

<ምእታው ዓይነት="ጽሑፍ" data-provide="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 ዝብል ጽሑፍ ኣሎ።

ሓደ

ክልተ

ሰለስተ

bootstrap-scrollspy.js ምጥቃም

ምልክት ምግባር

ኣማራጺታት

ዝቕየሩ ትቦታት 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-alerts.js ምጥቃም

ምልክት ምግባር

ኣገባባት

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

.alert('ዕጾ')

ፍጻሜታት

መጠወቒታት bootstrap-button.js

ብዝዕባ

ኣብነት ይጥቀም