Bootstrap үшін Javascript

Bootstrap құрамдастарын өмірге әкеліңіз — қазір 12 реттелетін jQuery плагиндерімен.

Модаль

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

Ашылмалы тізімдер

Осы қарапайым плагиннің көмегімен Bootstrap ішіндегі кез келген дерлік ашылмалы мәзірлерді қосыңыз. Bootstrap шарлау тақтасында, қойындыларда және таблеткаларда толық ашылмалы мәзір қолдауын ұсынады.

Scrollspy

Айналдыру орнына негізделген ағымдағы белсенді сілтемені көрсету үшін шарлау тақтасындағы сілтемелерді автоматты түрде жаңарту үшін scrollspy пайдаланыңыз.

Ауыстырылатын қойындылар

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

Кеңестер

jQuery Tipsy плагинінің жаңа нұсқасы, Кеңестер кескіндерге сенбейді — олар анимациялар үшін CSS3 және жергілікті тақырыпты сақтау үшін деректер атрибуттарын пайдаланады.

Поповерлер *

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

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

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

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

Түймелер

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

Жыйрату

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

Карусель

Мазмұнның интерактивті слайд-шоуын ұсынғыңыз келетін кез келген мазмұнды жасаңыз.

Теру алды

Кез келген пішін мәтінін енгізу арқылы талғампаз басқыштарды жылдам жасауға арналған қарапайым, оңай кеңейтілген плагин.

Өтпелер *

Қарапайым өту әсерлері үшін модальдарда сырғыту немесе ескертулерді өшіру үшін bootstrap-transition.js бір рет қосыңыз.

* Плагиндердегі анимация үшін қажет

Ескерту! Барлық JavaScript плагиндері jQuery бағдарламасының соңғы нұсқасын қажет етеді.

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

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

Файлды жүктеп алу

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

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

Тікелей демо

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

Демо модальды іске қосыңыз

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

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

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

Опциялар

Аты түрі әдепкі сипаттамасы
фон логикалық рас Модаль-фон элементін қамтиды. Немесе, staticшерткенде модальды жаппайтын фон үшін көрсетіңіз.
пернетақта логикалық рас Escape пернесі басылғанда модальды жабады
көрсету логикалық рас Баптандыру кезінде модальды көрсетеді.

Белгілеу

Сіз JavaScript бір жолын жазбай-ақ өз бетіңізде модальдарды оңай белсендіре аласыз. Модальды элемент идентификаторына сәйкес келетін data-toggle="modal"контроллер элементіне жай ғана орнатыңыз және басқан кезде ол модальды іске қосады.data-target="#foo"href="#foo"

Сондай-ақ, модальды данаға опцияларды қосу үшін оларды басқару элементінде немесе модальды белгілеудің өзінде қосымша деректер атрибуттары ретінде қосыңыз.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Модальді іске қосу </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dississ = "modal" > × </button>
  4. <h3> Модаль тақырыбы </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Бір тамаша дене… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dississ = "modal" > Жабу </a>
  11. <a href = "#" class = "btn btn-primary" > Өзгерістерді сақтау </a>
  12. </div>
  13. </div>
Ескерту! Модалыңыздың жанданғанын және сыртқа шығуын қаласаңыз, элементке .fadeкласс қосыңыз .modal(оны әрекетте көру үшін демонстрацияны қараңыз) және bootstrap-transition.js қосыңыз.

Әдістері

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

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

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

.modal('қосу')

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

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

.modal('шоу')

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

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

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

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

  1. $ ( '#myModal' ). модаль ( «жасыру» )

Оқиғалар

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

Оқиға Сипаттама
көрсету showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
көрсетілген Бұл оқиға модаль пайдаланушыға көрінетін болған кезде іске қосылады (css ауысуларының аяқталуын күтеді).
жасыру Бұл оқиға даналық hideәдісі шақырылған кезде бірден іске қосылады.
жасырын Бұл оқиға модальді пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).
  1. $ ( '#myModal' ). қосулы ( 'жасырын' , функция () {
  2. // бірдеңе жасау...
  3. })

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

Файлды жүктеп алу

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

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

@май

Жарнама леггинстер keytar, brunch id art party dolor labore. Пичфорк yr enim lo-fi олар qui сатылғанға дейін. Tumblr фермадан үстелге дейін велосипед құқығы. Anim keffiyeh carles кардиганы. Велит Сейтан Максвинидің фотостенд 3 қасқыр ай irure. Косби жемпір ломо джинсы шорттары, Вильямсбург капюшон минимум, сіз олар туралы естімеген боларсыз және кардиган сенімді қорын culpa biodiesel Уэс Андерсон эстетикалық. Nihil tattooed accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Вениам марфа мұртты скейтборд, майлы фугиат велит айыр сақалы. Фриган сақалы Mcsweeney's Vero. Cupidatat four loko nisi, ea helvetica nulla carles. Татуировкасы бар косби жемпір азық-түлік жүк көлігі, mcsweeney's quis non freegan винил. Ло-фи Вес Андерсон +1 сарториалды. Карлестің эстетикалық емес жаттығулары нәзік емес. Бруклин майсыздандыратын қолөнер сырасы вице Кейтар Десерунт.

бір

Кез-келген басқа нұсқаны пайдаланыңыз. Fap крафт сырасы deserunt скейтборд ea. Lomo велосипед құқықтарын қорғау banh mi, Velit ea Sunt келесі деңгейлі локаварлық бір текті кофе магна вениам. High life идентификаторы винил, жаңғырық саябағы quis aliquip banh mi pitchfork. Vero VHS est adipisicing. DIY минимум мессенджерлік сөмке. Cred ex in, 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.

Keytar twee блогы, culpa messenger bag marfa whatever delectus food truck. Synth идентификаторы болжалды. Locavore sed helvetica клише ирония, сіз олар туралы естімеген боларсыз. Олар сатылып кеткенге дейін жұмыс істейтін таңдаулы орын, Терри Ричардсон керемет таңғы ас. Кардиган қолөнер сырасы сеитан дайын велит. VHS chambray laboris tempor veniam. Аним моллит миним commodo ullamco thundercats.


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

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

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

Белгілеу

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

  1. <body data-spy = "scroll" > ... </body>
Ескерту! Шарлау тақтасының сілтемелерінде шешілетін идентификатор мақсаттары болуы керек. Мысалы, <a href="#home">home</a>домдағы сияқты нәрсеге міндетті сәйкес келеді <div id="home"></div>.

Әдістері

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

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

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

Опциялар

Аты түрі әдепкі сипаттамасы
офсет саны 10 Айналдыру орнын есептеу кезінде жоғарыдан ығысу үшін пикселдер.

Оқиғалар

Оқиға Сипаттама
белсендіру Бұл оқиға айналдыру арқылы жаңа элемент белсендірілген сайын іске қосылады.

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

Файлды жүктеп алу

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

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

Шикі джинсы Остин олар туралы естімеген боларсыз. Nesciunt tofu stumptown aliqua, ретро синтетикалық тазалау шебері. Мұртты клише, Вильямсбург Карлес Вегетариандық Хелветика. Reprehenderit қасапшы ретро keffiyeh dreamcatcher synth. Косби жемпірі eu Banh mi, qui irure Терри Ричардсон бұрынғы кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, қасапшы nisi qui voluptate.

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. e . preventDefault ();
  3. $ ( бұл ). қойынды ( «көрсету» );
  4. })

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

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

Белгілеу

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

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

Оқиғалар

Оқиға Сипаттама
көрсету Бұл оқиға қойындылар көрсетілімінде іске қосылады, бірақ жаңа қойынды көрсетілмей тұрып. Белсенді қойындыны және алдыңғы белсенді қойындыны (бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
көрсетілген Бұл оқиға қойынды көрсетілгеннен кейін қойындылар көрсетілімінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны (бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
  1. $ ( 'a[data-toggle="қойынды"]' ). қосулы ( 'көрсетілген' , функция ( e ) {
  2. e . мақсатты // белсендірілген қойынды
  3. e . қатыстыTarget // алдыңғы қойынды
  4. })

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

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

Файлды жүктеп алу

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

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

Тар шалбар келесі деңгейдегі keffiyeh сіз олар туралы естімеген шығарсыз. Фотостенд сақал шикі джинсы баспа вегетариандық хабаршы сөмкесі Stumptown. Фермадан үстелге арналған сейтан, Mcsweeney's fixie sustainable quinoa 8-бит американдық киімінде терри Ричардсон винил камерасы бар . Beard Stumptown, кардигандар banh mi lomo thundercats. Тофу биодизель Вильямсбург Марфа, төрт локо Максвинидің вегетариандық камерасын тазартады. Шынында да ирониялық қолөнерші кез келген keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw джинсы бір тегі кофе вирусы.


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

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

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

Опциялар

Аты түрі әдепкі сипаттамасы
анимация логикалық рас құралдар кеңесіне css өшіру көшуін қолданыңыз
орналастыру string|функциясы 'жоғарғы' құралдар кеңесін қалай орналастыру керек - жоғарғы | төменгі | сол жақ | дұрыс
селектор жол жалған Егер селектор қамтамасыз етілсе, құралдар кеңесі нысандары көрсетілген мақсаттарға беріледі.
тақырып жол | функциясы '' «тақырып» тегі болмаса, әдепкі тақырып мәні
триггер жол 'меңгеру' құралдар кеңесі қалай іске қосылады - меңзерді | фокус | нұсқаулық
кешіктіру саны | объект 0

құралдар кеңесін көрсету және жасыру кідірісі (мс) - қолмен триггер түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл:delay: { show: 500, hide: 100 }

Ескерту! Деректер атрибуттарын пайдалану арқылы жеке құралдар кеңестеріне арналған опцияларды балама түрде көрсетуге болады.

Белгілеу

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

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

Әдістері

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Файлды жүктеп алу

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

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


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

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

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

Опциялар

Аты түрі әдепкі сипаттамасы
анимация логикалық рас құралдар кеңесіне css өшіру көшуін қолданыңыз
орналастыру string|функциясы 'дұрыс' қалқымалы терезені қалай орналастыру керек - жоғарғы | төменгі | сол жақ | дұрыс
селектор жол жалған егер селектор қамтамасыз етілсе, құралдар кеңесінің нысандары көрсетілген мақсаттарға беріледі
триггер жол 'меңгеру' құралдар кеңесі қалай іске қосылады - меңзерді | фокус | нұсқаулық
тақырып жол | функциясы '' «тақырып» төлсипаты болмаса, әдепкі тақырып мәні
мазмұны жол | функциясы '' әдепкі мазмұн мәні, егер `data-content` төлсипаты болмаса
кешіктіру саны | объект 0

қалқымалы файлды көрсету және жасыру кідірісі (мс) - қолмен триггер түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл:delay: { show: 500, hide: 100 }

Ескерту! Деректер атрибуттарын пайдалану арқылы жеке қалқандарға арналған опцияларды балама түрде көрсетуге болады.

Белгілеу

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

Әдістері

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

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

.popover('шоу')

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

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

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

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

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

.popover('қосу')

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

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

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

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

Жүктеп алу

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

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

Қасиетті гуакамоле! Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз.

О, шап! Сізде қате бар!

Осыны және оны өзгертіп, әрекетті қайталаңыз. Дүние моллис, est commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.

Бұл әрекетті орындаңыз Немесе мұны істе


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

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

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

Белгілеу

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

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

Әдістері

$().alert()

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

.alert('жабу')

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

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

Оқиғалар

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

Оқиға Сипаттама
жабық closeБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
жабық Бұл оқиға ескерту жабылған кезде іске қосылады (css ауысуларының аяқталуын күтеді).
  1. $ ( '#менің ескертуім' ). байланыстыру ( 'жабық' , функция () {
  2. // бірдеңе жасау...
  3. })

туралы

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

Файлды жүктеп алу

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

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

Мемлекеттік
Жалғыз ауыстырып қосқыш
Құсбелгі ұяшығы
Радио

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

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

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

Белгілеу

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

  1. <!-- Бір түймені ауыстырып қосуды белсендіру үшін data-toggle="button" қосыңыз -->
  2. <button class = "btn" data-toggle = "button" > Жалғыз ауыстырып қосқыш </button>
  3.  
  4. <!-- btn-group жүйесінде құсбелгі мәнерін ауыстыру үшін data-toggle="buttons-checkbox" қосыңыз -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Солға </button>
  7. <button class = "btn" > Орта </button>
  8. <button class = "btn" > Оң жақ </button>
  9. </div>
  10.  
  11. <!-- btn-group жүйесінде радио мәнерін ауыстыру үшін data-toggle="buttons-radio" қосыңыз -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Солға </button>
  14. <button class = "btn" > Орта </button>
  15. <button class = "btn" > Оң жақ </button>
  16. </div>

Әдістері

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

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

Ескерту! data-toggleТөлсипатты пайдалану арқылы түймені автоматты ауыстыруды қосуға болады .
  1. <button class = "btn" data-toggle = "button" > </button>

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

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

  1. <button class = "btn" data-loading-text = "материалдарды жүктеу..." > ... </button>
Ескерту! Firefox өшірілген күйді бет жүктемелерінде сақтайды . Бұл үшін уақытша шешім пайдалану болып табылады autocomplete="off".

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

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

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

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

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

туралы

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

Файлды жүктеп алу

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

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

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

Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптады Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, емес cupidatat скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сырасының зертханасы Вес Андерсон Cred nesciunt sapiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.
Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптады Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, емес cupidatat скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сырасының зертханасы Вес Андерсон Cred nesciunt sapiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.
Anim pariatur kliche reprehenderit, enim eiusmod жоғары өмірді айыптады Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, емес cupidatat скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сырасының зертханасы Вес Андерсон Cred nesciunt sapiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты VHS естімеген шығарсыз.

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

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

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

Опциялар

Аты түрі әдепкі сипаттамасы
ата-ана селектор жалған Егер селектор болса, осы жиналмалы элемент көрсетілген кезде көрсетілген тектік астындағы барлық жиналмалы элементтер жабылады. (дәстүрлі аккордеон әрекетіне ұқсас)
ауыстырып қосқыш логикалық рас Шақыру кезінде жиналатын элементті ауыстырады

Белгілеу

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

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. қарапайым жиналмалы
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Ескерту! Жиналмалы басқару элементіне аккордеон тәрізді топты басқаруды қосу үшін деректер төлсипатын қосыңыз data-parent="#selector". Бұл әрекетті көру үшін демонстрацияны қараңыз.

Әдістері

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

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

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

.collapse('қосу')

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

.collapse('шоу')

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

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

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

Оқиғалар

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

Оқиға Сипаттама
көрсету showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
көрсетілген Бұл оқиға құлату элементі пайдаланушыға көрінетін болған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).
жасыру Бұл оқиға hideәдіс шақырылған кезде бірден іске қосылады.
жасырын Бұл оқиға құлату элементі пайдаланушыдан жасырылған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді).
  1. $ ( '#myCallpsible' ). қосулы ( 'жасырын' , функция () {
  2. // бірдеңе жасау...
  3. })

туралы

Кез келген пішін мәтінін енгізу арқылы талғампаз басқыштарды жылдам жасауға арналған қарапайым, оңай кеңейтілген плагин.

Файлды жүктеп алу

Мысал

Теру нәтижелерін көрсету үшін төмендегі өріске теруді бастаңыз.


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

Javascript арқылы терушіге қоңырау шалыңыз:

  1. $ ( '.алдыда' ). теру ()

Опциялар

Аты түрі әдепкі сипаттамасы
көзі массив [ ] Сұрау қажет деректер көзі.
заттар саны 8 Ашылмалы тізімде көрсетілетін элементтердің максималды саны.
сәйкестендіргіш функциясы регистрді сезбейтін Сұрау элементке сәйкес келетінін анықтау үшін қолданылатын әдіс. itemСұрау сыналатын жалғыз дәлелді қабылдайды . Ағымдағы сұрауға арқылы қол жеткізіңіз this.query. trueЕгер сұрау сәйкес келсе , логикалық мәнді қайтарыңыз .
сұрыптаушы функциясы дәл сәйкестік,
регистрге сезімтал,
регистрге сезімтал емес
Автотолтыру нәтижелерін сұрыптау үшін қолданылатын әдіс. Жалғыз аргументті қабылдайды itemsжәне теру данасы ауқымына ие. Ағымдағы сұрауға сілтеме арқылы this.query.
бөлектеуіш функциясы барлық әдепкі сәйкестіктерді бөлектейді Автотолтыру нәтижелерін бөлектеу үшін қолданылатын әдіс. Жалғыз аргументті қабылдайды itemжәне теру данасы ауқымына ие. html қайтару керек.

Белгілеу

Теру функциясы бар элементті тіркеу үшін деректер атрибуттарын қосыңыз.

  1. <енгізу түрі = «мәтін» деректермен қамтамасыз ету = «теру » >

Әдістері

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

Теру басы бар енгізуді инициализациялайды.