ቡት ማሰሪያ

ጃቫስክሪፕት ለ Bootstrap

የBootstrapን አካላት ነፍስ ይዝሩበት—አሁን በ12 ብጁ jQuery ተሰኪዎች።

jQuery ፕለጊኖች እርስዎን ለመጀመር ደርዘን ቡትስትራፕ ተሰኪዎች

ቀና በል! ሁሉም የጃቫስክሪፕት ፕለጊኖች የቅርብ ጊዜውን የ jQuery ስሪት ይፈልጋሉ።

ሞዳሎች bootstrap-modal.js

ስለ ሞዳሎች

የተስተካከለ፣ ግን ተለዋዋጭ፣ በትንሹ የሚፈለገው ተግባር እና ብልጥ ነባሪዎች ባህላዊውን የጃቫስክሪፕት ሞዳል ተሰኪን ይውሰዱ።

ሰነድ አውርድ

የማይንቀሳቀስ ምሳሌ

ከታች በስታትስቲክስ የተሰራ ሞዳል አለ።

×

የሞዳል ራስጌ

አንድ ጥሩ አካል…

ገጠመ ለውጦችን አስቀምጥ

የቀጥታ ማሳያ

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

የማሳያ ሞዳልን አስጀምር

bootstrap-modal በመጠቀም

ሞዳልን በጃቫስክሪፕት ይደውሉ፡

  1. $ ( '#myModal' )። ሞዳል ( አማራጮች )

አማራጮች

ስም ዓይነት ነባሪ መግለጫ
ዳራ ቡሊያን እውነት ነው። ሞዳል-backdrop አባልን ያካትታል። በአማራጭ፣ staticጠቅ ሲደረግ ሞዳልን የማይዘጋው ለጀርባ ይግለጹ።
የቁልፍ ሰሌዳ ቡሊያን እውነት ነው። የማምለጫ ቁልፍ ሲጫን ሞዳልን ይዘጋል።
አሳይ ቡሊያን እውነት ነው። ሲጀመር ሞዳልን ያሳያል።

ምልክት ማድረጊያ

አንድ ነጠላ የጃቫስክሪፕት መስመር መፃፍ ሳያስፈልግዎት ሞዳሎችን በገጽዎ ላይ በቀላሉ ማንቃት ይችላሉ። ልክ ከሞዳል ኤለመንት መታወቂያ ጋር የሚዛመድ data-toggle="modal"የመቆጣጠሪያ ኤለመንት ያዘጋጁ data-target="#foo"እና href="#foo"ጠቅ ሲያደርጉ ሞዳልዎን ያስጀምራል።

እንዲሁም፣ ወደ ሞዳል ምሳሌዎ አማራጮችን ለመጨመር፣ በመቆጣጠሪያው አካል ወይም በራሱ ሞዳል ማርክ ላይ እንደ ተጨማሪ የውሂብ ባህሪያት ያካትቷቸው።

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > የማስጀመሪያ ሞዳል </a>    
  1. <div class = "modal " id = "myModal" >  
  2.   <div class = "modal-header" > 
  3.     <a class = "ዝጋ" data-dismiss = "modal" > × </a>  
  4.     <h3> የሞዳል ራስጌ </h3>
  5.   </div>
  6.   <div class = "modal-body" > 
  7.     <p> አንድ ጥሩ አካል… </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href = "#" class = "btn" > ዝጋ </a>  
  11.     <a href = "#" class = "btn btn-primary" > ለውጦችን አስቀምጥ </a>  
  12.   </div>
  13. </div>
ቀና በል! የእርስዎ ሞዳል ወደ ውስጥ እና ወደ ውጭ እንዲንቀሳቀስ ከፈለጉ፣ .fadeወደ .modalኤለመንት ክፍል ብቻ ያክሉ (ይህን በተግባር ለማየት ማሳያውን ይመልከቱ) እና bootstrap-transition.jsን ያካትቱ።

ዘዴዎች

ሞዳል(አማራጮች)

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

  1. $ ( '#myModal' )። ሞዳል ({
  2.   የቁልፍ ሰሌዳ : ውሸት 
  3. })

ሞዳል('መቀያየር')

ሞዳልን በእጅ ይቀየራል።

  1. $ ( '#myModal' )። ሞዳል ( 'መቀያየር' )

ሞዳል('ሾው')

ሞዳልን በእጅ ይከፍታል።

  1. $ ( '#myModal' )። ሞዳል ( 'አሳይ' )

ሞዳል('ደብቅ')

ሞዳልን በእጅ ይደብቃል።

  1. $ ( '#myModal' )። ሞዳል ( 'ደብቅ' )

ክስተቶች

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

ክስተት መግለጫ
አሳይ showየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ታይቷል። ይህ ክስተት ሞጁሉ ለተጠቃሚው እንዲታይ ሲደረግ ይቃጠላል (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)።
መደበቅ hideየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ተደብቋል ሞዱሉ ከተጠቃሚው ተደብቆ ሲጠናቀቅ ይህ ክስተት የሚነድ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)። 
  1. $ ( '#myModal' )። በርቷል ( 'የተደበቀ' ፣ ተግባር () {   
  2.   // የሆነ ነገር አድርግ…
  3. })

ScrollSpy bootstrap-scrollspy.js

የ ScrollSpy ፕለጊን በማሸብለል አቀማመጥ ላይ በመመስረት የናቪ ኢላማዎችን በራስ-ሰር ለማዘመን ነው።

ሰነድ አውርድ

ምሳሌ navbar ከ scrollspy ጋር

ከታች ያለውን ቦታ ይሸብልሉ እና የአሰሳ ዝመናን ይመልከቱ። የተቆልቋዩ ንዑስ ንጥሎችም ይደምቃሉ። ሞክረው!

@ ስብ

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

@mdo

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

አንድ

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

ሁለት

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

three

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

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

bootstrap-scrollspy.js በመጠቀም

ወደ ጥቅልል ​​ስፓይ በጃቫስክሪፕት ይደውሉ፡

  1. $ ( '#navbar' )። ጥቅልል ስፓይ ()

ምልክት ማድረጊያ

በቀላሉ የማሸብለል ባህሪን ወደ የላይኛው አሞሌ አሰሳ ለመጨመር በቀላሉ ሊሰልሉበት ወደሚፈልጉት data-spy="scroll"አካል ያክሉ (በተለምዶ ይህ አካል ነው)።

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

አማራጮች

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

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

ይህ ፕለጊን በአካባቢያዊ ይዘት ለመሸጋገር ፈጣን፣ ተለዋዋጭ ትር እና ክኒን ተግባርን ይጨምራል።

ሰነድ አውርድ

ምሳሌ ትሮች

በተደበቁ መቃኖች መካከል ለመቀያየር ከታች ያሉትን ትሮች ጠቅ ያድርጉ፣ በተቆልቋይ ሜኑም ቢሆን።

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

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

bootstrap-tab.js በመጠቀም

በጃቫስክሪፕት በኩል ሊታዩ የሚችሉ ትሮችን አንቃ፡-

  1. $ ( '#myTab' )። ትር ( 'አሳይ' )

ምልክት ማድረጊያ

data-toggle="tab"በቀላሉ በመግለጽ ወይም በኤለመንቱ ላይ ምንም አይነት ጃቫስክሪፕት ሳይጽፉ የትር ወይም የፒኒን ዳሰሳ ማግበር ይችላሉ data-toggle="pill"።

  1. <ul class = "nav nav-tabs" > 
  2.   <li><a href = "#home" data-toggle = "tab" > መነሻ </a></li>  
  3.   <li><a href = "#profile" data-toggle = "tab" > መገለጫ </a></li>  
  4.   <li><a href = "#messages" data-toggle = "tab" > መልእክቶች </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > መቼቶች </a></li>  
  6. </ul>

ዘዴዎች

$() ትር

የትር አባል እና የይዘት መያዣን ያነቃል። ትሩ በዶም ውስጥ ያለውን የእቃ መያዢያ መስቀለኛ መንገድ ላይ ያነጣጠረ `የውሂብ-ዒላማ` ወይም `href` ሊኖረው ይገባል።

  1. <ul class = "nav nav-tabs" > 
  2.   <li class = "ንቁ" ><a href = "#ቤት" > ቤት </a></li>  
  3.   <li><a href = "#መገለጫ" > መገለጫ </a></li> 
  4.   <li><a href = "#መልእክቶች" > መልእክቶች </a></li> 
  5.   <li><a href = "#ቅንጅቶች" > መቼቶች </a></li> 
  6. </ul>
  7.  
  8. <div class = "tab-content" > 
  9.   <div class = "tab-pane active" id = "ቤት" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "መልእክቶች" > ... </div>  
  12.   <div class = "tab-pane" id = "settings" > ... </div>  
  13. </div>
  14.  
  15. <ስክሪፕት>
  16.   $ ( ተግባር () {  
  17.     $ ( '.tabs a: last' )። ትር ( 'አሳይ' )
  18.   })
  19. </script>

ክስተቶች

ክስተት መግለጫ
አሳይ ይህ ክስተት በትር ትዕይንት ላይ ይቃጠላል፣ ነገር ግን አዲሱ ትር ከመታየቱ በፊት። event.targetገባሪውን ትር እና event.relatedTargetየቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
ታይቷል። ይህ ክስተት ትር ከታየ በኋላ በትብ ትዕይንት ላይ ይቀጣጠላል። event.targetገባሪውን ትር እና event.relatedTargetየቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ። 
  1. $ ( 'a[data-toggle="tab"]' )። በርቷል ( 'የሚታየው' ፣ ተግባር ( ሠ ) {   
  2.   ሠ . ዒላማ // የነቃ ትር
  3.   ሠ . ተዛማጅ ዒላማ // ያለፈው ትር
  4. })

የመሳሪያ ምክሮች bootstrap- tooltip.js

ስለ መሳሪያ ምክሮች

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

ሰነድ አውርድ

የመሳሪያ ምክሮች አጠቃቀም ምሳሌ

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

ጠባብ ሱሪ next level keffiyeh ምናልባት ሳትሰሙት አልቀረም ። የፎቶ ቡዝ ጢም ጥሬ የዲኒም ደብዳቤ የቪጋን መልእክተኛ ቦርሳ ስቱምፕታውን። ከእርሻ ወደ ጠረጴዛ ሴይታን፣ የማሲስዊኒ መጠገኛ ዘላቂ ኩዊኖ 8-ቢት አሜሪካዊ አልባሳት ቴሪ ሪቻርድሰን ቪኒል ቻምበሬይ አላቸው ። Beard stumptown፣ cardigans banh mi lomo Thundercats። ቶፉ ባዮዳይዝል ዊሊያምስበርግ ማርፋ፣ አራት ሎኮ ማክስዊኒ የጸዳ ቪጋን ቻምበሬይ። በጣም የሚገርም የእጅ ጥበብ ባለሙያ ምንም ይሁን ምን ኪታር፣ የቦታስተር እርሻ-ወደ ጠረጴዛ ባንክ ኦስቲን ትዊተር የፍሪጋን ክሬድ ጥሬ ጂንስ ነጠላ-መነሻ የቡና ቫይረስ።

bootstrap-tooltip.js በመጠቀም

በጃቫስክሪፕት በኩል የመሳሪያውን ጫፍ ቀስቅሰው፡-

  1. $ ( '#ምሳሌ' )። የመሳሪያ ምክር ( አማራጮች )

አማራጮች

ስም ዓይነት ነባሪ መግለጫ
አኒሜሽን ቡሊያን እውነት ነው። የ css ደብዝዝ ሽግግርን ወደ መሳሪያ ጫፍ ተግብር
አቀማመጥ string | ተግባር 'ከላይ' የመሳሪያውን ጫፍ እንዴት እንደሚቀመጥ - ከላይ | የታችኛው | ግራ | ቀኝ
መራጭ ሕብረቁምፊ የውሸት መራጭ ከቀረበ፣የመሳሪያ ምክር ነገሮች ለተገለጹት ኢላማዎች ይላካሉ።
ርዕስ ሕብረቁምፊ | ተግባር '' `ርዕስ` መለያ ከሌለ ነባሪ የርዕስ ዋጋ
ቀስቅሴ ሕብረቁምፊ 'ማንዣበብ' የመሳሪያ ጫፍ እንዴት እንደሚነሳ - ማንዣበብ | ትኩረት | መመሪያ
መዘግየት ቁጥር | ነገር 0

የመሳሪያውን ጫፍ (ሚሴ) ማሳየት እና መደበቅ መዘግየት

ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል።

የእቃው መዋቅር የሚከተለው ነው-delay: { show: 500, hide: 100 }
ቀና በል! ለነጠላ የመሳሪያ ምክሮች አማራጮች በመረጃ ባህሪያት አጠቃቀም በኩል ሊገለጹ ይችላሉ።

ምልክት ማድረጊያ

ለአፈጻጸም ምክንያቶች፣ Tooltip እና Popover data-apis መርጠው ገብተዋል። እነሱን ለመጠቀም ከፈለጉ በቀላሉ የመራጭ ምርጫን ይጥቀሱ።

  1. <a href = "#" rel = "tooltip" ርዕስ = "የመጀመሪያው የመሳሪያ ምክር" > በእኔ ላይ አንዣብብ </a>

ዘዴዎች

$()የመሳሪያ ቲፕ(አማራጮች)

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

.tooltip('ሾው')

የአንድ ንጥረ ነገር መሣሪያ ጫፍን ያሳያል።

  1. $ ( '# አካል' ) የመሳሪያ ጫፍ ( 'አሳይ' )

.tooltip('ደብቅ')

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይደብቃል።

  1. $ ( '# አካል' ) የመሳሪያ ጫፍ ( 'ደብቅ' )

.tooltip('መቀያየር')

የአንድን ንጥረ ነገር መሣሪያ ጫፍ ይቀያይራል።

  1. $ ( '# አካል' ) የመሳሪያ ቲፕ ( 'መቀያየር' )

Popovers bootstrap-popover.js

ስለ ፖፖቨርስ

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

* ለመካተት የመሳሪያ ምክሮችን ይፈልጋል

ሰነድ አውርድ

ምሳሌ ማንዣበብ ብቅ ባይ

ብቅ-ባይን ለመቀስቀስ በአዝራሩ ላይ ያንዣብቡ።

ለ popover ማንዣበብ

bootstrap-popover.js በመጠቀም

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

  1. $ ( '#ምሳሌ' )። ብቅ-ባይ ( አማራጮች )

አማራጮች

ስም ዓይነት ነባሪ መግለጫ
አኒሜሽን ቡሊያን እውነት ነው። የ css ደብዝዝ ሽግግርን ወደ መሳሪያ ጫፍ ተግብር
አቀማመጥ string | ተግባር 'ቀኝ' ፖፖውን እንዴት እንደሚቀመጥ - ከላይ | የታችኛው | ግራ | ቀኝ
መራጭ ሕብረቁምፊ የውሸት መራጭ ከቀረበ፣የመሳሪያ ጥቆማ ዕቃዎች ለተገለጹት ኢላማዎች ይላካሉ
ቀስቅሴ ሕብረቁምፊ 'ማንዣበብ' የመሳሪያ ጫፍ እንዴት እንደሚነሳ - ማንዣበብ | ትኩረት | መመሪያ
ርዕስ ሕብረቁምፊ | ተግባር '' `ርዕስ` ባህሪ ከሌለ ነባሪ የርዕስ ዋጋ
ይዘት ሕብረቁምፊ | ተግባር '' `የውሂብ-ይዘት` ባህሪ ከሌለ ነባሪ የይዘት ዋጋ
መዘግየት ቁጥር | ነገር 0

ብቅ-ባይ (ሚሴ) ማሳየት እና መደበቅ መዘግየት

ቁጥር ከቀረበ፣ መዘግየት በሁለቱም መደበቅ/ማሳየት ላይ ይተገበራል።

የእቃው መዋቅር የሚከተለው ነው-delay: { show: 500, hide: 100 }
ቀና በል! ለግል ብቅ-ባይ አማራጮች እንደ አማራጭ የውሂብ ባህሪያትን በመጠቀም ሊገለጹ ይችላሉ።

ምልክት ማድረጊያ

ለአፈጻጸም ምክንያቶች፣ Tooltip እና Popover data-apis መርጠው ገብተዋል። እነሱን ለመጠቀም ከፈለጉ በቀላሉ የመራጭ ምርጫን ይጥቀሱ።

ዘዴዎች

$()።popover(አማራጮች)

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

.popover('ትዕይንት')

ብቅ ባይ የሆኑ ንጥረ ነገሮችን ያሳያል።

  1. $ ( '# አካል' ) ብቅ ባይ ( 'አሳይ' )

.popover('ደብቅ')

ብቅ ባይ የሆኑ ንጥረ ነገሮችን ይደብቃል።

  1. $ ( '# አካል' ) ብቅ ባይ ( 'ደብቅ' )

.popover('መቀያየር')

ኤለመንቶችን ብቅ-ባይን ይቀያይራል።

  1. $ ( '# አካል' ) ብቅ- ባይ ( "መቀያየር" )

የማንቂያ መልዕክቶች bootstrap-alert.js

ስለ ማንቂያዎች

የማንቂያ ፕለጊን ወደ ማንቂያዎች ቅርብ ተግባራትን ለመጨመር ትንሽ ክፍል ነው።

አውርድ

ምሳሌ ማንቂያዎች

የማንቂያዎች ተሰኪው በመደበኛ የማንቂያ መልእክቶች ላይ ይሰራል እና መልዕክቶችን ያግዳል።

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

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

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

ይህን እርምጃ ይውሰዱ ወይም ይህን አድርግ

bootstrap-alert.js በመጠቀም

ማንቂያውን በጃቫስክሪፕት ማሰናበት ያንቁ፡-

  1. $ ( ". ማንቂያ" ). ማንቂያ ()

ምልክት ማድረጊያ

data-dismiss="alert"የማንቂያ ቅርብ ተግባርን በራስ-ሰር ለመስጠት ወደ መዝጊያ ቁልፍዎ ያክሉ ።

  1. <a class = "close" data-dismiss = "ማስጠንቀቂያ" href = "#" > × </a>

ዘዴዎች

$() ማንቂያ()

ሁሉንም ማንቂያዎች በቅርብ ተግባር ያጠቃልላል። ማንቂያዎችዎ በሚዘጉበት ጊዜ እንዲነቁ ለማድረግ፣ ቀድሞውንም የተተገበሩበት ክፍል .fadeእና ክፍል እንዳላቸው ያረጋግጡ።.in

ማንቂያ ('ዝግ')

ማንቂያ ይዘጋል።

  1. $ ( ". ማንቂያ" ). ማንቂያ ( "ዝጋ" )

ክስተቶች

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

ክስተት መግለጫ
ገጠመ closeየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ዝግ ይህ ክስተት የሚተኮሰው ማንቂያው ሲዘጋ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)። 
  1. $ ( '#የእኔ-ማስጠንቀቂያ' )። ማሰር ( 'ዝግ' ፣ ተግባር () {   
  2.   // የሆነ ነገር አድርግ…
  3. })

አዝራሮች bootstrap-button.js

ስለ

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

ሰነድ አውርድ

ምሳሌ አጠቃቀሞች

ለግዛቶች እና ለመቀያየር ቁልፎችን ተሰኪን ይጠቀሙ።

ግዛት ያለው
ነጠላ መቀያየር
አመልካች ሳጥን
ሬዲዮ

bootstrap-button.js በመጠቀም

አዝራሮችን በጃቫስክሪፕት አንቃ፡-

  1. $ ( '.ትር' )። አዝራር ()

ምልክት ማድረጊያ

የውሂብ ባህሪያት ከአዝራር ተሰኪ ጋር ወሳኝ ናቸው። ለተለያዩ የማርክ ዓይነቶች ከዚህ በታች ያለውን የምሳሌ ኮድ ይመልከቱ።

  1. <!-- በአንድ አዝራር ላይ መቀያየርን ለማንቃት data-toggle="button" ያክሉ -->
  2. <button class = "btn" data-toggle = "button" > ነጠላ መቀያየር </button>  
  3.  
  4. <!-- በbtn-group ላይ ለመቀያየር ዳታ-toggle="buttons-checkbox" አክል -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >  
  6.   <button class = "btn" > ግራ </button> 
  7.   <button class = "btn" > መካከለኛ </button> 
  8.   <button class = "btn" > ቀኝ </button> 
  9. </div>
  10.  
  11. <!-- በbtn-ግሩፕ ላይ ለመቀያየር ዳታ-ቶggle="buttons-radio" አክል -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >  
  13.   <button class = "btn" > ግራ </button> 
  14.   <button class = "btn" > መካከለኛ </button> 
  15.   <button class = "btn" > ቀኝ </button> 
  16. </div>

ዘዴዎች

$() አዝራር ('መቀያየር')

የግፋ ሁኔታን ይቀያይራል። አዝራሩ የነቃውን መልክ ይሰጣል።

ቀና በል! ባህሪውን በመጠቀም የአንድን አዝራር በራስ-ሰር መቀያየርን ማንቃት ይችላሉ data-toggle። 
  1. <button class = "btn" data-toggle = "አዝራር" > … </button>

$() አዝራር('መጫን')

የአዝራር ሁኔታን ወደ ጭነት ያዘጋጃል - አዝራሩን ያሰናክላል እና ጽሑፍን ወደ መስቀል ይለውጣል። የመጫኛ ጽሑፍ የውሂብ ባህሪን በመጠቀም በአዝራሩ አካል ላይ መገለጽ አለበት data-loading-text.

  1. <button class = "btn" data-loading-text = "ነገሮችን በመጫን ላይ..." > ... </button>
ቀና በል! ፋየርፎክስ በገጽ ጭነቶች ላይ የአካል ጉዳተኛ ሁኔታን እንደቀጠለ ነው። ለዚህ መፍትሄ መጠቀም autocomplete="off"ነው.

$() አዝራር ('ዳግም ማስጀመር')

የአዝራር ሁኔታን ዳግም ያስጀምራል - ጽሑፍ ወደ ዋናው ጽሑፍ ይቀያይራል።

$() አዝራር (ሕብረቁምፊ)

የአዝራር ሁኔታን ዳግም ያስጀምራል - ጽሑፍ ወደ ማንኛውም ውሂብ ወደተገለጸው የጽሑፍ ሁኔታ ይለዋወጣል።

  1. <button class = "btn" data-complete-text = "አልቋል!" > ... </button>   
  2. <ስክሪፕት>
  3.   $ ( '.btn' )። አዝራር ( "ሙሉ" )
  4. </script>

bootstrap-collapse.js ሰብስብ

ስለ

እንደ አኮርዲዮን እና አሰሳ ላሉ ሊሰበሰቡ ለሚችሉ አካላት የመሠረት ቅጦች እና ተለዋዋጭ ድጋፍ ያግኙ።

ሰነድ አውርድ

ምሳሌ አኮርዲዮን

የስብስብ ተሰኪን በመጠቀም ቀላል የአኮርዲዮን ዘይቤ መግብርን ገንብተናል፡-

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

bootstrap-collapse.js በመጠቀም

በጃቫስክሪፕት አንቃ፡-

  1. $ ( ". ሰብስብ" ). መውደቅ ()

አማራጮች

ስም ዓይነት ነባሪ መግለጫ
ወላጅ መራጭ የውሸት መራጭ ከሆነ ይህ የሚሰበሰብ ንጥል ነገር ሲታይ በተገለጸው ወላጅ ስር ያሉ ሁሉም የሚሰበሰቡ ክፍሎች ይዘጋሉ። (ከባህላዊ አኮርዲዮን ባህሪ ጋር ተመሳሳይ)
ቀያይር ቡሊያን እውነት ነው። በጥሪ ላይ ሊሰበሰብ የሚችለውን አካል ይቀየራል።

ምልክት ማድረጊያ

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

  1. <button class = "btn btn- danger" data -toggle = "collapse" data-target = "#demo" >   
  2.   ቀላል ሊሰበሰብ የሚችል
  3. </button>
  4.  
  5. <div id = "demo" class = "ሰብስብ" > … </div>
ቀና በል! አኮርዲዮን የመሰለ የቡድን አስተዳደርን ወደ ሊሰበሰብ የሚችል ቁጥጥር ለመጨመር የውሂብ ባህሪውን ያክሉ data-parent="#selector"። ይህንን በተግባር ለማየት ማሳያውን ይመልከቱ።

ዘዴዎች

.ሰብስብ(አማራጮች)

የእርስዎን ይዘት እንደ ሊሰበሰብ የሚችል አካል ያገብራል። አማራጭ አማራጮችን ይቀበላል object።

  1. $ ( '#My Collapsible' )። መሰባበር ({
  2.   መቀያየር : ውሸት 
  3. })

ሰብስብ('መቀያየር')

ሊሰበሰብ የሚችል አካል ወደ የሚታይ ወይም የተደበቀ ይቀየራል።

.ሰብስብ('አሳይ')

ሊፈርስ የሚችል አካል ያሳያል።

ሰብስብ('ደብቅ')

ሊፈርስ የሚችል አካል ይደብቃል።

ክስተቶች

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

ክስተት መግለጫ
አሳይ showየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ታይቷል። ይህ ክስተት የሚተኮሰው የብልሽት ኤለመንት ለተጠቃሚው እንዲታይ ሲደረግ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል።)
መደበቅ hideዘዴው ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
ተደብቋል ይህ ክስተት የሚተኮሰው የስብስብ ኤለመንት ከተጠቃሚው ከተደበቀ ነው (የ css ሽግግሮች እስኪጠናቀቁ ድረስ ይጠብቃል)። 
  1. $ ( '#My Collapsible' )። በርቷል ( 'የተደበቀ' ፣ ተግባር () {   
  2.   // የሆነ ነገር አድርግ…
  3. })

የጭንቅላት አይነት ቡትስትራፕ- typeahead.js

ስለ

ከማንኛውም የጽሑፍ ግብዓት ጋር የሚያማምሩ የጽሕፈት መኪናዎችን በፍጥነት ለመፍጠር መሰረታዊ፣ በቀላሉ የተዘረጋ ፕለጊን።

ሰነድ አውርድ

ለምሳሌ

የመተየብ ውጤቶቹን ለማሳየት ከዚህ በታች ባለው መስክ ላይ መተየብ ይጀምሩ።

bootstrap-typeahead.js በመጠቀም

የጽሕፈት መኪናውን በጃቫስክሪፕት ይደውሉ፡-

  1. $ ( '.typehead' ). የጽሕፈት መኪና ()

አማራጮች

ስም ዓይነት ነባሪ መግለጫ
ምንጭ ድርድር [ ] ለመቃወም ለመጠየቅ የውሂብ ምንጭ።
እቃዎች ቁጥር 8 በተቆልቋዩ ውስጥ የሚታዩት ከፍተኛው የንጥሎች ብዛት።
ተዛማጅ ተግባር ጉዳይ የማይሰማ መጠይቁ ከእቃው ጋር የሚዛመድ መሆኑን ለመወሰን የሚያገለግል ዘዴ። itemጥያቄውን የሚፈትሽበት ነጠላ መከራከሪያ ይቀበላል ። የአሁኑን ጥያቄ በ ጋር ይድረሱበት this.query። trueጥያቄ ከተዛመደ ቡሊያን ይመልሱ ።
መደርደር ተግባር ትክክለኛ ግጥሚያ፣
ጉዳይ ሚስጥራዊነት ያለው፣
ጉዳይ የማይሰማ		 የራስ-አጠናቅቅ ውጤቶችን ለመደርደር ጥቅም ላይ የሚውል ዘዴ። ነጠላ ነጋሪ እሴትን ይቀበላል itemsእና የትየባ ራስ ምሳሌ ወሰን አለው። የአሁኑን ጥያቄ በ this.query.
ማድመቂያ ተግባር ሁሉንም ነባሪ ግጥሚያዎች ያደምቃል የራስ-አጠናቅቅ ውጤቶችን ለማጉላት ጥቅም ላይ የሚውል ዘዴ። ነጠላ ነጋሪ እሴትን ይቀበላል itemእና የትየባ ራስ ምሳሌ ወሰን አለው። html መመለስ አለበት።

ምልክት ማድረጊያ

የትየባ ጭንቅላት ተግባር ያለው አካል ለመመዝገብ የውሂብ ባህሪያትን ያክሉ።

  1. <input type = "text" data- provide = "typehead" >

ዘዴዎች

.መተየብ (አማራጮች)

ግብአትን በታይፕ ጭንቅላት ያስጀምራል።