Bootstrap өчен Javascript

Bootstrap компонентларын тормышка китерегез - хәзер 12 махсус jQuery плагины белән.

Модальләр

Тәртипле, ләкин сыгылмалы, минималь кирәкле функцияләр һәм акыллы дефолтлар белән традицион javascript модаль плагинын алыгыз.

Тамчы

Бу гади плагин белән Bootstrap-ның теләсә нинди әйберенә тамчы менюларны өстәгез. Bootstrap диңгез тактасында, өстәмәләрдә, таблеткаларда тулы тамчы меню ярдәме күрсәтә.

Scrollspy

Scrollspy кулланыгыз, әйләндерү позициясенә нигезләнеп хәзерге актив сылтаманы күрсәтү өчен, диңгез тактасындагы сылтамаларны автоматик рәвештә яңарту өчен.

Күчерелә торган кыстыргычлар

Бу плагинны кулланыгыз, таблицаларны һәм таблеткаларны җирле эчтәлекнең таблицалар аша алыштырырга рөхсәт итеп, файдалы булсын өчен.

Кораллар

JQuery Tipsy плагинын яңа алыгыз, Tooltips рәсемнәргә таянмый - алар CSS3 анимацияләр өчен һәм җирле исем саклау өчен мәгълүмат-атрибутлар өчен кулланалар.

Поповерлар *

Икенчел мәгълүмат өчен теләсә нинди элементка, iPadдагы кебек, эчтәлекнең кечкенә каплауларын өстәгез.

* Кораллар кертүне таләп итә

Хәбәрләр

Сигнализация плагины - сигнализацияләргә якын функция өстәү өчен кечкенә класс.

Кнопкалар

Кнопкалар белән күбрәк эшләгез. Контроль төймә кораллар плитәсе кебек компонентлар өчен төймәләр төркемнәрен күрсәтә.

Apseимерелү

Аккордеон һәм навигация кебек җимерелә торган компонентлар өчен төп стильләр һәм сыгылмалы ярдәм алыгыз.

Карусель

Эчтәлекнең интерактив слайд-шоусын тәкъдим итәргә теләгән теләсә нинди эчтәлекнең күңелле әйләнешен булдырыгыз.

Тип

Төп, җиңел киңәйтелгән плагин, теләсә нинди форма текст кертү белән зәвыклы типедларны тиз ясау өчен.

Күчешләр *

Гади күчү эффектлары өчен, bootstrap-transition.js кертегез, модальләрдә слайдка яки сигнализацияләрне сүндерергә.

* Плагиннарда анимация өчен кирәк

Идарә итә! Барлык javascript плагиннары jQuery'ның соңгы версиясен таләп итә.

Модальләр турында

Файлны йөкләү

Статик мисал

Түбәндә статик яктан күрсәтелгән модаль.

Тере демо

Javascript аша модальне астагы төймәгә басыгыз. Ул битнең башыннан аска төшеп бетәчәк.

Демо модальне эшләтеп җибәрү

Ботстрап-модаль куллану

Javascript аша модальгә шалтыратыгыз:

$ ( '#myModal' ). модаль ( вариантлар )

Вариантлар

Исем	тибы	Килешү	тасвирлау
фон	буле	дөрес	Модаль-фон элементын үз эченә ала. Альтернатив рәвештә, `static`басу вакытында модальне япмаган фонны күрсәтегез.
клавиатура	буле	дөрес	Качу ачкычы басылганда модальне япа
шоу	буле	дөрес	Башланганда модальне күрсәтә.

Билгеләү

Сез биттә модальләрне бер генә javascript язмыйча активлаштыра аласыз. data-toggle="modal"Контроллер элементына модаль элемент идентификациясенә туры килгән data-target="#foo", href="#foo"һәм басылгач, ул сезнең модалыгызны эшләтеп җибәрәчәк .

Шулай ук, модаль инстанциягә вариантлар өстәү өчен, аларны контроль элементына яисә модаль билгеләргә өстәмә мәгълүмат атрибутлары итеп кертегез.

<a class = "btn" data-toggle = "modal" href = "#myModal"> Модальне эшләтеп җибәрү </a>

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal"> × </a> _  
    <h3> Модаль башлам </h3>
  </div>
  <div class = "модаль-тән" > 
    <p> Бер яхшы тән ... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Ябу </a> _  
    <a href = "#" class = "btn btn-primary"> changesзгәрешләрне саклагыз </a>  
  </div>
</div>

Идарә итә! Әгәр дә сез модалыгызны җанландырырга телисез икән .fade, элементка класс өстәгез .modal(моны эштә күрү өчен демога карагыз) һәм bootstrap-transition.js кертегез.

Методлар

.модаль (вариантлар)

Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object.

$ ( '#myModal' ). модаль ({
  клавиатура : ялган 
})

.модаль ('күчү')

Модальне кул белән алыштыра.

$ ( '#myModal' ). модаль ( 'күчү' )

.модаль ('шоу')

Кул белән модаль ачыла.

$ ( '#myModal' ). модаль ( 'шоу' )

.модаль ('яшерү')

Модальне кул белән яшерә.

$ ( '#myModal' ). модаль ( 'яшерү' )

Вакыйгалар

Bootstrap'ның модаль классы модаль функциягә керү өчен берничә вакыйганы фаш итә.

Вакыйга	Тасвирлау
шоу	`show`Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән	Бу вакыйга модаль кулланучыга күренгәндә эшләнә (css күчү тәмамлануын көтәр).
яшер	`hide`Бу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла .
яшерелгән	Бу вакыйга модаль кулланучыдан яшерелгәннән соң җибәрелә (css күчү тәмамлануын көтәр).

$ ( '#myModal' ). өстендә ( 'яшерелгән' , функция () {   
  // нәрсәдер эшлә ...
})

Тамчы турында

Файлны йөкләү

Мисаллар

Ачылуны сынап карау өчен, диңгез тактасындагы тамчы нав сылтамаларына һәм астагы даруларга басыгыз.

Bootstrap-dropdown.js куллану

Javascript аша тамчыларга шалтыратыгыз:

$ ( '.dropdown-toggle' ). тамчы ()

Билгеләү

Теләсә нинди элементка тиз төшү функциясен өстәү өчен, өстәгез data-toggle="dropdown"һәм теләсә нинди дөрес йөкләү автоматик рәвештә активлашачак.

Идарә итә! data-target="#fat"Сез өстәмә рәвештә билгеле бер төшүне максат итеп куя аласыз href="#fat".

<ul class = "nav nav-таблеткалар" > 
  <li class = "актив" > <a href = "#"> Даими сылтама </a> </li>  
  <li class = "dropdown " id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Төшү
      <b класс = "карет" > </b> 
    </a>
    <ul class = "тамчы-меню" > 
      <li> <a href = "#"> Эш </a> </li> 
      <li> <a href = "#"> Тагын бер гамәл </a> </li> 
      <li> <a href = "#"> Монда тагын нәрсәдер </a> </li> 
      <li класс = "бүлүче" > </li> 
      <li> <a href = "#"> Аерылган сылтама </a> </li> 
    </ul>
  </li>
  ...
</ul>

Методлар

$ (). төшү ()

Бирелгән навигация яки меню навигациясе өчен менюларны активлаштыру өчен программалы api.

ScrollSpy плагины әйләндерү позициясенә нигезләнеп диңгез максатларын автоматик рәвештә яңарту өчен.

Файлны йөкләү

Scrollspy белән диңгез тактасы

Түбәндәге өлкәне әйләндерегез һәм навигация яңартуын карагыз. Ачылучы суб-әйберләр дә яктыртылачак. Сынап кара!

@fat

Реклама легингс клавиатурасы, иртәнге аш сәнгате кичәсе долор хезмәт. Pitchfork yr enim lo-fi алар сатылганчы. Тамбль фермасы-өстәл велосипед хокуклары. Аним кефия карлес кардиган. Велит сейитан mcsweeney фото кабинасы 3 бүре ай ируры. Косби свитер ломо джин шорты, вильямсбург hoodie minim qui сез алар турында ишетмәгәнсездер, һәм кардиган ышаныч фонды culpa biodiesel wes anderson эстетик. Нихил татуировкаланган аккусамус, кредит ирония биодисель кефиех остасы улламко нәтиҗәсе.

@mdo

Вениам марфа мыеклы тимераякта, фугат велит питчорк сакалын үзләштерә. Фриган сакал алико купидат мксвейни веро. Купидатат дүрт локо ниси, хельветика нулла карлес. Татуировкаланган косби свитер азык-төлек машинасы, mcsweeney викторинасы булмаган винил. Lo-fi wes anderson +1 сарториаль. Карлес эстетик булмаган күнегүләр. Бруклинда һөнәрчелек сырасы вице-кейтар дезерунты.

бер

Occaecat commodo aliqua delectus. Сыра сырасы дезерунт тимераякта. Ломо велосипед хокуклары банх ми, велит һәм киләсе дәрәҗәдәге локавор бер чыганаклы кофе магна веньямда. Lifeгары тормыш идентификаторы винил, эхо парк нәтиҗәсендә аликип банх ми питчорк. VHS VHS бәяләү. DIY миним хәбәрче сумкасы. Iphone, тотрыклы delectus consectetur fanny pack iphone.

ике

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.

Кейтар тви блог, кулпа хәбәрче сумкасы марфа нинди генә делектус азык-төлек машинасы. Sapiente synth id assumenda. Locavore sed helvetica cliche ирония, күк күкрәү, сез алар турында ишетмәгәнсездер, шуңа күрә глютенсыз ло-фап аликип. Алар сатылганчы эшләгез, терри Ричардсон проидентлы иртәнге аш. Кардиган һөнәрчелек сырасы сейитан әзер велит. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco күк күкрәү.

Bootstrap-scrollspy.js куллану

Javascript аша scrollspy шалтыратыгыз:

$ ( '#navbar' ). scrollspy ()

Билгеләү

Topгары навигациягә scrollspy тәртибен җиңел өстәр data-spy="scroll"өчен, шпион булырга теләгән элементны өстәгез (гадәттә бу тән булыр иде).

<body data-spy = "әйләндерү" > ... </body>

Идарә итә! Navbar сылтамаларында чишелә торган id максатлары булырга тиеш. Мәсәлән <a href="#home">home</a>, домдагы берәр нәрсәгә туры килергә тиеш <div id="home"></div>.

Вариантлар

Исем	тибы	Килешү	тасвирлау
офсет	саны	10	Пиксель әйләндерү позициясен исәпләгәндә өстән офсет.

Бу плагин җирле эчтәлеккә күчү өчен тиз, динамик кыстыргыч һәм таблетка функциясен өсти.

Файлны йөкләү

Мисал кыстыргычлары

Яшерен панельләр арасында күчү өчен астагы кыстыргычларга басыгыз, хәтта тамчы менюлар аша.

Чим джинсы, мөгаен, алар турында джин шорты Остин турында ишетмәгәнсездер. Nesciunt tofu stumptown aliqua, ретро синт мастер чистарту. Мыек кысу температурасы, вильямсбург карлес вегетан гелветика. Репрендерит касапчы ретро кефиех хыялый синт. Косби свитер һәм бан ми, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan америка киеме, касапчы волуптат ниси 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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Bootstrap-tab.js куллану

Javascript аша таблицалар таблицаларын рөхсәт итегез:

$ ( '#myTab' ). кыстыргыч ( 'шоу' )

Билгеләү

Сез берәр элементны күрсәтеп data-toggle="tab", бернинди javascript язмыйча, таблицаны яки таблетка навигациясен активлаштыра аласыз .data-toggle="pill"

<ul class = "nav nav-tabs" > 
  <li> <a href = "#home" data-toggle = "tab"> Өй </a> </li >  
  <li> <a href = "#profile" data-toggle = "tab"> Профиль </a> </li >  
  <li> <a href = "#messages" data-toggle = "tab"> Хәбәрләр </a> </li >  
  <li> <a href = "#settings" data-toggle = "tab"> көйләүләр </a> </li >  
</ul>

Методлар

$ ()

Таблица элементын һәм эчтәлек контейнерын активлаштыра. Таблицада "мәгълүмат-максат" яки домдагы контейнер төененә юнәлтелгән "href" булырга тиеш.

<ul class = "nav nav-tabs" > 
  <li class = "актив" > <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 = "profile" > ... </div>  
  <div class = "tab-pane" id = "хәбәрләр" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '.tabs a: соңгы' ). кыстыргыч ( 'шоу' )
  })
</script>

Вакыйгалар

Вакыйга	Тасвирлау
шоу	Бу вакыйга таблицада күрсәтелә, ләкин яңа кыстыргыч күрсәтелгәнче. `event.target`Актив кыстыргычны һәм `event.relatedTarget`алдагы актив кыстыргычны кулланыгыз .
күрсәтелгән	Бу вакыйга салынма күрсәтелгәннән соң таблицада күрсәтелә. `event.target`Актив кыстыргычны һәм `event.relatedTarget`алдагы актив кыстыргычны кулланыгыз .

$ ( 'a [data-toggle = "tab"]' ). on ( 'күрсәтелгән' , функция ( e ) {   
  д . максат // активлаштырылган кыстыргыч
  д . бәйләнешле Максат // алдагы кыстыргыч
})

Кораллар турында

Джейсон Фрэм язган искиткеч jQuery.tipsy плагины белән илһамланып; Кораллар - яңартылган версия, алар рәсемнәргә таянмыйлар, анимацияләр өчен css3 кулланалар, һәм җирле исем саклау өчен мәгълүмат-атрибутлар.

Файлны йөкләү

Корал киңәшләрен куллану

Корал киңәшләрен карау өчен түбәндәге сылтамалар өстендә йөрегез:

Bootstrap-tooltip.js куллану

Javascript аша корал киңәшен эшләгез:

$ ( '# мисал' ). кораллар ( вариантлар )

Вариантлар

Исем	тибы	Килешү	тасвирлау
анимация	буле	дөрес	css сүнгән коралга күчүне кулланыгыз
урнаштыру	тезмә \| функция	'top'	корал күрсәтмәсен ничек урнаштырырга - өстә \| аста \| сул \| уң
селектор	кыл	ялган	Әгәр дә селектор тәкъдим ителсә, кораллы объектлар күрсәтелгән максатларга биреләчәк.
исем	кыл \| функциясе	''	"титул" теге булмаса, килешү исеме исеме
триггер	кыл	'каеру'	инструменты ничек этәрелә - кая \| фокус \| кулланма
тоткарлау	саны \| объект	0	корал күрсәтмәсен күрсәтү һәм яшерү (мс) Әгәр дә сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла Объект структурасы:`delay: { show: 500, hide: 100 }`

Идарә итә! Индивидуаль кораллар өчен вариантлар альтернатив рәвештә мәгълүмат атрибутлары ярдәмендә күрсәтелергә мөмкин.

Билгеләү

Эшчәнлек сәбәпләре аркасында, Tooltip һәм Popover data-apis сайлана. Аларны кулланырга теләсәгез, селектор вариантын күрсәтегез.

<a href = "#" rel = "tooltip" title = "беренче tooltip"> минем өстемә менү </a>

Методлар

$ (). кораллар киңәше (вариантлар)

Элемент коллекциясенә инструменты эшкәртүчене бәйли.

.tooltip ('шоу')

Элемент коралын күрсәтә.

$ ( '# элемент' ). инструменты ( 'шоу' )

.tooltip ('яшерү')

Элемент коралын яшерә.

$ ( '# элемент' ). кораллар киңәше ( 'яшерү' )

.tooltip ('күчү')

Элементның инструменты.

$ ( '# элемент' ). кораллар киңәше ( 'күчү' )

Поповерлар турында

Икенчел мәгълүмат өчен теләсә нинди элементка, iPadдагы кебек, эчтәлекнең кечкенә каплауларын өстәгез.

* Tooltip кертелүен таләп итә

Файлны йөкләү

Поповер үрнәге

Поповерны эшләтеп җибәрү өчен төймә өстенә басыгыз.

поповер өчен йөрегез

Bootstrap-popover.js куллану

Javascript аша поповерларны рөхсәт итегез:

$ ( '# мисал' ). поповер ( вариантлар )

Вариантлар

Исем	тибы	Килешү	тасвирлау
анимация	буле	дөрес	css сүнгән коралга күчүне кулланыгыз
урнаштыру	тезмә \| функция	'дөрес'	поповерны ничек урнаштырырга - өстә \| аста \| сул \| уң
селектор	кыл	ялган	селектор тәкъдим ителсә, кораллы объектлар күрсәтелгән максатларга тапшырылачак
триггер	кыл	'каеру'	инструменты ничек этәрелә - кая \| фокус \| кулланма
исем	кыл \| функциясе	''	"титул" атрибуты булмаса, килешү исеме
эчтәлеге	кыл \| функциясе	''	"мәгълүмат-эчтәлек" атрибуты булмаса, килешү бәясе
тоткарлау	саны \| объект	0	поповерны күрсәтү һәм яшерү (мс) Әгәр дә сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла Объект структурасы:`delay: { show: 500, hide: 100 }`

Идарә итә! Аерым поповерлар өчен вариантлар альтернатив рәвештә мәгълүмат атрибутлары ярдәмендә күрсәтелергә мөмкин.

Билгеләү

Эшчәнлек сәбәпләре аркасында, Tooltip һәм Popover data-apis сайлана. Әгәр сез аларны кулланырга телисез икән, селектор опциясен күрсәтегез.

Методлар

$ (). поповер (вариантлар)

Элемент җыю өчен поповерларны башлый.

.popover ('шоу')

Поповер элементларын ачып бирә.

$ ( '# элемент' ). поповер ( 'шоу' )

.поповер ('яшерү')

Элементларны яшерә.

$ ( '# элемент' ). поповер ( 'яшерү' )

.popover ('күчү')

Поповер элементларын алыштыра.

$ ( '# элемент' ). поповер ( 'күчү' )

Сигнализация турында

Сигнализация плагины - сигнализацияләргә якын функция өстәү өчен кечкенә класс.

Йөкләү

Мисал хәбәрләре

Сигнализация плагины регуляр хәбәрләр өстендә эшли, хәбәрләрне блоклый.

× Изге гуакамол! Иң яхшы тикшерү, сез бик яхшы күренмисез.

Әй! Сез хата таптыгыз!

Бу һәм теге үзгәртегез һәм кабатлап карагыз. Duis mollis, коммерция булмаган луктус, портитор лигула, ec lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum утыра.

Бу чара күрегез Яки моны эшлә

Bootstrap-alert.js куллану

Javascript аша кисәтүне кире кагарга рөхсәт итегез:

$ ( ".alert" ). уяу ()

Билгеләү

Якын data-dismiss="alert"функцияне автоматик рәвештә бирү өчен, ябык төймәгә өстәгез.

<a class = "close" data-dismiss = "alert" href = "#"> & times ; </a>

Методлар

$ (). кисәтү ()

Барлык хәбәрләрне дә якын функция белән урап алыгыз. Ябылганда сезнең хәбәрләр җанлансын өчен, аларда класс .fadeһәм .inкласс кулланылганына инаныгыз.

.alert ('якын')

Кисәтүне япа.

$ ( ".alert" ). уяу ( 'ябык' )

Вакыйгалар

Bootstrap-ның уяу классы уяу функциягә керү өчен берничә вакыйганы фаш итә.

Вакыйга	Тасвирлау
ябык	`close`Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
ябык	Бу вакыйга сигнализация ябылганда атыла (css күчү тәмамлануын көтә).

$ ( '# my-alert' ). бәйләү ( 'ябык' , функция () {   
  // нәрсәдер эшлә ...
})

Турында

Файлны йөкләү

Мисал куллану

Штатлар һәм күчү өчен төймәләр плагинын кулланыгыз.

Дәүләт
Ялгыз күчү
Такталар
Радио

Bootstrap-button.js куллану

Javascript аша төймәләрне эшләгез:

$ ( '.tabs' ). төймә ()

Билгеләү

Мәгъ��үмат атрибутлары төймә плагинына аерылгысыз. Төрле билгеләр төрләре өчен түбәндәге мисал кодын карагыз.

<! - Бер төймәгә күчү өчен активлаштыру өчен data-toggle = "төймә" өстәгез ->
<button class = "btn" data-toggle = "button" > Бердәм күчү </button>  
 
B!
<div class = "btn-group" data-toggle = "төймәләр-пункт" >  
  <төймә класс = "btn" > Сул </button> 
  <төймә класс = "btn" > Урта </button> 
  <button class = "btn" > Уң </button> 
</div>
 
<! - btn-группада радио стиле күчү өчен data-toggle = "төймәләр-радио" өстәгез ->
<div class = "btn-group" data-toggle = "төймәләр-радио" >  
  <төймә класс = "btn" > Сул </button> 
  <төймә класс = "btn" > Урта </button> 
  <button class = "btn" > Уң </button> 
</div>

Методлар

$ (). төймә ('күчү')

Күчереп тору. Кнопкага активлашкан кыяфәт бирә.

Идарә итә! data-toggleСез атрибутны кулланып төймәгә автоматик рәвештә күчә аласыз .

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

$ (). төймә ('йөкләү')

Йөкләү өчен төймә халәтен куя - төймәне сүндерә һәм текстны йөкләүгә текстны алыштыра. Текстны йөкләү төймә элементында мәгълүмат атрибутын кулланып билгеләнергә тиеш data-loading-text.

<төймә класс = "btn" мәгълүмат-йөкләү-текст = "әйберләр йөкләү ..." > ... </button>

Идарә итә! Firefox инвалид халәтне бит йөкләре аша дәвам итә . Моның өчен эш autocomplete="off".

$ (). төймә ('яңарту')

Кнопка халәтен үзгәртә - текстны оригиналь текстка алыштыра.

$ (). төймә (тезмә)

Кнопка халәтен яңадан торгызу - текстны теләсә нинди мәгълүмат текстына алыштыра.

<төймә класс = "btn" мәгълүмат-тулы-текст = "бетте!" > ... </button>   
<скрипт>
  $ ( '.btn' ). төймә ( 'тулы' )
</script>

Турында

Аккордеон һәм навигация кебек җимерелә торган компонентлар өчен төп стильләр һәм сыгылмалы ярдәм алыгыз.

Файлны йөкләү

Аккордеон үрнәге

Apseимерелү плагинын кулланып, без гади аккордеон стиле виджетын төзедек:

Apsыела торган төркем пункты

Anim pariatur cliche reprehenderit, enim eiusmod югары тормыш аккусамус терри ричардсон реклама сквид. 3 бүре ай оффия ауте, купидат булмаган тимераякта долор иртәнге аш. Азык-төлек машинасы quinoa nesciunt laborum eiusmod. Иртәнге 3 бүре ай температурасы, алтик сунт аңа кош куйды, бер чыбыклы кофе нулла ассоменда шоредитч һ.б. Nihil anim keffiyeh helvetica, һөнәрчелек сырасы лабораториясе андерсон кредит nesciunt sapiente ea proident. Реклама вегетарианнан тыш касапчы вице-ломо. Леггинглар окаекат һөнәрчелек сырасы фермасы-өстәл, чимал джинсы эстетик синт нессиунт, сез алар турында ишетмәгәнсездер, мөгаен, VHS гаепләү эше.

Collимерелә торган төркем пункты 22

Apsыела торган төркем пункты 33

Bootstrap-collapse.js куллану

Javascript аша рөхсәт:

$ ( ".collapse" ). җимерелү ()

Вариантлар

Исем	тибы	Килешү	тасвирлау
ата-ана	селектор	ялган	Әгәр селектор икән, күрсәтелгән ата-аналар астында барлык җимерелә торган элементлар бу җимерелә торган әйбер күрсәтелгәндә ябылачак. (традицион аккордеон тәртибенә охшаган)
күчү	буле	дөрес	Чакырылырлык элементны чакыру

Билгеләү

Автоматик рәвештә җимерелә торган элемент белән идарә итү өчен элементны өстәгез data-toggle="collapse". data-targetАтрибут җимерелүне data-targetкуллану өчен css селекторын кабул итә. Классны collapseҗимерелә торган элементка өстәргә онытмагыз. Килешү ачык булса, өстәмә класс өстәгез in.

<button class = "btn btn-danger" data-toggle = "җимерелү" data-target = "#demo" >   
  гади җимерелә
</button>
 
<div id = "demo" class = "җимерелү" > ... </div>

Идарә итә! Accимерелә торган контрольгә аккордеонга охшаган төркем белән идарә итү өчен, мәгълүмат атрибутын өстәгез data-parent="#selector". Моны эштә күрү өчен демога мөрәҗәгать итегез.

Методлар

.коллапс (вариантлар)

Эчтәлекне җимерелә торган элемент буларак активлаштыра. Өстәмә вариантларны кабул итә object.

$ ( '#myCollapsible' ). җимерелү ({
  күчү : ялган 
})

.collapse ('күчү')

Collимерелә торган элементны күрсәтә яки яшерә.

.collapse ('шоу')

Apsимерелә торган элементны күрсәтә.

.collapse ('яшерү')

Apsимерелә торган элементны яшерә.

Вакыйгалар

Bootstrap-ның җимерелү классы җимерелү функциясенә кушылу өчен берничә вакыйганы фаш итә.

Вакыйга	Тасвирлау
шоу	`show`Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән	Бу вакыйга кулланучыга таркалу элементы күренгәч (css күчү тәмамлануын көтеп торачак).
яшер	Бу вакыйга `hide`метод чакырылганнан соң ук җибәрелә.
яшерелгән	Бу вакыйга кулланучыдан таркалу элементы яшерелгәндә атыла (css күчү тәмамлануын көтә).

$ ( '#myCollapsible' ). өстендә ( 'яшерелгән' , функция () {   
  // нәрсәдер эшлә ...
})

Турында

Элементлар аша велосипед өчен гомуми плагин. Күңел ачу.

Файлны йөкләү

Карусель үрнәге

Түбәндәге слайдшоуны карагыз.

Беренче Эскиз этикеткасы

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ultricies транспорт чарасы.

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 куллану

Javascript аша шалтырату:

$ ( '.carousel' ). карусель ()

Вариантлар

Исем	тибы	Килешү	тасвирлау
интервал	саны	5000	Автоматик велосипедта велосипедта тоткарлану вакыты.
пауза	кыл	"каер"	Карусельнең велосипедын тычканда туктата һәм карусель велосипедын велосипедта дәвам итә.

Билгеләү

Мәгълүмат атрибутлары алдагы һәм киләсе контроль өчен кулланыла. Түбәндәге мисалны карагыз.

<div id = "myCarousel" класс = "карусель" >  
  <! - Карусель әйберләре ->
  <div class = "карусель-эчке" > 
    <div class = "актив элемент" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <! - Карусель 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>

Методлар

.Карусель (вариантлар)

Карусельне өстәмә вариантлар objectбелән башлый һәм әйберләр аша велосипедта йөри башлый.

$ ( '.carousel' ). карусель ({
  интервал : 2000 
})

.карусель ('цикл')

Сулдан уңга карусель әйберләре аша цикллар.

.карусель ('пауза')

Карусельне велосипедта әйберләр аша туктата.

.Карусель (сан)

Карусельне билгеле бер рамкага әйләндерә (0 нигезендә, массивга охшаган).

.карусель ('алдагы')

Алдагы пунктка цикллар.

.карусель ('киләсе')

Киләсе пунктка цикллар.

Вакыйгалар

Bootstrap карусель классы карусель функциясенә керү өчен ике вакыйганы фаш итә.

Вакыйга	Тасвирлау
слайд	`slide`Бу вакыйга инстанция ысулы кулланылгач шунда ук янып тора .
слайд	Бу вакыйга карусель слайдка күчүне тәмамлагач атыла.

Турында

Төп, җиңел киңәйтелгән плагин, теләсә нинди форма текст кертү белән зәвыклы типедларны тиз ясау өчен.

Файлны йөкләү

Мисал

Тип язу нәтиҗәләрен күрсәтү өчен түбәндәге кырда яза башлагыз.

Bootstrap-typeahead.js куллану

Javascript аша типка шалтыратыгыз:

$ ( '.typeahead' ). ( )

Вариантлар

Исем	тибы	Килешү	тасвирлау
чыганак	массив	[]	Сорау өчен мәгълүмат чыганагы.
әйберләр	саны	8	Тамчыда күрсәтелергә тиешле максималь сан.
матч	функциясе	ваемсыз	Сорау предметка туры килү-килмәвен ачыклау өчен кулланылган ысул. `item`Сорауны сынап карау өчен бер аргумент кабул итә . Хәзерге сорау белән керегез `this.query`. `true`Сорау туры килсә , булеаны кайтар .
сортировка	функциясе	төгәл матч, очрак сизгер, очрак сизгер	Автокомплект нәтиҗәләрен тәртипкә китерү өчен кулланылган ысул. Бер аргументны кабул итә `items`һәм типтагы инстанциянең масштабына ия. Хәзерге сорауга сылтама `this.query`.
хайлайтер	функциясе	барлык килешү матчларына басым ясый	Автокомплект нәтиҗәләрен яктырту өчен кулланылган ысул. Бер аргументны кабул итә `item`һәм типтагы инстанциянең масштабына ия. Html кайтарырга тиеш.

Билгеләү

Тип функциясе булган элементны теркәү өчен мәгълүмат атрибутларын өстәгез.

<кертү тибы = "текст" мәгълүмат-тәэмин итү = "тип башы" >

Методлар

.Типед (вариантлар)

Тип башы белән керүне башлый.

jQuery плагиннары Сезне башлар өчен дистә Bootstrap плагиннары

Поповерлар *

Күчешләр *

Модальләр bootstrap-modal.js

Модальләр турында

Статик мисал

Модаль баш

Тере демо

Модаль башлам

Модаль текст

Модальдә поповер

Модальдә кораллар

Өстәмә әйләндерү тактасын күрсәтү өчен ташып торган текст

Ботстрап-модаль куллану

Вариантлар

Билгеләү

Методлар

.модаль (вариантлар)

.модаль ('күчү')

.модаль ('шоу')

.модаль ('яшерү')

Вакыйгалар

Dropdowns bootstrap-dropdown.js

Тамчы турында

Мисаллар

Bootstrap-dropdown.js куллану

Билгеләү

Методлар

$ (). төшү ()

ScrollSpy bootstrap-scrollspy.js

Scrollspy белән диңгез тактасы

@fat

@mdo

бер

ике

three

Bootstrap-scrollspy.js куллану

Билгеләү

Вариантлар

Күчерелә торган кыстыргычлар bootstrap-tab.js

Мисал кыстыргычлары

Bootstrap-tab.js куллану

Билгеләү

Методлар

$ ()

Вакыйгалар

Tooltips bootstrap-tooltip.js

Кораллар турында

Корал киңәшләрен куллану

Bootstrap-tooltip.js куллану

Вариантлар

Билгеләү

Методлар

$ (). кораллар киңәше (вариантлар)

.tooltip ('шоу')

.tooltip ('яшерү')

.tooltip ('күчү')

Popovers bootstrap-popover.js

Поповерлар турында

Поповер үрнәге

Bootstrap-popover.js куллану

Вариантлар

Билгеләү

Методлар

$ (). поповер (вариантлар)

.popover ('шоу')

.поповер ('яшерү')

.popover ('күчү')

Bootstrap-alert.js хәбәрләре

Сигнализация турында

Мисал хәбәрләре

Әй! Сез хата таптыгыз!

Bootstrap-alert.js куллану

Билгеләү

Методлар

$ (). кисәтү ()

.alert ('якын')

Вакыйгалар

Bootstrap-button.js төймәләре

Турында