Индивидуаль яки тупланган

Плагиннар индивидуаль кертелергә мөмкин (кайберәүләр бәйләнешне таләп итсәләр дә), яки берьюлы. Bootstrap.js һәм bootstrap.min.js икесе дә бер файлдагы барлык плагиннарны үз эченә ала.

Мәгълүмат атрибутлары

Сез барлык Bootstrap плагиннарын JavaScriptның бер сызыгын язмыйча гына маркировкалау API аша куллана аласыз. Бу Bootstrap-ның беренче класс API һәм плагин кулланганда беренче карашыгыз булырга тиеш.

Димәк, кайбер очракларда бу функцияне сүндерергә кирәк булыр. Шуңа күрә, без шулай ук ​​мәгълүмат атрибуты API-ны сүндерү мөмкинлеген бирәбез, тән исемнәрендәге барлык вакыйгаларны "'data-api" белән бәйләп. Бу шулай:

$ ( 'тән' ). сүндерелгән ( '.data-api' )

Альтернатив рәвештә, билгеле бер плагинны максат итү өчен, плагинның исемен исем киңлеге итеп кертегез, шулай ук ​​мәгълүмат-api исем киңлеге:

$ ( 'тән' ). сүндерелгән ( '.alert.data-api' )

Программатик API

Без шулай ук ​​барлык Bootstrap плагиннарын JavaScript API аша гына куллана белергә тиеш дип саныйбыз. Барлык иҗтимагый API-лар бер, чылбырлы ысуллар, һәм эшләнгән коллекцияне кире кайтаралар.

$ ( ".btn.danger" ). төймә ( "күчү" ). addClass ( "май" )

Барлык ысуллар да өстәмә вариантлар объектын, билгеле бер методка юнәлтелгән сызыкны яки бернәрсә дә кабул итмәскә тиеш (бу плагинны килешү тәртибе белән башлый):

$ ( "#myModal" ). модаль () // дефолт белән башланган                       
$ ( "#myModal" ). модаль ({ клавиатура : ялган }) // клавиатурасыз башланган     
$ ( "#myModal" ). модаль ( 'шоу' ) // шунда ук шоуны башлый һәм чакыра                

Eachәр плагин шулай ук ​​чимал конструкторын "Конструктор" милегендә фаш итә : $.fn.popover.Constructor. Әгәр дә сез билгеле бер плагин мисалын алырга телисез икән, аны турыдан-туры элементтан алыгыз : $('[rel=popover]').data('popover').

Конфликт юк

Кайвакыт Bootstrap плагиннарын башка UI рамкалары белән кулланырга кирәк. Бу шартларда вакыт-вакыт исем киңлеге бәрелешләре булырга мөмкин. .noConflictБу очрак булса, сез кыйммәтен кире кайтарырга теләгән плагинга шалтырата аласыз.

var bootstrapButton = $ . fn . төймә . noConflict () // алдан билгеләнгән кыйммәткә $ .fn. төймәсен кайтару 
$ . fn . bootstrapBtn = bootstrapButton             // бирегез $ (). bootstrapBtn bootstrap функциясен

Вакыйгалар

Bootstrap күпчелек плагиннарның уникаль гамәлләре өчен махсус вакыйгалар тәкъдим итә. Гадәттә, алар инфинитив һәм үткән катнашу формасында килә - монда инфинитив (мәс. show) Вакыйга башланганда, һәм аның үткән катнашу формасы (мәс. shown) Эш тәмамлануга этәргеч.

Барлык инфинитив вакыйгалар профилактика функциясен тәэмин итә. Бу эшне башлар алдыннан туктату мөмкинлеген бирә.

$ ( '#myModal' ). on ( 'show' , функция ( e ) {   
    if (! data ) return e . профилактика () // модальне күрсәтүне туктата   
})

Күчешләр турында

Гади күчү эффектлары өчен, башка JS файллары белән беррәттән bootstrap-transition.js кертегез. Әгәр дә сез тупланган (яки минималь) bootstrap.js кулланасыз икән, моны кертергә кирәкми - ул инде бар.

Эшләрне кулланыгыз

Күчеш плагинының берничә мисалы:

• Модальләрдә сикерү яки сүнү
• Сүндерүләр
• Сигнализация
• Карусель такталар

Мисаллар

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

Статик мисал

Башлам, тән, аста хәрәкәтләр җыелмасы белән күрсәтелгән модаль.

<div class = "модаль яшерен бетү" > 
  <div class = "modal-header" > 
    <төймә тибы = "төймә" класс = "ябу" мәгълүмат-кире кагу = "модаль" aria-hidden = "true" > & times; </button>    
    <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>

Тере демо

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

<! - модальне эшләтеп җибәрү өчен төймә ->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal"> Демо модальне эшләтеп җибәрү </a>    
 
<! - Модаль ->
<div id = "myModal" class = "модаль яшерү сүнгән" табиндекс = "-1" роль = "диалог" aria- labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <төймә тибы = "төймә" класс = "ябу" мәгълүмат-кире кагу = "модаль" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Модаль башлам </h3> 
  </div>
  <div class = "модаль-тән" > 
    <p> Бер яхшы тән ... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Ябу </button>   
    <button class = "btn btn-primary" > changesзгәрешләрне саклагыз </button> 
  </div>
</div>

Куллану

Мәгълүмат атрибутлары аша

JavaScript язмыйча модальне активлаштырыгыз. data-toggle="modal"Контроллер элементына, төймә кебек, data-target="#foo"яисә href="#foo"күберәк модальне максат итеп куегыз .

<төймә тибы = "төймә" мәгълүмат-күчү = "модаль" мәгълүмат-максат = "#myModal" > Модальне эшләтеп җибәрү </button>   

JavaScript аша

myModalJavaScriptның бер сызыгы булган id белән модальгә шалтыратыгыз :

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-backdrop="".

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

Методлар

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

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

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

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

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

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

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

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

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

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

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

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

Вакыйгалар

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

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

Мисаллар

Бу гади плагин белән тамчы менюларны өстәгез, шул исәптән диңгез тактасы, таблицалар, таблеткалар.

Диңгез тактасы эчендә

Таблицалар эчендә

Куллану

Мәгълүмат атрибутлары аша

Ачылуны data-toggle="dropdown"алыштыру өчен сылтамага яки төймәгә өстәгез.

<div class = "тамчы" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#"> Тамчы триггеры </a>   
  <ul class = "тамчы-меню" роль = "меню" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL-ны саклап калу өчен, data-targetатрибутны кулланыгыз href="#".

<div class = "тамчы" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    Төшү
    <b класс = "карет" > </b> 
  </a>
  <ul class = "тамчы-меню" роль = "меню" aria- labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript аша

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

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

Вариантлар

Беркем дә юк

Методлар

$ (). төшү ('күчү')

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

Диңгез тактасында мисал

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

Куллану

Мәгълүмат атрибутлары аша

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

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

JavaScript аша

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

$ ( '#navbar' ). scrollspy ()

Методлар

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

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

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-offset="".

Вакыйгалар

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

Localирле эчтәлек панельләре аша, хәтта тамчы менюлар аша күчү өчен тиз, динамик кыстыргыч функциясен өстәгез.

Куллану

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

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

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

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

Билгеләү

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

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

Методлар

$ ()

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

<ul class = "nav nav-tabs" id = "myTab" >  
  <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>
 
<скрипт>
  $ ( функция () {  
    $ ( '#myTab a: соңгы' ). кыстыргыч ( 'шоу' );
  })
</script>

Вакыйгалар

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

Мисаллар

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

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

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

Дүрт юнәлеш

Керү төркемнәрендәге кораллар

Bootstrap кертү төркемнәре белән инструментлар һәм поповерлар кулланганда, кирәкмәгән йогынтыдан саклану өчен сезгә container(түбәндә документлаштырылган) параметр куярга кирәк.

Куллану

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

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-animation="".

Билгеләү

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

Методлар

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

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

.tooltip ('шоу')

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

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

.tooltip ('яшерү')

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

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

.tooltip ('күчү')

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

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

.tooltip ('юк итү')

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

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

Мисаллар

Икенчел информация өчен теләсә нинди элементка, iPadдагы кебек, кечкенә эчтәлекне өстәгез. Поповерны эшләтеп җибәрү өчен төймә өстенә басыгыз. Tooltip кертелүен таләп итә .

Статик поповер

Дүрт вариант бар: өске, уң, аскы һәм сул тигезләнгән.

dataJavaScript һәм атрибут эчендә эчтәлек поповерлар итеп күрсәтелми .

Тере демо

Дүрт юнәлеш

Куллану

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

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-animation="".

Билгеләү

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

Методлар

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

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

.popover ('шоу')

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

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

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

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

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

.popover ('күчү')

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

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

.Поповер ('юк итү')

Элементның поповерын яшерә һәм юк итә.

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

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

Бу плагин белән барлык уяу хәбәрләргә эштән җибәрү функциясен өстәгез.

Куллану

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

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

Билгеләү

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

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

Методлар

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

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

.alert ('якын')

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

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

Вакыйгалар

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

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

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

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

Дәүләт

data-loading-text="Loading..."Кнопкага йөкләү халәтен куллану өчен өстәгез .

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

Ялгыз күчү

data-toggle="button"Бер ��өймәгә күчүне активлаштыру өчен өстәгез .

<төймә тибы = "төймә" класс = "btn btn-беренчел" мәгълүмат-күчү = "төймә" > Бердәм күчү </button>   

Такталар

Btn data-toggle="buttons-checkbox"-группада күберәк стильне алыштырыгыз.

<div class = "btn-group" data-toggle = "төймәләр-пункт" >  
  <төймә тибы = "төймә" класс = "btn btn-primary" > Сул </button>  
  <төймә тибы = "төймә" класс = "btn btn-primary" > Урта </button>  
  <төймә тибы = "төймә" класс = "btn btn-primary" > Уң </button>  
</div>

Радио

data-toggle="buttons-radio"Btn-группада радио стиле күчү өчен өстәгез .

<div class = "btn-group" data-toggle = "төймәләр-радио" >  
  <төймә тибы = "төймә" класс = "btn btn-primary" > Сул </button>  
  <төймә тибы = "төймә" класс = "btn btn-primary" > Урта </button>  
  <төймә тибы = "төймә" класс = "btn btn-primary" > Уң </button>  
</div>

Куллану

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

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

Билгеләү

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

Вариантлар

Беркем дә юк

Методлар

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

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

<төймә тибы = "төймә" класс = "btn" мәгълүмат-күчү = "төймә" > … </button>    

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

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

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

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

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

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

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

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

Турында

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

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

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

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

<div class = "аккордеон" id = "аккордеон2" >  
  <div class = "аккордеон-төркем" > 
    <div class = "аккордеон-баш" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        Apsыела торган төркем пункты
      </a>
    </div>
    <div id = "collapseOne" класс = "аккордеон-тән җимерелү" >  
      <div class = "аккордеон-эчке" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
  <div class = "аккордеон-төркем" > 
    <div class = "аккордеон-баш" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        Collимерелә торган төркем пункты 22
      </a>
    </div>
    <div id = "collapseTwo" class = "аккордеон-тән җимерелү" >  
      <div class = "аккордеон-эчке" > 
        Anim pariatur cliche ...
      </div>
    </div>
  </div>
</div>
...

Сез шулай ук ​​плагинны аккордеон билгесез куллана аласыз. Башка элементның киңәюен һәм җимерелүен алыштыру өчен төймә ясагыз.

<төймә тибы = "төймә" класс = "btn btn-куркыныч" data-toggle = "җимерелү" data-target = "#demo" >    
  гади җимерелә
</button>
 
<div id = "demo" class = "җимерелү" > ... </div>  

Куллану

Мәгълүмат атрибутлары аша

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

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

JavaScript аша

Кул белән эшләгез:

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-parent="".

Методлар

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

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

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

.collapse ('күчү')

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

.collapse ('шоу')

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

.collapse ('яшерү')

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

Вакыйгалар

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

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

‹ ›

<div id = "myCarousel" класс = "карусель слайд" >  
  <ol класс = "карусель-күрсәткечләр" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "актив" > </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" > </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" > </li>  
  </ol>
  <! - Карусель әйберләре ->
  <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>

Куллану

Мәгълүмат атрибутлары аша

Карусель торышын җиңел контрольдә тоту өчен мәгълүмат атрибутларын кулланыгыз. data-slideачкыч сүзләрне кабул итә, prevяки nextслайд позициясен хәзерге торышына үзгәртә. Альтернатив рәвештә, data-slide-toчимал слайд индексын карусельгә күчерү өчен кулланыгыз data-slide-to="2", ул слайд позициясен билгеле индекска сикерә 0.

JavaScript аша

Карусель белән кул белән шалтыратыгыз:

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

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScriptz аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-interval="".

Методлар

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

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

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

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

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

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

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

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

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

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

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

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

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

Вакыйгалар

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

Мисал

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

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

autocomplete="off"Килешү браузер менюларының Bootstrap тип тамчысы өстендә күренмәсен өчен куярга теләрсез .

Куллану

Мәгълүмат атрибутлары аша

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

JavaScript аша

Типедны кул белән шалтыратыгыз:

$ ( '.typeahead' ). ( )

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-source="".

Методлар

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

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

Мисал

Сул яктагы субнавигация - аффикс плагинының тере демо.

Куллану

Мәгълүмат атрибутлары аша

Теләсә нинди элементка аффикс тәртибен җиңел өстәр data-spy="affix"өчен, шпион булырга теләгән элементка өстәгез. Аннары офсетны кулланыгыз, элементны кадаклауны кайчан кабызырга һәм сүндерергә.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

JavaScript аша

JavaScript аша аффикс плагинына шалтыратыгыз:

$ ( '#navbar' ). аффикс ()

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-offset-top="200".