Mimal emaw, khawlkhawm emaw a ni thei

Plugin te hi pakhat zel (a then chuan dependency mamawh nei mahse), a nih loh leh vawi khatah dah vek theih a ni. Bootstrap.js leh bootstrap.min.js te hian file pakhatah plugin zawng zawng an nei vek a.

Data attribute te hi a ni

Bootstrap plugin zawng zawng hi JavaScript line khat pawh ziak lovin markup API hmang chauhvin i hmang thei ang. Hei hi Bootstrap-a first class API a ni a, plugin i hman hunah i ngaihtuah hmasak ber tur a ni.

Chutiang a nih lai chuan, dinhmun thenkhatah chuan he functionality hi off hi duhthusam a ni thei. Chuvangin, `'data-api'` hmanga body namespaced-a event awm zawng zawng unbind-a data attribute API disable theihna kan pe bawk. Hei hi hetiang hian a lang:

$ ( 'taksa' ). off ( '.data-api' ) tih a ni.

A dang pawhin, plugin bik target tur chuan plugin hming chu namespace atan data-api namespace nen hetiang hian dah mai rawh:

$ ( 'taksa' ). off ( '.alert.data-api' ) tih a ni.

Programmatic API hmanga siam a ni

Tin, Bootstrap plugin zawng zawng hi JavaScript API hmang chauhvin i hmang thei tur a ni tih kan ring bawk. Public API zawng zawng hi single, chainable method a ni a, collection acted on chu a rawn pe kir vek a ni.

$ ( ".btn.hlauhawm" ). button ( "toggle" tih kha ). addClass ( "thau" ) a ni.

Method zawng zawng hian optional options object, method bik target tu string emaw, engmah (default behavior hmanga plugin initiate tu) emaw an pawm tur a ni:

$ ( "#kaModal" ). modal () // default hmanga initialized a ni                       
$ ( "#kaModal" ). modal ({ keyboard : false }) // keyboard awm lovin initialized a ni     
$ ( "#kaModal" ). modal ( 'show' ) // show chu a initialize a, a invoke nghal bawk                

Plugin tin hian an raw constructor chu `Constructor` property-ah an expose bawk: $.fn.popover.Constructor. Plugin instance bik i hmuh duh chuan element atanga direct-in la chhuak rawh: $('[rel=popover]').data('popover').

Inhnialna a awm lo

A chang chuan Bootstrap plugins te hi UI framework dang nen hman a ngai thin. Hetiang dinhmunah hian namespace collision a awm fo thin. Chutiang a nih chuan i .noConflictvalue revert duh plugin chu i call thei ang.

var bootstrapButton = $ 1000 a ni a, a man pawh a tlawm hle. fn a ni. button chu a rawn lang a. noConflict () // $.fn.button chu a hmaa value pek tawhah a rawn pe leh ang 
$ a ni. fn a ni. bootstrapBtn = bootstrapButton             // $().bootstrapBtn hnenah bootstrap hnathawh dan tur pe rawh

Thil thlengte

Bootstrap hian plugin-a thil tih danglam bik tam zawk atan custom event a pe a. A tlangpuiin, hengte hi infinitive leh past participle form-ah an lo thleng a - chutah chuan showthilthleng pakhat tan tirh lamah infinitive (ex. ) chu a insiam a, a past participle form (ex. shown) chu thiltih zawh hunah a trigger a ni.

Infinitive event zawng zawng hian preventDefault functionality a pe vek a. Hei hian action pakhat execution chu a tan hmaa tihtawp theihna a pe a ni.

$ ( '#kaModal' tih hi a ni). on ( ' entir' , function ( e ) { .   
    if (! data ) return e . preventDefault () // modal a lan loh tur a titawp   
}) tih a ni.

Transition chungchang

Transition effect awlsam tak tak atan chuan JS file dangte bulah bootstrap-transition.js vawi khat dah tel bawk ang che. Compiled (or minified) bootstrap.js i hman chuan hei hi dah tel a ngai lo—a awm tawh.

Case hman dan tur

Transition plugin entirnan tlemte:

• Modal-a slide emaw fading emaw a awm
• Fading out tabs te chu
• Fading out alerts a awm
• Carousel panes te chu a rawn tlan chhuak a

Entirna te

Modal te hi streamlined, mahse flexible, dialog prompts a awm a, functionality mamawh tlem ber leh smart defaults te a awm bawk.

Static entirnan

Footer-a header, body leh action set awmna rendered modal.

<div class = "modal thup fade" > 
  <div class = "modal-a thupui" > 
    <button type = "button" class = "khar" data-dismiss = "modal" aria-thup = "dik" > × </button> tih a ni    
    <h3> Modal header </h3> tih a ni
  </div> tih a ni
  <div class = "modal-taksa" > tih hi a ni 
    <p> Taksa tha tak pakhat... </p>
  </div> tih a ni
  <div class = "modal-a hnuai lam" > 
    <a href = "#" class = "btn" > khar rawh </a>  
    <a href = "#" class = "btn btn-primary" > Thil danglamte chu dahkhawm rawh </a>  
  </div> tih a ni
</div> tih a ni

Live demo a ni ang

JavaScript hmangin modal pakhat toggle la, a hnuaia button hi click la. A hnuai lam a pan ang a, page chunglam atang chuan a fade in ang.

<!-- Button hmangin modal --> a tichhuak thei
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo modal chu tlangzarh rawh </a>    
 
<!-- Modal --> tih a ni
<div id = "kaModal" class = "modal thup fade" tabindex = "-1" role = "dialog" aria-labelledby = "kaModalLabel" aria-thup = "dik" >      
  <div class = "modal-a thupui" > 
    <button type = "button" class = "khar" data-dismiss = "modal" aria-thup = "dik" > × </button>    
    <h3 id = "myModalLabel" > A chhuahna tur hmun leh a hmanna tur hmun </h3 > 
  </div> tih a ni
  <div class = "modal-taksa" > tih hi a ni 
    <p> Taksa tha tak pakhat... </p>
  </div> tih a ni
  <div class = "modal-a hnuai lam" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "dik" > Khar rawh </button>   
    <button class = "btn btn-primary" > Thil danglamte chu save rawh </button> 
  </div> tih a ni
</div> tih a ni

Hman dan tur

Data attribute hmangin a ni

JavaScript ziak lovin modal pakhat activate rawh. data-toggle="modal"Controller element, button ang chi, a data-target="#foo"or href="#foo"toggle tur modal bik target tur nen set rawh .

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modal </button> tihchhuah a ni   

JavaScript hmangin

myModalJavaScript line khata id nei modal chu ko rawh :

$ ( '#kaModal' tih hi a ni). modal ( duhthlan tur ) .

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-backdrop="".

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

Thiltih dan tur

.modal(thil thlan theih) .

I content chu modal angin a activate thin. A pawm a, optional options a awm objectbawk .

$ ( '#kaModal' tih hi a ni). modal ({ ) a ni.
  keyboard : a dik lo 
}) tih a ni.

.modal(‘toggle’) tih a ni.

Modal pakhat chu manual in a toggle thin.

$ ( '#kaModal' tih hi a ni). modal ( 'toggle' tih a ni.

.modal(' entir') tih a ni.

Manual takin modal a hawng thin.

$ ( '#kaModal' tih hi a ni). modal ( 'tihlan rawh' ) .

.modal(‘thup’) tih a ni.

Manual takin modal a thup thin.

$ ( '#kaModal' tih hi a ni). modal ( ‘thup’ ) tih a ni.

Thil thlengte

Bootstrap-a modal class hian modal functionality-a hooking-na tur event tlemte a pholang a ni.

$ ( '#kaModal' tih hi a ni). on ( 'thup' , hnathawh () { .   
  // thil engemaw ti rawh...
}) tih a ni.

Entirna te

He plugin awlsam tak hmang hian engkim deuhthaw-ah dropdown menu dah belh la, navbar, tabs, leh pills te pawh a tel.

Navbar pakhat chhungah

Tabs chhungah

Hman dan tur

Data attribute hmangin a ni

data-toggle="dropdown"Link emaw button emaw ah dah la , dropdown toggle rawh.

<div class = "a hnuai lam" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > A chhuah dawn chuan a chhuak leh ta a, a chhuah dawn chuan a chhuak leh ta a   
  A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a , a rilru a hah em em bawk a . aria- labelledby = " dLabel " >   
    ...
  </ul> tih a ni
</div> tih a ni

URL te chu a awm reng theih nan , data-targettih aiah attribute hmang la href="#".

<div class = "a hnuai lam" > 
  <a class = "a chhuah theihna tur" id = "dLabel" role = "button" data-toggle = "a chhuahna tur" data-target = "#" href = "/page.html" >      
    Dropdown a ni
    < b class = "caret" tih hi a awmzia a awm lo 
  </a> tih a ni
  A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a , a rilru a hah em em bawk a . aria- labelledby = " dLabel " >   
    ...
  </ul> tih a ni
</div> tih a ni

JavaScript hmangin

JavaScript hmangin dropdown te chu call la:

$ ( '.thlauhna-toggle' ). dropdown () a ni.

Thil thlan theih a ni

Pakhatmah

Thiltih dan tur

$().dropdown('toggle') tih a ni.

Navbar emaw tabbed navigation pek tawh pakhat tana menu toggling na tur programmatic api.

Entirnan navbar ah

ScrollSpy plugin hi scroll position a zirin nav target te automatic a update theihna tur a ni. Navbar hnuaia area chu scroll la, active class inthlak dan chu en rawh. Dropdown sub items te pawh a rawn lang ang.

Hman dan tur

Data attribute hmangin a ni

I topbar navigation-a awlsam taka scrollspy behavior dah belh data-spy="scroll"tur chuan spy duh element-ah dah mai la (a tlangpuiin hei hi body a ni ang) leh data-target=".navbar"eng nav nge hman tur tih thlang rawh. Component pakhat nen scrollspy i hmang duh ang .nav.

<taksa data-spy = "scroll" data-target = ".navbar" > ... </body> tih hi a ni  

JavaScript hmangin

JavaScript hmangin scrollspy chu ko rawh:

$ ( '#navbar' tih chu a ni). lehkhabu zial () .

Thiltih dan tur

.scrollspy(‘refresh’) tih a ni.

DOM atanga elements dah belh emaw paih emaw nena inzawma scrollspy hman hian refresh method chu hetiang hian i ko a ngai ang:

$ ( '[data-spy="scroll"]' tih a ni ang. pakhat zel ( hnathawh () { .  
  var $spy = $ ( hei hi ) a ni. scrollspy ( ‘thar thar’ ) tih a ni.
});

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-offset="".

Thil thlengte

Entirna tabs te

Local content pane hmanga transition-ah tab functionality rang tak, chak tak dah belh la, dropdown menu hmang pawhin.

Hman dan tur

JavaScript hmangin tabbable tab te chu enable rawh (tab tinte chu a hranin activate a ngai a ni):

$ ( '#kaTab a' ). click ( function ( e )) chu a rawn lang a.  
  e . venhimnaDefault ();
  $ ( hei hi ). tab ( 'entir rawh' );
}) tih a ni.

Tab hrang hrangte chu kawng hrang hrangin i activate thei ang:

$ ( '#kaTab a[href="#profile"]' ). tab ( 'entir rawh' ); // Tab hming hmangin thlang rawh 
$ ( '#kaTab a: hmasa ber' ). tab ( 'entir rawh' ); // Tab hmasa ber thlang rawh 
$ ( '#kaTab a:a hnuhnung ber' ). tab ( 'entir rawh' ); // Tab hnuhnung ber thlang rawh 
$ ( '#ka Tab li:eq(2) a' ). tab ( 'entir rawh' ); // Tab pathumna thlang rawh (0-indexed) . 

Markup a ni

JavaScript engmah ziak lovin tab emaw pill navigation emaw chu element pakhat specify data-toggle="tab"emaw on emaw mai mai hmangin i activate thei a ni. Tab-a and class te data-toggle="pill"dah chuan Bootstrap tab styling a apply ang.navnav-tabsul

<ul class = "nav-tabs" > tih hi a awmzia a awm lo 
  <li><a href = "#in" data-toggle = "tab" > A chhuahna tur hmun </a> </li>  
  <li><a href = "#profile" data-toggle = "tab" > A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a  
  <li><a href = "#thuchah" data-toggle = "tab" > Thuchah </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > A chhuahna tur hmun leh a hmanna tur hmun </a></li>  
</ul> tih a ni

Thiltih dan tur

$().tab ah hian a awm

Tab element leh content container pakhat a activate thin. Tab hian DOM ah container node targeting a data-targetemaw a nei tur a ni.href

A rilru a buai em em a, a rilru a hah em em bawk a. id = " myTab " >  
  <li class = "active" ><a href = "#in" > In leh lo </a></li>  
  <li><a href = "#profile" > A chhuahna tur hmun leh a hmanna tur hmun </a></li> 
  <li><a href = "#thuchah" > Thuchah </a></li> 
  <li><a href = "#settings" > A chhuahna tur hmun leh a hmanna tur hmun </a></li> 
</ul> tih a ni
 
<div class = "tab-a thu awmte" > 
  <div class = "tab-pane active" id = "in" > ... </div> tih a ni  
  A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "thuchah" > ... </div> tih a ni  
  <div class = "tab-pane" id = "settings" > ... </div> tih hi a ni  
</div> tih a ni
 
<script> tih a ni
  $ ( hnathawh () { .  
    $ ( '#kaTab a:a hnuhnung ber' ). tab ( 'entir rawh' );
  }) tih a ni.
</script> tih a ni

Thil thlengte

$ ( 'a[data-toggle="tab"]' tih a ni a, a hlawhtlinna chu a hlawhtlinna a ni. on ( 'a entir' , function ( e ) { .   
  e . target // tihchhuah tab a ni
  e . relatedTarget // tab hmasa ber a ni
}) tih a ni.

Entirna te

Jason Frame ziah jQuery.tipsy plugin tha tak atanga infuih thar; Tooltips hi updated version a ni a, image-ah a innghat lo va, animation atan CSS3 a hmang a, local title storage atan data-attribute a hmang bawk.

Performance avang hian tooltip leh popover data-apis te hi opt in a ni a, chu chu nangmah ngeiin i initialize tur tihna a ni .

A hnuaia link te hi hover la, tooltips i hmu ang:

Kawng pali

Input group hrang hrangah tooltips te

Bootstrap input groups nena tooltips leh popovers i hman hian containerduh loh side effects awm loh nan (a hnuaia documented) option kha i set a ngai ang.

Hman dan tur

JavaScript hmangin tooltip chu trigger la:

$ ( '#entirna' ). tooltip ( duhthlan tur ) .

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-animation="".

Markup a ni

<a href = "#" data-toggle = "hmanrua" title = "hmanrua hmasa ber" > ka chungah hover rawh </a>   

Thiltih dan tur

$().tooltip(thil thlan tur) .

Element collection pakhatah tooltip handler a attache thin.

.tooltip(' entir rawh') tih a ni.

Element pakhat tooltip a pholang.

$ ( '#element' tih chu a ni). tooltip ( 'tihlan rawh' ) .

.tooltip(‘thup’) tih a ni.

Element pakhat tooltip a thup thin.

$ ( '#element' tih chu a ni). hmanrua ( ‘thup’ ) .

.tooltip(‘toggle’) tih a ni.

Element pakhat tooltip a toggle thin.

$ ( '#element' tih chu a ni). hmanrua ( 'toggle' ) tih a ni.

.tooltip('tihchhiat') tih a ni.

Element pakhat tooltip a thup a, a tichhia bawk.

$ ( '#element' tih chu a ni). tooltip ( ‘tihchhiat’ ) .

Entirna te

Secondary information dahna tur element eng pawhah iPad-a awm ang chi content overlay te te dah belh rawh. Popover chu trigger turin button chungah hover rawh. Tooltip dah tel a ngai.

Static popover a ni

Option pali a awm a, chunglam, dinglam, hnuai lam, leh veilam aligned te an ni.

Popover anga tarlan markup engmah hi JavaScript leh dataattribute chhunga content atanga siam a ni lo.

Live demo a ni ang

Kawng pali

Hman dan tur

JavaScript hmangin popovers te chu enable rawh:

$ ( '#entirna' ). popover ( duhthlan tur ) .

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-animation="".

Markup a ni

Performance avang hian Tooltip leh Popover data-apis te hi opt in a ni a, i hman duh chuan selector option kha tarlang mai rawh.

Thiltih dan tur

$().popover(thil thlan theih) .

Element collection pakhat atan popovers a initialize thin.

.popover(' entir') tih a ni.

A elements popover a rawn pholang.

$ ( '#element' tih chu a ni). popover ( 'tihlan rawh' ) .

.popover(‘thup’) tih a ni.

A elements popover a thup a.

$ ( '#element' tih chu a ni). popover ( ‘thup’ ) tih a ni.

.popover('toggle') tih a ni.

A elements popover a tidanglam.

$ ( '#element' tih chu a ni). popover ( 'toggle' tih hi a dik lo a ni.

.popover('tihchhiat') .

Element pakhat popover chu a thup a, a tichhe bawk.

$ ( '#element' tih chu a ni). popover ( ‘tihchhiat’ ) .

Entirna alerts te

He plugin hmang hian alert message zawng zawngah dismiss functionality add vek ang che.

Hman dan tur

JavaScript hmanga alert dismissal theihna tur:

$ ( ".alert" tih a ni. hriattirna () .

Markup a ni

I close button ah khan add mai la data-dismiss="alert", automatic in alert close functionality a pe ang.

<a class = "khar" data-dismiss = "alert" href = "#" > × </a> tih a ni   

Thiltih dan tur

$().alert() a ni.

Alert zawng zawng chu close functionality nen a wrap vek. I alerts te kha khar a nih hunah animate out theih nan, an chungah the .fadeand .inclass apply tawh an neih ngei ngei tur a ni.

.alert('khar') tih a ni.

Alert a khar thin.

$ ( ".alert" tih a ni. alert ( 'khar' ) .

Thil thlengte

Bootstrap-a alert class hian alert functionality-a hook theihna tur thil thleng tlemte a pholang a ni.

$ ( '#ka-alert' ). bind ( 'khar' , function () { 1000 a ni.   
  // thil engemaw ti rawh...
}) tih a ni.

Entirna hman dan

Button hmangin tam zawk ti rawh. Control button state emaw toolbar ang chi component tam zawk tan button group siam emaw a ni.

Stateful tak a ni

data-loading-text="Loading..."Button pakhata loading state hman tur chuan add rawh .

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading mek..." > Loading dinhmun </button>   

Toggle pakhat chauh a awm

data-toggle="button"Button pakhata toggling activate turin Add rawh .

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Thil pakhat chauh a awm </button>   

Checkbox ah a awm

data-toggle="buttons-checkbox"btn-group-a checkbox style toggling tur chuan add rawh .

A rilru a buai em em a, a rilru a hah em em bawk a  
  <button type = "button" class = "btn btn-primary" > A veilam </button> a ni  
  <button type = "button" class = "btn btn-primary" > A laiah </button> a ni  
  <button type = "button" class = "btn btn-primary" > Dinglam </button> a ni a, a chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
</div> tih a ni

Radio hmangin a ti a

data-toggle="buttons-radio"btn-group-a radio style toggling tur chuan add rawh .

<div class = "btn-group" data-toggle = "buttons-radio" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
  <button type = "button" class = "btn btn-primary" > A veilam </button> a ni  
  <button type = "button" class = "btn btn-primary" > A laiah </button> a ni  
  <button type = "button" class = "btn btn-primary" > Dinglam </button> a ni a, a chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
</div> tih a ni

Hman dan tur

JavaScript hmangin button te chu enable rawh:

$ ( '.nav-tabs' tih chu a ni. button () chu a rawn lang a.

Markup a ni

Data attribute te hi button plugin ah hian a pawimawh ber a ni. Markup chi hrang hrangte chu a hnuaia entirnan code hi en la.

Thil thlan theih a ni

Pakhatmah

Thiltih dan tur

$().button('toggle') tih a ni.

Push state a tidanglam. Button chu a activate tawh angin a lang.

<button type = "button" class = "btn" data-toggle = "button" > ... </button> tih hi a awmzia a awm lo    

$().button('loading') tih a ni.

Button state chu loading ah a set - button a disable a, text chu loading text ah a swap bawk. Loading text chu button element ah data attribute hmangin define tur a ni data-loading-text.

<button type = "button" class = "btn" data-loading-text = "thil phurh chhuah..." > ... </button>    

$().button('reset') tih a ni.

Button state a reset - text chu original text ah a inthlak thin.

$().button(string) a ni.

Button state a reset - data defined text state eng pawhah text a swap thin.

<button type = "button" class = "btn" data-complete-text = "a zo tawh!" > ... </button> tih a ni    
<script> tih a ni
  $ ( '.btn' tih a ni). button ( 'tihfel' ) .
</script> tih a ni

Lam

Accordion leh navigation ang chi collapsible component hrang hrangte tan base style leh flexible support dawng rawh.

* Transitions plugin a tel tur a ni.

Entirnan accordion tih ang chi

Collapse plugin hmangin accordion style widget awlsam tak kan siam a:

<div class = "accordion" id = "accordion2" > tih hi a awmzia a awm lo  
  <div class = "accordion-pawh" > tih a ni 
    <div class = "accordion-a thupui" > 
      <a class = "accordion-toggle" data-toggle = "a tlakbuak" data-parent = "#accordion2" href = "#collapseOne" >    
        Collapsible Group Item #1. A chhuahna tur hmun leh a hmanna tur hmun
      </a> tih a ni
    </div> tih a ni
    <div id = "collapseOne" class = "accordion- taksa a tlakbuak" >  
      <div class = "accordion-a chhunga awm" > 
        Anim pariatur tih hi a dik lo a ni.
      </div> tih a ni
    </div> tih a ni
  </div> tih a ni
  <div class = "accordion-pawh" > tih a ni 
    <div class = "accordion-a thupui" > 
      <a class = "accordion-toggle" data-toggle = "a tlakbuak" data-parent = "#accordion2" href = "#collapsePahnih" >    
        Collapsible Group Item #2. A chhuahna tur hmun leh a hmanna tur hmun
      </a> tih a ni
    </div> tih a ni
    <div id = "collapseTwo" class = "accordion-taksa tlakchhiatna" >  
      <div class = "accordion-a chhunga awm" > 
        Anim pariatur tih hi a dik lo a ni.
      </div> tih a ni
    </div> tih a ni
  </div> tih a ni
</div> tih a ni
...

Accordion markup tel lovin plugin hi i hmang thei bawk. Element dang expanding leh collapsing chu button pakhat toggle turin siam rawh.

<button type = "button" class = "btn btn-hlauhawm" data-toggle = "a tlakchhiat" data-target = "#demo" >    
  simple collapsible a ni
</button> tih a ni
 
<div id = "demo" class = "a tlakbuak" > ... </div>  

Hman dan tur

Data attribute hmangin a ni

Add data-toggle="collapse"leh a data-targetto element mai chuan collapsible element control chu automatic in a assign thei ang. Attribute hian data-targetcollapse apply tur css selector a pawm a. collapseCollapsible element ah hian class chu add ngei ngei tur a ni. Default open i duh chuan additional class kha add la in.

Collapsible control-a accordion ang chi group management dah belh tur chuan data attribute data-parent="#selector". Hei hi action-a hmuh theih nan demo en rawh.

JavaScript hmangin

Manual hmangin enable theih a ni:

$ ( ".a tlakbuak" ). a tlakbuak () .

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-parent="".

Thiltih dan tur

.collapse(thil thlan tur) .

I content chu collapsible element angin a activate thin. A pawm a, optional options a awm objectbawk .

$ ( '#kaCollapsible' ). a tlakbuak ({
  toggle : dik lo 
}) tih a ni.

.collapse('toggle') tih a ni.

Collapsible element chu show emaw hidden emaw ah a toggle thin.

.collapse(' entir') tih a ni.

Collapsible element a lantir.

.collapse('thup') tih a ni.

Collapsible element a thup thei.

Thil thlengte

Bootstrap-a collapse class hian collapse functionality-a hook theihna tur event tlemte a pholang a.

$ ( '#kaCollapsible' ). on ( 'thup' , hnathawh () { .   
  // thil engemaw ti rawh...
}) tih a ni.

Entirnan carousel tih ang chi

A hnuaia slideshow hian carousel ang chi element hrang hrang cycle theihna tur generic plugin leh component a tarlang a.

Thumbnail label hmasa ber

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida chu eget metus ah a awm a. Nullam id dolor id nibh ultricies lirthei ut id elit.

Thumbnail label pahnihna

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida chu eget metus ah a awm a. Nullam id dolor id nibh ultricies lirthei ut id elit.

Thumbnail label pathumna

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida chu eget metus ah a awm a. Nullam id dolor id nibh ultricies lirthei ut id elit.

‹ tih a ni. › tih a ni.

<div id = "ka Carousel" class = "carousel slide" > tih hi a awmzia a awm lo  
  <ol class = "carousel-a chhinchhiahna te" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#ka Carousel" data-slide-to = "1" ></li> tih hi a ni  
    <li data-target = "#ka Carousel" data-slide-to = "2" ></li> tih hi a ni  
  </ol> tih a ni
  <!-- Carousel thil chi hrang hrang -->
  <div class = "carousel-a chhunga awm" > 
    <div class = "item active" > ... </div> tih a ni 
    <div class = "item" > ... </div> tih hi a ni 
    <div class = "item" > ... </div> tih hi a ni 
  </div> tih a ni
  <!-- Carousel nav --> tih a ni
  <a class = "carousel-control a awm tawh" href = "#ka Carousel" data-slide = "a hmaa" ​​> ‹ </a> tih a ni   
  <a class = "carousel-control dikna" href = "#ka Carousel" data-slide = "a dawt leh tur" > › </a> tih a ni   
</div> tih a ni

Hman dan tur

Data attribute hmangin a ni

Data attribute hmangin awlsam takin carousel awmna tur control rawh. data-slidekeywords prevor next, chu a pawm a, chu chuan slide awmna chu a awmna hmun nen khaikhin chuan a thlak danglam thin. A dang pawhin, data-slide-toraw slide index chu carousel-ah pass turin hmang la data-slide-to="2", chu chu slide awmna hmun chu index bik pakhata intan a 0ni.

JavaScript hmangin

Carousel chu manual-in call la, hetiang hian:

$ ( '.carousel' tih a ni. carousel () a ni.

Thil thlan theih a ni

Options chu data attribute emaw JavaScriptz hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-interval="".

Thiltih dan tur

.carousel(thil thlan theih) .

Carousel chu optional options hmangin a initialize a, objectitem hrang hrang hmangin cycle a kal tan thin.

$ ( '.carousel' tih a ni. carousel ({ 1) a ni.
  hun chhung : 2000 a ni 
}) tih a ni.

.carousel(‘cycle’) tih a ni.

Carousel thilte chu veilam atanga dinglam thlengin a cycle a.

.carousel(‘ chawlhsan’) tih a ni.

Carousel chu thil kal tlanga cycle a kal theih loh nan a titawp.

.carousel(number) a awm bawk.

Carousel chu frame pakhatah a cycle (0 based, array ang chi).

.carousel('hma lam') a ni.

Item hmasa lam chu a cycle a.

.carousel('a dawt tur') .

Item dang a cycle a.

Thil thlengte

Bootstrap-a carousel class hian carousel functionality-a hooking-na tur event pahnih a pholang a ni.

Entirna

Eng form text input pawha elegant typeaheads rang taka siam theihna tur plugin bulpui, awlsam taka tihzauh theih.

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

autocomplete="off"Bootstrap typeahead dropdown-a default browser menu a lan loh nan set i duh ang .

Hman dan tur

Data attribute hmangin a ni

A chunga entirnan kan hmuh ang hian typeahead functionality nei element register turin data attribute te dah belh rawh.

JavaScript hmangin

Typeahead chu manual-in ko rawh:

$ ( '.type hmasa ber' ). type hmasa ber () .

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-source="".

Thiltih dan tur

.typeahead(thil thlan theih) .

Input pakhat chu typeahead hmangin a initialize thin.

Entirna

A veilam a subnavigation hi affix plugin live demo a ni.

Hman dan tur

Data attribute hmangin a ni

data-spy="affix"Element eng pawha awlsam taka affix behavior dah tur chuan i spy duh element ah khan add mai tur a ni. Tichuan offset hmangin element pakhat pinning on leh off hun tur chu define rawh.

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a . 200 > ... < / div >  

JavaScript hmangin

JavaScript hmangin affix plugin chu call rawh:

$ ( '#navbar' tih chu a ni). affix () tih a ni.

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-offset-top="200".