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

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

Статик мисал

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

Тере демо

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

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

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

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

Вариантлар

Билгеләү

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

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

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

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

Методлар

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

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

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

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

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

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

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

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

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

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

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

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

Вакыйгалар

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

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

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

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

Мисаллар

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

• Регуляр сылтама
• Төшү
  • Action
  • Another action
  • Something else here
  • Separated link
• 2 тамчы
  • Action
  • Another action
  • Something else here
  • Separated link
• 3
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

Билгеләү

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

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

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

<ul class = "nav nav-таблеткалар" > 
  <li класс = "төшү" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Төшү
      <b класс = "карет" > </b> 
    </a>
    <ul class = "тамчы-меню" > 
      ...
    </ul>
  </li>
</ul>

Методлар

$ (). төшү ()

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

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

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

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

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

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

$ ( '#navbar' ). scrollspy ()

Билгеләү

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

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

Методлар

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

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

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

Вариантлар

Вакыйгалар

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

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

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

• Өй
• Профиль
• Төшү
  • @fat
  • @mdo

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

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

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

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

Вариантлар

Билгеләү

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

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

Методлар

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

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

.tooltip ('шоу')

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

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

.tooltip ('яшерү')

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

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

.tooltip ('күчү')

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

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

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

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

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

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

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

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

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

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

Вариантлар

Билгеләү

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

Методлар

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

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

.popover ('шоу')

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

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

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

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

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

.popover ('күчү')

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

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

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

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

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

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

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

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

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

Билгеләү

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

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

Методлар

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

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

.alert ('якын')

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

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

Вакыйгалар

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

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

Турында

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

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

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

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

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

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

Методлар

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

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

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

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

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

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

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

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

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

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

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

Турында

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

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

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

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

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>  

Методлар

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

Эчтәлекне җимерелә торган элемент буларак активлаштыра. Өстәмә вариантларны кабул итә 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 транспорт чарасы.

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

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 транспорт чарасы.

Өченче эскиз ярлыгы

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 транспорт чарасы.

‹ ›

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

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

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

Вариантлар

Билгеләү

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

<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 карусель классы карусель функциясенә керү өчен ике вакыйганы фаш итә.

Турында

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

Мисал

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

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

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

$ ( '.typeahead' ). ( )

Вариантлар

Билгеләү

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

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

Методлар

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

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