JavaScript
Арав гаруй захиалгат jQuery залгаасуудын тусламжтайгаар Bootstrap-ийн бүрэлдэхүүн хэсгүүдийг амилуулаарай. Тэдгээрийг бүгдийг нь эсвэл нэг нэгээр нь хялбархан оруулаарай.
Арав гаруй захиалгат jQuery залгаасуудын тусламжтайгаар Bootstrap-ийн бүрэлдэхүүн хэсгүүдийг амилуулаарай. Тэдгээрийг бүгдийг нь эсвэл нэг нэгээр нь хялбархан оруулаарай.
Залгаасуудыг тус тусад нь (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
функцийг хангадаг. Энэ нь үйлдлийг эхлэхээс өмнө гүйцэтгэх ажиллагааг зогсоох боломжийг олгодог.
VERSION
Bootstrap-ийн jQuery залгаас бүрийн хувилбарт залгаасын үүсгэгчийн өмчөөр хандаж болно . Жишээлбэл, зааврын нэмэлт өргөтгөлийн хувьд:
JavaScript идэвхгүй болсон үед Bootstrap-ийн залгаасууд тийм ч сайн унадаггүй. Хэрэв та энэ тохиолдолд хэрэглэгчийн туршлагад санаа тавьж байгаа бол хэрэглэгчдэдээ <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
болно .modal
.
YouTube видеог загварт оруулахад автоматаар тоглуулахыг зогсоох болон бусад зүйлийг хийхийн тулд Bootstrap дээр биш нэмэлт JavaScript шаардлагатай. Дэлгэрэнгүй мэдээллийг Stack Overflow нийтлэлээс үзнэ үү .
Модаль нь хоёр сонголттой хэмжээтэй байдаг бөгөөд үүнийг өөрчлөх ангиудад байрлуулах боломжтой .modal-dialog
.
Үзэхийн тулд бүдгэрч харагдахын оронд зүгээр л харагдах загваруудын хувьд модаль .fade
тэмдэглэгээнээсээ ангиллыг устгана уу.
Модал доторх Bootstrap сүлжээний системийн давуу талыг ашиглахын тулд зүгээр л .row
дотор нь үүр хийж .modal-body
, дараа нь ердийн сүлжээний системийн ангиллыг ашигла.
Бага зэрэг өөр агуулгатай, ижил горимыг идэвхжүүлдэг олон товчлуур байгаа юу? Аль товчийг дарснаас хамааран модаль контентыг өөрчлөхийн тулд HTML event.relatedTarget
шинж чанаруудыг data-*
( jQuery -ээр дамжуулан ) ашиглана уу. -ийн талаарх дэлгэрэнгүй мэдээллийг Modal Events баримтаас үзнэ үү relatedTarget
.
Модал залгаас нь өгөгдлийн шинж чанар эсвэл JavaScript-ээр дамжуулан таны далд агуулгыг хүсэлтээр шилжүүлдэг. Энэ нь мөн өгөгдмөл гүйлгэх үйлдлийг хүчингүй болгох тохиргоонд нэмж, модальаас гадуур товших үед харуулсан модлуудыг хаах товшилтын талбарыг бий болгохын .modal-open
тулд a үүсгэдэг.<body>
.modal-backdrop
Модалыг JavaScript бичихгүйгээр идэвхжүүлнэ үү. data-toggle="modal"
Товчлуур гэх мэт удирдлагын элемент дээр сэлгэхийн тулд тодорхой модаль руу чиглүүлэхийн тулд data-target="#foo"
эсвэл тохируулна.href="#foo"
myModal
JavaScript-ийн нэг мөр бүхий id бүхий модаль дууд :
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-
хавсаргана data-backdrop=""
.
Нэр | төрөл | анхдагч | тайлбар |
---|---|---|---|
дэвсгэр | логик эсвэл мөр'static' |
үнэн | Modal-backdrop элементийг агуулдаг. Эсвэл товшилтоор модыг хаадаггүй static backdrop-ыг зааж өгнө үү. |
гар | логик | үнэн | Escape товчийг дарахад модальыг хаадаг |
шоу | логик | үнэн | Эхлэх үед модыг харуулна. |
алсын зайнаас | зам | худлаа | Энэ сонголтыг v3.3.0 хувилбараас хойш цуцалсан бөгөөд v4 хувилбараас хассан. Оронд нь үйлчлүүлэгч талын загварчлал эсвэл өгөгдөл холбох хүрээ ашиглах эсвэл jQuery.load руу өөрөө залгахыг зөвлөж байна. Хэрэв алсын URL-г өгсөн бол контентыг jQuery-ийн аргаар нэг удаа ачаалж , div руу оруулна. Хэрэв та data-api ашиглаж байгаа бол алсын эх сурвалжийг зааж өгөхийн тулд атрибутыг ашиглаж болно. Үүний жишээг доор харуулав. |
.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 шилжилт дуусахыг хүлээх болно). |
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
сэлгэн залгах зангуу элемент болох шинж чанартай байдаг.
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
show.bs.dropdown | Show instance аргыг дуудах үед энэ үйл явдал шууд идэвхждэг. |
харуулсан.bs.унадаг | Унтраах цэсийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
нуух.bs.dropdown | Нуух жишээний аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг. |
hidden.bs.dropdown | Унтраах цэсийг хэрэглэгчээс нууж дуусах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
ScrollSpy залгаас нь гүйлгэх байрлалд тулгуурлан навигацийн зорилтуудыг автоматаар шинэчлэх зориулалттай. Navbar-ийн доорх хэсгийг гүйлгэж, идэвхтэй ангийн өөрчлөлтийг хараарай. Унждаг дэд зүйлүүдийг мөн тодруулна.
Ad leggings keytar, brunch id art party dolor labore. Тэд qui зарагдахаас өмнө сэрээ yr enim lo-fi. Tumblr фермээс ширээний дугуйн эрх ямар ч байсан. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 чоно сар irure. Cosby цамц lomo жинсэн шорт, Williamsburg hoodie minim Qui та тэдний талаар сонсоогүй байж магадгүй ба кардиган итгэлцлийн сан culpa biodiesel Wes Anderson aesthetic. Nihil шивээстэй accusamus, Cred irony biodiesel keffiyeh artisan ullamco consequat.
Вениам марфа сахалтай скейтборд, adipisicing fugiat velit сэрээ сахал. Freegan сахал aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Шивээстэй косби цамц хүнсний ачааны машин, Mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Карлесын гоо зүйн бус дасгалууд нь зөөлөн биш юм. Brooklyn adipisicing гар урлалын шар айраг дэд keytar deserunt.
Commodo aliqua delectus. Fap craft шар айраг deserunt skateboard ea. Ломо дугуйн эрхийг adipisicing banh mi, velit ea sunt sunt next level locavore in one orgin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY хамгийн бага элч цүнх. Cred ex in, тогтвортой delectus consectetur fanny pack 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 blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats, consequat hoodie gluten free lo-fi fap aliquip-ийн талаар та сонсоогүй байх. Тэд зарагдаж дуусахаас өмнө ажилчид, Терри Ричардсон өглөөний цайны хоолонд оров. Cardigan craft шар айраг seitan бэлэн velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
Navbar холбоосууд нь шийдвэрлэх боломжтой id зорилтуудтай байх ёстой. Жишээ нь, <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
эх элементийн ID эсвэл анги бүхий атрибутыг нэмнэ үү..nav
CSS-ээ нэмсний дараа position: relative;
JavaScript-ээр дамжуулан scrollspy руу залгана уу:
.scrollspy('refresh')
Scrollspy-г DOM-д элемент нэмэх, хасахтай хамт ашиглах үед та дараах байдлаар сэргээх аргыг дуудах хэрэгтэй болно.
Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-
хавсаргана data-offset=""
.
Нэр | төрөл | анхдагч | тайлбар |
---|---|---|---|
офсет | тоо | 10 | Гүйлгэх байрлалыг тооцоолохдоо дээд талаас нь солих пиксел. |
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
activate.bs.scrollspy | Scrollspy-ээр шинэ зүйл идэвхжих болгонд энэ үйл явдал идэвхждэг. |
Унждаг цэсээр ч гэсэн дотоод контентын хэсэг рүү шилжихийн тулд хурдан, динамик таб функцийг нэмээрэй. Оруулсан табыг дэмждэггүй.
Түүхий жинсэн өмд Та магадгүй тэдний талаар сонсоогүй жинсэн шорт Остин. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Сахал клише tempor, Williamsburg carles vegan helvetica. Reprehenderit яргачин чимэг keffiyeh dreamcatcher synth. Косби цамц, 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-ээр чихтэй табуудыг идэвхжүүлэх (tab бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):
Та тусдаа табуудыг хэд хэдэн аргаар идэвхжүүлж болно:
Та ямар нэгэн JavaScript бичихгүйгээр зүгээр л нэг элемент дээр зааж өгснөөр таб data-toggle="tab"
эсвэл эм навигацийг идэвхжүүлж болно. data-toggle="pill"
Таб дээр nav
болон nav-tabs
ангиудыг нэмбэл ul
Bootstrap табын хэв маягийгnav
ашиглах ба мөн ангиудыг нэмбэл эм хэлбэрийгnav-pills
хэрэглэнэ .
Табуудыг бүдгэрүүлэхийн .fade
тулд тус бүр дээр нэмнэ үү .tab-pane
. Эхний табын самбар .in
нь анхны агуулгыг харагдуулах ёстой.
$().tab
Таб элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM доторх чингэлэг зангилаа руу чиглэсэн data-target
эсвэл a байх ёстой . 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 | Энэ үйл явдал нь шинэ таб харагдахаас өмнө tab шоу дээр гарч ирдэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.target болон ашиглана уу.event.relatedTarget |
харуулсан.bs.tab | Энэ үйл явдал нь табыг харуулсны дараа tab шоунд идэвхждэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.target болон ашиглана уу.event.relatedTarget |
hide.bs.tab | Энэ үйл явдал шинэ цонхыг харуулах үед идэвхждэг (ингэснээр өмнөх идэвхтэй табыг нуух шаардлагатай). Одоогийн идэвхтэй таб болон удахгүй идэвхтэй болох шинэ табыг тус тус чиглүүлэхийн тулд event.target болон ашиглана уу.event.relatedTarget |
hidden.bs.tab | Энэ үйл явдал шинэ табыг харуулсны дараа идэвхждэг (ингэснээр өмнөх идэвхтэй таб нуугдсан). Өмнөх идэвхтэй таб болон шинэ идэвхтэй табыг тус тус чиглүүлэхийн тулд event.target болон ашиглана уу.event.relatedTarget |
Жэйсон Фреймийн бичсэн гайхалтай jQuery.tipsy залгаасаас санаа авсан; Хэрэгслийн зөвлөмжүүд нь зураг дээр тулгуурладаггүй, хөдөлгөөнт дүрслэлд CSS3, орон нутгийн гарчиг хадгалахад өгөгдлийн шинж чанаруудыг ашигладаггүй шинэчилсэн хувилбар юм.
Тэг урттай гарчигтай зөвлөмжийг хэзээ ч харуулахгүй.
Доорх холбоосууд дээр хулганаа гүйлгэж, зөвлөмжийг харна уу:
Бариу өмд дараагийн түвшний keffiyeh та тэдний талаар сонсоогүй байх. Фото лангуу сахал түүхий жинсэн үсэг веган мессенжер цүнх Stumptown. Фермээс ширээнд суух seitan, Mcsweeney's fixie sustainable quinoa 8-бит америк хувцас нь Терри Ричардсон винил камертай. Сахал хожуул, кардиган банх ми ломо аянга. Дүпү биодизель Виллиамсбург Марфа, дөрвөн Локо Максвинигийн цэвэршүүлэх веган Chambray. Үнэхээр инээдтэй гар урлаач ямар ч keytar , scenester farm-to-table banksy Остин twitter бариул freegan cred raw denim single-origin coffee virus.
Дөрвөн сонголт боломжтой: дээд, баруун, доод, зүүн зэрэгцүүлсэн.
Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-д хамрагдах боломжтой тул та тэдгээрийг өөрөө эхлүүлэх хэрэгтэй гэсэн үг юм.
Хуудасны бүх зөвлөмжийг эхлүүлэх нэг арга бол тэдгээрийг 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 | Зөвлөмжийг харуулах, нуухыг хойшлуулах (ms) - гарын авлагын гох төрөлд хамаарахгүй Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ Объектын бүтэц нь: |
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', padding: 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.tooltip | show Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . |
үзүүлсэн.bs.хэрэгслийн зөвлөгөө | Хэрэгслийн зөвлөмжийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
hide.bs.tooltip | hide Инстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг . |
hidden.bs.tooltip | Хэрэгслийн зөвлөмжийг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно). |
оруулсан.bs.хэрэгслийн зөвлөгөө | show.bs.tooltip Хэрэгслийн загвар DOM-д нэмэгдсэн үед энэ үйл явдал үйл явдлын дараа идэвхгүй болно. |
Хоёрдогч мэдээллийг байрлуулах аливаа элементэд iPad дээрх шиг жижиг контент давхаргыг нэмнэ үү.
Гарчиг болон агуулга нь 0 урттай поповеруудыг хэзээ ч харуулахгүй.
Popover-ууд нь таны Bootstrap-ийн хувилбарт гарын авлагыг оруулахыг шаарддаг.
Гүйцэтгэлийн шалтгааны улмаас Tooltip болон Popover data-apis-д хамрагдах боломжтой тул та тэдгээрийг өөрөө эхлүүлэх хэрэгтэй гэсэн үг юм.
Хуудас дээрх бүх поповыг эхлүүлэх нэг арга бол тэдгээрийг data-toggle
шинж чанараар нь сонгох явдал юм:
.btn-group
a эсвэл a доторх элементүүд .input-group
, эсвэл хүснэгттэй холбоотой элементүүд ( <td>
, <th>
, <tr>
, , <thead>
, <tbody>
, ) дээр поповеруудыг ашиглахдаа хүсээгүй сөрөг нөлөөллөөс (элемент улам томрох болон/ гэх мэт) зайлсхийхийн тулд (доор баримтжуулсан) <tfoot>
сонголтыг зааж өгөх шаардлагатай. container: 'body'
эсвэл поповыг асаахад дугуйрсан булангаа алддаг).
disabled
эсвэл элементэд поповер нэмэхийн тулд .disabled
элементийг a дотор байрлуулж, оронд <div>
нь поповерыг хэрэглэнэ <div>
.
Заримдаа та олон мөрийг ороосон холбоос дээр поповер нэмэхийг хүсдэг. Поповер залгаасын өгөгдмөл үйлдэл нь түүнийг хэвтээ болон босоо байдлаар голлуулах явдал юм. 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=""
.
Нэр | Төрөл | Өгөгдмөл | Тодорхойлолт |
---|---|---|---|
хөдөлгөөнт дүрс | логик | үнэн | Popover руу CSS бүдгэрүүлэх шилжилтийг ашиглана уу |
сав | мөр | худлаа | худлаа | Тодорхой элементэд поповыг хавсаргана. Жишээ нь: |
агуулга | мөр | функц | '' |
Хэрэв функц өгөгдсөн |
саатал | тоо | обьект | 0 | Поповерыг харуулах, нуух саатал (ms) - гарын авлагын гох төрөлд хамаарахгүй Хэрэв дугаар өгсөн бол нуух/шоулуулах хоёуланд нь саатал хэрэглэнэ Объектын бүтэц нь: |
html | логик | худлаа | Popover руу HTML оруулна уу. Хэрэв худал бол jQuery-ийн text аргыг DOM-д контент оруулахад ашиглана. Хэрэв та XSS халдлагын талаар санаа зовж байгаа бол текстийг ашиглана уу. |
байрлуулах | мөр | функц | 'зөв' | Поповерыг хэрхэн байрлуулах вэ - дээд | доод | зүүн | зөв | авто. Байршлыг тодорхойлоход функцийг ашиглах үед түүнийг эхний аргумент болгон popover DOM зангилаа, хоёр дахь нь DOM зангилаагаар дууддаг. Контекстийг поповын |
сонгогч | мөр | худлаа | Хэрэв сонгогчийг өгсөн бол popover объектуудыг заасан зорилтууд руу шилжүүлнэ. Практикт энэ нь динамик HTML контентыг поповер нэмэхэд ашигладаг. Үүнийг болон мэдээллийн жишээг үзнэ үү . |
загвар | мөр | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
Popover үүсгэх үед ашиглах үндсэн HTML. Поповерыг . Поповерыг .
Хамгийн гадна талын боодлын элемент нь |
гарчиг | мөр | функц | '' |
Хэрэв функц өгөгдсөн |
гох | мөр | "товших" | Поповер хэрхэн идэвхждэг вэ - | дээр дарна уу хулганаа аваач | төвлөрөл | гарын авлага. Та олон өдөөгчийг дамжуулж болно; тэдгээрийг зайгаар тусгаарла. manual бусад өдөөгчтэй хослуулах боломжгүй. |
харах хэсэг | мөр | объект | функц | {сонгогч: 'body', padding: 0} | Энэ элементийн хүрээнд поповыг хадгална. Жишээ нь: Хэрэв функц өгөгдсөн бол түүнийг цорын ганц аргумент болгон өдөөх элементийн DOM зангилаагаар дуудна. Контекстийг поповын |
Дээр тайлбарласны дагуу өгөгдлийн шинж чанаруудыг ашиглан хувь хүний поповеруудын сонголтыг зааж өгч болно.
$().popover(options)
Элементийн цуглуулгад зориулсан поповеруудыг эхлүүлнэ.
.popover('show')
Элементийн поповыг харуулна. Поповер харагдахаас өмнө (өөрөөр хэлбэл shown.bs.popover
үйл явдал болохоос өмнө) дуудагч руу буцна. Энэ нь поповыг "гарын авлагын" өдөөгч гэж үздэг. Гарчиг болон агуулга нь 0 урттай поповеруудыг хэзээ ч харуулахгүй.
.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 шилжилт дуусахыг хүлээх болно). |
оруулсан.bs.popover | show.bs.popover DOM-д поповын загварыг нэмсэн тохиолдолд энэ үйл явдал идэвхгүй болно . |
Энэ залгаасыг ашиглан бүх анхааруулах мессежүүдэд хаах функцийг нэмнэ үү.
Товчлуурыг ашиглах үед .close
энэ нь эхний хүүхэд байх ёстой .alert-dismissible
бөгөөд тэмдэглэгээнд түүний өмнө ямар ч текст агуулагдах ёсгүй.
Үүнийг болон үүнийг өөрчлөөд дахин оролдоно уу. Duis mollis, est non 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
and -г ашиглаж $().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-г s-ээр солих боломжтой .list-group
.
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-ийн уналтын анги нь уналтын функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
харуулах.bs. нурах | show Инстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг . |
харуулсан.bs.нууралт | Уналтын элементийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (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 render -ийн алдааны улмаас татсан эсвэл түлхсэн багана гэх мэт харьцангуй байрлалтай элементэд байгаа элемент дээр нэмэлт залгаасыг бүү ашиглаарай .
Аффикс залгаас нь тус бүр нь тодорхой төлөвийг төлөөлдөг гурван ангийн хооронд шилждэг: .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;
шаардлагатай бол нэмнэ. Plugin нь тухайн элементийг хаана байрлуулахаа тодорхойлохын тулд өгөгдлийн атрибут эсвэл 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 залгаас нь аффиксийн функцэд холбогдох хэд хэдэн үйл явдлыг илчилдэг.
Үйл явдлын төрөл | Тодорхойлолт |
---|---|
affix.bs.affiks | Элементийг бэхлэхээс өмнө энэ үйл явдал шууд эхэлдэг. |
хавсаргасан.б.заалт | Элементийг хавсаргасны дараа энэ үйл явдал идэвхждэг. |
affix-top.bs.affiks | Энэ үйл явдал нь элементийг дээд талд наахаас өмнө шууд гарч ирдэг. |
хавсаргасан-дээд.bs.affiks | Элементийг дээд талд байрлуулсны дараа энэ үйл явдал идэвхждэг. |
affix-bottom.bs.affiks | Энэ үйл явдал нь элементийг доод талд байрлуулахаас өмнө шууд гарч ирдэг. |
хавсаргасан-доод.bs.affiks | Элементийг доод талд байрлуулсны дараа энэ үйл явдал идэвхждэг. |