Modal chungchang

A streamlined, mahse flexible, take on the traditional javascript modal plugin a mamawh tlem ber functionality leh smart defaults chauh a nei.

Static entirnan

A hnuaia tarlan te hi statically rendered modal a ni.

Live demo a ni ang

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

Bootstrap-modal hmanga siam a ni

Javascript hmangin modal chu call rawh:

$ ( '#kaModal' ). modal ( duhthlan tur ) .

Thil thlan theih a ni

Markup a ni

I page-ah hian awlsam takin javascript line khat pawh ziak ngai lovin i activate thei a ni. data-toggle="modal"Controller element pakhatah set mai la , a data-target="#foo"or href="#foo"which corresponds to a modal element id, i click chuan i modal chu a launch ang.

Tin, i modal instance-a option dah belh tur chuan control element emaw, modal markup ngeiah emaw data attribute dang angin dah mai rawh.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Modal chu tlangzarh rawh </a>    

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

Thiltih dan tur

.modal(thil thlan theih) .

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

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

.modal(‘toggle’) tih a ni.

Modal pakhat chu manual in a toggle thin.

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

.modal(' entir') tih a ni.

Manual takin modal a hawng thin.

$ ( '#kaModal' ). modal ( 'tihlan rawh' ) .

.modal(‘thup’) tih a ni.

Manual takin modal a thup thin.

$ ( '#kaModal' ). 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' ). on ( 'thup' , hnathawh () { .   
  // thil engemaw ti rawh...
}) tih a ni.

Dropdown chungchang

He plugin awlsam tak hmang hian Bootstrap-a thil awm zawng zawngah dropdown menu dah belh theih a ni. Bootstrap hian navbar, tabs leh pills ah te full dropdown menu support on a nei a.

Entirna te

A hnuaia navbar leh pills a dropdown nav links te kha click la, dropdown te test rawh.

• Regular link a awm bawk
• Dropdown a ni
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown a ni 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown a ni 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bootstrap-dropdown.js hmangin a rawn lang ang

Javascript hmangin dropdown te chu call la:

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

Markup a ni

Element eng pawha dropdown functionality rang taka dah tur chuan add mai la data-toggle="dropdown", bootstrap dropdown dik tak eng pawh chu automatic in a activate ang.

<ul class = "nav nav-pills" > tih hi a awmzia a awm lo 
  <li class = "active" ><a href = "#" > A chhuahna tur hmun leh a hmanna tur hmun </a></li>  
  A rilru a buai em em a, a rilru a hah em em bawk a . id = " menu1 " >  
    <a class = "a tlak thlak" data-toggle = "a tlak hniam" href = "#menu1" >   
      Dropdown a ni
      < b class = "caret" tih hi a awmzia a awm lo 
    </a> tih a ni
    <ul class = "a hnuaia mi ang hian" > 
      <li><a href = "#" > Thiltih tur </a></li> 
      <li><a href = "#" > Thiltih dang </a></li> 
      <li><a href = "#" > Hetah hian thil dang </a></li> 
      <li class = "insem darhtu" </li> tih a ni 
      <li><a href = "#" > Link hrang hrang </a></li> 
    </ul> tih a ni
  </li> tih a ni
  ...
</ul> tih a ni

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

<ul class = "nav nav-pills" > tih hi a awmzia a awm lo 
  <li class = "a tlak thlak" > 
    <a class = "a chhuahsan-toggle" data-toggle = "dropdown" data-target = "#" href = "kawng/a/page.html" >    
      Dropdown a ni
      < b class = "caret" tih hi a awmzia a awm lo 
    </a> tih a ni
    <ul class = "a hnuaia mi ang hian" > 
      ...
    </ul> tih a ni
  </li> tih a ni
</ul> tih a ni

Thiltih dan tur

$().a tlak thlak() .

Navbar emaw tabbed navigation pek tawh pakhat tana menu activate na tur programatic api.

ScrollSpy plugin hi scroll position a zirin nav target te automatic a update theihna tur a ni.

Entirnan navbar leh scrollspy

A hnuaia area hi scroll la, navigation update chu en rawh. Dropdown sub items te pawh a rawn lang ang. Tih ve teh!

Bootstrap-scrollspy.js hmangin

Javascript hmangin scrollspy chu ko rawh:

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

Markup a ni

I topbar navigation-a awlsam taka scrollspy behavior dah belh data-spy="scroll"tur chuan i spy duh element-ah dah mai rawh (most typically hei hi body a ni ang).

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

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

Thil thlengte

He plugin hian local content hmanga inthlak danglamna tur tab leh pill functionality rang tak, dynamic tak a dah belh a ni.

Entirna tabs te

A hnuaia tabs te hi click la, hidden pane te inkarah toggle la, dropdown menu hmang pawhin.

• In
• Ruangam
• Dropdown a ni
  • @fat
  • @mdo

Bootstrap-tab.js hmangin

Javascript hmangin tabbable tabs te chu enable rawh (tab tin hi 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 ang. 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.

Tooltips chungchang

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.

Tooltips hman dan entirnan

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

Bootstrap-tooltip.js hmangin a rawn lang ang

Javascript hmangin tooltip chu trigger la:

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

Thil thlan theih a ni

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.

<a href = "#" rel = "tooltip" title = "tooltip 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.

Popovers chungchang

Secondary information dahna tur element eng pawhah iPad-a awm ang chi content overlay te te te dah belh rawh.

* Tooltip dah tel a ngai

Entirnan hover popover tih hi a ni

Popover chu trigger turin button chungah hover rawh.

Bootstrap-popover.js hmanga thil tih theih a ni

Javascript hmangin popovers te chu enable rawh:

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

Thil thlan theih a ni

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('tihlan rawh') 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.

Alert chungchang

Alert plugin hi alert-a close functionality dahna tur class te tak te a ni.

Entirna alerts te

Alert plugin hian alert message pangngaiah hna a thawk a, message pawh a block bawk.

Bootstrap-alert.js hmangin

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.

Lam

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

Entirna hman dan

State leh toggles te tan buttons plugin hmang ang che.

Bootstrap-button.js hmangin a rawn lang ang

Javascript hmangin button te chu enable theih a ni:

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

<!-- Button pakhata toggling activate turin data-toggle="button" dah la -->
<button class = "btn" data-toggle = "button" > A chhuahna tur hmun leh a hmanna tur hmun </button>  
 
<!-- btn-group-a checkbox style thlak danglam theihna tur data-toggle="buttons-checkbox" dah belh rawh -->
A rilru a buai em em a, a rilru a hah em em bawk a  
  <button class = "btn" > A veilam </button> tih a ni 
  <button class = "btn" > A laiah </button> tih a ni 
  <button class = "btn" > Dinglam </button> tih hi a ni 
</div> tih a ni
 
<!-- btn-group-a radio style thlak danglam theihna tur data-toggle="buttons-radio" dah belh -->
<div class = "btn-group" data-toggle = "buttons-radio" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo  
  <button class = "btn" > A veilam </button> tih a ni 
  <button class = "btn" > A laiah </button> tih a ni 
  <button class = "btn" > Dinglam </button> tih hi a ni 
</div> tih a ni

Thiltih dan tur

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

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

<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 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) ah hian a awm.

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

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

Bootstrap-collapse.js hmanga tih a ni

Javascript hmangin enable theih a ni:

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

Thil thlan theih a ni

Markup a ni

Add data-toggle="collapse"leh a data-targetto element mai 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.

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

Thiltih dan tur

.collapse(thil thlan theih) .

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

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

Lam

Element hrang hrang hmanga cycle kal theihna tur generic plugin. A hlim hmel hle mai.

Entirnan carousel tih ang chi

A hnuaia slideshow hi en la.

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.

Bootstrap-carousel.js hmangin a rawn lang leh ta

Javascript hmangin call theih a ni:

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

Thil thlan theih a ni

Markup a ni

Data attribute hi conrol hmasa leh lo awm tur atan hman a ni. A hnuaia markup entirnan hi en la.

<div id = "ka Carousel" class = "carousel slide" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo hle  
  <!-- 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

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 lam pan chuan a cycle a.

Thil thlengte

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

Lam

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

Entirna

A hnuaia field-ah hian typeahead result i hmuh theih nan type tan rawh.

Bootstrap-typeahead.js hmangin a rawn lang ang

Javascript hmangin typeahead chu call rawh:

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

Thil thlan theih a ni

Markup a ni

Typeahead functionality nei element register turin data attribute te dah belh.

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

Thiltih dan tur

.typeahead(thil thlan theih) .

Input pakhat chu typeahead hmangin a initialize thin.