JavaScript
Bootstrap құрамдастарын ондаған реттелетін jQuery плагиндерімен өмірге келтіріңіз. Олардың барлығын немесе бір-бірден оңай қосыңыз.
Bootstrap құрамдастарын ондаған реттелетін jQuery плагиндерімен өмірге келтіріңіз. Олардың барлығын немесе бір-бірден оңай қосыңыз.
Плагиндерді жеке (Bootstrap жеке *.js
файлдарын пайдалану арқылы) немесе барлығын бірден (пайдалану bootstrap.js
немесе кішірейту арқылы bootstrap.min.js
) қосуға болады.
Екеуі де bootstrap.js
және bootstrap.min.js
бір файлдағы барлық плагиндерді қамтиды. Тек біреуін қосыңыз.
Кейбір плагиндер мен CSS құрамдастары басқа плагиндерге байланысты. Плагиндерді жеке қоссаңыз, құжаттарда осы тәуелділіктерді тексеріңіз. Сондай-ақ, барлық плагиндер jQuery-ге тәуелді екенін ескеріңіз (бұл jQuery плагин файлдарынан бұрын қосылуы керек дегенді білдіреді). jQuery нұсқасының қай нұсқаларына қолдау көрсетілетінін көру үшін біздің кеңестерімізді қараңыз.bower.json
Барлық Bootstrap плагиндерін JavaScript-тің бір жолын жазбай-ақ тек түзету API арқылы пайдалануға болады. Бұл Bootstrap бірінші сыныпты API және плагинді пайдалану кезінде бірінші кезекте ескеру керек.
Айтпақшы, кейбір жағдайларда бұл функцияны өшіру қажет болуы мүмкін. Сондықтан, біз сонымен қатар аттар кеңістігіндегі құжаттағы барлық оқиғаларды байланыстыру арқылы API деректер төлсипатын өшіру мүмкіндігін береміз data-api
. Бұл келесідей көрінеді:
Сонымен қатар, белгілі бір плагинге мақсат қою үшін, плагиннің атын келесідей деректер-api аттар кеңістігімен бірге аттар кеңістігі ретінде қосыңыз:
Бір элементте бірнеше плагиндердің деректер атрибуттарын пайдаланбаңыз. Мысалы, түймеде құралдар кеңесі де, модальды ауыстырып-қосқыш та болмайды. Мұны орындау үшін орау элементін пайдаланыңыз.
Сондай-ақ, барлық Bootstrap плагиндерін тек JavaScript API арқылы пайдалана алуыңыз керек деп есептейміз. Барлық жалпыға ортақ API интерфейстері жалғыз, тізбектелетін әдістер болып табылады және әрекет етілген жинақты қайтарады.
Барлық әдістер қосымша опциялар нысанын, белгілі бір әдіске бағытталған жолды немесе ештеңені (әдепкі әрекеті бар плагинді бастайтын) қабылдауы керек:
Әрбір плагин сонымен қатар өзінің шикі конструкторын Constructor
сипатқа көрсетеді: $.fn.popover.Constructor
. Белгілі бір плагин данасын алғыңыз келсе, оны тікелей элементтен шығарып алыңыз: $('[rel="popover"]').data('popover')
.
Constructor.DEFAULTS
Плагин нысанын өзгерту арқылы плагиннің әдепкі параметрлерін өзгертуге болады :
Кейде басқа UI құрылымдарымен Bootstrap плагиндерін пайдалану қажет. Мұндай жағдайларда аттар кеңістігінің соқтығысуы кейде орын алуы мүмкін. Бұл орын алса, .noConflict
мәнін қайтарғыңыз келетін плагинге қоңырау шалуыңызға болады.
Bootstrap көптеген плагиндердің бірегей әрекеттері үшін реттелетін оқиғаларды қамтамасыз етеді. Әдетте, олар инфинитив және өткен шақ түрінде келеді - мұнда инфинитив (мыс. show
) оқиғаның басында іске қосылады және оның өткен шақ формасы (мыс. shown
) іс-әрекеттің аяқталуы кезінде іске қосылады.
3.0.0 нұсқасы бойынша барлық Bootstrap оқиғалары аттар кеңістігі болып табылады.
Барлық инфинитив оқиғалар preventDefault
функционалдылықты қамтамасыз етеді. Бұл әрекет басталмай тұрып оның орындалуын тоқтату мүмкіндігін береді.
Bootstrap jQuery плагиндерінің әрқайсысының нұсқасына VERSION
плагин конструкторының қасиеті арқылы қол жеткізуге болады. Мысалы, көмекші плагин үшін:
Bootstrap плагиндері әсіресе JavaScript өшірілген кезде жақсы жұмыс істемейді. Бұл жағдайда пайдаланушы тәжірибесіне мән берсеңіз, пайдаланушыларыңызға <noscript>
жағдайды (және JavaScript-ті қайта қосу жолын) түсіндіру үшін пайдаланыңыз және/немесе өзіңіздің теңшелетін резервтеріңізді қосыңыз.
Bootstrap Prototype немесе jQuery UI сияқты үшінші тарап JavaScript кітапханаларына ресми түрде қолдау көрсетпейді . Оқиғаларға және аттар кеңістігіне қарамастан .noConflict
, өз бетінше түзету қажет үйлесімділік мәселелері болуы мүмкін.
Қарапайым ауысу әсерлері transition.js
үшін басқа JS файлдарымен бірге бір рет қосыңыз. Егер сіз құрастырылған (немесе кішірейтілген) қолданып жатсаңыз, bootstrap.js
оны қосудың қажеті жоқ — ол қазірдің өзінде бар.
Transition.js - оқиғаларға арналған негізгі көмекші, transitionEnd
сонымен қатар CSS ауысу эмуляторы. Оны басқа плагиндер CSS өту қолдауын тексеру және ілулі ауысуларды ұстау үшін пайдаланады.
transition.js
Өтпелер жүктелгеннен кейін (немесе bootstrap.js
жағдайға bootstrap.min.js
қарай ) келуі керек келесі JavaScript үзіндісі арқылы жаһандық түрде өшірілуі мүмкін:
Модальдер жеңілдетілген, бірақ икемді, ең аз қажетті функционалдығы және ақылды әдепкі параметрлері бар диалогтық шақырулар.
Басқасы әлі көрініп тұрғанда, модальды ашпауды ұмытпаңыз. Бір уақытта бірнеше модальды көрсету пайдаланушылық кодты қажет етеді.
Модалдың сыртқы түріне және/немесе функционалдығына әсер ететін басқа компоненттерді болдырмау үшін әрқашан модальдың HTML кодын құжатыңыздың жоғарғы деңгейлі орнына орналастыруға тырысыңыз.
Модельдерді мобильді құрылғыларда қолдануға қатысты кейбір ескертулер бар. Толық ақпаратты шолғышты қолдау құжаттарын қараңыз.
HTML5 өзінің семантикасын қалай анықтайтынына байланысты autofocus
HTML төлсипаты Bootstrap модальдарында ешқандай әсер етпейді. Дәл осындай әсерге жету үшін кейбір пайдаланушы JavaScript пайдаланыңыз:
Төменгі деректемедегі үстіңгі деректеме, негізгі және әрекеттер жиынтығы бар көрсетілетін модаль.
Төмендегі түймені басу арқылы модальды JavaScript арқылы ауыстырыңыз. Ол төмен қарай сырғып, беттің жоғарғы жағынан өшеді.
Модаль тақырыбына сілтеме жасай отырып, role="dialog"
және қосуды ұмытпаңыз , -ге және өзіне .aria-labelledby="..."
.modal
role="document"
.modal-dialog
Оған қоса, модальды диалогтың сипаттамасын aria-describedby
on арқылы бере аласыз .modal
.
YouTube бейнелерін модальдарға ендіру үшін ойнатуды автоматты түрде тоқтату және т.б. үшін Bootstrap қолданбасында емес қосымша JavaScript қажет. Қосымша ақпарат алу үшін осы пайдалы Stack Overflow жазбасын қараңыз .
Модальдердің екі қосымша өлшемі бар, оларды модификатор кластары арқылы алуға болады .modal-dialog
.
Көру үшін өшіп емес, жай ғана пайда болатын модальдар үшін .fade
сыныпты модальды белгілеуден алып тастаңыз.
Модаль ішінде Bootstrap тор жүйесінің артықшылығын пайдалану үшін жай ғана ұяшықтарды ішіне енгізіп, .row
содан .modal-body
кейін қалыпты тор жүйесінің сыныптарын пайдаланыңыз.
Барлығы бірдей модальды іске қосатын, мазмұны сәл басқаша болатын түймелер тобы бар ма? Қай түйме басылғанына байланысты модальдың мазмұнын өзгерту үшін event.relatedTarget
және HTML data-*
атрибуттарын (мүмкін jQuery арқылы ) пайдаланыңыз. Қосымша мәліметтер алу үшін Modal Events құжаттарын қараңыз relatedTarget
,
Модальды плагин сұрау бойынша деректер атрибуттары немесе JavaScript арқылы жасырын мазмұнды ауыстырады. Ол сондай-ақ әдепкі айналдыру әрекетін қайта анықтауға қосады және .modal-open
модальдан тыс басқанда көрсетілген модальдарды алып тастау үшін басу аймағын қамтамасыз ету үшін a жасайды.<body>
.modal-backdrop
JavaScript жазбай модальды белсендіріңіз. data-toggle="modal"
Түймешік сияқты контроллер элементіне data-target="#foo"
немесе href="#foo"
ауыстырып-қосу үшін белгілі бір модальға мақсат қою үшін орнатыңыз .
myModal
JavaScript бір жолымен идентификаторы бар модальды шақырыңыз :
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-backdrop=""
.
Аты | түрі | әдепкі | сипаттамасы |
---|---|---|---|
фон | логикалық немесе жол'static' |
рас | Модаль-фон элементін қамтиды. Немесе, static шерткенде модальды жаппайтын фон үшін көрсетіңіз. |
пернетақта | логикалық | рас | Escape пернесі басылғанда модальды жабады |
көрсету | логикалық | рас | Баптандыру кезінде модальды көрсетеді. |
қашықтан | жол | жалған | Бұл опция v3.3.0 нұсқасынан бері ескірген және v4 нұсқасында жойылған. Оның орнына клиенттік үлгіні немесе деректерді байланыстыру құрылымын пайдалануды немесе jQuery.load файлын өзіңіз шақыруды ұсынамыз. Қашықтағы URL мекенжайы берілсе, мазмұн jQuery әдісі арқылы бір рет жүктеледі және div |
.modal(options)
Мазмұныңызды модаль ретінде белсендіреді. Қосымша опцияларды қабылдайды object
.
.modal('toggle')
Модальді қолмен ауыстырады. Модаль іс жүзінде көрсетілмей немесе жасырылғанға дейін (яғни shown.bs.modal
немесе hidden.bs.modal
оқиға болғанға дейін) қоңырау шалушыға қайтарады.
.modal('show')
Модальді қолмен ашады. Модаль нақты көрсетілмей тұрып (яғни shown.bs.modal
оқиға болғанға дейін) қоңырау шалушыға оралады.
.modal('hide')
Модальді қолмен жасырады. Модаль шынымен жасырылғанға дейін (яғни hidden.bs.modal
оқиға болғанға дейін) қоңырау шалушыға қайтарады.
.modal('handleUpdate')
Модальдың орнын солға қарай секіртетін модаль пайда болған жағдайда айналдыру жолағына қарсы тұру үшін қайта реттейді.
Модаль ашық болған кезде биіктігі өзгергенде ғана қажет.
Bootstrap модальды класы модальдық функционалдылыққа қосылу үшін бірнеше оқиғаларды көрсетеді.
Барлық модальдық оқиғалар модальдың өзіне (яғни <div class="modal">
) жіберіледі.
Оқиға түрі | Сипаттама |
---|---|
show.bs.modal | show Бұл оқиға дана әдісі шақырылған кезде бірден іске қосылады. Егер басу себеп болса, басылған элемент relatedTarget оқиғаның сипаты ретінде қолжетімді болады. |
көрсетілген.bs.modal | Бұл оқиға модаль пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). Егер басу себеп болса, басылған элемент relatedTarget оқиғаның сипаты ретінде қолжетімді болады. |
hide.bs.modal | Бұл оқиға даналық hide әдісі шақырылған кезде бірден іске қосылады. |
hidden.bs.modal | Бұл оқиға модальді пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
жүктелген.б.модальды | Бұл оқиға модаль remote опцияны пайдаланып мазмұнды жүктеген кезде іске қосылады. |
Осы қарапайым плагиннің көмегімен кез келген дерлік, соның ішінде шарлау тақтасы, қойындылар және таблеткалар ашылмалы мәзірлерді қосыңыз.
.open
Деректер атрибуттары немесе JavaScript арқылы ашылмалы плагин негізгі тізім элементіндегі сыныпты ауыстыру арқылы жасырын мазмұнды (ашылмалы мәзірлер) ауыстырады .
.dropdown-backdrop
Мобильді құрылғыларда ашылмалы тізімді ашу мәзірден тыс түрту кезінде ашылмалы мәзірлерді жабу үшін түрту аймағы ретінде қосады , бұл тиісті iOS қолдауына қойылатын талап. Бұл ашық ашылмалы мәзірден басқа ашылмалы мәзірге ауысу ұялы телефонда қосымша түртуді қажет ететінін білдіреді.
Ескертпе: data-toggle="dropdown"
Атрибут қолданба деңгейінде ашылмалы мәзірлерді жабу үшін негізделген, сондықтан оны әрқашан пайдалану жақсы идея.
Ашылмалы тізімді ауыстырып қосу data-toggle="dropdown"
үшін сілтемеге немесе түймеге қосыңыз.
Сілтеме түймелері арқылы URL мекенжайларын сақтау үшін data-target
орнына төлсипатты пайдаланыңыз href="#"
.
JavaScript арқылы ашылмалы тізімдерге қоңырау шалыңыз:
data-toggle="dropdown"
әлі де қажетАшылмалы тізімге JavaScript арқылы қоңырау шалуыңызға немесе оның орнына data-api пайдалануыңызға қарамастан, ашылмалы тізімнің data-toggle="dropdown"
іске қосу элементінде әрқашан болуы қажет.
Жоқ
$().dropdown('toggle')
Берілген шарлау тақтасының немесе қойындылы шарлаудың ашылмалы мәзірін ауыстырады.
Барлық ашылмалы оқиғалар .dropdown-menu
негізгі элементінде іске қосылады.
Барлық ашылмалы оқиғалардың relatedTarget
мәні ауыспалы анкерлік элемент болып табылатын сипатқа ие.
Оқиға түрі | Сипаттама |
---|---|
show.bs.ашылатын тізім | Бұл оқиға шоу данасы әдісі шақырылғанда бірден іске қосылады. |
көрсетілген.bs.ашылмалы тізім | Бұл оқиға ашылмалы тізім пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
жасыру.б. ашылмалы тізім | Бұл оқиға жасыру данасы әдісі шақырылған кезде бірден іске қосылады. |
жасырын.б. ашылмалы тізім | Бұл оқиға ашылмалы тізімнің пайдаланушыдан жасырылуын аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
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.
Вениам марфа мұртты скейтборд, майлы фугиат велит айыр сақалы. Фриган сақалы 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.
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. Сапиенте синтез идентификаторы. Locavore sed helvetica клише ирония, найзағайлар, бәлкім, сіз олар туралы естімеген боларсыз. Олар сатылып кеткенге дейін жұмыс істейтін таңдаулы орын, Терри Ричардсон керемет таңғы ас. Кардиган қолөнер сырасы сеитан дайын велит. VHS chambray laboris tempor veniam. Аним моллит миним commodo ullamco thundercats.
Шарлау тақтасының сілтемелерінде шешілетін идентификатор мақсаттары болуы керек. Мысалы, <a href="#home">home</a>
міндетті түрде DOM ішіндегі нәрсеге сәйкес келеді <div id="home"></div>
.
:visible
элементтер еленбейді:visible
jQuery-ге сәйкес келмейтін мақсатты элементтер еленбейді және олардың сәйкес шарлау элементтері ешқашан бөлектелмейді.
Іске асыру әдісіне қарамастан, scrollspy position: relative;
сіз тыңшылық жасап жатқан элементте пайдалануды талап етеді. Көп жағдайда бұл <body>
. -дан басқа элементтерде айналдыру кезінде жиынтық және қолданбалы <body>
болуын ұмытпаңыз .height
overflow-y: scroll;
Үстіңгі тақтадағы шарлауға айналдыру әрекетін оңай қосу data-spy="scroll"
үшін, шпиондық жасағыңыз келетін элементке қосыңыз (көбінесе бұл <body>
). Содан кейін кез келген Bootstrap компонентінің data-target
негізгі элементінің идентификаторы немесе сыныбы бар төлсипатты қосыңыз..nav
CSS-ті қосқаннан кейін position: relative;
JavaScript арқылы scrollspy-ге қоңырау шалыңыз:
.scrollspy('refresh')
Scrollspy қолданбасын DOM ішінен элементтерді қосу немесе жоюмен бірге пайдаланған кезде, жаңарту әдісін келесідей шақыру керек:
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-offset=""
.
Аты | түрі | әдепкі | сипаттамасы |
---|---|---|---|
офсет | саны | 10 | Айналдыру орнын есептеу кезінде жоғарыдан ығысу үшін пикселдер. |
Оқиға түрі | Сипаттама |
---|---|
activate.bs.scrollspy | Бұл оқиға айналдыру арқылы жаңа элемент белсендірілген сайын іске қосылады. |
Тіпті ашылмалы мәзірлер арқылы жергілікті мазмұнның тақталары арқылы өту үшін жылдам, динамикалық қойынды функциясын қосыңыз. Кірістірілген қойындыларға қолдау көрсетілмейді.
Шикі джинсы Остин олар туралы естімеген боларсыз. 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Бұл плагин қойынды аймақтарын қосу үшін қойындылы шарлау құрамдасын кеңейтеді.
JavaScript арқылы қойынды қойындыларын қосыңыз (әр қойындыны жеке белсендіру қажет):
Жеке қойындыларды бірнеше жолмен белсендіруге болады:
data-toggle="tab"
Сіз жай ғана көрсету немесе элементте JavaScript жазбай-ақ қойындыны немесе таблетка шарлауын белсендіре аласыз data-toggle="pill"
. nav
Қойындыға және nav-tabs
сыныптарын қосу ul
Bootstrap қойындысының сәндеуін қолданады , ал nav
және nav-pills
сыныптарын қосқанда таблетка стилі қолданылады .
Қойындыларды өшіру .fade
үшін әрқайсысына қосыңыз .tab-pane
. Бірінші қойынды тақтасында .in
бастапқы мазмұнды көрінетін ету керек.
$().tab
Қойынды элементін және мазмұн контейнерін белсендіреді. Қойындыда DOM ішіндегі контейнер түйініне бағытталған не а data-target
немесе болуы керек. href
Жоғарыдағы мысалдарда қойындылар төлсипаттары <a>
бар s болып табылады.data-toggle="tab"
.tab('show')
Берілген қойындыны таңдап, оның байланысты мазмұнын көрсетеді. Бұрын таңдалған кез келген басқа қойынды таңдалмайды және оның байланысты мазмұны жасырылады. Қойындылар тақтасы нақты көрсетілмей тұрып (яғни shown.bs.tab
оқиға орын алмас бұрын) қоңырау шалушыға оралады.
Жаңа қойындыны көрсеткенде оқиғалар келесі ретпен іске қосылады:
hide.bs.tab
(ағымдағы белсенді қойындыда)show.bs.tab
(көрсетілетін қойындыда)hidden.bs.tab
(алдыңғы белсенді қойындыда hide.bs.tab
оқиғамен бірдей)shown.bs.tab
(жаңа ғана көрсетілген қойындыда, оқиға үшін бірдей show.bs.tab
)Ешбір қойынды бұрыннан белсенді болмаса, hide.bs.tab
және hidden.bs.tab
оқиғалары өшірілмейді.
Оқиға түрі | Сипаттама |
---|---|
show.bs.tab | Бұл оқиға қойындылар көрсетілімінде іске қосылады, бірақ жаңа қойынды көрсетілмей тұрып. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.target және пайдаланыңыз .event.relatedTarget |
көрсетілген.б.қойындысы | Бұл оқиға қойынды көрсетілгеннен кейін қойындылар көрсетілімінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.target және пайдаланыңыз .event.relatedTarget |
жасыру.б.қойындысы | Бұл оқиға жаңа қойынды көрсетілетін кезде іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Сәйкесінше ағымдағы белсенді қойындыны және жақында белсенді болатын жаңа қойындыны мақсатты ету үшін event.target және пайдаланыңыз .event.relatedTarget |
жасырын.б.қойындысы | Бұл оқиға жаң�� қойынды көрсетілгеннен кейін іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Алдыңғы белсенді қойындыны және жаңа белсенді қойындыны тиісінше бағыттау үшін event.target және түймелерін пайдаланыңыз .event.relatedTarget |
Джейсон Фрейм жазған тамаша 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 джинсы бір тегі кофе вирусы.
Төрт опция қолжетімді: жоғарғы, оң жақ, төменгі және солға тураланған.
Өнімділік себептеріне байланысты Tooltip және Popover деректер аписы қосылған, яғни оларды өзіңіз инициализациялауыңыз керек .
Беттегі барлық кеңестерді инициализациялаудың бір жолы оларды data-toggle
төлсипаты бойынша таңдау болады:
Құрал кеңесінің плагині сұраныс бойынша мазмұн мен түзетулерді жасайды және әдепкі бойынша құралдар кеңестерін олардың іске қосу элементінен кейін орналастырады.
JavaScript арқылы құралдар кеңесін іске қосыңыз:
Құрал кеңесі үшін қажетті түзету тек data
атрибут болып табылады және title
сізде кеңес алғыңыз келетін HTML элементінде. Құрал кеңесінің жасалған белгілеуі өте қарапайым, бірақ ол позицияны қажет етеді (әдепкі top
бойынша, плагин арқылы орнатылған).
Кейде бірнеше жолды қосатын гиперсілтемеге кеңес қосқыңыз келеді. Құрал кеңесі плагинінің әдепкі әрекеті оны көлденең және тігінен ортаға қою болып табылады. white-space: nowrap;
Бұған жол бермеу үшін зәкірлеріңізге қосыңыз .
.btn-group
a немесе a ішіндегі элементтерде .input-group
немесе кестеге қатысты элементтерде ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) құралдар кеңестерін пайдаланған кезде қажетсіз жанама әсерлерді (мысалы, элементтің кеңеюі және/) болдырмау үшін <tfoot>
опцияны (төменде құжатталған) көрсету керек болады . container: 'body'
немесе құралдар кеңесі іске қосылғанда оның дөңгелектелген бұрыштарын жоғалту).
tabindex="0"
Пернетақтамен шарлайтын пайдаланушылар үшін, атап айтқанда, көмекші технологияларды пайдаланушылар үшін сілтемелер, пішін басқару элементтері немесе төлсипаты бар кез келген ерікті элемент сияқты пернетақтаға бағытталған элементтерге құралдар кеңестерін ғана қосу керек .
disabled
Құрал кеңесін немесе элементке қосу үшін .disabled
элементті a ішіне қойып , оның орнына <div>
кеңесті <div>
қолданыңыз.
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-animation=""
.
Аты | Түр | Әдепкі | Сипаттама |
---|---|---|---|
анимация | логикалық | рас | Құрал кеңесіне CSS өшіру көшуін қолданыңыз |
контейнер | жол | жалған | жалған | Құрал кеңесін белгілі бір элементке қосады. Мысалы: |
кешіктіру | саны | объект | 0 | Құрал кеңесін көрсету және жасыру кідірісі (мс) - қолмен іске қосу түріне қолданылмайды Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады Объектінің құрылымы – бұл: |
html | логикалық | жалған | Құрал кеңесіне HTML енгізіңіз. Егер жалған болса, jQuery text әдісі мазмұнды DOM ішіне енгізу үшін пайдаланылады. XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз. |
орналастыру | жол | функциясы | 'жоғарғы' | Құрал кеңесін қалай орналастыруға болады - жоғарғы | төменгі | сол жақ | дұрыс | автоматты. Орналастыруды анықтау үшін функция пайдаланылған кезде, ол бірінші аргумент ретінде құралдар кеңесі DOM түйінімен және екінші ретінде іске қосу элементі DOM түйінімен шақырылады. Мәтінмән |
селектор | жол | жалған | Егер селектор қамтамасыз етілсе, құралдар кеңесінің нысандары көрсетілген мақсаттарға беріледі. Іс жүзінде бұл динамикалық HTML мазмұнын құралдар кеңестері қосу үшін қосу үшін пайдаланылады. Мынаны және ақпаратты мысалды қараңыз . |
үлгі | жол | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Құрал кеңесін жасау кезінде пайдаланылатын негізгі HTML. Құрал кеңесі
Ең сыртқы орауыш элементінде |
тақырып | жол | функциясы | '' |
|
триггер | жол | «Меңзерді жылжыту» | Құрал кеңесі қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз. manual басқа триггермен біріктіру мүмкін емес. |
көру алаңы | жол | нысан | функциясы | { селектор: 'body', толтыру: 0 } | Құрал кеңесін осы элементтің шегінде сақтайды. Мысалы: Егер функция берілсе, ол жалғыз аргумент ретінде DOM түйінінің іске қосу элементімен шақырылады. Мәтінмән |
Жеке кеңестерге арналған опцияларды жоғарыда түсіндірілгендей, деректер атрибуттарын пайдалану арқылы балама түрде көрсетуге болады.
$().tooltip(options)
Құрал кеңесінің өңдеушісін элементтер жиынына тіркейді.
.tooltip('show')
Элементтің құралдар кеңесін көрсетеді. Құрал кеңесі нақты көрсетілмей тұрып (яғни оқиға болғанға дейін) қоңырау шалушыға оралады . shown.bs.tooltip
Бұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады. Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.
.tooltip('hide')
Элементтің құралдар кеңесін жасырады. Құрал кеңесі шынымен жасырылғанға дейін (яғни hidden.bs.tooltip
оқиға болғанға дейін) қоңырау шалушыға оралады. Бұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады.
.tooltip('toggle')
Элементтің құралдар кеңесін ауыстырады. Құрал кеңесі нақты көрсетілмей немесе жасырылғанға дейін (яғни немесе оқиға болғанға дейін) қоңырау шалушыға оралады . Бұл құралдар кеңесінің «қолмен» іске қосылуы болып саналады.shown.bs.tooltip
hidden.bs.tooltip
.tooltip('destroy')
Элементтің құралдар кеңесін жасырады және жояды. Өкілдерді пайдаланатын құралдар кеңестерін ( опция арқылы жасалғанselector
) ұрпақ триггер элементтерінде жеке жою мүмкін емес.
Оқиға түрі | Сипаттама |
---|---|
show.bs.көмекші | show Бұл оқиға дана әдісі шақырылған кезде бірден іске қосылады. |
көрсетілген.bs.көмекші | Бұл оқиға құралдар кеңесі пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
hide.bs.tooltip | Бұл оқиға даналық hide әдісі шақырылған кезде бірден іске қосылады. |
hidden.bs.tooltip | Бұл оқиға құралдар кеңесін пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
кірістірілген.б.көмекші | Бұл оқиға құрал show.bs.tooltip кеңес үлгісі DOM файлына қосылған оқиғадан кейін іске қосылады. |
Қосымша ақпаратты орналастыру үшін кез келген элементке iPad-дағы сияқты шағын мазмұн қабаттарын қосыңыз.
Тақырыптары мен мазмұны нөлге тең болатын поповерлер ешқашан көрсетілмейді.
Popovers құралдар кеңесі плагинінің Bootstrap нұсқасына қосылуын талап етеді.
Өнімділік себептеріне байланысты Tooltip және Popover деректер аписы қосылған, яғни оларды өзіңіз инициализациялауыңыз керек .
Беттегі барлық қалқымалы терезелерді инициализациялаудың бір жолы оларды data-toggle
атрибуты бойынша таңдау болады:
.btn-group
a немесе an ішіндегі элементтерде .input-group
немесе кестеге қатысты элементтерде ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, ) пайдаланған кезде қалаусыз жанама әсерлерді (мысалы, элементтің кеңеюі және/) болдырмау үшін <tfoot>
опцияны (төменде құжатталған) көрсету керек. container: 'body'
немесе popover іске қосылғанда оның дөңгелектелген бұрыштарын жоғалту).
disabled
Қалқымалы элементті немесе .disabled
элементке қосу үшін элементті a ішіне қойып, оның орнына <div>
қалқымалы элементті <div>
қолданыңыз.
Кейде бірнеше жолды қосатын гиперсілтемеге қалқымалы элемент қосқыңыз келеді. Popover плагинінің әдепкі әрекеті оны көлденең және тігінен ортаға қою болып табылады. white-space: nowrap;
Бұған жол бермеу үшін зәкірлеріңізге қосыңыз .
Төрт опция қолжетімді: жоғарғы, оң жақ, төменгі және солға тураланған.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Пайдаланушы focus
келесі басқан кезде қалқымалы терезелерді өшіру үшін триггерді пайдаланыңыз.
Кросс-шолғыш және кросс-платформа әрекеті үшін тегті емес, тегті пайдалану керек <a>
, сонымен қатар <button>
және атрибуттарын қосу role="button"
керек tabindex
.
JavaScript арқылы popovers қосыңыз:
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-animation=""
.
Аты | Түр | Әдепкі | Сипаттама |
---|---|---|---|
анимация | логикалық | рас | Қалқымалы файлға CSS өшіру көшуін қолданыңыз |
контейнер | жол | жалған | жалған | Қалқымалы элементті белгілі бір элементке қосады. Мысалы: |
мазмұны | жол | функциясы | '' |
Егер функция берілсе, ол |
кешіктіру | саны | объект | 0 | Қалқымалы файлды көрсету және жасыру кідірісі (мс) - қолмен триггер түріне қолданылмайды Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады Объектінің құрылымы – бұл: |
html | логикалық | жалған | Қалқымалы файлға HTML енгізіңіз. Егер жалған болса, jQuery text әдісі мазмұнды DOM ішіне енгізу үшін пайдаланылады. XSS шабуылдары туралы алаңдасаңыз, мәтінді пайдаланыңыз. |
орналастыру | жол | функциясы | 'дұрыс' | Қалқымалы терезені қалай орналастыруға болады - жоғарғы | төменгі | сол жақ | дұрыс | автоматты. Орналастыруды анықтау үшін функция пайдаланылған кезде, ол бірінші аргумент ретінде popover DOM түйінімен, ал екінші рет іске қосу элементі DOM түйінімен шақырылады. Мәтінмән |
селектор | жол | жалған | Егер селектор берілсе, қалқымалы нысандар көрсетілген мақсаттарға беріледі. Іс жүзінде бұл динамикалық HTML мазмұнына қалқымалы файлдарды қосу үшін пайдаланылады. Мынаны және ақпаратты мысалды қараңыз . |
үлгі | жол | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Қалқымалы файлды жасау кезінде қолданылатын негізгі HTML. Попопвер ішке Попопвер ішке
Ең сыртқы орауыш элементінде |
тақырып | жол | функциясы | '' |
Егер функция берілсе, ол |
триггер | жол | 'басу' | Popover қалай іске қосылады - | түймесін басыңыз меңзегіш | фокус | нұсқаулық. Сіз бірнеше триггерлерді өткізе аласыз; оларды бос орынмен бөліңіз. manual басқа триггермен біріктіру мүмкін емес. |
көру алаңы | жол | нысан | функциясы | { селектор: 'body', толтыру: 0 } | Қалқымалы элементті осы элементтің шегінде сақтайды. Мысалы: Егер функция берілсе, ол жалғыз аргумент ретінде DOM түйінінің іске қосу элементімен шақырылады. Мәтінмән |
Жеке қалқандарға арналған опцияларды жоғарыда түсіндірілгендей деректер атрибуттарын пайдалану арқылы балама түрде көрсетуге болады.
$().popover(options)
Элемент жинағы үшін қалқымалы элементтерді инициализациялайды.
.popover('show')
Элементтің қалқымалы қалпын көрсетеді. Қоңырау шалушыға қалқымалы қоңырау нақты көрсетілмей тұрып (яғни shown.bs.popover
оқиға орын алмас бұрын) қайтарады. Бұл поповерді «қолмен» іске қосу деп саналады. Тақырыптары мен мазмұны нөлге тең болатын поповерлер ешқашан көрсетілмейді.
.popover('hide')
Элементтің қалқымалы қалқымалын жасырады. Қалқымалы қоңырау шынымен жасырылғанға дейін (яғни оқиға орын алмас бұрын) қоңырау шалушыға оралады . hidden.bs.popover
Бұл поповерді «қолмен» іске қосу деп саналады.
.popover('toggle')
Элементтің қалқымалы параметрін ауыстырады. Қоңырау шалушыға қалқымалы шын мәнінде көрсетілмей тұрып немесе жасырылғанға дейін (яғни shown.bs.popover
немесе hidden.bs.popover
оқиға болғанға дейін) қайтарады. Бұл поповерді «қолмен» іске қосу деп саналады.
.popover('destroy')
Элементтің қалқымалы қалпын жасырады және жояды. Делегацияны пайдаланатын поповерлер ( опция арқылы жасалғанselector
) ұрпақ триггер элементтерінде жеке жойылмайды.
Оқиға түрі | Сипаттама |
---|---|
show.bs.popover | show Бұл оқиға дана әдісі шақырылған кезде бірден іске қосылады. |
көрсетілген.bs.popover | Бұл оқиға қалқымалы файл пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
hide.bs.popover | Бұл оқиға даналық hide әдісі шақырылған кезде бірден іске қосылады. |
hidden.bs.popover | Бұл оқиға қалқымалы файлды пайдаланушыдан жасыруды аяқтаған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
inserted.bs.popover | Бұл оқиға show.bs.popover popover үлгісі DOM файлына қосылған оқиғадан кейін іске қосылады. |
Осы плагинмен барлық ескерту хабарларына өшіру функциясын қосыңыз.
Түймені пайдаланған кезде .close
, ол бірінші еншілес болуы керек .alert-dismissible
және ешқандай мәтін мазмұны белгілеуде оның алдынан келмеуі керек.
Осыны және оны өзгертіп, әрекетті қайталаңыз. Дүние моллис, est commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.
data-dismiss="alert"
Ескертуді жабу функциясын автоматты түрде беру үшін жай ғана жабу түймесін қосыңыз . Ескертуді жабу оны DOM жүйесінен жояды.
Жабу кезінде ескертулеріңіз анимацияны пайдалануы үшін оларда бұрыннан қолданылған .fade
және .in
сыныптары бар екеніне көз жеткізіңіз.
$().alert()
data-dismiss="alert"
Төлсипатқа ие ұрпақ элементтерін басу оқиғалары үшін ескертуді тыңдайды . (Data-api автоматты түрде инициализациясын пайдаланған кезде қажет емес.)
$().alert('close')
Ескертуді DOM ішінен жою арқылы жабады. Элементте .fade
және .in
сыныптары болса, ескерту жойылмас бұрын өшеді.
Bootstrap ескерту плагині ескерту функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.
Оқиға түрі | Сипаттама |
---|---|
жақын.б.ескерту | close Бұл оқиға дана әдісі шақырылған кезде бірден іске қосылады. |
жабық.б.ескерту | Бұл оқиға ескерту жабылған кезде іске қосылады (CSS өтулерінің аяқталуын күтеді). |
Түймелердің көмегімен көбірек әрекет етіңіз. Басқару түймесі құралдар тақталары сияқты қосымша құрамдастарға арналған түймелер тобын көрсетеді немесе жасайды.
Firefox бет жүктемелерінде пішінді басқару күйлерін (өшіру және тексеру) сақтайды . Бұл үшін уақытша шешім пайдалану болып табылады autocomplete="off"
. Mozilla қатесі #654072 қараңыз .
data-loading-text="Loading..."
Түймедегі жүктеу күйін пайдалану үшін қосыңыз .
Бұл мүмкіндік v3.3.5 нұсқасынан бері ескірген және v4 нұсқасында жойылған.
Осы демонстрация үшін біз және пайдаланамыз data-loading-text
, $().button('loading')
бірақ бұл сіз пайдалана алатын жалғыз күй емес. Бұл туралы төменде $().button(string)
құжаттамадан қараңыз .
Бір түймені ауыстырып қосуды қосу data-toggle="button"
үшін қосу.
.active
жәнеaria-pressed="true"
.active
Алдын ала ауыстырылатын түймелер үшін сыныпты және aria-pressed="true"
атрибутты өзіңізге қосуыңыз керек button
.
Тиісті мәнерлерінде ауысуды қосу data-toggle="buttons"
үшін бар құсбелгіні немесе радио кірістерін қосыңыз..btn-group
.active
.active
Алдын ала таңдалған опциялар үшін классты енгізуге өзіңіз қосуыңыз керек label
.
Құсбелгі түймешігінің белгіленген күйі түймедегі click
оқиғаны іске қоспай жаңартылса (мысалы , енгізу сипатын <input type="reset">
орнату арқылы немесе арқылы ), кірістегі сыныпты өзіңіз ауыстыруыңыз қажет.checked
.active
label
$().button('toggle')
Басу күйін ауыстырады. Түйме белсендірілгендей көрініс береді.
$().button('reset')
Түйме күйін қалпына келтіреді - мәтінді бастапқы мәтінге ауыстырады. Бұл әдіс асинхронды және бастапқы қалпына келтіру аяқталғанға дейін қайтарылады.
$().button(string)
Мәтінді кез келген деректер анықталған мәтін күйіне ауыстырады.
Оңай ауыстырып қосу әрекеті үшін бірнеше сыныптарды пайдаланатын икемді плагин.
Тасымалдау ауысулар плагинінің Bootstrap нұсқасына қосылуын талап етеді .
Сынып өзгерістері арқылы басқа элементті көрсету және жасыру үшін төмендегі түймелерді басыңыз:
.collapse
мазмұнын жасырады.collapsing
ауысу кезінде қолданылады.collapse.in
мазмұнын көрсетедіТөлсипатпен сілтемені href
немесе төлсипатпен түймені пайдалануға болады data-target
. Екі жағдайда да data-toggle="collapse"
талап етіледі.
Панель құрамдас бөлігімен аккордеон жасау үшін әдепкі тарылту әрекетін кеңейтіңіз.
Сондай-ақ .panel-body
s мен .list-group
s ауыстыруға болады.
aria-expanded
Басқару элементіне қосуды ұмытпаңыз . Бұл төлсипат экраннан оқу құралдарына және ұқсас көмекші технологияларға жиналатын элементтің ағымдағы күйін нақты анықтайды. Жиналмалы элемент әдепкі бойынша жабылса, оның мәні болуы керек aria-expanded="false"
. Жиналмалы элементті in
сыныпты пайдаланып әдепкі бойынша ашық етіп орнатқан болсаңыз, aria-expanded="true"
оның орнына басқару элементіне орнатыңыз. Плагин жиналмалы элементтің ашылған немесе жабылмағанына байланысты бұл төлсипатты автоматты түрде ауыстырады.
Сонымен қатар, егер басқару элементі бір жиналатын элементке бағытталса, яғни data-target
төлсипат селекторды меңзесе – жиынтық элементті қамтитын басқару элементіне id
қосымша төлсипатты қосуға болады . Заманауи экранды оқу құрылғылары және ұқсас көмекші технологиялар пайдаланушыларға жиналмалы элементтің өзіне тікелей өту үшін қосымша таңбашалар беру үшін осы атрибутты пайдаланады.aria-controls
id
Collapse плагині ауыр жүкті көтеру үшін бірнеше сыныптарды пайдаланады:
.collapse
мазмұнын жасырады.collapse.in
мазмұнын көрсетеді.collapsing
ауысу басталған кезде қосылады және ол аяқталған кезде жойыладыБұл сыныптарды мына жерден табуға болады component-animations.less
.
Жиналмалы элементті басқаруды автоматты түрде тағайындау үшін элементке жай ғана data-toggle="collapse"
және a қосыңыз . data-target
Төлсипат data-target
қысқартуды қолдану үшін CSS селекторын қабылдайды. collapse
Сыныпты жиналмалы элементке қосуды ұмытпаңыз . Оның әдепкі бойынша ашылғанын қаласаңыз, қосымша сыныпты қосыңыз in
.
Жиналмалы басқару элементіне аккордеон тәрізді топты басқаруды қосу үшін деректер төлсипатын қосыңыз data-parent="#selector"
. Бұл әрекетті көру үшін демонстрацияны қараңыз.
Қолмен қосу:
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-parent=""
.
Аты | түрі | әдепкі | сипаттамасы |
---|---|---|---|
ата-ана | селектор | жалған | Егер селектор қамтамасыз етілсе, осы жиналатын элемент көрсетілген кезде көрсетілген тектік астындағы барлық жиналмалы элементтер жабылады. (дәстүрлі аккордеон әрекетіне ұқсас - бұл panel сыныпқа байланысты) |
ауыстырып қосқыш | логикалық | рас | Шақыру кезінде жиналатын элементті ауыстырады |
.collapse(options)
Мазмұнды жиналмалы элемент ретінде белсендіреді. Қосымша опцияларды қабылдайды object
.
.collapse('toggle')
Жиналатын элементті көрсетілген немесе жасырын етіп ауыстырады. Жиналатын элемент нақты көрсетілмей немесе жасырылғанға дейін (яғни shown.bs.collapse
немесе hidden.bs.collapse
оқиға орын алмас бұрын) қоңырау шалушыға қайтарады.
.collapse('show')
Жиналатын элементті көрсетеді. Жиналмалы элемент нақты көрсетілмей тұрып (яғни shown.bs.collapse
оқиға болғанға дейін) қоңырау шалушыға қайтарады.
.collapse('hide')
Жиналатын элементті жасырады. Жиналатын элемент шын мәнінде жасырылғанға дейін (яғни hidden.bs.collapse
оқиға болғанға дейін) қоңырау шалушыға қайтарады.
Bootstrap құлдырау сыныбы құлдырау функциясына қосылу үшін бірнеше оқиғаларды көрсетеді.
Оқиға түрі | Сипаттама |
---|---|
show.bs.collapse | show Бұл оқиға дана әдісі шақырылған кезде бірден іске қосылады. |
көрсетілген.bs.collapse | Бұл оқиға құлау элементі пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
жасыру.б.бұрылыс | Бұл оқиға hide әдіс шақырылған кезде бірден іске қосылады. |
жасырын.б.құла | Бұл оқиға пайдаланушыдан жиырылған элемент жасырылған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). |
Карусель сияқты элементтерді айналып өтуге арналған слайд-шоу компоненті. Кірістірілген карусельдерге қолдау көрсетілмейді.
Карусель құрамдас бөлігі әдетте қол жетімділік стандарттарына сәйкес келмейді. Сәйкес болу қажет болса, мазмұнды ұсынудың басқа нұсқаларын қарастырыңыз.
Bootstrap анимациялары үшін тек CSS3 пайдаланады, бірақ Internet Explorer 8 және 9 қажетті CSS сипаттарын қолдамайды. Осылайша, бұл браузерлерді пайдаланған кезде слайдтарды ауыстыру анимациялары болмайды. Біз ауысуларға jQuery негізіндегі резервтерді қоспауды әдейі шештік.
.active
Сыныпты слайдтардың біріне қосу керек . Әйтпесе, карусель көрінбейді.
Басқару элементтері үшін .glyphicon .glyphicon-chevron-left
және .glyphicon .glyphicon-chevron-right
сыныптары міндетті емес. Bootstrap қарапайым Юникод баламаларын .icon-prev
ұсынады ..icon-next
.carousel-caption
Кез келген элементтің көмегімен слайдтарыңызға тақырыпты оңай қосыңыз .item
. Онда кез келген қосымша HTML-ді орналастырыңыз және ол автоматты түрде тураланады және пішімделеді.
Карусель басқару элементтері дұрыс жұмыс істеуі үшін id
ең шеткі контейнерді ( ) пайдалану қажет. .carousel
Бірнеше карусельді қосқанда немесе карусельді өзгерткен кезде id
тиісті басқару элементтерін жаңартыңыз.
Карусель орнын оңай басқару үшін деректер атрибуттарын пайдаланыңыз. немесе data-slide
кілт сөздерін қабылдайды , бұл слайд орнын оның ағымдағы орнына қатысты өзгертеді. Немесе, слайд орнын - деп басталатын белгілі бір индекске жылжытатын шикі слайд индексін карусельге беру үшін пайдаланыңыз .prev
next
data-slide-to
data-slide-to="2"
0
Атрибут data-ride="carousel"
карусельді бет жүктелуінен бастап анимация ретінде белгілеу үшін пайдаланылады. Оны бір карусельдің (артық және қажетсіз) анық JavaScript инициализациясымен бірге пайдалану мүмкін емес.
Карусельге қолмен қоңырау шалыңыз:
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-interval=""
.
Аты | түрі | әдепкі | сипаттамасы |
---|---|---|---|
интервал | саны | 5000 | Элементті автоматты түрде айналдыру арасындағы кідіріс уақыты. Егер жалған болса, карусель автоматты түрде айналмайды. |
үзіліс | жол | null | «меңгілеу» | күйіне орнатылса "hover" , карусельдің айналуын кідіртеді және айналдыру циклін қосулы mouseenter жалғастырады mouseleave . параметріне орнатылған болса null , меңзерді карусельдің үстіне апару оны кідіртпейді. |
орау | логикалық | рас | Карусель үздіксіз айналуы керек пе немесе қатты аялдамалар болуы керек пе. |
пернетақта | логикалық | рас | Карусель пернетақта оқиғаларына әрекет ету керек пе. |
.carousel(options)
Қосымша опциялармен карусельді инициализациялайды object
және элементтерді айналдыра бастайды.
.carousel('cycle')
Карусель элементтерін солдан оңға қарай айналдырады.
.carousel('pause')
Карусель элементтерді айналып өтуді тоқтатады.
.carousel(number)
Карусельді белгілі бір кадрға айналдырады (0 негізінде, массивке ұқсас).
.carousel('prev')
Алдыңғы элементке ауысады.
.carousel('next')
Келесі элементке ауысады.
Bootstrap карусель сыныбы карусель функциясына қосылу үшін екі оқиғаны көрсетеді.
Екі оқиғаның да келесі қосымша қасиеттері бар:
direction
: Карусель қозғалатын бағыт ( "left"
немесе "right"
).relatedTarget
: Белсенді элемент ретінде орнына сырғытылып жатқан DOM элементі.Барлық карусель оқиғалары карусельдің өзіне (яғни <div class="carousel">
) жіберіледі.
Оқиға түрі | Сипаттама |
---|---|
слайд.б.карусель | slide Бұл оқиға дана әдісі шақырылған кезде бірден іске қосылады. |
слайд.б.карусель | Бұл оқиға карусель слайдты ауыстыруды аяқтаған кезде тоқтатылады. |
Аффикс плагині position: fixed;
арқылы табылған әсерді эмуляциялай отырып, қосады және өшіреді position: sticky;
. Оң жақтағы қосалқы навигация аффикс плагинінің тікелей көрсетілімі болып табылады.
Қосымша плагинді деректер атрибуттары арқылы немесе өзіңіздің JavaScript көмегімен қолмен пайдаланыңыз. Екі жағдайда да бекітілген мазмұнның орналасуы мен еніне арналған CSS қамтамасыз ету керек.
Ескертпе: Safari көрсету қатесіне байланысты тартылған немесе итерілген баған сияқты салыстырмалы түрде орналасқан элементте қамтылған элементте аффикс плагинін пайдаланбаңыз .
Аффикс плагині әрқайсысы белгілі бір күйді білдіретін үш сынып арасында ауысады: .affix
, .affix-top
, және .affix-bottom
. Нақты позицияларды өңдеу үшін осы сыныптар үшін мәндерді (осы плагинге тәуелсіз) өзіңіз беруіңіз керек, position: fixed;
on қоспағанда ..affix
Міне, аффикс плагині қалай жұмыс істейді:
.affix-top
элементтің ең жоғарғы орнында екенін көрсету үшін қосады. Бұл кезде CSS орналасуы қажет емес..affix
ауыстырады .affix-top
және орнатады position: fixed;
(Bootstrap CSS қамтамасыз етеді)..affix
керек .affix-bottom
. Офсеттер міндетті емес болғандықтан, біреуін орнату сәйкес CSS орнатуды талап етеді. Бұл жағдайда position: absolute;
қажет болған жағдайда қосыңыз. Плагин сол жерден элементті қайда орналастыру керектігін анықтау үшін деректер төлсипатын немесе JavaScript опциясын пайдаланады.Төмендегі пайдалану опцияларының кез келгені үшін CSS орнату үшін жоғарыдағы қадамдарды орындаңыз.
Кез келген элементке аффикс әрекетін оңай қосу data-spy="affix"
үшін, барлау қажет элементке жай ғана қосыңыз. Элементтің түйреуін ауыстырып-қосқышты анықтау үшін ығысуларды пайдаланыңыз.
JavaScript арқылы аффикс плагиніне қоңырау шалыңыз:
Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-
сияқты қосыңыз data-offset-top="200"
.
Аты | түрі | әдепкі | сипаттамасы |
---|---|---|---|
офсет | саны | функциясы | объект | 10 | Айналдыру орнын есептеу кезінде экраннан ығысу үшін пикселдер. Жалғыз сан берілсе, ығысу жоғарғы және төменгі бағытта да қолданылады. Бірегей, төменгі және жоғарғы ығысуды қамтамасыз ету үшін жай ғана нысанды offset: { top: 10 } немесе offset: { top: 10, bottom: 5 } . Ауыстыруды динамикалық есептеу қажет болғанда функцияны пайдаланыңыз. |
мақсат | селектор | түйін | jQuery элементі | window объект _ |
Аффикстің мақсатты элементін көрсетеді. |
.affix(options)
Мазмұныңызды бекітілген мазмұн ретінде белсендіреді. Қосымша опцияларды қабылдайды object
.
.affix('checkPosition')
Сәйкес элементтердің өлшемдері, орналасуы және айналдыру орны негізінде аффикс күйін қайта есептейді. , .affix
, .affix-top
және .affix-bottom
сыныптары жаңа күйге сәйкес аффикстелген мазмұнға қосылады немесе жойылады. Бұл әдіс бекітілген мазмұнның немесе мақсатты элементтің өлшемдері өзгерген сайын, бекітілген мазмұнның дұрыс орналасуын қамтамасыз ету үшін шақырылуы керек.
Bootstrap аффикс плагині аффикс функционалдығын қосу үшін бірнеше оқиғаларды көрсетеді.
Оқиға түрі | Сипаттама |
---|---|
аффикс.б.аффикс | Бұл оқиға элемент бекітілгенге дейін бірден іске қосылады. |
аффикс.б.аффикс | Бұл оқиға элемент бекітілгеннен кейін іске қосылады. |
affix-top.bs.affiks | Бұл оқиға элемент жоғарғы жағына жапсырылғанға дейін бірден іске қосылады. |
affixed-top.bs.affiks | Бұл оқиға элемент жоғарғы жағына бекітілгеннен кейін іске қосылады. |
affix-bottom.bs.affiks | Бұл оқиға элемент төменгі жағына бекітілгенге дейін бірден іске қосылады. |
affixed-bottom.bs.affiks | Бұл оқиға элемент төменгі жағына бекітілгеннен кейін іске қосылады. |