Bootstrap atan Javascript a awm bawk

Bootstrap-a component hrang hrangte chu nunna pe rawh—tunah chuan custom jQuery plugin 12 a awm tawh.

Modal te pawh a awm

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

Dropdown te pawh a awm

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.

Scrollspy hmanga ziah a ni

Scrollspy hmangin i navbar-a link awmte chu automatic-in update la, scroll awmna hmun a zirin tuna active link awm chu a rawn lang ang.

Tabs toggle theih a ni

He plugin hmang hian tab leh pills te chu local content tabbable pane kaltlangin toggle theihna tur siamin a tangkai zawk theih nan hmang ang che.

Hmanraw hman dan tur

jQuery Tipsy plugin-a take thar, Tooltips hian image-ah an innghat lo—animation atan CSS3 an hmang a, local title storage atan data-attribute an hmang bawk.

Popovers te * .

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

* Tooltips te dah tel a ngai

Alert message a awm bawk

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

Buttons te a awm

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

Chim

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

Carousel hmanga siam a ni

Content i duh apiang merry-go-round siam la, content interactive slideshow pe rawh.

Type hmasa ber tur a ni

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

Hrilhfiahna * .

Transition effect awlsam tak tak atan chuan bootstrap-transition.js vawi khat dah la, modal-a slide emaw, alerts fade out emaw theih a ni.

* Plugin-a animation atan a ngai

Lu a ti sang a! Javascript plugin zawng zawng hian jQuery version thar ber a mamawh vek a ni.

Modal chungchang

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

File chu download rawh

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.

Demo modal chu tlangzarh rawh

Bootstrap-modal hmanga siam a ni

Javascript hmangin modal chu call rawh:

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

Thil thlan theih a ni

Hming lampang hlawhchhamna hrilhfiahna
backdrop a ni boolean a ni dik Modal-backdrop element a awm bawk. staticA nih loh leh, click-a modal khar lo backdrop atan specify bawk ang che.
keyboard hmangin a ziak a boolean a ni dik Escape key i hmet chuan modal a khar thin
lantir boolean a ni dik Initialized hunah modal a lantir.

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.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Modal chu tlangzarh rawh </a>
  1. <div class = "modal thup" id = "kaModal" >
  2. <div class = "modal-a thupui" >
  3. <button type = "button" class = "khar" data-dismiss = "modal" > × </button>
  4. <h3> Modal header </h3> tih a ni
  5. </div> tih a ni
  6. <div class = "taksa-modal" > tih hi a ni
  7. <p> Taksa tha tak pakhat... </p>
  8. </div> tih a ni
  9. <div class = "modal-a hnuai lam" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > khar rawh </a>
  11. <a href = "#" class = "btn btn-primary" > Thil danglamte chu dahkhawm rawh </a>
  12. </div> tih a ni
  13. </div> tih a ni
Lu a ti sang a! I modal chu animate in leh out i duh chuan element .fadeah class dah mai la .modal(hei hi action a hmuh theih nan demo en la) bootstrap-transition.js te pawh dah tel bawk ang che.

Thiltih dan tur

.modal(thil thlan theih) .

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

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

.modal(‘toggle’) tih a ni.

Modal pakhat chu manual in a toggle thin.

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

.modal(' entir') tih a ni.

Manual takin modal a hawng thin.

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

.modal(‘thup’) tih a ni.

Manual takin modal a thup thin.

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

Hunbik Hrilhfiahna
lantir showHe event hi instance method kan koh chuan a fire nghal vek a ni.
tih a ni He event hi modal chu user hmuh theiha siam a nih hunah fire a ni (css transitions zawh hun a nghak ang).
biru hideHe event hi instance method koh a nih chuan a fire nghal a ni.
thuhruk He event hi modal chu user hnen atanga thup a nih zawh chuan a fire thin (css transitions zawh hun a nghak ang).
  1. $ ( '#kaModal' ). on ( 'thup' , hnathawh () { .
  2. // thil engemaw ti rawh...
  3. }) tih a ni.

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

File chu download rawh

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!

@thau

A rilru a buai em em a, a rilru a hah em em bawk a. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi an hralh chhuah hma qui. Tumblr farm-to-table bicycle dikna eng pawh ni se. Anim keffiyeh chuan carles cardigan a ti a. Velit seitan mcsweeney thlalak booth 3 savawm thla irure. 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, a rilru a hah em em bawk a, a rilru a hah em em bawk a. et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh kut hnathawktu ullamco consequat.

@mdo a ni

Veniam marfa hmul nei skateboard, adipisicing fugiat velit pitchfork hmul. A rilru a buai em em a, a rilru a hah em em bawk a. mcsweeney's vero. Cupidatat pali loko nisi, ea helvetica nulla carles. Tattoo nei cosby sweater ei tur phur truck, mcsweeney-a quis non freegan vinyl a ni. Lo-fi wes anderson +1 chuan a rawn ti a. A rilru a buai em em a, a rilru a hah em em bawk a. Carles non aesthetic exercise quis gentrify. Brooklyn adipisicing kutchhuak beer vice keytar deserunt.

pakhat

Occaecat commodo a ni a, a hnah hi a hring vek a ni. A rilru a buai em em a, a rilru a hah em em bawk a. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore pakhat chauh awmna coffee in magna veniam. Nunna sang id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS chuan a ti a. Consectetur nisi DIY messenger bag tlem ber 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. fanny pack iphone.

pahnih

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa eng pawh delectus ei tur phur truck. A rilru a buai em em a, a rilru a hah em em bawk a. id assumenda. Locavore sed helvetica cliche irony, thundercats te hi i hre lo mai thei consequat hoodie gluten-free lo-fi fap aliquip. Laboure elit placeat an hralh zawh hmain, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan siam fel vek velit a ni. VHS chambray laboris hun rei lote chhunga hman theih a ni. A rilru a buai em em a, a rilru a hah em em bawk a.


Bootstrap-scrollspy.js hmangin

Javascript hmangin scrollspy chu ko rawh:

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

  1. <taksa data-spy = "scroll" > ... </body> tih hi a ni
Lu a ti sang a! Navbar link ah hian resolvable id target a awm tur a ni. Entirnan, a <a href="#home">home</a>chu dom-a thil awm ang chi nen a inmil tur a <div id="home"></div>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:

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

Thil thlan theih a ni

Hming lampang hlawhchhamna hrilhfiahna
offset a ni a zat 10 a ni Scroll awmna tur chhut hunah chunglam atanga offset tur pixels.

Thil thlengte

Hunbik Hrilhfiahna
activate rawh He event hi scrollspy-in item thar a activate apiangin a fire thin.

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

File chu download rawh

Entirna tabs te

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

Raw denim i la hre lo mai thei jean shorts Austin. 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. Retro synth master cleanse. 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. A rilru a buai em em a, a rilru a hah em em bawk a. dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid a ni a, a man pawh a tlawm hle. A rilru a buai em em a, a rilru a hah em em bawk a. salvia cillum iphone. Seitan aliquip quis cardigan american thawmhnaw, sa thattu voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Bootstrap-tab.js hmangin

Javascript hmangin tabbable tabs te chu enable rawh (tab tin hi a hranin activate a ngai a ni):

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

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

  1. $ ( '#kaTab a[href="#profile"]' ). tab ( 'entir rawh' ); // Tab hming hmangin thlang rawh
  2. $ ( '#kaTab a: hmasa ber' ). tab ( 'entir rawh' ); // Tab hmasa ber thlang rawh
  3. $ ( '#kaTab a:a hnuhnung ber' ). tab ( 'entir rawh' ); // Tab hnuhnung ber thlang rawh
  4. $ ( '#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

  1. <ul class = "nav-tabs" > tih hi a awmzia a awm lo
  2. <li><a href = "#in" data-toggle = "tab" > A chhuahna tur hmun </a> </li>
  3. <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
  4. <li><a href = "#thuchah" data-toggle = "tab" > Thuchah </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > A chhuahna tur hmun leh a hmanna tur hmun </a></li>
  6. </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

  1. A rilru a buai em em a, a rilru a hah em em bawk a. id = " myTab " >
  2. <li class = "active" ><a href = "#in" > In leh lo </a></li>
  3. <li><a href = "#profile" > A chhuahna tur hmun leh a hmanna tur hmun </a></li>
  4. <li><a href = "#thuchah" > Thuchah </a></li>
  5. <li><a href = "#settings" > A chhuahna tur hmun leh a hmanna tur hmun </a></li>
  6. </ul> tih a ni
  7.  
  8. <div class = "tab-a thu awmte" >
  9. <div class = "tab-pane active" id = "in" > ... </div> tih a ni
  10. 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>
  11. <div class = "tab-pane" id = "thuchah" > ... </div> tih a ni
  12. <div class = "tab-pane" id = "settings" > ... </div> tih hi a ni
  13. </div> tih a ni
  14.  
  15. <script> tih a ni
  16. $ ( hnathawh () { .
  17. $ ( '#kaTab a:a hnuhnung ber' ). tab ( 'entir rawh' );
  18. }) tih a ni.
  19. </script> tih a ni

Thil thlengte

Hunbik Hrilhfiahna
lantir He event hi tab show-ah a fire a, mahse tab thar a lan hmain a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin event.targetand hmang ang che .event.relatedTarget
tih a ni He event hi tab pakhat a lan hnuah tab show ah a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin event.targetand hmang ang che .event.relatedTarget
  1. $ ( 'a[data-toggle="tab"]' tih a ni a, a hlawhtlinna chu a hlawhtlinna a ni. on ( 'a entir' , function ( e ) { .
  2. e . target // tihchhuah tab a ni
  3. e . relatedTarget // tab hmasa ber a ni
  4. }) 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.

File chu download rawh

Tooltips hman dan entirnan

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

Tight pants next level keffiyeh i la hre lo ngei ang. Thlalak booth hmul raw denim letterpress vegan palai bag stumptown. Farm-to-table seitan, mcsweeney-a fixie sustainable quinoa 8-bit american apparel te chuan terry richardson vinyl chambray an nei a, an thil siam chu an hlim hle. Beard stumptown, cardigans banh mi lomo zing khawvar. Tofu biodiesel williamsburg marfa, pali loko mcsweeney chuan vegan chambray a tifai a. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral a ni.


Bootstrap-tooltip.js hmangin a rawn lang ang

Javascript hmangin tooltip chu trigger la:

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

Thil thlan theih a ni

Hming lampang hlawhchhamna hrilhfiahna
animation tih a ni boolean a ni dik tooltip ah css fade transition hmangin apply rawh
dahna tur hmun a ni string|a hnathawh dan 'chung' tooltip dah dan tur - chunglam | hnuai lam | veilam | dik
selector a ni hrui diklo Selector pek a nih chuan tooltip objects chu target tarlan te hnenah delegate a ni ang.
nihna string | thiltih '' tih a ni. `title` tag a awm loh chuan default title value a ni
ti per hrui 'hover' a ti a. tooltip a trigger dan - hover | focus | kuta thawh
titlai number | thil 0 a ni

tooltip (ms) entir leh thup delay - manual trigger type-ah a hman loh

Number supply a nih chuan hide/show pahnih ah delay a awm vek a ni

Thil awm dan tur chu:delay: { show: 500, hide: 100 }

Lu a ti sang a! Tooltip hrang hrang atana option hrang hrangte chu data attribute hman hmangin a danglamna tur a awm thei bawk.

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.

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

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

.tooltip(‘thup’) tih a ni.

Element pakhat tooltip a thup thin.

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

.tooltip(‘toggle’) tih a ni.

Element pakhat tooltip a toggle thin.

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

File chu download rawh

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:

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

Thil thlan theih a ni

Hming lampang hlawhchhamna hrilhfiahna
animation tih a ni boolean a ni dik tooltip ah css fade transition hmangin apply rawh
dahna tur hmun a ni string|a hnathawh dan 'dik' popover dah dan tur - top | hnuai lam | veilam | dik
selector a ni hrui diklo selector pek a nih chuan tooltip object te chu target tarlan te hnenah delegate a ni ang
ti per hrui 'hover' a ti a. tooltip a trigger dan - hover | focus | kuta thawh
nihna string | thiltih '' tih a ni. `title` attribute a awm loh chuan default title value a ni
lungawi string | thiltih '' tih a ni. `data-content` attribute a awm loh chuan default content value a ni
titlai number | thil 0 a ni

popover (ms) lantir leh thup delay - manual trigger type-ah a hman loh

Number supply a nih chuan hide/show pahnih ah delay a awm vek a ni

Thil awm dan tur chu:delay: { show: 500, hide: 100 }

Lu a ti sang a! Mimal popovers atana option te chu a danglamna chu data attribute hmanga tarlan 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.

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

.popover(‘thup’) tih a ni.

A elements popover a thup a.

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

.popover('toggle') tih a ni.

A elements popover a tidanglam.

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

Internet atanga thil lachhawng

Entirna alerts te

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

Guacamole thianghlim tak! Best check yo self, i hmel a tha lutuk lo.

Aw snap! Error i hmu a!

Hei leh chu thlak la, ti leh rawh. 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, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a.

He action hi la rawh A nih loh leh hetiang hian ti rawh


Bootstrap-alert.js hmangin

Javascript hmanga alert dismissal theihna tur:

  1. $ ( ".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.

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

  1. $ ( ".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.

Hunbik Hrilhfiahna
khar closeHe event hi instance method kan koh chuan a fire nghal vek a ni.
khar a ni He event hi alert khar a nih hunah fire a ni (css transitions zawh hun a nghak ang).
  1. $ ( '#ka-alert' ). bind ( 'khar' , function () { 1000 a ni.
  2. // thil engemaw ti rawh...
  3. }) 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.

File chu download rawh

Entirna hman dan

State leh toggles te tan buttons plugin hmang ang che.

Stateful tak a ni
Toggle pakhat chauh a awm
Checkbox ah a awm
Radio hmangin a ti a

Bootstrap-button.js hmangin a rawn lang ang

Javascript hmangin button te chu enable theih a ni:

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

  1. <!-- Button pakhata toggling activate turin data-toggle="button" dah la -->
  2. <button class = "btn" data-toggle = "button" > A chhuahna tur hmun leh a hmanna tur hmun </button>
  3.  
  4. <!-- btn-group-a checkbox style thlak danglam theihna tur data-toggle="buttons-checkbox" dah belh rawh -->
  5. A rilru a buai em em a, a rilru a hah em em bawk a
  6. <button class = "btn" > A veilam </button> tih a ni
  7. <button class = "btn" > A laiah </button> tih a ni
  8. <button class = "btn" > Dinglam </button> tih hi a ni
  9. </div> tih a ni
  10.  
  11. <!-- btn-group-a radio style thlak danglam theihna tur data-toggle="buttons-radio" dah belh -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" > A chhuahna tur hmun leh a hmanna tur hmun chu a in ang lo
  13. <button class = "btn" > A veilam </button> tih a ni
  14. <button class = "btn" > A laiah </button> tih a ni
  15. <button class = "btn" > Dinglam </button> tih hi a ni
  16. </div> tih a ni

Thiltih dan tur

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

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

Lu a ti sang a! data-toggleAttribute hmangin button pakhat auto toggling i enable thei bawk.
  1. <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.

  1. <button class = "btn" data-loading-text = "thil phurh chhuah..." > ... </button>
Lu a ti sang a! Firefox hian page load zawng zawngah disabled state chu a persist vek a ni . Chumi atana workaround chu hman autocomplete="off"a ni .

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

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

Lam

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

File chu download rawh

* Transitions plugin a tel tur a ni.

Entirnan accordion tih ang chi

Collapse plugin hmangin accordion style widget awlsam tak kan siam 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, a rilru a hah em em bawk a. terry richardson ad squid. 3 savawm thla officia aute, non cupidatat skateboard dolor brunch hmanga siam a ni. Chaw phur truck quinoa nesciunt laborum eiusmod. Brunch 3 sava thla tempor, sunt aliqua chuan a chungah sava dah squid single-origin coffee nulla assumenda shoreditch et. 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, a rilru a hah em em bawk a. craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan tih loh chu sa thattu vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt i hre lo mai thei an accusamus labore sustainable VHS.
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, a rilru a hah em em bawk a. terry richardson ad squid. 3 savawm thla officia aute, non cupidatat skateboard dolor brunch hmanga siam a ni. Chaw phur truck quinoa nesciunt laborum eiusmod. Brunch 3 sava thla tempor, sunt aliqua chuan a chungah sava dah squid single-origin coffee nulla assumenda shoreditch et. 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, a rilru a hah em em bawk a. craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan tih loh chu sa thattu vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt i hre lo mai thei an accusamus labore sustainable VHS.
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, a rilru a hah em em bawk a. terry richardson ad squid. 3 savawm thla officia aute, non cupidatat skateboard dolor brunch hmanga siam a ni. Chaw phur truck quinoa nesciunt laborum eiusmod. Brunch 3 sava thla tempor, sunt aliqua chuan a chungah sava dah squid single-origin coffee nulla assumenda shoreditch et. 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, a rilru a hah em em bawk a. craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan tih loh chu sa thattu vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt i hre lo mai thei an accusamus labore sustainable VHS.

Bootstrap-collapse.js hmanga tih a ni

Javascript hmangin enable theih a ni:

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

Thil thlan theih a ni

Hming lampang hlawhchhamna hrilhfiahna
nu leh pa selector a ni diklo Selector a nih chuan he collapsible item hi a lan hunah parent tarlan hnuaia collapsible element zawng zawng chu khar vek a ni ang. (acordion tih dan phung pangngai ang chiah)
toggle a ni boolean a ni dik Invocation-ah collapsible element a toggle thin

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.

  1. <button class = "btn btn-hlauhawm" data-toggle = "a tlakchhiat" data-target = "#demo" >
  2. simple collapsible a ni
  3. </button> tih a ni
  4.  
  5. <div id = "demo" class = "a tlakbuak" > ... </div>
Lu a ti sang a! 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.

Thiltih dan tur

.collapse(thil thlan theih) .

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

  1. $ ( '#kaCollapsible' ). a tlakbuak ({
  2. toggle : dik lo
  3. }) 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.

Hunbik Hrilhfiahna
lantir showHe event hi instance method kan koh chuan a fire nghal vek a ni.
tih a ni He event hi collapse element pakhat user hmuh theiha siam a nih chuan fire a ni (css transitions zawh hun a nghak ang).
biru hideHe event hi method koh a nih chuan a fire nghal a ni.
thuhruk He event hi user hnen atanga collapse element thup a nih chuan a fire thin (css transitions zawh hun a nghak ang).
  1. $ ( '#kaCollapsible' ). on ( 'thup' , hnathawh () { .
  2. // thil engemaw ti rawh...
  3. }) tih a ni.

Lam

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

File chu download rawh

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:

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

Thil thlan theih a ni

Hming lampang hlawhchhamna hrilhfiahna
bultanna array a ni [ ] a ni. Data source chu zawhna zawh tur a ni.
thil a zat 8. A ni Dropdown-a thil lang tur max zat.
matcher a ni thiltih case insensitive lo tak a ni Query pakhat chu item nen a inmil em tih hriat theihna tur method. Argument pakhat a pawm a, chu itemchu zawhna test tur a ni. Tuna zawhna awm mek chu this.query. trueQuery a inmil chuan boolean a rawn pe leh ang.
sorter a ni thiltih inmil tak,
case sensitive,
case insensitive lo
Autocomplete result sort dan tur hman dan. Argument pakhat a pawm a, itemstypeahead instance scope a nei bawk. Tuna zawhna awm mek chu this.query.
highlighter a ni thiltih default match zawng zawng a highlight vek Autocomplete result tarlanna atana hman dan. Argument pakhat a pawm a, itemtypeahead instance scope a nei bawk. html a rawn kir leh tur a ni.

Markup a ni

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

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

Thiltih dan tur

.typeahead(thil thlan theih) .

Input pakhat chu typeahead hmangin a initialize thin.