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

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

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

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

ലൈവ് ഡെമോ

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

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

ജാവാസ്ക്രിപ്റ്റ് വഴി മോഡൽ വിളിക്കുക:

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

ഓപ്ഷനുകൾ

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

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

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

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

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

രീതികൾ

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

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

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

.modal('ടോഗിൾ')

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

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

.modal('ഷോ')

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

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

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

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

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

സംഭവങ്ങൾ

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

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

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

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

ഉദാഹരണങ്ങൾ

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

• പതിവ് ലിങ്ക്
• ഡ്രോപ്പ് ഡൗൺ
  • ആക്ഷൻ
  • മറ്റൊരു പ്രവർത്തനം
  • ഇവിടെ മറ്റെന്തെങ്കിലും
  • വേർതിരിച്ച ലിങ്ക്
• ഡ്രോപ്പ്ഡൗൺ 2
  • ആക്ഷൻ
  • മറ്റൊരു പ്രവർത്തനം
  • ഇവിടെ മറ്റെന്തെങ്കിലും
  • വേർതിരിച്ച ലിങ്ക്
• ഡ്രോപ്പ്ഡൗൺ 3
  • ആക്ഷൻ
  • മറ്റൊരു പ്രവർത്തനം
  • ഇവിടെ മറ്റെന്തെങ്കിലും
  • വേർതിരിച്ച ലിങ്ക്

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

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

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

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

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

<ul class = "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>

രീതികൾ

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

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

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

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

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

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

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

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

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

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

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

ഓപ്ഷനുകൾ

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

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

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

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

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

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

$ ( '#myTab' ). ടാബ് ( 'കാണിക്കുക' )

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

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

<ul class = "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 = "#ettings" data-toggle = "tab" > ക്രമീകരണങ്ങൾ </a></li>  
</ul>

രീതികൾ

$().ടാബ്

ഒര��� ടാബ് ഘടകവും ഉള്ളടക്ക കണ്ടെയ്‌നറും സജീവമാക്കുന്നു. ടാബിന് ഒരു `ഡാറ്റ-ടാർഗെറ്റ്` അല്ലെങ്കിൽ ഡോമിലെ ഒരു കണ്ടെയ്‌നർ നോഡ് ടാർഗെറ്റുചെയ്യുന്ന ഒരു `href` ഉണ്ടായിരിക്കണം.

<ul class = "tabs" > 
  <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>
 
<സ്ക്രിപ്റ്റ്>
  $ ( പ്രവർത്തനം () {  
    $ ( '.tabs a:last' ). ടാബ് ( 'കാണിക്കുക' )
  })
</script>

സംഭവങ്ങൾ

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

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

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

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

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

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

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

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

ഓപ്ഷനുകൾ

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

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

രീതികൾ

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

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

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

ഒരു ഘടകങ്ങളുടെ ടൂൾടിപ്പ് വെളിപ്പെടുത്തുന്നു.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ഓപ്ഷനുകൾ

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

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

രീതികൾ

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

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

.popover('ഷോ')

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

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

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

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

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

.popover('ടോഗിൾ')

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

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

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

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

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

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

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

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

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

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

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

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

രീതികൾ

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

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

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

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

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

സംഭവങ്ങൾ

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

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

കുറിച്ച്

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

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

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

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

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

$ ( '.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>

രീതികൾ

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

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

<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 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.

‹ ›

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

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

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

ഓപ്ഷനുകൾ

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

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

<div class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    ...
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.myCarousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

Example

Start typing in the field below to show the typeahead results.

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Markup

Add data attributes to register an element with typeahead functionality.

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

Methods

.typeahead(options)

Initializes an input with a typahead.