Модальдер туралы

Жеңілдетілген, бірақ икемді, ең аз талап етілетін функционалдығы және ақылды әдепкі параметрлері бар дәстүрлі JavaScript модальды плагинін қабылдайды.

Статикалық мысал

Төменде статикалық түрде көрсетілген модаль берілген.

Тікелей демо

Төмендегі түймені басу арқылы модальды JavaScript арқылы ауыстырыңыз. Ол төмен қарай сырғып, беттің жоғарғы жағынан өшеді.

Bootstrap-модальді пайдалану

Модалға JavaScript арқылы қоңырау шалыңыз:

$ ( '#myModal' ). модальды ( опциялар )

Опциялар

Белгілеу

Сіз 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" > 
    <button class = "close" data-dississ = "modal" > × </button>  
    <h3> Модаль тақырыбы </h3>
  </div>
  <div class = "modal-body" > 
    <p> Бір тамаша дене… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Жабу </a>  
    <a href = "#" class = "btn btn-primary" > Өзгерістерді сақтау </a>  
  </div>
</div>

Әдістері

.modal(опциялар)

Мазмұныңызды модаль ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

$ ( '#myModal' ). модальды ({
  пернетақта : жалған 
})

.modal('қосу')

Модальді қолмен ауыстырады.

$ ( '#myModal' ). модаль ( «қосу» )

.modal('шоу')

Модальді қолмен ашады.

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

.modal('жасыру')

Модальді қолмен жасырады.

$ ( '#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-pills" > 
  <li class = "active" ><a href = "#" > Тұрақты сілтеме </a></li>  
  <li сынып = "ашылмалы" id = "мәзір1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Түсіп қалу
      <b class = "caret" ></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-pills" > 
  <li класс = "ашылмалы" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Түсіп қалу
      <b class = "caret" ></b> 
    </a>
    <ul class = "ашылмалы мәзір" > 
      ...
    </ul>
  </li>
</ul>

Әдістері

$().ашылмалы тізім()

Берілген шарлау тақтасы немесе қойындыларды шарлау үшін мәзірлерді белсендіруге арналған бағдарламалық API.

ScrollSpy плагині айналдыру орнына негізделген шарлау мақсаттарын автоматты түрде жаңартуға арналған.

scrollspy бар шарлау тақтасының мысалы

Төмендегі аумақты айналдырып, навигация жаңартуын қараңыз. Ашылмалы ішкі элементтер де бөлектеледі. Байқап көріңіз!

bootstrap-scrollspy.js пайдалану

JavaScript арқылы scrollspy-ге қоңырау шалыңыз:

$ ( '#navbar' ). scrollspy ()

Белгілеу

Үстіңгі тақтадағы навигацияға айналдыру әрекетін оңай қосу data-spy="scroll"үшін, тыңшылық жасағыңыз келетін элементке қосыңыз (көбінесе бұл дене болады).

<body data-spy = "scroll" > ... </body>  

Әдістері

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

Scrollspy қолданбасын DOM ішінен элементтерді қосу немесе жоюмен бірге пайдаланған кезде, жаңарту әдісін келесідей шақыру керек:

$ ( '[data-spy="жылжу"]' ). әрбір ( функция () {  
  var $spy = $ ( бұл ). scrollspy ( «жаңарту» )
});

Опциялар

Оқиғалар

Бұл плагин жергілікті мазмұн арқылы ауысу үшін жылдам, динамикалық қойынды мен таблетка функционалдығын қосады.

Мысал қойындылары

Жасырын тақталар арасында, тіпті ашылмалы мәзірлер арқылы ауысу үшін төмендегі қойындыларды басыңыз.

• Үй
• Профиль
• Түсіп қалу
  • @fat
  • @mdo

bootstrap-tab.js пайдалану

JavaScript арқылы қойынды қойындыларын қосыңыз (әр қойындыны жеке белсендіру қажет):

$ ( '#myTab a' ). басыңыз ( функция ( e ) {  
  e . preventDefault ();
  $ ( бұл ). қойынды ( «көрсету» );
})

Жеке қойындыларды бірнеше жолмен белсендіруге болады:

$ ( '#myTab a[href="#profile"]' ). қойынды ( «көрсету» ); // Қойындыны аты бойынша таңдаңыз 
$ ( '#myTab a:first' ). қойынды ( «көрсету» ); // Бірінші қойындыны таңдаңыз 
$ ( '#myTab a:last' ). қойынды ( «көрсету» ); // Соңғы қойындыны таңдаңыз 
$ ( '#myTab li:eq(2) a' ). қойынды ( «көрсету» ); // Үшінші қойындыны таңдау (0-индекстелген) 

Белгілеу

data-toggle="tab"Сіз жай ғана көрсету немесе элементте ешқандай JavaScript жазбай қойындыны немесе таблетка шарлауын белсендіре аласыз data-toggle="pill". navҚойындыға және nav-tabsсыныптарын қосу ulжүктеу қойындысының стилін қолданады.

<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 = "active" ><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 = "параметрлер" > ... </div>  
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '#myTab a:last' ). қойынды ( «көрсету» );
  })
</script>

Оқиғалар

$ ( 'a[data-toggle="қойынды"]' ). қосулы ( 'көрсетілген' , функция ( e ) {   
  e . мақсатты // белсендірілген қойынды
  e . қатыстыTarget // алдыңғы қойынды
})

Кеңестер туралы

Джейсон Фрейм жазған тамаша jQuery.tipsy плагинінен шабыттандырылған; Құрал кеңестері кескіндерге сүйенбейтін жаңартылған нұсқа, анимациялар үшін css3 және жергілікті тақырыпты сақтау үшін деректер атрибуттары пайдаланылады.

Құралдар кеңестерін пайдалану мысалы

Көрсеткіштерді көру үшін төмендегі сілтемелердің үстіне апарыңыз:

bootstrap-tooltip.js пайдалану

Құрал кеңесін javascript арқылы іске қосыңыз:

$ ( '#мысал' ). кеңес ( опциялар )

Опциялар

Белгілеу

Өнімділік себептері бойынша, Tooltip және Popover деректер аписы қосылған. Оларды пайдаланғыңыз келсе, жай ғана селектор опциясын көрсетіңіз.

<a href = "#" rel = "tooltip" title = "бірінші кеңес" > меңзерді менің үстіне апарыңыз </a>   

Әдістері

$().кеңес(опциялар)

Құрал кеңесінің өңдеушісін элементтер жиынына тіркейді.

.tooltip('көрсету')

Элементтің құралдар кеңесін көрсетеді.

$ ( '#элемент' ). құралдар кеңесі ( «көрсету» )

.tooltip('жасыру')

Элементтің құралдар кеңесін жасырады.

$ ( '#элемент' ). құралдар кеңесі ( «жасыру» )

.құралдар кеңесі('қосқыш')

Элементтің құралдар кеңесін ауыстырады.

$ ( '#элемент' ). құралдар кеңесі ( «ауыстыру» )

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

Қосымша ақпаратты орналастыру үшін кез келген элементке iPad-дағы сияқты шағын мазмұн қабаттарын қосыңыз.

* Құрал кеңесін қосуды талап етеді

Мысал меңзерді жылжыту

Қалқымалы әрекетті іске қосу үшін меңзерді түйменің үстіне апарыңыз.

bootstrap-popover.js пайдалану

JavaScript арқылы қалқымалы файлдарды қосыңыз:

$ ( '#мысал' ). popover ( опциялар )

Опциялар

Белгілеу

Өнімділік себептері бойынша, Tooltip және Popover деректер аписы қосылған. Оларды пайдаланғыңыз келсе, жай ғана селектор опциясын көрсетіңіз.

Әдістері

$().popover(опциялар)

Элемент жинағы үшін қалқымалы элементтерді инициализациялайды.

.popover('шоу')

Қалқымалы элементтерді көрсетеді.

$ ( '#элемент' ). popover ( «шоу» )

.popover('жасыру')

Қалқымалы элементтерді жасырады.

$ ( '#элемент' ). popover ( «жасыру» )

.popover('қосу')

Қалқымалы элементтерді ауыстырады.

$ ( '#элемент' ). popover ( «қосу» )

Ескертулер туралы

Ескерту плагині ескертулерге жақын функцияларды қосуға арналған шағын класс болып табылады.

Мысал ескертулер

Ескертулер плагині тұрақты ескерту хабарларында жұмыс істейді және хабарларды блоктайды.

bootstrap-alert.js пайдалану

Javascript арқылы ескертуді өшіруді қосыңыз:

$ ( «.alert» ). ескерту ()

Белгілеу

data-dismiss="alert"Ескертуді жабу функциясын автоматты түрде беру үшін жай ғана жабу түймесін қосыңыз .

<a class = "close" data-dississ = "alert" href = "#" > × </a>   

Әдістері

$().alert()

Барлық ескертулерді жақын функционалдылықпен қосады. Ескертулер жабылған кезде жандануы үшін оларда бұрыннан қолданылған .fadeжәне сынып бар екеніне көз жеткізіңіз..in

.alert('жабу')

Ескертуді жабады.

$ ( «.alert» ). ескерту ( «жабу» )

Оқиғалар

Bootstrap ескерту сыныбы ескерту функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

$ ( '#менің ескертуім' ). байланыстыру ( 'жабық' , функция () {   
  // бірдеңе жасау...
})

туралы

Түймелердің көмегімен көбірек әрекет етіңіз. Басқару түймесі құралдар тақталары сияқты қосымша құрамдастарға арналған түймелер тобын көрсетеді немесе жасайды.

Қолдану мысалдары

Күйлер мен қосқыштар үшін түймелер плагинін пайдаланыңыз.

bootstrap-button.js пайдалану

JavaScript арқылы түймелерді қосыңыз:

$ ( '.nav-tabs' ). түймесі ()

Белгілеу

Деректер атрибуттары түйме плагинінің ажырамас бөлігі болып табылады. Әр түрлі белгілеу түрлері үшін төмендегі мысал кодын қараңыз.

<!-- Бір түймені ауыстырып қосуды белсендіру үшін data-toggle="button" қосыңыз -->
<button class = "btn" data-toggle = "button" > Жалғыз ауыстырып қосқыш </button>  
 
<!-- btn-group жүйесінде құсбелгі мәнерін ауыстыру үшін data-toggle="buttons-checkbox" қосыңыз -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Солға </button> 
  <button class = "btn" > Орта </button> 
  <button class = "btn" > Оң жақ </button> 
</div>
 
<!-- btn-group жүйесінде радио мәнерін ауыстыру үшін data-toggle="buttons-radio" қосыңыз -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Солға </button> 
  <button class = "btn" > Орта </button> 
  <button class = "btn" > Оң жақ </button> 
</div>

Әдістері

$() түймесі('қосу')

Басу күйін ауыстырады. Түйме белсендірілгендей көрініс береді.

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

$() түймесі («жүктеу»)

Түйменің күйін жүктеуге орнатады - түймені өшіреді және мәтінді жүктеу мәтініне ауыстырады. Мәтінді жүктеу деректер атрибуты арқылы түйме элементінде анықталуы керек data-loading-text.

<button class = "btn" data-loading-text = "материалдарды жүктеу..." > ... </button>   

$() түймесі («қалпына келтіру»)

Түйме күйін қалпына келтіреді - мәтінді бастапқы мәтінге ауыстырады.

$().түйме(жол)

Түйме күйін қалпына келтіреді - мәтінді кез келген деректермен анықталған мәтін күйіне ауыстырады.

<button class = "btn" data-complete-text = "аяқталды!" > ... </ түйме>   
<скрипт>
  $ ( '.btn' ). түймесі ( «аяқталды» )
</script>

туралы

Аккордеондар мен навигация сияқты жиналмалы құрамдастарға арналған негізгі стильдер мен икемді қолдау алыңыз.

* Transitions плагинін қосуды талап етеді.

Мысал аккордеон

Collapse плагинін пайдаланып, біз қарапайым аккордеон стиліндегі виджетті жасадық:

bootstrap-collapse.js пайдалану

JavaScript арқылы қосу:

$ ( «.collapse» ). құлау ()

Опциялар

Белгілеу

Жиналатын элементті басқаруды автоматты түрде тағайындау үшін элементке қосу data-toggle="collapse"және a түймешігін басыңыз. data-targetТөлсипат data-targetқысқартуды қолдану үшін CSS селекторын қабылдайды. collapseСыныпты жиналмалы элементке қосуды ұмытпаңыз . Оның әдепкі бойынша ашылғанын қаласаңыз, қосымша сыныпты қосыңыз in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  қарапайым жиналмалы
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Әдістері

.collapse(опциялар)

Мазмұнды жиналмалы элемент ретінде белсендіреді. Қосымша опцияларды қабылдайды object.

$ ( '#myCallpsible' ). құлау ({
  ауыстырып қосқыш : жалған 
})

.collapse('қосу')

Жиналатын элементті көрсетілген немесе жасырын етіп ауыстырады.

.collapse('шоу')

Жиналатын элементті көрсетеді.

.collapse('жасыру')

Жиналатын элементті жасырады.

Оқиғалар

Bootstrap құлдырау сыныбы құлдырау функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.

$ ( '#myCallpsible' ). қосулы ( 'жасырын' , функция () {   
  // бірдеңе жасау...
})

туралы

A generic plugin for cycling through elements. A merry-go-round.

Example carousel

Watch the slideshow below.

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

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.

‹ ›

Using bootstrap-carousel.js

Call via javascript:

$('.carousel').carousel()

Options

Markup

Data attributes are used for the previous and next conrols. Check out the example markup below.

<div id="myCarousel" class="carousel">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel 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>

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Events

Bootstrap's carousel class exposes two events for hooking into carousel functionality.

About

A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.

Example

Start typing in the field below to show the typeahead results.

Using bootstrap-typeahead.js

Call the typeahead via javascript:

$('.typeahead').typeahead()

Options

Markup

Add data attributes to register an element with typeahead functionality.

<input type="text" data-provide="typeahead">

Methods

.typeahead(options)

Initializes an input with a typeahead.