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
. Бул төмөнкүдөй көрүнөт:
Же болбосо, белгилүү бир плагинди максаттуу үчүн, жөн гана плагиндин атын төмөнкүдөй data-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's jQuery плагиндеринин ар биринин версиясына VERSION
плагиндин конструкторунун касиети аркылуу кирүүгө болот. Мисалы, инструментарий плагини үчүн:
Bootstrap плагиндери JavaScript өчүрүлгөндө өзгөчө кооздук менен артка кайтпайт. Эгер сиз бул учурда колдонуучунун тажрыйбасына маани берсеңиз, колдонуучуларыңызга <noscript>
кырдаалды (жана JavaScript кантип кайра иштетүү керек) түшүндүрүү үчүн колдонуңуз жана/же өзүңүздүн жеке ыңгайлаштырылган резервдерди кошуңуз.
Bootstrap расмий түрдө Prototype же jQuery UI сыяктуу үчүнчү тараптын JavaScript китепканаларын колдобойт . Окуяларга жана аттар мейкиндигине карабастан .noConflict
, шайкештик көйгөйлөрү болушу мүмкүн, аларды сиз өз алдынча чечишиңиз керек.
Жөнөкөй өтүү эффекттери үчүн, transition.js
башка JS файлдарына бир жолу кошуңуз. Эгер сиз компиляцияланган (же кичирейтилген) файлын колдонуп жатсаңыз, муну кошуунун bootstrap.js
кереги жок — ал мурунтан эле бар.
Transition.js бул окуялар үчүн негизги жардамчы transitionEnd
, ошондой эле CSS өтүү эмулятору. Ал башка плагиндер тарабынан CSS өтүү колдоосун текшерүү жана илинген өтүүлөрдү кармоо үчүн колдонулат.
Төмөнкү JavaScript үзүндүсү аркылуу өтүүлөрдү глобалдык түрдө өчүрсө болот, ал жүктөлгөндөн кийин transition.js
(же bootstrap.js
, шартка жараша) келиши керек:bootstrap.min.js
Модальдар жөнөкөйлөштүрүлгөн, бирок ийкемдүү, минималдуу талап кылынган функционалдуулук жана акылдуу демейки параметрлери бар диалог чакырыктары.
Башкасы көрүнүп турганда модалды ачпоону унутпаңыз. Бир убакта бирден ашык модалды көрсөтүү ыңгайлаштырылган кодду талап кылат.
Модалдын сырткы көрүнүшүнө жана/же функционалдуулугуна таасир этүүчү башка компоненттерди болтурбоо үчүн ар дайым модалдын 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
модалдын сыртында басканда көрсөтүлгөн модальдарды четке кагуу үчүн чыкылдатуу аймагын камсыз кылуу үчүн а түзөт.<body>
.modal-backdrop
JavaScript жазбастан модалды активдештирүү. Которуу үчүн белгилүү бир модалды максаттоо үчүн же data-toggle="modal"
баскычы сыяктуу контроллердин элементине орнотуңуз .data-target="#foo"
href="#foo"
myModal
JavaScript бир сап менен id менен модалды чакырыңыз :
Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-
, сыяктуу эле кошуңуз data-backdrop=""
.
аты | түрү | демейки | сүрөттөмө |
---|---|---|---|
фон | логикалык же сап'static' |
чын | Модалдык көшөгө элементин камтыйт. Же болбосо, static чыкылдатканда модалды жаппаган фон үчүн көрсөтүңүз. |
клавиатура | логикалык | чын | Escape баскычы басылганда модалды жабат |
көрсөтүү | логикалык | чын | Инициализацияланганда модалды көрсөтөт. |
алыскы | жол | жалган | Бул параметр v3.3.0 версиясынан бери эскирген жана v4 версиясында алынып салынган. Биз анын ордуна кардар тарабындагы шаблонду же берилиштерди байланыштыруучу алкакты колдонууну же jQuery.load'га өзүңүз чалууну сунуштайбыз. Эгер алыскы URL берилсе, мазмун jQuery ыкмасы аркылуу бир жолу жүктөлөт |
.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">
.
Окуя түрү | Description |
---|---|
show.bs.modal | Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. Эгерде чыкылдатуу менен шартталган болсо, анда басылган элемент relatedTarget окуянын менчиги катары жеткиликтүү болот. |
show.bs.modal | Бул окуя модаль колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). Эгерде чыкылдатуу менен шартталган болсо, анда басылган элемент relatedTarget окуянын менчиги катары жеткиликтүү болот. |
hide.bs.modal | Бул окуя hide инстанция ыкмасы чакырылганда дароо өчүрүлөт. |
hidden.bs.modal | Бул окуя модаль колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
loaded.bs.modal | Бул окуя модаль 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
касиети бар, анын мааниси которулуучу анкер элементи.
Окуя түрү | Description |
---|---|
show.bs.dropdown | Бул окуя шоу инстанция ыкмасы чакырылганда дароо күйөт. |
көрсөтүлгөн.bs.ашылма | Бул окуя ачылуучу тизме колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү аягына чейин күтөт). |
hide.bs.dropdown | Жашыруу инстанция ыкмасы чакырылганда бул окуя дароо өчүрүлөт. |
hidden.bs.dropdown | Бул окуя ачылуучу тизмени колдонуучудан жашырып бүткөндөн кийин иштен чыгарылат (CSS өтүүлөрү бүткүчө күтөт). |
ScrollSpy плагини жылдыруу абалына жараша навигация максаттарын автоматтык түрдө жаңыртуу үчүн. Чабыт тилкесинин астындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз. Ылдый түшүүчү суб пункттар да баса белгиленет.
Жарнама леггинс кейтар, бранч ид искусство кечеси долор эмгек. Айрыкча жыл эним ло-фи алар куи сатыла электе. Tumblr фермадан столго велосипед укугу кандай болбосун. Anim keffiyeh carles кардиган. Velit seitan mcsweeney фото стенд 3 карышкыр ай irure. Косби свитер ломо джинсы шорты, Вильямсбург капюшон миним qui, балким, сиз алар жөнүндө укпасаңыз керек жана кардиган траст фонду culpa biodiesel Уэс Андерсон эстетикалык. Нихил татуировкаланган аккусамус, Cred irony biodiesel keffiyeh artisan ullamco consequat.
Veniam marfa мурут скейтборд, adipisicing fugiat velit айры сакал. Фриган сакал аликва купидат Максвини веро. Cupidatat four loko nisi, ea helvetica nulla carles. Татуировкаланган косби свитер тамак-аш ташуучу унаа, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Карлес эстетикалык эмес машыгуу quis gentrify. Brooklyn adipisicing кол өнөрчүлүк сыра вице Кейтар Десерунт.
Occaecat commodo aliqua delectus. Fap кол өнөрчүлүк сыра deserunt скейтборд ea. Lomo велосипед укуктарына ээ болгон, жаналит ea sunt кийинки даражадагы Locavore бир тектүү кофе магна вениамда. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi 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 мессенжер баштык marfa кандай delectus тамак-аш жүк ташуучу унаа. Sapiente synth id assumenda. Locavore sed helvetica клише ирония, күн күркүрөгөн мышыктар, балким, алар жөнүндө укпагандырсыз. Алар сатылып кеткенге чейин эмгек элитинин орду, Терри Ричардсон проидент brunch nesciunt quis cosby свитер париатур keffiyeh ut helvetica artisan. Кардиган кол өнөрчүлүк сыра сейтан даяр велит. VHS chambray laboris tempor veniam. Аним моллит миним коммодо улламко күн күркүрөйт.
Navbar шилтемелеринде чечилүүчү ID максаттары болушу керек. Мисалы, <a href="#home">home</a>
DOMдагы бир нерсеге дал келиши керек <div id="home"></div>
.
:visible
эмес элементтер этибарга алынбайт:visible
jQuery'ге ылайык келбеген максаттуу элементтер этибарга алынбайт жана алардын тиешелүү навигация элементтери эч качан баса белгиленбейт.
Ишке ашыруу ыкмасы кандай болбосун, scrollspy сиз шпион position: relative;
кылып жаткан элементте колдонууну талап кылат. Көпчүлүк учурларда бул <body>
. дан башка элементтерде жылдырып жатканда , топтомун жана колдонулушун <body>
унутпаңыз .height
overflow-y: scroll;
Үстүнкү тилкеңиздин навигацияңызга scrollspy жүрүм-турумун оңой кошуу үчүн data-spy="scroll"
, шпион кылгыңыз келген элементке кошуңуз (көбүнчө бул <body>
). Андан кийин атрибутту каалаган Bootstrap компонентинин data-target
негизги элементинин ID же классы менен кошуңуз ..nav
CSS'иңизди кошкондон кийин position: relative;
, JavaScript аркылуу scrollspy чакырыңыз:
.scrollspy('refresh')
DOMдан элементтерди кошуу же алып салуу менен бирге scrollspy колдонуп жатканда, сиз жаңылоо ыкмасын төмөнкүдөй чакырышыңыз керек:
Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-
, сыяктуу эле кошуңуз data-offset=""
.
аты | түрү | демейки | сүрөттөмө |
---|---|---|---|
офсет | саны | 10 | Сыдыруунун ордун эсептөөдө жогорудан жылыш үчүн пикселдер. |
Окуя түрү | Description |
---|---|
activate.bs.scrollspy | Бул окуя жылдыруу аркылуу жаңы нерсе жандырылган сайын күйөт. |
Жергиликтүү мазмундун панелдеринен өтүү үчүн тез, динамикалык өтмөк функциясын кошуңуз, атүгүл ылдый түшүүчү менюлар аркылуу. Кыстарылган өтмөктөр колдоого алынбайт.
Чийки джинсы, балким, Остин алар жөнүндө уккан эмессиз. Nesciunt tofu Stumptown aliqua, ретро synth мастер тазалоо. Cliche tempor мурут, Williamsburg Carles Vegan helvetica. Reprehenderit касапчы ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон мурунку кальмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis кардиган америкалык кийим, касапчы voluptate nisi qui.
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"
Сиз жөн гана белгилөө же data-toggle="pill"
элемент боюнча эч кандай JavaScript жазбастан өтмөктү же таблетка навигациясын иштете аласыз . Өтмөккө nav
жана nav-tabs
класстарын кошуу Bootstrap өтмөктүн стилинul
колдонот , ал эми класстарды кошуу таблетка стилин колдонот .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
окуялар өчүрүлбөйт.
Окуя түрү | Description |
---|---|
show.bs.tab | Бул окуя өтмөк көрсөтүүсүндө, бирок жаңы өтмөк көрсөтүлө электе башталат. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
show.bs.tab | Бул окуя өтмөк көрсөтүлгөндөн кийин өтмөк көрсөтүүсүндө күйөт. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
hide.bs.tab | Бул окуя жаңы өтмөк көрсөтүлө турганда (ошондуктан мурунку активдүү өтмөк жашырылганда) күйөт. Учурдагы жигердүү өтмөктү жана жакын арада активдүү боло турган жаңы өтмөктү максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
hidden.bs.tab | Бул окуя жаңы өтмөк көрсөтүлгөндөн кийин башталат (ошентип мурунку активдүү өтмөк жашырылган). Мурунку активдүү өтмөктү жана жаңы активдүү өтмөктү максаттуу үчүн event.target жана колдонуңуз .event.relatedTarget |
Джейсон Фрейм жазган сонун jQuery.tipsy плагининен шыктанган; Куралдар кеңештери жаңыртылган версия, ал сүрөттөргө таянбайт, анимациялар үчүн CSS3 жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттары колдонулат.
Узундугу нөлгө барабар болгон кеңештер эч качан көрсөтүлбөйт.
Куралдар кеңештерин көрүү үчүн төмөнкү шилтемелердин үстүнөн өтүңүз:
Тар шым кийинки деңгээл keffiyeh , балким , алар жөнүндө уккан эмес. Фото кабина сакал чийки джинсы тамга басуу вегетариандык мессенжер баштык Стумптаун. Farm-to-stol seitan, mcsweeney's fixie sustainable quinoa 8-бит америкалык кийимдеринде терри Ричардсон винил камерасы бар . Сакал стмптаун, кардигандар banh mi lomo thundercats. Tofu биодизель Вильямсбург Марфа, төрт Локо Максвининин тазалоочу вегетариандык Чамбрей. Чынында эле ирониялык кол өнөрчү кандай гана keytar , scenester farm-to-table banksy Остин twitter handle freegan cred raw джинсы бир келип чыккан кофе вирусу.
Төрт вариант бар: жогорку, оң, ылдый жана сол тегизделген.
Иштин майнаптуулугунан улам, Tooltip жана Popover data-apis кошулган, демек сиз аларды өзүңүз инициализациялашыңыз керек .
Барактагы бардык кеңештерди инициализациялоонун бир жолу аларды data-toggle
атрибуту боюнча тандоо болот:
Tooltip плагини мазмунду жана суроо-талап боюнча белгилерди жаратат жана демейки шартта куралдар кеңештерин триггер элементинен кийин жайгаштырат.
JavaScript аркылуу инструментти иштетиңиз:
data
Курал кеңеши үчүн талап кылынган белги атрибут гана болуп саналат жана title
HTML элементинде сиз кеңешке ээ болгуңуз келет. Аспаптын генерацияланган белгилөөсү өтө жөнөкөй, бирок ал позицияны талап кылат (демейки боюнча, top
плагин тарабынан коюлган).
Кээде сиз бир нече саптарды ороп турган гипершилтемеге инструментти кошкуңуз келет. Tooltip плагининин демейки жүрүм-туруму аны туурасынан жана вертикалдуу борборлоштуруу болуп саналат. white-space: nowrap;
Мунун алдын алуу үчүн анкерлериңизге кошуңуз .
.btn-group
Куралдар кеңештерин а же ан ичиндеги элементтерде .input-group
же таблицага байланыштуу элементтерде ( <td>
, <th>
, <tr>
, , , , , , , <thead>
, <tbody>
, ) колдонууда, каалабаган терс таасирлерден (мисалы, элементтин кеңейиши жана/) болбош үчүн <tfoot>
опцияны (төмөндө документтештирилген) көрсөтүшүңүз керек болот. container: 'body'
же аспап иштетилгенде тегеректелген бурчтарын жоготот).
tabindex="0"
Баскычтоп менен навигациялоочу колдонуучулар үчүн, айрыкча, жардамчы технологияларды колдонуучулар үчүн, шилтемелер, форманы башкаруу элементтери же атрибуттуу каалаган каалаган элемент сыяктуу клавиатурага багытталган элементтерге кеңештерди гана кошушуңуз керек .
disabled
А же элементке инструментти кошуу үчүн .disabled
, элементти а ичине коюп, анын ордуна <div>
ага кеңешти колдонуңуз <div>
.
Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-
, сыяктуу эле кошуңуз data-animation=""
.
аты | Type | Демейки | Description |
---|---|---|---|
анимация | логикалык | чын | Куралдар үчүн CSS өчүп өтүүнү колдонуңуз |
контейнер | string | жалган | жалган | Белгилүү бир элементке инструментти кошот. Мисал: |
кечиктирүү | саны | объект | 0 | Курал кеңешин көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат Объекттин структурасы: |
html | логикалык | жалган | Инструментке HTML кыстарыңыз. Эгер жалган болсо, text DOMга мазмунду киргизүү үчүн jQuery ыкмасы колдонулат. XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз. |
жайгаштыруу | string | функция | 'жогорку' | Куралды кантип жайгаштыруу керек - жогору | түбү | сол | туура | авто. Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары шаймандык DOM түйүнү жана экинчиси катары триггер элементи DOM түйүнү менен чакырылат. Контекст |
селектор | сап | жалган | Эгерде селектор камсыз кылынса, инструментарий объекттери көрсөтүлгөн максаттарга өткөрүлүп берилет. Иш жүзүндө, бул динамикалык HTML мазмунуна кеңештерди кошуу үчүн колдонулат. Бул жана маалыматтык мисалды караңыз . |
шаблон | сап | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
Инструментти түзүүдө колдонуу үчүн HTML базасы. Куралдуу
Эң сырткы ороочу элемент |
аталышы | string | функция | '' |
Функция берилсе, ал |
триггер | сап | "фокус" | Инструментарий кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз. manual башка триггер менен айкалыштыруу мүмкүн эмес. |
көрүү порту | string | объект | функция | { селектор: '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
түзүлгөн ) тукум триггер элементтеринде өзүнчө жок кылууга болбойт.
Окуя түрү | Description |
---|---|
show.bs.tooltip | Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. |
көрсөтүлгөн.bs.куралдуу кеңеш | Бул окуя куралдын кеңеши колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
hide.bs.tooltip | Бул окуя hide инстанция ыкмасы чакырылганда дароо өчүрүлөт. |
hidden.bs.tooltip | Бул окуя куралдын кеңеши колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
inserted.bs.куралдуу кеңеш | Бул окуя show.bs.tooltip окуядан кийин, курал үлгүсү DOMга кошулгандан кийин өчүрүлөт. |
Кошумча маалымат үчүн каалаган элементке, iPadдагылар сыяктуу мазмундун кичинекей катмарларын кошуңуз.
Аталышы жана мазмуну нөлгө барабар болгон поповерлер эч качан көрсөтүлбөйт.
Popovers инструменттердин плагининин Bootstrap версияңызга кошулушун талап кылат.
Иштин майнаптуулугунан улам, Tooltip жана Popover data-apis кошулган, демек сиз аларды өзүңүз инициализациялашыңыз керек .
Барактагы бардык поповерлерди инициализациялоонун бир жолу аларды data-toggle
атрибуту боюнча тандоо болот:
.btn-group
a же a ичиндеги элементтерде .input-group
же таблицага байланыштуу элементтерде ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) поповерлерди колдонгондо, каалабаган терс таасирлерден (мисалы, элементтин кеңейиши жана/) болбош үчүн <tfoot>
параметрди (төмөндө документтештирилген) көрсөтүшүңүз керек болот. container: 'body'
же поповер иштетилгенде тегеректелген бурчтарын жоготот).
disabled
А же элементке поповерди кошуу үчүн .disabled
, элементти а ичине коюп, анын ордуна <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 аркылуу поповерлерди иштетүү:
Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-
, сыяктуу эле кошуңуз data-animation=""
.
аты | Type | Демейки | Description |
---|---|---|---|
анимация | логикалык | чын | Калкыма файлга CSS өчүп өтүүнү колдонуңуз |
контейнер | string | жалган | жалган | Белгилүү бир элементке калкыма тиркелет. Мисал: |
мазмун | string | функция | '' |
Эгерде функция берилсе, ал |
кечиктирүү | саны | объект | 0 | Поповерди көрсөтүү жана жашыруу кечигүү (мс) - кол менен триггер түрүнө тиешелүү эмес Эгерде номер берилсе, кечиктирүү эки жашыруу/көрсөтүү үчүн колдонулат Объекттин структурасы: |
html | логикалык | жалган | HTMLди калкып чыгуучу жерге кыстарыңыз. Эгер жалган болсо, text DOMга мазмунду киргизүү үчүн jQuery ыкмасы колдонулат. XSS чабуулдарынан кооптонуп жатсаңыз, текстти колдонуңуз. |
жайгаштыруу | string | функция | "туура" | Поповерди кантип жайгаштыруу керек - top | түбү | сол | туура | авто. Функция жайгаштырууну аныктоо үчүн колдонулганда, ал биринчи аргумент катары 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. поповердин поповердин
Эң сырткы ороочу элемент |
аталышы | string | функция | '' |
Эгерде функция берилсе, ал |
триггер | сап | 'басуу' | Поповер кантип иштетилет - чыкылдатыңыз | hover | фокус | колдонмо. Сиз бир нече триггерлерди өткөрө аласыз; аларды боштук менен ажыратыңыз. manual башка триггер менен айкалыштыруу мүмкүн эмес. |
көрүү порту | string | объект | функция | { селектор: '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
түзүлгөн ) тукум триггер элементтеринде өзүнчө жок кылынбайт.
Окуя түрү | Description |
---|---|
show.bs.popover | Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. |
show.bs.popover | Бул окуя поповер колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү аяктаганга чейин күтөт). |
hide.bs.popover | Бул окуя hide инстанция ыкмасы чакырылганда дароо өчүрүлөт. |
hidden.bs.popover | Бул окуя поповер колдонуучудан жашырылгандан кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
inserted.bs.popover | Бул окуя show.bs.popover DOMга popover үлгүсү кошулгандан кийин өчүрүлөт. |
Бул плагин менен бардык эскертүү билдирүүлөрүнө четке кагуу функциясын кошуңуз.
Баскычты колдонууда .close
, ал биринчи бала болушу керек .alert-dismissible
жана белгилөөдө анын алдына эч кандай тексттик мазмун келбеши керек.
Муну жана муну өзгөртүп, кайра аракет кылыңыз. Дуйс моллис, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.
data-dismiss="alert"
Эскертүүнү автоматтык түрдө жабуу функциясын берүү үчүн жөн гана жабуу баскычын кошуңуз . Эскертүүнү жабуу аны DOMдан алып салат.
Жабууда эскертүүлөрүңүз анимацияны колдонушу үчүн, аларда .fade
жана бар экенин текшериңиз.in
колдонушу үчүн, аларга мурунтан эле колдонулган класстар
$().alert()
Атрибуту бар тукум элементтериндеги чыкылдатуу окуяларын угуу үчүн эскертүү берет data-dismiss="alert"
. (Data-api автоматтык түрдө инициализациясын колдонууда зарыл эмес.)
$().alert('close')
Эскертүүнү DOMдан алып салуу менен жаап салат. Эгер элементте .fade
жана .in
класстары бар болсо, эскертүү ал өчүрүлгөнгө чейин өчүп калат.
Bootstrap'тин эскертүү плагини эскертүү функциясына кирүү үчүн бир нече окуяларды ачып берет.
Окуя түрү | Description |
---|---|
close.bs.alert | Бул окуя close инстанция ыкмасы чакырылганда дароо күйөт. |
жабык.bs.alert | Бул окуя эскертүү жабылгандан кийин өчүрүлөт (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.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'тин кыйратуу классы кыйратуу функциясына кирүү үчүн бир нече окуяларды ачып берет.
Окуя түрү | Description |
---|---|
show.bs.collapse | Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. |
көрсөтүлгөн.bs.кыйрыш | Бул окуя кыйратуу элементи колдонуучуга көрүнгөндөн кийин өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
жашыруу.б.кыйруу | Бул окуя hide ыкма чакырылганда дароо өчүрүлөт. |
hidden.bs.collapse | Коллапс элементи колдонуучудан жашырылганда, бул окуя өчүрүлөт (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 | Нерсени автоматтык түрдө айлантуунун ортосундагы кечигүү убактысы. Эгер жалган болсо, карусель автоматтык түрдө айланбайт. |
тыныгуу | string | нөл | "коп" | Эгер коюлса "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">
.
Окуя түрү | Description |
---|---|
слайд.б.карусель | Бул окуя slide инстанция ыкмасы чакырылганда дароо күйөт. |
slid.bs.carousel | Бул иш-чара карусель слайдды өткөрүп бүткөндөн кийин өчүрүлөт. |
Аффикс плагини 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'тин аффикс плагини аффикс функционалдуулугуна кирүү үчүн бир нече окуяларды ачып берет.
Окуя түрү | Description |
---|---|
affix.bs.affiks | Бул окуя элемент чапталганга чейин дароо күйөт. |
affixed.bs.affiks | Бул окуя элемент чапталгандан кийин өчүрүлөт. |
affix-top.bs.affiks | Бул иш-чара элементтин үстүнө орнотулганга чейин дароо башталат. |
affixed-top.bs.affiks | Бул иш-чара элементтин үстүнө коюлгандан кийин өчүрүлөт. |
affix-bottom.bs.affiks | Бул окуя элемент ылдый жагына чапталганга чейин дароо башталат. |
affixed-bottom.bs.affiks | Бул окуя элемент ылдыйга чапталгандан кийин өчүрүлөт. |