മോഡലുകളെ കുറിച്ച്

ആവശ്യമായ ഏറ്റവും കുറഞ്ഞ പ്രവർത്തനക്ഷമതയും സ്‌മാർട്ട് ഡിഫോൾട്ടുകളും മാത്രമുള്ള ഒരു സ്ട്രീംലൈൻ ചെയ്‌തതും എന്നാൽ വഴക്കമുള്ളതുമായ പരമ്പരാഗത ജാവാസ്ക്രിപ്റ്റ് മോഡൽ പ്ലഗിൻ എടുക്കുക.

സ്റ്റാറ്റിക് ഉദാഹരണം

സ്റ്റാറ്റിക്കലി റെൻഡർ ചെയ്‌ത ഒരു മോഡൽ ചുവടെയുണ്ട്.

ലൈവ് ഡെമോ

താഴെയുള്ള ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് javascript വഴി ഒരു മോഡൽ ടോഗിൾ ചെയ്യുക. അത് താഴേക്ക് സ്ലൈഡ് ചെയ്യുകയും പേജിന്റെ മുകളിൽ നിന്ന് മങ്ങുകയും ചെയ്യും.

ബൂട്ട്സ്ട്രാപ്പ് മോഡൽ ഉപയോഗിക്കുന്നു

javascript വഴി മോഡൽ വിളിക്കുക:

$ ( '#myModal' ). മോഡൽ ( ഓപ്ഷനുകൾ )

ഓപ്ഷനുകൾ

മാർക്ക്അപ്പ്

ജാവാസ്ക്രിപ്റ്റിന്റെ ഒരു വരി പോലും എഴുതാതെ തന്നെ നിങ്ങൾക്ക് എളുപ്പത്തിൽ നിങ്ങളുടെ പേജിൽ മോഡലുകൾ സജീവമാക്കാം. ഒരു മോഡൽ എലമെന്റ് ഐഡിയുമായി പൊരുത്തപ്പെടുന്നതോ ആയതോ ആയ data-toggle="modal"കൺട്രോളർ എലമെന്റിൽ സജ്ജീകരിക്കുക , ക്ലിക്ക് ചെയ്യുമ്പോൾ അത് നിങ്ങളുടെ മോഡൽ ലോഞ്ച് ചെയ്യും.data-target="#foo"href="#foo"

കൂടാതെ, നിങ്ങളുടെ മോഡൽ ഉദാഹരണത്തിലേക്ക് ഓപ്‌ഷനുകൾ ചേർക്കുന്നതിന്, നിയന്ത്രണ ഘടകത്തിലോ മോഡൽ മാർക്ക്അപ്പിലോ ഉള്ള അധിക ഡാറ്റ ആട്രിബ്യൂട്ടുകളായി അവയെ ഉൾപ്പെടുത്തുക.

<a class = "btn" data-toggle = "modal" href = "#myModal" > മോഡൽ സമാരംഭിക്കുക </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> മോഡൽ ഹെഡർ </h3>
  </div>
  <div class = "modal-body" > 
    <p> ഒരു നല്ല ശരീരം... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > അടയ്ക്കുക </a>   
    <a href = "#" class = "btn btn-primary" > മാറ്റങ്ങൾ സംരക്ഷിക്കുക </a>  
  </div>
</div>

രീതികൾ

.modal(ഓപ്ഷനുകൾ)

നിങ്ങളുടെ ഉള്ളടക്കം ഒരു മോഡൽ ആയി സജീവമാക്കുന്നു. ഒരു ഓപ്ഷണൽ ഓപ്ഷനുകൾ സ്വീകരിക്കുന്നു object.

$ ( '#myModal' ). മോഡൽ ({
  കീബോർഡ് : തെറ്റ് 
})

.modal('ടോഗിൾ')

ഒരു മോഡൽ സ്വമേധയാ ടോഗിൾ ചെയ്യുന്നു.

$ ( '#myModal' ). മോഡൽ ( 'ടോഗിൾ' )

.modal('ഷോ')

സ്വമേധയാ ഒരു മോഡൽ തുറക്കുന്നു.

$ ( '#myModal' ). മോഡൽ ( 'ഷോ' )

.modal('മറയ്ക്കുക')

ഒരു മോഡൽ സ്വമേധയാ മറയ്ക്കുന്നു.

$ ( '#myModal' ). മോഡൽ ( 'മറയ്ക്കുക' )

ഇവന്റുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മോഡൽ ക്ലാസ് മോഡൽ പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി കുറച്ച് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

$ ( '#myModal' ). ഓൺ ( 'മറഞ്ഞിരിക്കുന്നു' , പ്രവർത്തനം () {   
  // എന്തെങ്കിലും ചെയ്യൂ…
})

ഡ്രോപ്പ്ഡൗണുകളെ കുറിച്ച്

ഈ ലളിതമായ പ്ലഗിൻ ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പിലെ മിക്കവാറും എല്ലാത്തിനും ഡ്രോപ്പ്‌ഡൗൺ മെനുകൾ ചേർക്കുക. navbar, tabs, pills എന്നിവയിൽ പൂർണ്ണമായ ഡ്രോപ്പ്ഡൗൺ മെനു പിന്തുണ ബൂട്ട്സ്ട്രാപ്പ് ഫീച്ചർ ചെയ്യുന്നു.

ഉദാഹരണങ്ങൾ

ഡ്രോപ്പ്‌ഡൗണുകൾ പരിശോധിക്കുന്നതിന് താഴെയുള്ള navbar-ലെ ഡ്രോപ്പ്‌ഡൗൺ nav ലിങ്കുകളിലും ഗുളികകളിലും ക്ലിക്ക് ചെയ്യുക.

• പതിവ് ലിങ്ക്
• ഡ്രോപ്പ് ഡൗൺ
  • Action
  • Another action
  • Something else here
  • Separated link
• ഡ്രോപ്പ്ഡൗൺ 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ഡ്രോപ്പ്ഡൗൺ 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി ഡ്രോപ്പ്ഡൌണുകൾ വിളിക്കുക:

$ ( '.dropdown-toggle' ). ഡ്രോപ്പ്ഡൗൺ ()

മാർക്ക്അപ്പ്

ഏതെങ്കിലും ഘടകത്തിലേക്ക് ഡ്രോപ്പ്ഡൗൺ പ്രവർത്തനം വേഗത്തിൽ ചേർക്കുന്നതിന് ചേർക്കുക data-toggle="dropdown", ഏതെങ്കിലും സാധുവായ ബൂട്ട്സ്ട്രാപ്പ് ഡ്രോപ്പ്ഡൗൺ സ്വയമേവ സജീവമാകും.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > റെഗുലർ ലിങ്ക് </a></li>  
  <li ക്ലാസ് = "ഡ്രോപ്പ്ഡൗൺ" ഐഡി = "മെനു1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      ഡ്രോപ്പ് ഡൗൺ
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > പ്രവർത്തനം </a></li> 
      <li><a href = "#" > മറ്റൊരു പ്രവർത്തനം </a></li> 
      <li><a href = "#" > മറ്റെന്തെങ്കിലും ഇവിടെയുണ്ട് </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > വേർതിരിച്ച ലിങ്ക് </a></li> 
    </ul>
  </li>
  ...
</ul>

URL-കൾ കേടുകൂടാതെ സൂക്ഷിക്കാൻ, data-targetപകരം ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക href="#".

<ul class = "nav nav-pills" > 
  <li class = "ഡ്രോപ്പ്ഡൗൺ" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      ഡ്രോപ്പ് ഡൗൺ
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

രീതികൾ

$().ഡ്രോപ്പ്ഡൗൺ()

തന്നിരിക്കുന്ന navbar അല്ലെങ്കിൽ ടാബ് ചെയ്‌ത നാവിഗേഷനായി മെനുകൾ സജീവമാക്കുന്നതിനുള്ള ഒരു പ്രോഗ്രാമാറ്റിക് API.

സ്ക്രോൾ പൊസിഷൻ അടിസ്ഥാനമാക്കി നാവിക് ടാർഗെറ്റുകൾ സ്വയമേവ അപ്ഡേറ്റ് ചെയ്യുന്നതിനുള്ളതാണ് ScrollSpy പ്ലഗിൻ.

സ്ക്രോൾസ്പൈ ഉള്ള ഉദാഹരണം navbar

താഴെയുള്ള പ്രദേശം സ്ക്രോൾ ചെയ്‌ത് നാവിഗേഷൻ അപ്‌ഡേറ്റ് കാണുക. ഡ്രോപ്പ്ഡൗൺ സബ് ഇനങ്ങളും ഹൈലൈറ്റ് ചെയ്യും. ശ്രമിക്കുക!

bootstrap-scrollspy.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി സ്ക്രോൾസ്പിയെ വിളിക്കുക:

$ ( '#navbar' ). സ്ക്രോൾസ്പി ()

മാർക്ക്അപ്പ്

നിങ്ങളുടെ ടോപ്പ്‌ബാർ നാവിഗേഷനിലേക്ക് സ്‌ക്രോൾസ്‌പൈ സ്വഭാവം എളുപ്പത്തിൽ ചേർക്കുന്നതിന്, data-spy="scroll"നിങ്ങൾ ചാരപ്പണി ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഘടകത്തിലേക്ക് ചേർക്കുക (സാധാരണയായി ഇത് ബോഡി ആയിരിക്കും).

<body data-spy = "സ്ക്രോൾ" > ... </body>  

രീതികൾ

.scrollspy('പുതുക്കുക')

DOM-ൽ നിന്ന് ഘടകങ്ങൾ ചേർക്കുന്നതിനോ നീക്കം ചെയ്യുന്നതിനോ ചേർന്ന് സ്ക്രോൾസ്പൈ ഉപയോഗിക്കുമ്പോൾ, നിങ്ങൾ ഇതുപോലെ പുതുക്കൽ രീതി വിളിക്കേണ്ടതുണ്ട്:

$ ( '[data-spy="scroll"]' ). ഓരോന്നും ( പ്രവർത്തനം () {  
  var $spy = $ ( ഇത് ). സ്ക്രോൾസ്പി ( 'പുതുക്കുക' )
});

ഓപ്ഷനുകൾ

ഇവന്റുകൾ

ഈ പ്ലഗിൻ പ്രാദേശിക ഉള്ളടക്കത്തിലൂടെ പരിവർത്തനം ചെയ്യുന്നതിനായി ദ്രുതവും ചലനാത്മകവുമായ ടാബും ഗുളിക പ്രവർത്തനവും ചേർക്കുന്നു.

ഉദാഹരണ ടാബുകൾ

ഡ്രോപ്പ്ഡൗൺ മെനുകൾ വഴി പോലും മറഞ്ഞിരിക്കുന്ന പാളികൾക്കിടയിൽ ടോഗിൾ ചെയ്യാൻ താഴെയുള്ള ടാബുകളിൽ ക്ലിക്ക് ചെയ്യുക.

• വീട്
• പ്രൊഫൈൽ
• ഡ്രോപ്പ് ഡൗൺ
  • @fat
  • @mdo

bootstrap-tab.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി ടാബബിൾ ടാബുകൾ പ്രവർത്തനക്ഷമമാക്കുക (ഓരോ ടാബും വ്യക്തിഗതമായി സജീവമാക്കേണ്ടതുണ്ട്):

$ ( '#myTab a' ). ക്ലിക്ക് ( പ്രവർത്തനം ( ഇ ) {  
  ഇ . പ്രിവൻഡ് ഡിഫോൾട്ട് ();
  $ ( ഇത് ). ടാബ് ( 'കാണിക്കുക' );
})

നിങ്ങൾക്ക് വ്യക്തിഗത ടാബുകൾ പല തരത്തിൽ സജീവമാക്കാം:

$ ( '#myTab a[href="#profile"]' ). ടാബ് ( 'കാണിക്കുക' ); // പേര് പ്രകാരം ടാബ് തിരഞ്ഞെടുക്കുക 
$ ( '#myTab a:first' ). ടാബ് ( 'കാണിക്കുക' ); // ആദ്യ ടാബ് തിരഞ്ഞെടുക്കുക 
$ ( '#myTab a:last' ). ടാബ് ( 'കാണിക്കുക' ); // അവസാന ടാബ് തിരഞ്ഞെടുക്കുക 
$ ( '#myTab li:eq(2) a' ). ടാബ് ( 'കാണിക്കുക' ); // മൂന്നാമത്തെ ടാബ് തിരഞ്ഞെടുക്കുക (0-ഇൻഡക്‌സ് ചെയ്‌തത്) 

മാർക്ക്അപ്പ്

ലളിതമായി വ്യക്തമാക്കിയോ ഒരു ഘടകത്തിലോ ജാവാസ്ക്രിപ്റ്റ് എഴുതാതെ നിങ്ങൾക്ക് ഒരു ടാബ് അല്ലെങ്കിൽ ഗുളിക നാവിഗേഷൻ സജീവമാക്കാം data-toggle="tab". ടാബിലേക്ക് ക്ലാസുകളും ചേർക്കുന്നത് data-toggle="pill"ബൂട്ട്‌സ്‌ട്രാപ്പ് ടാബ് സ്റ്റൈലിംഗ് പ്രയോഗിക്കും.navnav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </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 = "active" ><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 = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "പ്രൊഫൈൽ" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<സ്ക്രിപ്റ്റ്>
  $ ( പ്രവർത്തനം () {  
    $ ( '#myTab a:last' ). ടാബ് ( 'കാണിക്കുക' );
  })
</script>

ഇവന്റുകൾ

$ ( 'a[data-toggle="tab"]' ). ഓൺ ( 'കാണിച്ചിരിക്കുന്നു' , ഫംഗ്‌ഷൻ ( ഇ ) {   
  ഇ . ടാർഗെറ്റ് // സജീവമാക്കിയ ടാബ്
  ഇ . ബന്ധപ്പെട്ട ടാർഗെറ്റ് // മുമ്പത്തെ ടാബ്
})

ടൂൾടിപ്പുകളെ കുറിച്ച്

ജേസൺ ഫ്രെയിം എഴുതിയ മികച്ച jQuery.tipsy പ്ലഗിൻ പ്രചോദനം; ചിത്രങ്ങളെ ആശ്രയിക്കാത്ത, ആനിമേഷനുകൾക്കായി css3, പ്രാദേശിക ശീർഷക സംഭരണത്തിനായി ഡാറ്റ-ആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിക്കുന്ന അപ്‌ഡേറ്റ് ചെയ്ത പതിപ്പാണ് ടൂൾടിപ്പുകൾ.

ടൂൾടിപ്പുകളുടെ ഉപയോഗം ഉദാഹരണം

ടൂൾടിപ്പുകൾ കാണുന്നതിന് താഴെയുള്ള ലിങ്കുകളിൽ ഹോവർ ചെയ്യുക:

bootstrap-tooltip.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി ടൂൾടിപ്പ് ട്രിഗർ ചെയ്യുക:

$ ( '#ഉദാഹരണം' ). ടൂൾടിപ്പ് ( ഓപ്ഷനുകൾ )

ഓപ്ഷനുകൾ

മാർക്ക്അപ്പ്

പ്രകടന കാരണങ്ങളാൽ, ടൂൾടിപ്പും പോപ്പോവർ ഡാറ്റ-എപിഎസും തിരഞ്ഞെടുക്കുന്നു. നിങ്ങൾക്ക് അവ ഉപയോഗിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ ഒരു സെലക്ടർ ഓപ്ഷൻ വ്യക്തമാക്കുക.

<a href = "#" rel = "tooltip" title = "ആദ്യ ടൂൾടിപ്പ്" > എന്റെ മേൽ ഹോവർ ചെയ്യുക </a>   

രീതികൾ

$().ടൂൾടിപ്പ്(ഓപ്ഷനുകൾ)

ഒരു മൂലക ശേഖരത്തിലേക്ക് ടൂൾടിപ്പ് ഹാൻഡ്‌ലർ അറ്റാച്ചുചെയ്യുന്നു.

.ടൂൾടിപ്പ്('ഷോ')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് വെളിപ്പെടുത്തുന്നു.

$ ( '#ഘടകം' ). ടൂൾടിപ്പ് ( 'കാണിക്കുക' )

.ടൂൾടിപ്പ്('മറയ്ക്കുക')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് മറയ്ക്കുന്നു.

$ ( '#ഘടകം' ). ടൂൾടിപ്പ് ( 'മറയ്ക്കുക' )

.ടൂൾടിപ്പ്('ടോഗിൾ')

ഒരു മൂലകത്തിന്റെ ടൂൾടിപ്പ് ടോഗിൾ ചെയ്യുന്നു.

$ ( '#ഘടകം' ). ടൂൾടിപ്പ് ( 'ടോഗിൾ' )

പോപോവറിനെക്കുറിച്ച്

ദ്വിതീയ വിവരങ്ങളുടെ ഭവനനിർമ്മാണത്തിനായി ഐപാഡിലുള്ളത് പോലെയുള്ള ഉള്ളടക്കത്തിന്റെ ചെറിയ ഓവർലേകൾ ചേർക്കുക.

* ടൂൾടിപ്പ് ഉൾപ്പെടുത്തേണ്ടതുണ്ട് _

ഉദാഹരണം ഹോവർ പോപ്പോവർ

പോപോവർ പ്രവർത്തനക്ഷമമാക്കാൻ ബട്ടണിൽ ഹോവർ ചെയ്യുക.

bootstrap-popover.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി പോപോവറുകൾ പ്രവർത്തനക്ഷമമാക്കുക:

$ ( '#ഉദാഹരണം' ). പോപോവർ ( ഓപ്ഷനുകൾ )

ഓപ്ഷനുകൾ

മാർക്ക്അപ്പ്

പ്രകടന കാരണങ്ങളാൽ, ടൂൾടിപ്പും പോപ്പോവർ ഡാറ്റ-എപിഎസും തിരഞ്ഞെടുക്കുന്നു. നിങ്ങൾക്ക് അവ ഉപയോഗിക്കാൻ താൽപ്പര്യമുണ്ടെങ്കിൽ ഒരു സെലക്ടർ ഓപ്ഷൻ വ്യക്തമാക്കുക.

രീതികൾ

$().popover(ഓപ്ഷനുകൾ)

ഒരു മൂലക ശേഖരണത്തിനായി പോപോവറുകൾ ആരംഭിക്കുന്നു.

.popover('ഷോ')

പോപോവർ മൂലകങ്ങൾ വെളിപ്പെടുത്തുന്നു.

$ ( '#ഘടകം' ). പോപോവർ ( 'ഷോ' )

.popover('മറയ്ക്കുക')

പോപോവർ മൂലകങ്ങൾ മറയ്ക്കുന്നു.

$ ( '#ഘടകം' ). പോപോവർ ( 'മറയ്ക്കുക' )

.popover('ടോഗിൾ')

ഒരു ഘടകങ്ങൾ പോപോവർ ടോഗിൾ ചെയ്യുന്നു.

$ ( '#ഘടകം' ). പോപോവർ ( 'ടോഗിൾ' )

അലേർട്ടുകളെ കുറിച്ച്

അലേർട്ടുകളിലേക്ക് അടുത്ത പ്രവർത്തനം ചേർക്കുന്നതിനുള്ള ഒരു ചെറിയ ക്ലാസാണ് അലേർട്ട് പ്ലഗിൻ.

ഉദാഹരണ അലേർട്ടുകൾ

അലേർട്ട് പ്ലഗിൻ സാധാരണ അലേർട്ട് സന്ദേശങ്ങളിൽ പ്രവർത്തിക്കുകയും സന്ദേശങ്ങൾ തടയുകയും ചെയ്യുന്നു.

bootstrap-alert.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി ഒരു അലേർട്ട് നിരസിക്കുന്നത് പ്രവർത്തനക്ഷമമാക്കുക:

$ ( ".അലേർട്ട്" ). മുന്നറിയിപ്പ് ()

മാർക്ക്അപ്പ്

data-dismiss="alert"ഒരു അലേർട്ട് ക്ലോസ് ഫംഗ്‌ഷണാലിറ്റി സ്വയമേവ നൽകുന്നതിന് നിങ്ങളുടെ ക്ലോസ് ബട്ടണിലേക്ക് ചേർക്കുക .

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

രീതികൾ

$().അലേർട്ട്()

അടുത്ത പ്രവർത്തനക്ഷമതയോടെ എല്ലാ അലേർട്ടുകളും പൊതിയുന്നു. അടയ്‌ക്കുമ്പോൾ നിങ്ങളുടെ അലേർട്ടുകൾ ആനിമേറ്റ് ചെയ്യപ്പെടുന്നതിന്, അവയിൽ ഇതിനകം തന്നെ .fadeക്ലാസും .inപ്രയോഗിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

.അലേർട്ട്('അടയ്ക്കുക')

ഒരു അലേർട്ട് അടയ്ക്കുന്നു.

$ ( ".അലേർട്ട്" ). മുന്നറിയിപ്പ് ( 'അടയ്ക്കുക' )

ഇവന്റുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ അലേർട്ട് ക്ലാസ് അലേർട്ട് ഫംഗ്‌ഷണലിറ്റിയിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി കുറച്ച് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

$ ( '#മൈ-അലേർട്ട്' ). ബൈൻഡ് ( 'അടച്ച' , പ്രവർത്തനം () {   
  // എന്തെങ്കിലും ചെയ്യൂ…
})

കുറിച്ച്

ബട്ടണുകൾ ഉപയോഗിച്ച് കൂടുതൽ ചെയ്യുക. ടൂൾബാറുകൾ പോലുള്ള കൂടുതൽ ഘടകങ്ങൾക്കായി നിയന്ത്രണ ബട്ടൺ പ്രസ്‌താവിക്കുക അല്ലെങ്കിൽ ബട്ടണുകളുടെ ഗ്രൂപ്പുകൾ സൃഷ്‌ടിക്കുക.

ഉദാഹരണം ഉപയോഗങ്ങൾ

സംസ്ഥാനങ്ങൾക്കും ടോഗിളുകൾക്കുമായി ബട്ടണുകളുടെ പ്ലഗിൻ ഉപയോഗിക്കുക.

bootstrap-button.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി ബട്ടണുകൾ പ്രവർത്തനക്ഷമമാക്കുക:

$ ( '.nav-tabs' ). ബട്ടൺ ()

മാർക്ക്അപ്പ്

ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ബട്ടൺ പ്ലഗിൻ അവിഭാജ്യമാണ്. വിവിധ മാർക്ക്അപ്പ് തരങ്ങൾക്കായി ചുവടെയുള്ള ഉദാഹരണ കോഡ് പരിശോധിക്കുക.

<!-- ഒരൊറ്റ ബട്ടണിൽ ടോഗിൾ ചെയ്യുന്നത് സജീവമാക്കാൻ ഡാറ്റ-ടോഗിൾ="ബട്ടൺ" ചേർക്കുക -->
<button class = "btn" data-toggle = "button" > സിംഗിൾ ടോഗിൾ </button>  
 
<!-- btn-group-ലെ ചെക്ക്‌ബോക്‌സ് ശൈലി ടോഗിൾ ചെയ്യുന്നതിനായി ഡാറ്റ-ടോഗിൾ="ബട്ടൺസ്-ചെക്ക്‌ബോക്സ്" ചേർക്കുക -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > ഇടത് </button> 
  <button class = "btn" > മിഡിൽ </button> 
  <button class = "btn" > വലത് </button> 
</div>
 
<!-- btn-group-ൽ റേഡിയോ സ്റ്റൈൽ ടോഗിൾ ചെയ്യുന്നതിനായി ഡാറ്റ-ടോഗിൾ="ബട്ടണുകൾ-റേഡിയോ" ചേർക്കുക -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > ഇടത് </button> 
  <button class = "btn" > മിഡിൽ </button> 
  <button class = "btn" > വലത് </button> 
</div>

രീതികൾ

$().ബട്ടൺ('ടോഗിൾ')

പുഷ് അവസ്ഥ ടോഗിൾ ചെയ്യുന്നു. ബട്ടണിന് അത് സജീവമാക്കിയതായി തോന്നുന്നു.

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

$().ബട്ടൺ('ലോഡിംഗ്')

ലോഡുചെയ്യുന്നതിന് ബട്ടൺ നില സജ്ജീകരിക്കുന്നു - ബട്ടൺ അപ്രാപ്തമാക്കുകയും ടെക്‌സ്‌റ്റ് ലോഡുചെയ്യുന്നതിന് ടെക്‌സ്‌റ്റ് സ്വാപ്പ് ചെയ്യുകയും ചെയ്യുന്നു. ഡാറ്റ ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ബട്ടൺ എലമെന്റിൽ ടെക്സ്റ്റ് ലോഡുചെയ്യുന്നത് നിർവചിക്കേണ്ടതാണ് data-loading-text.

<button class = "btn" data-loading-text = "ലോഡിംഗ് സ്റ്റഫ്..." > ... </button>   

$().ബട്ടൺ('റീസെറ്റ്')

ബട്ടൺ നില പുനഃസജ്ജമാക്കുന്നു - വാചകം യഥാർത്ഥ വാചകത്തിലേക്ക് മാറ്റുന്നു.

$().ബട്ടൺ(സ്ട്രിംഗ്)

ബട്ടൺ നില പുനഃസജ്ജമാക്കുന്നു - ഏതെങ്കിലും ഡാറ്റ നിർവചിച്ച ടെക്സ്റ്റ് അവസ്ഥയിലേക്ക് ടെക്സ്റ്റ് സ്വാപ്പ് ചെയ്യുന്നു.

<button class = "btn" data-complete-text = "പൂർത്തിയായി!" > ... </button>   
<സ്ക്രിപ്റ്റ്>
  $ ( '.btn' ). ബട്ടൺ ( 'പൂർണ്ണം' )
</script>

കുറിച്ച്

അക്കോഡിയനുകളും നാവിഗേഷനും പോലുള്ള പൊളിക്കാവുന്ന ഘടകങ്ങൾക്ക് അടിസ്ഥാന ശൈലികളും വഴക്കമുള്ള പിന്തുണയും നേടുക.

* സംക്രമണ പ്ലഗിൻ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്.

ഉദാഹരണം അക്രോഡിയൻ

തകർച്ച പ്ലഗിൻ ഉപയോഗിച്ച്, ഞങ്ങൾ ഒരു ലളിതമായ അക്കോഡിയൻ ശൈലിയിലുള്ള വിജറ്റ് നിർമ്മിച്ചു:

bootstrap-collapse.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി പ്രവർത്തനക്ഷമമാക്കുക:

$ ( ".തകർച്ച" ). തകരുക ()

ഓപ്ഷനുകൾ

മാർക്ക്അപ്പ്

data-toggle="collapse"ഒരു data-targetപൊളിക്കാവുന്ന ഘടകത്തിന്റെ നിയന്ത്രണം സ്വയമേവ നിയോഗിക്കുന്നതിന് എലമെന്റിലേക്ക് ചേർക്കുകയും ചേർക്കുകയും ചെയ്യുക. ആട്രിബ്യൂട്ട് ഒരു data-targetcss സെലക്‌ടറിലേക്ക് ചുരുക്കൽ പ്രയോഗിക്കാൻ സ്വീകരിക്കുന്നു. collapseപൊളിക്കാവുന്ന ഘടകത്തിലേക്ക് ക്ലാസ് ചേർക്കുന്നത് ഉറപ്പാക്കുക . ഇത് സ്ഥിരസ്ഥിതിയായി തുറക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, അധിക ക്ലാസ് ചേർക്കുക in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  ലളിതമായ collapsible
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

രീതികൾ

.collapse(ഓപ്ഷനുകൾ)

തകർക്കാവുന്ന ഘടകമായി നിങ്ങളുടെ ഉള്ളടക്കം സജീവമാക്കുന്നു. ഒരു ഓപ്ഷണൽ ഓപ്ഷനുകൾ സ്വീകരിക്കുന്നു object.

$ ( '#myCollapsible' ). തകരുക ({
  ടോഗിൾ : തെറ്റ് 
})

.collapse('ടോഗിൾ')

കാണിക്കുന്നതോ മറച്ചതോ ആയ ഒരു പൊളിക്കാവുന്ന ഘടകം ടോഗിൾ ചെയ്യുന്നു.

.collapse('ഷോ')

തകർക്കാവുന്ന ഒരു ഘടകം കാണിക്കുന്നു.

.collapse('മറയ്ക്കുക')

ഒരു പൊളിക്കാവുന്ന ഘടകം മറയ്ക്കുന്നു.

ഇവന്റുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ തകർച്ച ക്ലാസ്, തകർച്ച പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനുള്ള ചില ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

$ ( '#myCollapsible' ). ഓൺ ( 'മറഞ്ഞിരിക്കുന്നു' , പ്രവർത്തനം () {   
  // എന്തെങ്കിലും ചെയ്യൂ…
})

കുറിച്ച്

മൂലകങ്ങളിലൂടെ സൈക്ലിംഗ് ചെയ്യുന്നതിനുള്ള ഒരു പൊതു പ്ലഗിൻ. ഒരു ഉല്ലാസയാത്ര.

ഉദാഹരണം കറൗസൽ

താഴെയുള്ള സ്ലൈഡ് ഷോ കാണുക.

ആദ്യ ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.

രണ്ടാമത്തെ ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.

മൂന്നാമത്തെ ലഘുചിത്ര ലേബൽ

ക്രാസ് ജസ്റ്റോ ഒഡിയോ, ഡാപിബസ് എസി ഫെസിലിസിസ് ഇൻ, എഗെസ്റ്റാസ് എഗെറ്റ് ക്വാം. ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്. Nullam id dolor id nibh ultricies വാഹനങ്ങൾ ut id elit.

‹ ›

bootstrap-carousel.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി വിളിക്കുക:

$ ( '.carousel' ). കറൗസൽ ()

ഓപ്ഷനുകൾ

മാർക്ക്അപ്പ്

മുമ്പത്തേതും അടുത്തതുമായ നിയന്ത്രണങ്ങൾക്കായി ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു. ചുവടെയുള്ള ഉദാഹരണ മാർക്ക്അപ്പ് പരിശോധിക്കുക.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- കറൗസൽ ഇനങ്ങൾ -->
  <div class = "carousel-inner" > 
    <div class = "സജീവ ഇനം" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

രീതികൾ

.carousel(ഓപ്ഷനുകൾ)

ഒരു ഓപ്‌ഷണൽ ഓപ്‌ഷനുകൾ ഉപയോഗിച്ച് കറൗസൽ objectആരംഭിക്കുകയും ഇനങ്ങളിലൂടെ സൈക്ലിംഗ് ആരംഭിക്കുകയും ചെയ്യുന്നു.

$ ( '.carousel' ). കറൗസൽ ({
  ഇടവേള : 2000 
})

.കറൗസൽ('സൈക്കിൾ')

കറൗസൽ ഇനങ്ങളിലൂടെ ഇടത്തുനിന്ന് വലത്തോട്ട് സൈക്കിളുകൾ.

.കറൗസൽ('താൽക്കാലികമായി നിർത്തുക')

ഇനങ്ങളിലൂടെ സൈക്കിൾ ചവിട്ടുന്നതിൽ നിന്ന് കറൗസലിനെ തടയുന്നു.

.കറൗസൽ(നമ്പർ)

ഒരു പ്രത്യേക ഫ്രെയിമിലേക്ക് കറൗസൽ സൈക്കിൾ ചെയ്യുന്നു (0 അടിസ്ഥാനമാക്കി, ഒരു അറേയ്ക്ക് സമാനമാണ്).

.കറൗസൽ('മുൻ')

മുമ്പത്തെ ഇനത്തിലേക്കുള്ള സൈക്കിളുകൾ.

.carousel('അടുത്തത്')

അടുത്ത ഇനത്തിലേക്കുള്ള സൈക്കിളുകൾ.

ഇവന്റുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ കറൗസൽ ക്ലാസ് കറൗസൽ പ്രവർത്തനത്തിലേക്ക് ഹുക്ക് ചെയ്യുന്നതിനായി രണ്ട് ഇവന്റുകൾ തുറന്നുകാട്ടുന്നു.

കുറിച്ച്

ഏത് ഫോം ടെക്‌സ്‌റ്റ് ഇൻപുട്ടും ഉപയോഗിച്ച് മനോഹരമായ ടൈപ്പ്ഹെഡുകൾ വേഗത്തിൽ സൃഷ്‌ടിക്കുന്നതിനുള്ള അടിസ്ഥ���ന, എളുപ്പത്തിൽ വിപുലീകരിച്ച പ്ലഗിൻ.

ഉദാഹരണം

ടൈപ്പ്ഹെഡ് ഫലങ്ങൾ കാണിക്കാൻ താഴെയുള്ള ഫീൽഡിൽ ടൈപ്പ് ചെയ്യാൻ ആരംഭിക്കുക.

bootstrap-typeahead.js ഉപയോഗിക്കുന്നു

ജാവാസ്ക്രിപ്റ്റ് വഴി ടൈപ്പ്ഹെഡിലേക്ക് വിളിക്കുക:

$ ( '.typeahead' ). ടൈപ്പ്ഹെഡ് ()

ഓപ്ഷനുകൾ

മാർക്ക്അപ്പ്

ടൈപ്പ്ഹെഡ് പ്രവർത്തനക്ഷമതയുള്ള ഒരു ഘടകം രജിസ്റ്റർ ചെയ്യാൻ ഡാറ്റ ആട്രിബ്യൂട്ടുകൾ ചേർക്കുക.

<ഇൻപുട്ട് തരം = "ടെക്സ്റ്റ്" data-provide = "typeahead" >  

രീതികൾ

.typeahead(ഓപ്ഷനുകൾ)

ഒരു ടൈപ്പ്ഹെഡ് ഉപയോഗിച്ച് ഒരു ഇൻപുട്ട് ആരംഭിക്കുന്നു.