Жеке же түзүлгөн

Плагиндер өзүнчө (айрымдарында талап кылынган көз карандылыктары бар) же бир эле учурда киргизилиши мүмкүн. bootstrap.js жана bootstrap.min.js экөө тең бир файлдагы бардык плагиндерди камтыйт.

Маалымат атрибуттары

Сиз бардык Bootstrap плагиндерин JavaScriptтин бир сабын жазбастан гана белгилөө API аркылуу колдоно аласыз. Бул Bootstrap'тин биринчи класстагы API'си жана плагинди колдонууда биринчи көңүл бурушуңуз керек.

Айтор, кээ бир учурларда бул функцияны өчүрүү туура болушу мүмкүн. Ошондуктан, биз ошондой эле ''data-api'' менен болгон дененин аталыштары мейкиндигиндеги бардык окуяларды алып салуу менен API маалымат атрибутун өчүрүү мүмкүнчүлүгүн беребиз. Бул төмөнкүдөй көрүнөт:

$ ( 'дене' ). өчүрүлгөн ( '.data-api' )

Же болбосо, белгилүү бир плагинди максаттуу үчүн, жөн гана плагиндин атын төмөнкүдөй data-api аттар мейкиндиги менен кошо аттар мейкиндиги катары кошуңуз:

$ ( 'дене' ). өчүк ( '.alert.data-api' )

Программалык API

Ошондой эле сиз бардык Bootstrap плагиндерин JavaScript API аркылуу гана колдоно аласыз деп ишенебиз. Бардык жалпыга ачык API'лер жалгыз, чынжырлануучу ыкмалар болуп саналат жана аларга ылайык иштелген коллекцияны кайтарып берет.

$ ( ".btn. Danger" ). баскычы ( «которуу» ). addClass ( "май" )

Бардык методдор кошумча опциялар объектисин, белгилүү бир ыкманы көздөгөн сапты же эч нерсени (демейки жүрүм-туруму бар плагинди баштаган) кабыл алышы керек:

$ ( "#myModal" ). modal () // демейки менен инициализацияланган                       
$ ( "#myModal" ). modal ({ клавиатура : false }) // баскычтопсуз инициализацияланган     
$ ( "#myModal" ). modal ( 'show' ) // инициализациялайт жана көрсөтүүнү дароо чакырат                

Ар бир плагин өзүнүн чийки конструкторун `Constructor` касиетинде көрсөтөт: $.fn.popover.Constructor. Эгер сиз белгилүү бир плагиндин үлгүсүн алгыңыз келсе, аны түздөн-түз элементтен чыгарып алыңыз: $('[rel=popover]').data('popover').

Конфликт жок

Кээде башка UI алкактары менен Bootstrap плагиндерин колдонуу керек болот. Мындай шарттарда аттар мейкиндигинде кагылышуулар кээде пайда болушу мүмкүн. Эгер мындай болуп калса, сиз .noConflictмаанисин кайтарууну каалаган плагинге чалсаңыз болот.

var bootstrapButton = $ . fn . баскычы . noConflict () // $.fn.buttonду мурда дайындалган мааниге кайтарыңыз 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn жүктөөчү функцияны бериңиз

Окуялар

Bootstrap көпчүлүк плагиндин уникалдуу аракеттери үчүн ыңгайлаштырылган окуяларды камсыз кылат. Негизинен булар инфинитив жана өткөн чак формасында келет - мында инфинитив (мис. show) окуянын башталышында, ал эми анын өткөн чак формасы (мис. shown) иш-аракеттин аяктаганда триггери болот.

Бардык инфинитив окуялар preventDefault функциясын камсыз кылат. Бул аракеттин аткарылышын ал башталганга чейин токтотуу мүмкүнчүлүгүн берет.

$ ( '#myModal' ). on ( 'көрсөтүү' , функция ( e ) {   
    эгерде ( ! маалыматтар ) e . preventDefault () // модалды көрсөтүүнү токтотот   
})

Өтүүлөр жөнүндө

Жөнөкөй өткөөл эффекттер үчүн, башка JS файлдарына бир жолу bootstrap-transition.js киргизиңиз. Эгерде сиз компиляцияланган (же кичирейтилген) bootstrap.js колдонуп жатсаңыз, муну кошуунун кереги жок — ал мурунтан эле бар.

Колдонуу учурлары

Өткөөл плагиндин бир нече мисалдары:

• Модалдарда жылмалоо же өчүп калуу
• Өчүп бара жаткан өтмөктөр
• Өчүп бараткан эскертүүлөр
• Жылдыруучу карусель панелдери

Мисалдар

Модальдар жөнөкөйлөштүрүлгөн, бирок ийкемдүү, минималдуу талап кылынган функционалдуулук жана акылдуу демейки параметрлери бар диалог чакырыктары.

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

Төмөнкү колонтитулдагы башкы, негизги жана аракеттердин жыйындысы менен көрсөтүлгөн модаль.

<div class = "модалдык жашыруу" > 
  <div class = "modal-header" > 
    <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "модалдык" aria-жашыруун = "чындык" > × </button>    
    <h3> модалдык баш </h3>
  </div>
  <div class = "modal-body" > 
    <p> Бир жакшы дене… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Жабуу </a>  
    <a href = "#" class = "btn btn-primary" > Өзгөртүүлөрдү сактоо </a>  
  </div>
</div>

Түз демо

Төмөнкү баскычты чыкылдатуу менен JavaScript аркылуу модалды которуштуруу. Ал ылдый жылып, беттин жогору жагына карай өчүп калат.

<!-- Модалды иштетүү үчүн баскыч -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Демо модалды ишке киргизүү </a>    
 
<!-- Модал -->
<div id = "myModal" класс = "модалдык жашыруу өчүп калуу" tabindex = "-1" ролу = "диалог" aria-labelledby = "myModalLabel" aria-hidden = "чындык" >      
  <div class = "modal-header" > 
    <баскыч түрү = "баскыч" класс = "жабуу" маалымат-башкаруу = "модалдык" aria-жашыруун = "чыныгы" > × </button>    
    <h3 id = "myModalLabel" > Модалдык баш </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Бир жакшы дене… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data- dississ = "modal" aria-hidden = "true" > Жабуу </button>   
    <button class = "btn btn-primary" > Өзгөртүүлөрдү сактоо </button> 
  </div>
</div>

Колдонуу

Маалымат атрибуттары аркылуу

JavaScript жазбастан модалды активдештирүү. Которуу үчүн белгилүү бир модалды максаттоо үчүн же data-toggle="modal"баскычы сыяктуу контроллердин элементине орнотуңуз .data-target="#foo"href="#foo"

<button type = "button" data-toggle = "modal " data-target = "#myModal" > Модалды ишке киргизүү </button>   

JavaScript аркылуу

myModalJavaScript бир сап менен id менен модалды чакырыңыз :

$ ( '#myModal' ). модалдык ( параметрлер )

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Методдор

.modal(параметрлер)

Мазмунуңузду модаль катары иштетет. Кошумча варианттарды кабыл алат object.

$ ( '#myModal' ). модалдык ({
  клавиатура : жалган 
})

.modal('которуу')

Модалды кол менен которуштуруу.

$ ( '#myModal' ). модаль ( 'которуу' )

.modal('шоу')

Модалды кол менен ачат.

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

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

Модалды кол менен жашырат.

$ ( '#myModal' ). модаль ( 'жашыруу' )

Окуялар

Bootstrap'тин модалдык классы модалдык функцияга кирүү үчүн бир нече окуяларды ачып берет.

$ ( '#myModal' ). on ( 'жашыруун' , функция () {   
  // бир нерсе кыл…
})

Мисалдар

Бул жөнөкөй плагин менен дээрлик бардык нерсеге ачылуучу менюларды кошуңуз, анын ичинде навигация тилкеси, өтмөктөр жана таблеткалар.

Navbar ичинде

Өтмөктөрдүн ичинде

Колдонуу

Маалымат атрибуттары аркылуу

Шилтемеге кошуңуз data-toggle="dropdown"же ачылуучу тизмени которуштуруу үчүн баскычты басыңыз.

<div класс = "ашылма" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Ашылма триггер </a>   
  <ul класс = "ашылуучу меню" ролу = "меню" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL даректерин сакташ үчүн, data-targetордуна атрибутун колдонуңуз href="#".

<div класс = "ашылма" > 
  <a class = "dropdown-toggle" id = "dLabel" ролу = "баскыч" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Ашылма
    <b class = "caret" ></b> 
  </a>
  <ul класс = "ашылуучу меню" ролу = "меню" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript аркылуу

JavaScript аркылуу ачылуучу тизмелерге чалыңыз:

$ ( '.ашылуучу-которуу' ). ачылуучу ()

Параметрлер

Жок

Методдор

$(). ылдый түшүүчү('которуу')

Берилген навигация же өтмөктүү навигация үчүн менюларды которуштуруу үчүн программалык api.

Navbarдагы мисал

ScrollSpy плагини жылдыруу абалына жараша навигация максаттарын автоматтык түрдө жаңыртуу үчүн. Чабыт тилкесинин астындагы аймакты сыдырып, класстын активдүү өзгөрүшүн көрүңүз. Ылдый түшүүчү суб пункттар да баса белгиленет.

Колдонуу

Маалымат атрибуттары аркылуу

Үстүнкү тилкеңиздин навигациясына скллсpy ​​жүрүм-турумун оңой кошуу үчүн, жөн гана data-spy="scroll"шпион кылгыңыз келген элементке кошуңуз (көбүнчө бул дене болот) жана data-target=".navbar"кайсы навигацияны колдонууну тандаңыз. Сиз компонент менен scrollspy колдонгуңуз келет .nav.

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

JavaScript аркылуу

JavaScript аркылуу scrollspy чакырыңыз:

$ ( '#navbar' ). scrollspy ()

Методдор

.scrollspy('жаңылоо')

DOMдан элементтерди кошуу же алып салуу менен бирге scrollspy колдонуп жатканда, сиз жаңылоо ыкмасын төмөнкүдөй чакырышыңыз керек:

$ ( '[data-spy="scroll"]' ). ар бир ( функция () {  
  var $spy = $ ( бул ). scrollspy ( 'жаңылоо' )
});

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset="".

Окуялар

Мисал өтмөктөр

Жергиликтүү мазмундун панелдеринен өтүү үчүн тез, динамикалык өтмөк функциясын кошуңуз, атүгүл ылдый түшүүчү менюлар аркылуу.

Колдонуу

JavaScript аркылуу табулатура өтмөктөрдү иштетүү (ар бир өтмөк өзүнчө активдештирилиши керек):

$ ( '#менин Табам a' ). чыкылдатуу ( функция ( e ) {  
  д . preventDefault ();
  $ ( бул ). табулатура ( 'көрсөтүү' );
})

Сиз жеке өтмөктөрдү бир нече жол менен иштете аласыз:

$ ( '#myTab a[href="#profile"]' ). табулатура ( 'көрсөтүү' ); // Аты боюнча өтмөктү тандаңыз 
$ ( '#myTab a:first' ). табулатура ( 'көрсөтүү' ); // Биринчи өтмөктү танда 
$ ( '#myTab a:last' ). табулатура ( 'көрсөтүү' ); // Акыркы өтмөктү тандоо 
$ ( '#myTab li:eq(2) a' ). табулатура ( 'көрсөтүү' ); // Үчүнчү өтмөктү тандоо (0-индекстелген) 

Белгилөө

data-toggle="tab"Сиз жөн гана белгилөө же data-toggle="pill"элемент боюнча эч кандай JavaScript жазбастан өтмөктү же таблетка навигациясын иштете аласыз . Өтмөккө navжана nav-tabsкласстарды кошуу ulBootstrap өтмөгүнүн стилин колдонот.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Башкы </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Профиль </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Кабарлар </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Орнотуулар </a></li>  
</ul>

Методдор

$().tab

Өтмөк элементин жана мазмун контейнерин иштетет. Өтмөктө DOMдагы контейнер түйүнү data-targetже максаттуу болушу керек .href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Башкы </a></li>  
  <li><a href = "#profile" > Профиль </a></li> 
  <li><a href = "#messages" > Кабарлар </a></li> 
  <li><a href = "#settings" > Орнотуулар </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "билдирүүлөр" > ... </div>  
  <div class = "tab-pane" id = "жөндөөлөр" > ... </div>  
</div>
 
<скрипт>
  $ ( функция () {  
    $ ( '#myTab a:last' ). табулатура ( 'көрсөтүү' );
  })
</script>

Окуялар

$ ( 'a[data-toggle="tab"]' ). on ( 'көрсөтүлгөн' , функция ( e ) {   
  д . максаттуу // активдештирилген өтмөк
  д . байланыштууTarget // мурунку өтмөк
})

Мисалдар

Джейсон Фрейм жазган сонун jQuery.tipsy плагининен шыктанган; Куралдар кеңештери жаңыртылган версия, ал сүрөттөргө таянбайт, анимациялар үчүн CSS3 жана жергиликтүү аталыштарды сактоо үчүн маалымат атрибуттары колдонулат.

Иштин натыйжалуулугунун себептеринен улам, куралдардын кеңеши жана popover data-apis кошулган, демек сиз аларды ��зүңүз инициализациялашыңыз керек .

Куралдар кеңештерин көрүү үчүн төмөнкү шилтемелердин үстүнөн өтүңүз:

Төрт багыт

Киргизүү топторундагы кеңештер

Bootstrap киргизүү топтору менен куралдар кеңештерин жана поповерлерди колдонууда, containerкаалабаган терс таасирлерден качуу үчүн (төмөндө документтештирилген) параметрин коюшуңуз керек болот.

Колдонуу

JavaScript аркылуу инструментти иштетиңиз:

$ ( '#мисалы' ). кеңеш ( параметрлер )

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

Белгилөө

<a href = "#" data-toggle = "tooltip" title = "биринчи инструмент" > курсорду менин үстүмө алып кел </a>   

Методдор

$().куралдуу кеңеш(параметрлер)

Элементтердин коллекциясына инструментарий иштеткичти тиркейт.

.tooltip('шоу')

Элементтин кеңешин көрсөтөт.

$ ( '#элемент' ). кеңеш ( 'шоу' )

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

Элементтин кеңешин жашырат.

$ ( '#элемент' ). кеңеш ( 'жашыруу' )

.tooltip('которуу')

Элементтин кеңешин которуштуруу.

$ ( '#элемент' ). курал үчүн кеңеш ( 'которуу' )

.tooltip('жок кылуу')

Элементтин кеңештерин жашырат жана жок кылат.

$ ( '#элемент' ). кеңеш ( 'жок кылуу' )

Мисалдар

Кошумча маалымат үчүн каалаган элементке, iPadдагылар сыяктуу мазмундун кичинекей катмарларын кошуңуз. Поповерди иштетүү үчүн баскычтын үстүнөн барыңыз. Tooltip камтылышын талап кылат .

Static popover

Төрт вариант бар: жогорку, оң, ылдый жана сол тегизделген.

dataJavaScript жана атрибуттагы мазмундан поповерлер катары көрсөтүлгөн эч кандай белгилөө жок .

Түз демо

Төрт багыт

Колдонуу

JavaScript аркылуу поповерлерди иштетүү:

$ ( '#мисалы' ). popover ( параметрлер )

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

Белгилөө

Майнаптуулук үчүн, Tooltip жана Popover data-apis кошулат. Эгер сиз аларды колдонгуңуз келсе, жөн гана селектордук опцияны көрсөтүңүз.

Методдор

$().popover(параметрлер)

Элементтердин жыйнагы үчүн поповерлерди инициализациялайт.

.popover('шоу')

Элементтерди ачат.

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

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

Калкыма элементтерди жашырат.

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

.popover('toggle')

Элементтердин калкып чыгуусун өчүрөт.

$ ( '#элемент' ). popover ( 'которуу' )

.popover('кыйрат')

Элементтин поповерин жашырат жана жок кылат.

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

Мисал эскертүүлөр

Бул плагин менен бардык эскертүү билдирүүлөрүнө четке кагуу функциясын кошуңуз.

Колдонуу

JavaScript аркылуу эскертүүнү өчүрүүнү иштетүү:

$ ( ". alert" ). эскертүү ()

Белгилөө

data-dismiss="alert"Эскертүүнү автоматтык түрдө жабуу функциясын берүү үчүн жөн гана жабуу баскычын кошуңуз .

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

Методдор

$().alert()

Бардык эскертүүлөрдү жакын функциялар менен оройт. Жабык болгондо эскертүүлөрүңүз жанданып турушу үчүн, аларга .fadeжана .inклассы мурунтан эле колдонулганын текшериңиз.

.alert('жабуу')

Эскертүүнү жабат.

$ ( ". alert" ). эскертүү ( 'жабуу' )

Окуялар

Bootstrap'тин эскертүү классы эскертүү функциясына кирүү үчүн бир нече окуяларды ачып берет.

$ ( '#менин эскертүүм' ). байланыш ( 'жабык' , функция () {   
  // бир нерсе кыл…
})

Мисал колдонуу

Баскычтар менен көбүрөөк кылыңыз. Башкаруу баскычынын абалы же куралдар панели сыяктуу башка компоненттер үчүн баскычтардын топторун түзүңүз.

Мамлекеттүү

data-loading-text="Loading..."баскычтагы жүктөө абалын колдонуу үчүн кошуу .

<баскыч түрү = "баскыч" класс = "btn btn-primary" data-loading-text = "Жүктөө..." > Жүктөө абалы </button>   

Жалгыз которуштуруу

data-toggle="button"Бир баскыч менен которууну иштетүү үчүн кошуу .

<баскыч түрү = "баскыч" класс = "btn btn-primary" data-toggle = "баскыч" > Жалгыз которуу </ баскыч>   

Белгилөө кутучасы

data-toggle="buttons-checkbox"btn-группадагы белгилөө кутучасынын стилин которуштуруу үчүн кошуу .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Сол </button>  
  <button type = "button" class = "btn btn-primary" > Орто </button>  
  <button type = "button" class = "btn btn-primary" > Оң </button>  
</div>

Радио

data-toggle="buttons-radio"Btn-группадагы радио стилин которуштуруу үчүн кошуңуз .

<div класс = "btn-group" data-toggle = "баскычтар-радио" >  
  <button type = "button" class = "btn btn-primary" > Сол </button>  
  <button type = "button" class = "btn btn-primary" > Орто </button>  
  <button type = "button" class = "btn btn-primary" > Оң </button>  
</div>

Колдонуу

JavaScript аркылуу баскычтарды иштетүү:

$ ( '.nav-tabs' ). баскычы ()

Белгилөө

Маалымат атрибуттары баскыч плагининин ажырагыс бөлүгү болуп саналат. Ар кандай белгилөө түрлөрү үчүн төмөндөгү мисал кодун текшериңиз.

Параметрлер

Жок

Методдор

$().button('которуу')

Басуу абалын которуштуруу. Баскычка ал иштетилгендей көрүнүштү берет.

<button type = "баскыч" класс = "btn" data-toggle = "баскыч" > … </button>    

$().button('жүктөө')

Жүктөө баскычынын абалын орнотот - баскычты өчүрүп, текстти жүктөө текстине алмаштырат. Жүктөө тексти маалымат атрибутун колдонуу менен баскыч элементинде аныкталышы керек data-loading-text.

<button type = "баскыч" класс = "btn" data-loading-text = "материалдар жүктөлүүдө..." > ... </button>    

$().button('reset')

Баскычтын абалын калыбына келтирет - текстти түпнуска текстке алмаштырат.

$().button(сап)

Баскычтын абалын баштапкы абалга келтирет - текстти каалаган маалымат аныкталган текст абалына алмаштырат.

<баскыч түрү = "баскыч" класс = "btn" маалымат-толук-текст = "бүттү!" > ... </button>    
<скрипт>
  $ ( '.btn' ). баскычы ( 'толук' )
</script>

Жөнүндө

Аккордеон жана навигация сыяктуу жыйыла турган компоненттер үчүн негизги стилдерди жана ийкемдүү колдоо алыңыз.

* Transitions плагининин камтылышын талап кылат.

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

Collapse плагинин колдонуп, биз жөнөкөй аккордеон стилиндеги виджетти курдук:

<div класс = "аккордеон" id = "аккордеон2" >  
  <div класс = "аккордеон тобу" > 
    <div class = "аккордеон рубрикасы" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Топтолуучу №1 нерсе
      </a>
    </div>
    <div id = "collapseOne" класс = "аккордеон денесинин кулашы" >  
      <div class = "аккордеон-ички" > 
        Аним париатур клише...
      </div>
    </div>
  </div>
  <div класс = "аккордеон тобу" > 
    <div class = "аккордеон рубрикасы" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Топтолуучу №2 пункт
      </a>
    </div>
    <div id = "collapseTwo" класс = "аккордеон-дене кулашы" >  
      <div class = "аккордеон-ички" > 
        Аним париатур клише...
      </div>
    </div>
  </div>
</div>
...

Сиз ошондой эле плагинди аккордеон белгиси жок колдоно аласыз. Башка элементтин кеңейүү жана жыйрылышын которуштуруу баскычын жасаңыз.

<баскыч түрү = "баскыч" класс = "btn btn-коркунуч" маалымат- которуу = "кыйратуу" маалымат-максат = "#демо" >    
  жөнөкөй жыгылат
</button>
 
<div id = "демо" класс = "жыйыштыруу" > … </div>  

Колдонуу

Маалымат атрибуттары аркылуу

Жыйналма элементти башкарууну автоматтык түрдө дайындоо үчүн жөн гана элементке кошуу data-toggle="collapse"жана a . data-targetАтрибут data-targetкыйратуу үчүн CSS селекторун кабыл алат. collapseКлассты жыйыла турган элементке кошууну унутпаңыз . Эгер анын демейки ачылуусун кааласаңыз, кошумча классты кошуңуз in.

Аккордеон сыяктуу топту башкарууну жыйма башкарууга кошуу үчүн, маалымат атрибутун кошуңуз data-parent="#selector". Муну иш жүзүндө көрүү үчүн демонстрацияга кайрылыңыз.

JavaScript аркылуу

Кол менен иштетүү:

$ ( ".collapse" ). кыйратуу ()

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-parent="".

Методдор

.collapse(параметрлер)

Мазмунуңузду жыйма элемент катары иштетет. Кошумча варианттарды кабыл алат object.

$ ( '#myCallpsible' ). кыйратуу ({
  которуу : жалган 
})

.collapse('toggle')

Жыйналма элементти көрсөтүүгө же жашырууга которот.

.collapse('шоу')

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

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

Жыйналма элементти жашырат.

Окуялар

Bootstrap'тин кыйратуу классы кыйратуу функциясына кирүү үчүн бир нече окуяларды ачып берет.

$ ( '#myCallpsible' ). on ( 'жашыруун' , функция () {   
  // бир нерсе кыл…
})

Мисал карусель

Төмөндөгү слайдшоу жалпы плагинди жана карусель сыяктуу элементтерди тебүү үчүн компонентти көрсөтөт.

Биринчи эскиз энбелгиси

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Экинчи эскиз энбелгиси

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Үчүнчү эскиз энбелгиси

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

<div id = "myCarousel" класс = "карусель слайды" >  
  <ol класс = "карусель-индикаторлор" > 
    <li data-target = "#myCarousel" data-slide-to = "0" класс = "активдүү" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Карусель буюмдары -->
  <div class = "карусель-ички" > 
    <div class = "активдүү нерсе" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "кийинки" > › </a>   
</div>

Колдонуу

Маалымат атрибуттары аркылуу

Каруселдин абалын оңой башкаруу үчүн маалымат атрибуттарын колдонуңуз. же data-slideачкыч сөздөрдү кабыл алат , бул слайддын абалын учурдагы абалына карата өзгөртөт. Же болбосо, слайддын позициясы менен башталган белгилүү бир индекске өтүүчү каруселге чийки слайд индексин өткөрүү үчүн колдонуңуз .prevnextdata-slide-todata-slide-to="2"0

JavaScript аркылуу

Каруселге кол менен чалуу:

$ ( '.карусель' ). карусель ()

Параметрлер

Параметрлер маалымат атрибуттары же JavaScriptz аркылуу өтүшү мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-interval="".

Методдор

.carousel(параметрлер)

Кошумча опциялар менен карусельди инициализациялайт objectжана буюмдарды аралай баштайт.

$ ( '.карусель' ). карусель ({
  интервал : 2000 
})

.carousel('цикл')

Карусель буюмдарын солдон оңго карай айлантыңыз.

.carousel('тыным')

Карусель буюмдарды айланып өтүүнү токтотот.

.карусель(сан)

Карусельди белгилүү бир кадрга айлантат (0 негизинде, массивге окшош).

.carousel('мурунку')

Мурунку пунктка өтүү.

.carousel('кийинки')

Кийинки нерсеге өтүү.

Окуялар

Bootstrap'тин карусель классы карусель функциясына кирүү үчүн эки окуяны ачып берет.

Мисал

Каалаган формадагы текст киргизүү менен көрктүү тамгаларды тез түзүү үчүн негизги, оңой кеңейтилген плагин.

<киргизүү түрү = "текст" маалымат-камсыз кылуу = "typeahead" >  

autocomplete="off"Демейки серепчинин менюларынын Bootstrap typeahead ачылуучу ылдыйда пайда болушуна жол бербөөнү каалайсыз .

Колдонуу

Маалымат атрибуттары аркылуу

Жогорудагы мисалда көрсөтүлгөндөй, терүү функциясы менен элементти каттоо үчүн маалымат атрибуттарын кошуңуз.

JavaScript аркылуу

Төмөнкүлөр менен машинкага кол менен чалыңыз:

$ ( '.typeahead' ). терүү ()

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-source="".

Методдор

.typeahead(параметрлер)

Киргизүүнү терүү алды менен инициализациялайт.

Мисал

Сол жактагы субнавигация - бул аффикс плагининин жандуу демосу.

Колдонуу

Маалымат атрибуттары аркылуу

Каалаган элементке аффикстүү жүрүм-турумду оңой кошуу үчүн, жөн гана data-spy="affix"шпион кылгыңыз келген элементке кошуңуз. Андан кийин элементтин кадалышын качан күйгүзүү жана өчүрүү керек экендигин аныктоо үчүн офсеттерди колдонуңуз.

<div data-spy = "affiks" data-offset-top = "200" > ... </div>  

JavaScript аркылуу

JavaScript аркылуу аффикс плагинине чалыңыз:

$ ( '#navbar' ). аффикс ()

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-offset-top="200".