የግለሰብ ወይም የተጠናቀረ

ተሰኪዎች በተናጥል ሊካተቱ ይችላሉ (ምንም እንኳን አንዳንዶቹ ጥገኞች ቢኖራቸውም) ወይም ሁሉም በአንድ ጊዜ። ሁለቱም bootstrap.js እና bootstrap.min.js በአንድ ፋይል ውስጥ ያሉ ሁሉንም ተሰኪዎች ይይዛሉ።

የውሂብ ባህሪያት

ሁሉንም የ Bootstrap ፕለጊኖች አንድ ነጠላ የጃቫስክሪፕት መስመር ሳይጽፉ በማርክ ማፕ ኤፒአይ ብቻ መጠቀም ይችላሉ። ይህ የBootstrap የመጀመሪያ ክፍል API ነው እና ተሰኪን ሲጠቀሙ የመጀመሪያ ግምት ውስጥ መግባት አለበት።

ያ ማለት፣ በአንዳንድ ሁኔታዎች ይህንን ተግባር ማጥፋት ሊፈለግ ይችላል። ስለዚህ፣ ሁሉንም በ«ዳታ-ኤፒ» የተከፋፈሉትን የሰውነት ስም በማጥፋት የውሂብ አይነታ ኤፒአይን የማሰናከል ችሎታን እናቀርባለን። ይህ ይህን ይመስላል።

$ ( "ሰውነት" ). ጠፍቷል ( '.data-api' )

በአማራጭ፣ አንድን የተወሰነ ፕለጊን ዒላማ ለማድረግ፣ የተሰኪውን ስም እንደ የስም ቦታ ብቻ ከዳታ-api የስም ቦታ ጋር እንደዚህ ያካትቱ።

$ ( "ሰውነት" ). ጠፍቷል ( 'alert.data-api' )

ፕሮግራማዊ ኤፒአይ

እንዲሁም ሁሉንም የBootstrap ፕለጊኖች በጃቫስክሪፕት ኤፒአይ ብቻ መጠቀም መቻል እንዳለቦት እናምናለን። ሁሉም ይፋዊ ኤፒአይዎች ነጠላ፣ በሰንሰለት ሊታለፉ የሚችሉ ዘዴዎች ናቸው፣ እና የተግባርን ስብስብ ይመለሳሉ።

$ ( ".btn.danger" ). አዝራር ( "መቀያየር" ). addClass ( "ወፍራም" )

ሁሉም ዘዴዎች የአማራጭ አማራጮች ነገርን፣ አንድን የተወሰነ ዘዴ የሚያነጣጥር ሕብረቁምፊ ወይም ምንም (ነባሪ ባህሪ ያለው ተሰኪን የሚያስጀምር) መቀበል አለባቸው።

$ ( "#myModal" ). ሞዳል () // ከነባሪዎች ጋር የተጀመረ                       
$ ( "#myModal" ). ሞዳል ( { ቁልፍ ሰሌዳ ፡ ሐሰት }) // ያለ ኪቦርድ የተጀመረ     
$ ( "#myModal" ). ሞዳል ( 'ሾው' ) // ይጀምራል እና ይጣራል ወዲያውኑ ይታያል                

እያንዳንዱ ፕለጊን ጥሬ ገንቢውን በ`ኮንስትራክተር` ንብረት ላይ ያጋልጣል $.fn.popover.Constructor፡. አንድ የተወሰነ ፕለጊን ለምሳሌ ማግኘት ከፈለጉ፣ በቀጥታ ከአንድ አካል ያውጡት $('[rel=popover]').data('popover')፡.

ግጭት የለም።

አንዳንድ ጊዜ የ Bootstrap ፕለጊኖችን ከሌሎች የUI ማዕቀፎች ጋር መጠቀም አስፈላጊ ነው። በነዚህ ሁኔታዎች፣ የስም ቦታ ግጭቶች አልፎ አልፎ ሊከሰቱ ይችላሉ። ይህ ከተከሰተ .noConflictእሴቱን ለመመለስ የሚፈልጉትን ፕለጊን መደወል ይችላሉ።

var bootstrapButton = $ . ኤፍ.ኤን. _ አዝራር . noConflict () // $.fn.button ቀድሞ ወደተመደበው እሴት ይመልሱ 
$ _ ኤፍ.ኤን. _ bootstrapBtn = bootstrapButton             // ስጡ $() .bootstrapBtn የቡት ስታፕ ተግባራዊነት

ክስተቶች

Bootstrap ለአብዛኛዎቹ ተሰኪ ልዩ ድርጊቶች ብጁ ክስተቶችን ያቀርባል። በጥቅሉ፣ እነዚህ ፍጻሜ የለሽ እና ያለፈ ተካፋይ መልክ ይመጣሉ - ፍጻሜው (ለምሳሌ show) በክስተቱ መጀመሪያ ላይ የሚቀሰቀስበት እና ያለፈው አካል ቅርፅ (ለምሳሌ shown) ድርጊት ሲጠናቀቅ ቀስቅሴ ይሆናል።

ሁሉም ማለቂያ የሌላቸው ክስተቶች የመከላከያ ነባሪ ተግባራትን ያቀርባሉ። ይህ እርምጃ ከመጀመሩ በፊት አፈፃፀምን የማቆም ችሎታ ይሰጣል።

$ ( '#myModal' )። በርቷል ( 'ትዕይንት' ፣ ተግባር ( ሠ ) {   
    ከሆነ (! ዳታ ) ከተመለሰ ሠ . መከላከል ነባሪ () // ሞዳል እንዳይታይ ያቆማል   
})

ስለ ሽግግሮች

ለቀላል የሽግግር ውጤቶች፣ bootstrap-transition.jsን አንድ ጊዜ ከሌሎች JS ፋይሎች ጋር ያካትቱ። የተቀናበረውን (ወይም የተቀነሰ) bootstrap.js እየተጠቀሙ ከሆነ ፣ ይህንን ማካተት አያስፈልግም—ቀድሞውኑ አለ።

ጉዳዮችን ተጠቀም

የሽግግሩ ተሰኪ ጥቂት ምሳሌዎች፡-

• በሞዳል ውስጥ መንሸራተት ወይም መጥፋት
• ትሮችን እየደበዘዘ
• ማንቂያዎችን በማደብዘዝ ላይ
• ተንሸራታች የካሮሴል ፓነሎች

ምሳሌዎች

ሞዳሎች የተስተካከሉ፣ ግን ተለዋዋጭ፣ የመገናኛ ጥያቄዎች በትንሹ የሚፈለገው ተግባር እና ብልጥ ነባሪዎች ናቸው።

የማይንቀሳቀስ ምሳሌ

በግርጌው ውስጥ የራስጌ፣ አካል እና የእርምጃዎች ስብስብ ያለው የተሰራ ሞዳል።

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "ዝጋ" data-dismiss = "modal" aria-hidden = "እውነት" > × </button>    
    <h3> የሞዳል ራስጌ </h3>
  </div>
  <div class = "modal-body" > 
    <p> አንድ ጥሩ አካል… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > ዝጋ </a>  
    <a href = "#" class = "btn btn-primary" > ለውጦችን አስቀምጥ </a>  
  </div>
</div>

የቀጥታ ማሳያ

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

<!-- ሞዳልን ለመቀስቀስ ቁልፍ -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > የማሳያ ሞዳልን አስጀምር </a>    
 
<!-- ሞዳል -->
<div id = "myModal" class = "modal hide fade " tabindex = "-1" ሚና = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "እውነት" >      
  <div class = "modal-header" > 
    <button type = "button" class = "ዝጋ" data-dismiss = "modal" aria-hidden = "እውነት" > × </button>    
    <h3 id = "myModalLabel" > የሞዳል ራስጌ </h3> 
  </div>
  <div class = "modal-body" > 
    <p> አንድ ጥሩ አካል… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- dismiss = "modal " aria-hidden = "እውነት" > ዝጋ </button>   
    <button class = "btn btn-primary" > ለውጦችን አስቀምጥ </button> 
  </div>
</div>

አጠቃቀም

በውሂብ ባህሪያት በኩል

ጃቫ ስክሪፕት ሳይጽፉ ሞዳልን ያግብሩ። አንድን ወይም የተወሰነ ሞዳል ለመቀያየር ዒላማ ለማድረግ በተቆጣጣሪ data-toggle="modal"አካል ላይ እንደ አዝራር ያቀናብሩ ።data-target="#foo"href="#foo"

<button type = "button" data- toggle = "modal " data-target = "#myModal" > የማስጀመሪያ ሞዳል </button>   

በጃቫስክሪፕት በኩል

myModalከአንድ የጃቫ ስክሪፕት መስመር ጋር አንድ ሞዳል መታወቂያ ይደውሉ

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-backdrop=""።

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

ዘዴዎች

ሞዳል(አማራጮች)

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

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

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

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

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

ሞዳል('ሾው')

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

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

ሞዳል('ደብቅ')

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

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

ክስተቶች

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

$ ( '#myModal' )። በርቷል ( 'የተደበቀ' ፣ ተግባር () {   
  // የሆነ ነገር አድርግ…
})

ምሳሌዎች

ተቆልቋይ ሜኑዎችን በዚህ ቀላል ተሰኪ ወደ ማንኛውም ነገር ያክሉ፣ ናቭባር፣ ታብ እና እንክብሎችን ጨምሮ።

በናቭባር ውስጥ

በትሮች ውስጥ

አጠቃቀም

በውሂብ ባህሪያት በኩል

data-toggle="dropdown"ተቆልቋይ ለመቀየር ወደ አገናኝ ወይም አዝራር ያክሉ ።

<div class = "ተቆልቋይ" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > የማውረድ ቀስቅሴ </a>   
  <ul class = "ተቆልቋይ-ሜኑ" ሚና = "ምናሌ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

ዩአርኤሎችን እንደተበላሹ ለማቆየት ከ data-targetይልቅ ባህሪውን ይጠቀሙ href="#"።

<div class = "ተቆልቋይ" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "ተቆልቋይ" data-target = "#" href = "/page.html" >      
    ዝቅ በል
    <b class = "እንክብካቤ" ></b> 
  </a>
  <ul class = "ተቆልቋይ-ሜኑ" ሚና = "ምናሌ" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

በጃቫስክሪፕት በኩል

ተቆልቋዮቹን በጃቫስክሪፕት ይደውሉ፡-

$ ( '. dropdown-toggle' ). መውረድ ()

አማራጮች

ምንም

ዘዴዎች

$() ተቆልቋይ('መቀያየር')

ለተወሰነ የአሳሽ አሞሌ ወይም የትር ዳሰሳ ምናሌዎችን ለመቀያየር ፕሮግራማዊ ኤፒአይ።

ምሳሌ በ navbar ውስጥ

የ ScrollSpy ፕለጊን በማሸብለል አቀማመጥ ላይ በመመስረት የናቪ ኢላማዎችን በራስ-ሰር ለማዘመን ነው። ከአሳሹ በታች ያለውን ቦታ ያሸብልሉ እና የነቃ ክፍል ለውጥ ይመልከቱ። የተቆልቋዩ ንዑስ ንጥሎችም ይደምቃሉ።

አጠቃቀም

በውሂብ ባህሪያት በኩል

በቀላሉ የማሸብለል ባህሪን ወደ የላይኛው አሞሌ አሰሳ ለመጨመር በቀላሉ ሊሰልሉበት ወደሚፈልጉት data-spy="scroll"ኤለመንት ያክሉ (በተለምዶ ይህ አካል ነው) እና data-target=".navbar"የትኛውን ናቭ እንደሚጠቀሙ ይምረጡ። ከክፍለ አካል ጋር scrollspy መጠቀም ይፈልጋሉ .nav።

<body data-spy = "scroll" data-target = ".navbar" > ... </ body>  

በጃቫስክሪፕት በኩል

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

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

ዘዴዎች

.scrollspy('አድስ')

ከ DOM አባሎችን ከመጨመር ወይም ከማስወገድ ጋር በማጣመር scrollspy ን ሲጠቀሙ የማደስ ዘዴውን እንደሚከተለው መደወል ያስፈልግዎታል፡-

$ ( '[data-spy="scroll" ). እያንዳንዱ ( ተግባር () {  
  var $ spy = $ ( ይህ ). scrollspy ( 'አድስ' )
});

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset=""።

ክስተቶች

ምሳሌ ትሮች

በአካባቢያዊ ይዘት ክፍሎች ውስጥ ለመሸጋገር ፈጣን፣ ተለዋዋጭ የትር ተግባርን ያክሉ፣ በተቆልቋይ ምናሌዎችም ቢሆን።

አጠቃቀም

በጃቫስክሪፕት በኩል ሊታዩ የሚችሉ ትሮችን ያንቁ (እያንዳንዱ ትር በተናጥል መንቃት አለበት)

$ ( '#myTab a' )። ጠቅ ያድርጉ ( ተግባር ( ሠ ) {  
  ሠ . መከላከል ነባሪ ();
  $ ( ይህ ). ትር ( 'አሳይ' );
})

ነጠላ ትሮችን በተለያዩ መንገዶች ማግበር ይችላሉ፡-

$ ( '#myTab a[href="#profile"] )። ትር ( 'አሳይ' ); // ትርን በስም ይምረጡ 
$ ( '#myTab a: first' )። ትር ( 'አሳይ' ); // የመጀመሪያውን ትር ይምረጡ 
$ ( '#myTab a: last' )። ትር ( 'አሳይ' ); // የመጨረሻውን ትር ይምረጡ 
$ ( '#myTab li:eq(2) a' )። ትር ( 'አሳይ' ); // ሶስተኛውን ትር ምረጥ (0-ኢንዴክስ የተደረገ) 

ምልክት ማድረጊያ

data-toggle="tab"በቀላሉ በመግለጽ ወይም በኤለመንቱ ላይ ማንኛውንም ጃቫ ስክሪፕት ሳይጽፉ የትር ወይም የፒኒን ዳሰሳ ማግበር ይችላሉ data-toggle="pill"። navክፍሎቹን እና nav-tabsክፍሎቹን ወደ ትሩ ማከል የ ulBootstrap ትር ቅጥን ይተገበራል።

<ul class = "nav nav-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 = "#settings" data-toggle = "tab" > መቼቶች </a></li>  
</ul>

ዘዴዎች

$() ትር

የትር አባል እና የይዘት መያዣን ያነቃል። ትር በ DOM ውስጥ የእቃ መያዣ መስቀለኛ መንገድ data-targetወይም ኢላማ ማድረግ አለበት።href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "ንቁ" ><a href = "#ቤት" > ቤት </a></li>  
  <li><a href = "#መገለጫ" > መገለጫ </a></li> 
  <li><a href = "#መልእክቶች" > መልእክቶች </a></li> 
  <li><a href = "#ቅንጅቶች" > መቼቶች </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "ቤት" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "መልእክቶች" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<ስክሪፕት>
  $ ( ተግባር () {  
    $ ( '#myTab a: last' )። ትር ( 'አሳይ' );
  })
</script>

ክስተቶች

$ ( 'a[data-toggle="tab"]' )። በርቷል ( 'የሚታየው' ፣ ተግባር ( ሠ ) {   
  ሠ . ዒላማ // የነቃ ትር
  ሠ . ተዛማጅ ዒላማ // ያለፈው ትር
})

ምሳሌዎች

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

በአፈጻጸም ምክንያቶች፣የመሳሪያው ጫፍ እና ብቅ-ባይ ዳታ-ኤፒስ መርጠው ገብተዋል፣ይህ ማለት እርስዎ እራስዎ ማስጀመር አለብዎት ።

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

አራት አቅጣጫዎች

በግቤት ቡድኖች ውስጥ የመሳሪያ ምክሮች

containerበBootstrap ግቤት ቡድኖች አማካኝነት የመሳሪያ ምክሮችን እና ብቅ-ባይዎችን ሲጠቀሙ ያልተፈለጉ የጎንዮሽ ጉዳቶችን ለማስወገድ (ከዚህ በታች በሰነድ የተቀመጡ) አማራጮችን ማዘጋጀት አለብዎት ።

አጠቃቀም

በጃቫስክሪፕት በኩል የመሳሪያውን ጥቆማ ያስነሱ፡

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-animation=""።

ምልክት ማድረጊያ

<a href = "#" data-toggle = "tooltip" title = "የመጀመሪያው መሣሪያ ቲፕ" > በእኔ ላይ አንዣብብ </a>   

ዘዴዎች

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

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

.tooltip('ሾው')

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

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

.tooltip('ደብቅ')

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

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

.tooltip('መቀያየር')

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

$ ( '# አካል' ) የመሳሪያ ጫፍ ( "መቀያየር" )

.tooltip('አጠፋ')

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

$ ( '# አካል' ) የመሳሪያ ጫፍ ( "ማጥፋት" )

ምሳሌዎች

ለሁለተኛ ደረጃ መረጃ ለማንኛውም ኤለመንት በ iPad ላይ እንዳሉት ትናንሽ ተደራቢዎችን ያክሉ። ብቅ-ባይን ለመቀስቀስ በአዝራሩ ላይ ያንዣብቡ። ለመካተት የመሳሪያ ምክሮችን ይፈልጋል ።

የማይንቀሳቀስ ፖፖቨር

አራት አማራጮች አሉ፡ ከላይ፣ በቀኝ፣ ከታች እና በግራ የተሰለፉ።

ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብቅ ብሏል data.

የቀጥታ ማሳያ

አራት አቅጣጫዎች

አጠቃቀም

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

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-animation=""።

ምልክት ማድረጊያ

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

ዘዴዎች

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

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

.popover('ትዕይንት')

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

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

.popover('ደብቅ')

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

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

.popover('መቀያየር')

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

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

.popover('አጠፋ')

የአንድን ንጥረ ነገር ብቅ-ባይ ይደብቃል እና ያጠፋል።

$ ( '# አካል' ) ብቅ- ባይ ( "ማጥፋት" )

ምሳሌ ማንቂያዎች

በዚህ ተሰኪ ለሁሉም የማንቂያ መልእክቶች የስንብት ተግባርን ያክሉ።

አጠቃቀም

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

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

ምልክት ማድረጊያ

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

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

ዘዴዎች

$() ማንቂያ()

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

ማንቂያ ('ዝግ')

ማንቂያ ይዘጋል።

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

ክስተቶች

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

$ ( '#የእኔ-ማስጠንቀቂያ' )። ማሰር ( 'ዝግ' ፣ ተግባር () {   
  // የሆነ ነገር አድርግ…
})

ምሳሌ አጠቃቀሞች

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

ግዛት ያለው

data-loading-text="Loading..."በአንድ አዝራር ላይ የመጫኛ ሁኔታን ለመጠቀም ያክሉ ።

<button type = "button" class = "btn btn-primary" data-loading-text = "በመጫን ላይ..." > የመጫኛ ሁኔታ </button>   

ነጠላ መቀያየር

data-toggle="button"በአንድ አዝራር ላይ መቀያየርን ለማግበር ያክሉ ።

<button type = "button" class = "btn btn-primary" data-toggle = "button" > ነጠላ መቀያየር </button>   

አመልካች ሳጥን

data-toggle="buttons-checkbox"በbtn-ቡድን ላይ የአመልካች ሳጥን ቅጥ መቀያየርን ያክሉ ።

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > ግራ </button>  
  <button type = "button" class = "btn btn-primary" > መካከለኛ </button>  
  <button type = "button" class = "btn btn-primary" > ቀኝ </button>  
</div>

ሬዲዮ

data-toggle="buttons-radio"በbtn-ቡድን ላይ ለሬዲዮ ቅጥ መቀያየርን ያክሉ ።

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > ግራ </button>  
  <button type = "button" class = "btn btn-primary" > መካከለኛ </button>  
  <button type = "button" class = "btn btn-primary" > ቀኝ </button>  
</div>

አጠቃቀም

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

$ ( '.nav-tabs' )። አዝራር ()

ምልክት ማድረጊያ

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

አማራጮች

ምንም

ዘዴዎች

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

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

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

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

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

<button type = "button" class = "btn" data-loading-text = "ነገሮችን በመጫን ላይ..." > ... </button>    

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

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

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

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

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

ስለ

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

* የ Transitions plugin እንዲካተት ይፈልጋል።

ምሳሌ አኮርዲዮን

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

<div class = "አኮርዲዮን" id = "አኮርዲዮን2" >  
  <div class = "አኮርዲዮን-ግሩፕ" > 
    <div class = "አኮርዲዮን-ርዕስ" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        ሊሰበሰብ የሚችል ቡድን ንጥል #1
      </a>
    </div>
    <div id = "collapseOne" class = "አኮርዲዮን-አካል መውደቅ በ" >  
      <div class = "አኮርዲዮን-ውስጥ" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "አኮርዲዮን-ግሩፕ" > 
    <div class = "አኮርዲዮን-ርዕስ" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        ሊሰበሰብ የሚችል ቡድን ቁጥር 2
      </a>
    </div>
    <div id = "collapseTwo" class = "አኮርዲዮን-አካል ውድቀት" >  
      <div class = "አኮርዲዮን-ውስጥ" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

እንዲሁም ፕለጊኑን ያለ አኮርዲዮን ማርክ መጠቀም ይችላሉ። የሌላ ኤለመንት መስፋፋት እና መሰባበር ቀያይር ያድርጉ።

<button type = "button" class = "btn btn- danger" data -toggle = "collapse" data-target = "#demo" >    
  ቀላል ሊሰበሰብ የሚችል
</button>
 
<div id = "demo" class = "ሰብስብ" > … </div>  

አጠቃቀም

በውሂብ ባህሪያት በኩል

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

አኮርዲዮን የመሰለ የቡድን አስተዳደርን ወደ ሊሰበሰብ የሚችል ቁጥጥር ለመጨመር የውሂብ ባህሪውን ያክሉ data-parent="#selector"። ይህንን በተግባር ለማየት ማሳያውን ይመልከቱ።

በጃቫስክሪፕት በኩል

በእጅ አንቃ በ፦

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-parent=""።

ዘዴዎች

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

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

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

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

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

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

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

ሰብስብ('ደብቅ')

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

ክስተቶች

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

$ ( '#My Collapsible' )። በርቷል ( 'የተደበቀ' ፣ ተግባር () {   
  // የሆነ ነገር አድርግ…
})

ምሳሌ carousel

ከታች ያለው የስላይድ ትዕይንት እንደ ካሮዝል ባሉ ንጥረ ነገሮች ብስክሌት ለመንዳት አጠቃላይ ተሰኪ እና አካልን ያሳያል።

የመጀመሪያ ድንክዬ መለያ

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

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" ክፍል = "የካሮሴል ስላይድ" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- የካሮሴል እቃዎች -->
  <div class = "carousel-inner" > 
    <div class = "ንቁ ንጥል" > … </div> 
    <div class = "ንጥል" > … </div> 
    <div class = "ንጥል" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "ቀጣይ" > & rsaquo; </a>   
</div>

አጠቃቀም

በውሂብ ባህሪያት በኩል

የካርሴሉን አቀማመጥ በቀላሉ ለመቆጣጠር የውሂብ ባህሪያትን ይጠቀሙ. data-slideቁልፍ ቃላቶችን ይቀበላል prevወይም next, ይህም የስላይድ አቀማመጥ አሁን ካለው አቀማመጥ አንጻር ይለውጣል. በአማራጭ፣ data-slide-toጥሬ ስላይድ መረጃ ጠቋሚን ወደ ካሮሴል ለማለፍ ይጠቀሙ data-slide-to="2"፣ ይህም የስላይድ ቦታውን ወደ አንድ የተወሰነ መረጃ ጠቋሚ የሚጀምረው በ 0.

በጃቫስክሪፕት በኩል

ካሮሴልን በእጅ ይደውሉ፡-

$ ( '. carousel' ). ካሩሰል ()

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም JavaScriptz በኩል ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-interval=""።

ዘዴዎች

.ካሮሴል(አማራጮች)

ካሮሴልን በአማራጭ አማራጮች ያስጀምረው objectእና በንጥሎች ውስጥ ብስክሌት መንዳት ይጀምራል።

$ ( '. carousel' ). ካሩሰል ({
  ክፍተት : 2000 
})

.carousel('ዑደት')

ከግራ ወደ ቀኝ በካሮሴል እቃዎች ውስጥ ዑደቶች.

.carousel('አፍታ አቁም')

ካሮሴል በንጥሎች ውስጥ በብስክሌት ከመሽከርከር ያቆመዋል።

.ካሮሴል(ቁጥር)

ካሮሴሉን ወደ አንድ የተወሰነ ፍሬም (0 ላይ የተመሰረተ፣ ከድርድር ጋር ተመሳሳይ) ያዞራል።

.ካሮሴል('ቀደም')

ወደ ቀዳሚው ንጥል ዑደቶች።

.carousel('ቀጣይ')

ወደ ቀጣዩ ንጥል ዑደቶች።

ክስተቶች

የ Bootstrap's carousel ክፍል ወደ carousel ተግባር ለመያያዝ ሁለት ክስተቶችን ያጋልጣል።

ለምሳሌ

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

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

autocomplete="off"ነባሪ የአሳሽ ሜኑዎች በBootstrap typeahead ተቆልቋይ ላይ እንዳይታዩ ለመከላከል ማዋቀር ትፈልጋለህ።

አጠቃቀም

በውሂብ ባህሪያት በኩል

ከላይ በምሳሌው ላይ እንደሚታየው የጽሕፈት መኪና ተግባር ያለው አካል ለመመዝገብ የውሂብ ባህሪያትን ያክሉ።

በጃቫስክሪፕት በኩል

የጽሕፈት መኪናውን በእጅ ይደውሉ፡-

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

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-source=""።

ዘዴዎች

የጽሕፈት መኪና (አማራጮች)

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

ለምሳሌ

በግራ በኩል ያለው ንዑስ ዳሰሳ የአባሪ ተሰኪ የቀጥታ ማሳያ ነው።

አጠቃቀም

በውሂብ ባህሪያት በኩል

በማንኛውም አካል ላይ በቀላሉ የመለጠፊያ ባህሪን ለመጨመር በቀላሉ ሊሰልሉት data-spy="affix"ወደሚፈልጉት አካል ያክሉ። ከዚያም የአንድን ንጥረ ነገር መሰካት መቼ እንደሚያበራ እና እንደሚያጠፋ ለመለየት ማካካሻዎችን ይጠቀሙ።

<div data-spy =  "affix" data-offset-top = "200" > ... </div> 

በጃቫስክሪፕት በኩል

በጃቫ ስክሪፕት ወደ አባሪ ፕለጊን ይደውሉ፡-

$ ( '#navbar' )። መለጠፍ ()

አማራጮች

አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset-top="200"።