Bootstrap өчен Javascript

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

Модальләр

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

Тамчы

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

Scrollspy

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

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

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

Кораллар

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

Поповерлар *

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

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

Хәбәрләр

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

Кнопкалар

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

Apseимерелү

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

Карусель

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

Тип

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

Күчешләр *

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

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

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

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

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

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

Статик мисал

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

Тере демо

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

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

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

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

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

Вариантлар

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

Билгеләү

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal"> Модальне эшләтеп җибәрү </a>
  1. <div class = "модаль яшерү" id = "myModal" >
  2. <div class = "modal-header" >
  3. <төймә тибы = "төймә" класс = "ябу" мәгълүмат-кире кагу = "модаль" > × </button>
  4. <h3> Модаль башлам </h3>
  5. </div>
  6. <div class = "модаль-тән" >
  7. <p> Бер яхшы тән ... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal"> Ябу </a> _
  11. <a href = "#" class = "btn btn-primary"> changesзгәрешләрне саклагыз </a>
  12. </div>
  13. </div>
Идарә итә! Әгәр дә сез модалыгызны җанландырырга телисез икән .fade, элементка класс өстәгез .modal(моны эштә күрү өчен демога карагыз) һәм bootstrap-transition.js кертегез.

Методлар

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

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

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

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

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

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

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

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

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

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

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

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

Вакыйгалар

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

Вакыйга Тасвирлау
шоу showБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән Бу вакыйга модаль кулланучыга күренгәндә эшләнә (css күчү тәмамлануын көтәр).
яшер hideБу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла .
яшерелгән Бу вакыйга модаль кулланучыдан яшерелгәннән соң җибәрелә (css күчү тәмамлануын көтәр).
  1. $ ( '#myModal' ). өстендә ( 'яшерелгән' , функция () {
  2. // нәрсәдер эшлә ...
  3. })

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 шалтыратыгыз:

  1. $ ( '#navbar' ). scrollspy ()

Билгеләү

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

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

Методлар

.scrollspy ('яңарту')

Scrollspy кулланганда DOM элементларын өстәү яки бетерү белән берлектә, яңарту ысулын шулай атарга кирәк:

  1. $ ( '[data-spy = "әйләндерү"]' ). һәрберсе ( функция () {
  2. var $ spy = $ ( бу ). scrollspy ( 'яңарту' )
  3. });

Вариантлар

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

Вакыйгалар

Вакыйга Тасвирлау
активлаштыру Scrollspy белән яңа әйбер активлашканда бу вакыйга янып тора.

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

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

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

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

Чим джинсы, мөгаен, алар турында джин шорты Остин турында ишетмәгәнсездер. 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.


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

Javascript аша таблицалар таблицаларын эшләгез (һәрбер кыстыргычны аерым активлаштырырга кирәк):

  1. $ ( '#myTab a' ). басыгыз ( функция ( e ) {
  2. д . профилактика ();
  3. $ ( бу ). кыстыргыч ( 'шоу' );
  4. })

Сез аерым таблицаларны берничә ысул белән активлаштыра аласыз:

  1. $ ( '#myTab a [href = "# профиль"]' ). кыстыргыч ( 'шоу' ); // Исем буенча кыстыргычны сайлагыз
  2. $ ( '#myTab a: беренче' ). кыстыргыч ( 'шоу' ); // Беренче кыстыргычны сайлагыз
  3. $ ( '#myTab a: соңгы' ). кыстыргыч ( 'шоу' ); // Соңгы кыстыргычны сайлагыз
  4. $ ( '#myTab li: eq (2) a' ). кыстыргыч ( 'шоу' ); // Өченче кыстыргычны сайлагыз (0-индексацияләнгән)

Билгеләү

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

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

Методлар

$ ()

Таблица элементын һәм эчтәлек контейнерын активлаштыра. Таблицада DOM контейнер төене data-targetбулырга тиеш.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "актив" > <a href = "#home"> Өй </a> </li>
  3. <li> <a href = "#profile"> Профиль </a> </li>
  4. <li> <a href = "#messages"> Хәбәрләр </a> </li>
  5. <li> <a href = "#settings"> көйләүләр </a> </li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "хәбәрләр" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <скрипт>
  16. $ ( функция () {
  17. $ ( '#myTab a: соңгы' ). кыстыргыч ( 'шоу' );
  18. })
  19. </script>

Вакыйгалар

Вакыйга Тасвирлау
шоу Бу вакыйга таблицада күрсәтелә, ләкин яңа кыстыргыч күрсәтелгәнче. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
күрсәтелгән Бу вакыйга салынма күрсәтелгәннән соң таблицада күрсәтелә. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
  1. $ ( 'a [data-toggle = "tab"]' ). on ( 'күрсәтелгән' , функция ( e ) {
  2. д . максат // активлаштырылган кыстыргыч
  3. д . бәйләнешле Максат // алдагы кыстыргыч
  4. })

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

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

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

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

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

Киләсе дәрәҗәдәге каты чалбар , сез алар турында ишетмәгәнсездер. Фотогалерея сакал чимал деним хәрефләре вегетариан хәбәрче сумкасы. Ферма-өстәл сейитаны, mcsweeney's fixie тотрыклы квиноа 8 битлы америка киемендә терри ричардсон винил чембрей бар . Сакал боткасы, кардиганнар банх ми ломо күк күкрәү. Тофу биодизель вильямсбург марфа, дүрт локо мксвейни вегетариан камерасын чистарту. Чыннан да, ирония остасы нинди генә ачкыч, сәхнә фермасы-өстәл банкы Остин твиттеры фриган кредит чималы деним бер чыганак кофе вируслы.


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

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

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

Вариантлар

Исем тибы Килешү тасвирлау
анимация буле дөрес css сүнгән коралга күчүне кулланыгыз
урнаштыру тезмә | функция 'top' корал күрсәтмәсен ничек урнаштырырга - өстә | аста | сул | уң
селектор кыл ялган Әгәр дә селектор тәкъдим ителсә, кораллы объектлар күрсәтелгән максатларга биреләчәк.
исем кыл | функциясе '' "титул" теге булмаса, килешү исеме исеме
триггер кыл 'каеру' инструменты ничек этәрелә - кая | фокус | кулланма
тоткарлау саны | объект 0

корал күрсәтү (мс) күрсәтүне һәм яшерүне тоткарлау - кул белән эшләнгән триггер төренә кагылмый

Әгәр дә сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла

Объект структурасы:delay: { show: 500, hide: 100 }

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

Билгеләү

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

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

Методлар

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

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

.tooltip ('шоу')

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

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

.tooltip ('яшерү')

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

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

.tooltip ('күчү')

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

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

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

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

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

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

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

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


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

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

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

Вариантлар

Исем тибы Килешү тасвирлау
анимация буле дөрес css сүнгән коралга күчүне кулланыгыз
урнаштыру тезмә | функция 'дөрес' поповерны ничек урнаштырырга - өстә | аста | сул | уң
селектор кыл ялган селектор тәкъдим ителсә, кораллы объектлар күрсәтелгән максатларга тапшырылачак
триггер кыл 'каеру' инструменты ничек этәрелә - кая | фокус | кулланма
исем кыл | функциясе '' "титул" атрибуты булмаса, килешү исеме
эчтәлеге кыл | функциясе '' "мәгълүмат-эчтәлек" атрибуты булмаса, килешү бәясе
тоткарлау саны | объект 0

поповерны күрсәтү һәм яшерү (мс) - кул белән эшләнгән триггер төренә кагылмый

Әгәр дә сан бирелсә, яшерү / күрсәтү өчен тоткарлык кулланыла

Объект структурасы:delay: { show: 500, hide: 100 }

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

Билгеләү

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

Методлар

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

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

.popover ('шоу')

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

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

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

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

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

.popover ('күчү')

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

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

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

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

Йөкләү

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

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

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

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

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

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


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

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

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

Билгеләү

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

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

Методлар

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

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

.alert ('якын')

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

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

Вакыйгалар

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

Вакыйга Тасвирлау
ябык closeБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
ябык Бу вакыйга сигнализация ябылганда атыла (css күчү тәмамлануын көтә).
  1. $ ( '# my-alert' ). бәйләү ( 'ябык' , функция () {
  2. // нәрсәдер эшлә ...
  3. })

Турында

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

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

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

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

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

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

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

  1. $ ( '.nav-tabs' ). төймә ()

Билгеләү

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

  1. <! - Бер төймәгә күчү өчен активлаштыру өчен data-toggle = "төймә" өстәгез ->
  2. <button class = "btn" data-toggle = "button" > Бердәм күчү </button>
  3.  
  4. B!
  5. <div class = "btn-group" data-toggle = "төймәләр-пункт" >
  6. <төймә класс = "btn" > Сул </button>
  7. <төймә класс = "btn" > Урта </button>
  8. <button class = "btn" > Уң </button>
  9. </div>
  10.  
  11. <! - btn-группада радио стиле күчү өчен data-toggle = "төймәләр-радио" өстәгез ->
  12. <div class = "btn-group" data-toggle = "төймәләр-радио" >
  13. <төймә класс = "btn" > Сул </button>
  14. <төймә класс = "btn" > Урта </button>
  15. <button class = "btn" > Уң </button>
  16. </div>

Методлар

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

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

Идарә итә! data-toggleСез атрибутны кулланып төймәгә автоматик рәвештә күчә аласыз .
  1. <button class = "btn" data-toggle = "button" > </button>

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

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

  1. <төймә класс = "btn" мәгълүмат-йөкләү-текст = "әйберләр йөкләү ..." > ... </button>
Идарә итә! Firefox инвалид халәтне бит йөкләре аша дәвам итә . Моның өчен эш autocomplete="off".

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

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

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

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

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

Турында

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

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

* Күчеш плагинын кертүне таләп итә.

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

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

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

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

Javascript аша рөхсәт:

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

Вариантлар

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

Билгеләү

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

  1. <button class = "btn btn-danger" data-toggle = "җимерелү" data-target = "#demo" >
  2. гади җимерелә
  3. </button>
  4.  
  5. <div id = "demo" class = "җимерелү" > ... </div>
Идарә итә! Accимерелә торган контрольгә аккордеонга охшаган төркем белән идарә итү өчен, мәгълүмат атрибутын өстәгез data-parent="#selector". Моны эштә күрү өчен демога мөрәҗәгать итегез.

Методлар

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

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

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

.collapse ('күчү')

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

.collapse ('шоу')

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

.collapse ('яшерү')

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

Вакыйгалар

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

Вакыйга Тасвирлау
шоу showБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән Бу вакыйга кулланучыга таркалу элементы күренгәч (css күчү тәмамлануын көтеп торачак).
яшер Бу вакыйга hideметод чакырылганнан соң ук җибәрелә.
яшерелгән Бу вакыйга кулланучыдан таркалу элементы яшерелгәндә атыла (css күчү тәмамлануын көтә).
  1. $ ( '#myCollapsible' ). өстендә ( 'яшерелгән' , функция () {
  2. // нәрсәдер эшлә ...
  3. })

Турында

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

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

Мисал

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


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

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

  1. $ ( '.typeahead' ). ( )

Вариантлар

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

Билгеләү

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

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

Методлар

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

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