Модалдар жөнүндө

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

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

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

Түз демо

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

Bootstrap-modal колдонуу

Модалга javascript аркылуу чалыңыз:

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

Параметрлер

Белгилөө

Сиз JavaScriptтин бир сабын жазбастан эле баракчаңызда модальдарды оңой иштете аласыз. Жөн гана модалдык элементтин идентификаторуна же data-toggle="modal"дал келген контроллердин элементине орнотуңуз жана басылганда, ал сиздин модалды ишке киргизет.data-target="#foo"href="#foo"

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > Модалды ишке киргизүү </a>    

<div class = "modal " id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "жабуу" data-dississ = "modal" > × </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>

Методдор

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

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

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

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

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

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

.modal('шоу')

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

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

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

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

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

Окуялар

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

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

Ашылма тизмелер жөнүндө

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

Мисалдар

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

• Кадимки шилтеме
• Ашылма
  • Action
  • Another action
  • Something else here
  • Separated link
• Ашылма 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Ашылма 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js колдонуу

JavaScript аркылуу ылдый түшүүчүлөргө чалыңыз:

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

Белгилөө

Каалаган элементке ылдый түшүүчү функцияны тез кошуу үчүн жөн гана кошуңуз data-toggle="dropdown"жана бардык жарактуу жүктөөчү ачылуучу тизме автоматтык түрдө жандырылат.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Кадимки шилтеме </a></li>  
  <li класс = "ашылма " id = "меню1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Ашылма
      <b class = "caret" ></b> 
    </a>
    <ul class = "ылдый түшүүчү меню" > 
      <li><a href = "#" > Аракет </a></li> 
      <li><a href = "#" > Башка аракет </a></li> 
      <li><a href = "#" > Бул жерде дагы бир нерсе </a></li> 
      <li класс = "бөлүүчү" ></li> 
      <li><a href = "#" > Бөлүнгөн шилтеме </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li класс = "ашылма" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Ашылма
      <b class = "caret" ></b> 
    </a>
    <ul class = "ылдый түшүүчү меню" > 
      ...
    </ul>
  </li>
</ul>

Методдор

$(). dropdown()

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

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

Scrollspy менен навигация тилкесинин мисалы

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

bootstrap-scrollspy.js колдонуу

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

$ ( '#navbar' ). scrollspy ()

Белгилөө

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

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

Методдор

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

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

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

Параметрлер

Окуялар

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

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

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

• Үй
• Профиль
• Ашылма
  • @fat
  • @mdo

bootstrap-tab.js колдонуу

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

$ ( '#менин Табам a' ). чыкылдатуу ( функция ( e ) {  
  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класстарын кошуу ulжүктөө өтмөктүн стилин колдонот.

<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 ) {   
  e . максаттуу // активдештирилген өтмөк
  e . байланыштууTarget // мурунку өтмөк
})

Кеңештер жөнүндө

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

Tooltips колдонуу мисалы

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

bootstrap-tooltip.js колдонуу

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

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

Параметрлер

Белгилөө

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

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

Методдор

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

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

.tooltip('шоу')

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

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

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

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

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

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

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

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

Поповерлер жөнүндө

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

* Tooltip камтылышын талап кылат

Мисалы, калкып чыгуу

Поповерди иштетүү үчүн баскычтын үстүнөн барыңыз.

bootstrap-popover.js колдонуу

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

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

Параметрлер

Белгилөө

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

Методдор

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

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

.popover('шоу')

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

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

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

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

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

.popover('toggle')

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

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

Эскертүүлөр жөнүндө

Эскертүү плагини - эскертүүлөргө жакын функцияларды кошуу үчүн кичинекей класс.

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

Эскертүүлөр плагини кадимки эскертүү билдирүүлөрүндө иштейт жана билдирүүлөрдү бөгөттөө.

bootstrap-alert.js колдонуу

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

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

Белгилөө

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

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

Методдор

$().alert()

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

.alert('жабуу')

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

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

Окуялар

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

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

Жөнүндө

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

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

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

bootstrap-button.js колдонуу

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

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

Белгилөө

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

<!-- Кошумча data-toggle="button" бир баскычка которууну иштетүү -->
<button class = "btn" data-toggle = "button" > Жалгыз которуу </button>  
 
<!-- btn-группада белгилөө кутучасынын стилин алмаштыруу үчүн data-toggle="buttons-checkbox" кошуңуз -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Сол </button> 
  <button class = "btn" > Орто </button> 
  <button class = "btn" > Оң </button> 
</div>
 
<!-- btn-group боюнча радио стилин которуу үчүн data-toggle="buttons-radio" кошуу -->
<div класс = "btn-group" data-toggle = "баскычтар-радио" >  
  <button class = "btn" > Сол </button> 
  <button class = "btn" > Орто </button> 
  <button class = "btn" > Оң </button> 
</div>

Методдор

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

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

<button class = "btn" data-toggle = "button" > … </button>   

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

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

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

$().button('reset')

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

$().button(сап)

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

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

Жөнүндө

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

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

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

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

bootstrap-collapse.js колдонуу

JavaScript аркылуу иштетүү:

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

Параметрлер

Белгилөө

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

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

Методдор

.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.

‹ ›

bootstrap-carousel.js колдонуу

JavaScript аркылуу чалуу:

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

Параметрлер

Белгилөө

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

<div id = "myCarousel" класс = "карусель" >  
  <!-- Карусель буюмдары -->
  <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>

Методдор

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

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

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

.carousel('цикл')

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

.carousel('тыным')

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

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

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

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

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

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

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

Окуялар

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

Жөнүндө

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

Мисал

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

bootstrap-typeahead.js колдонуу

Javascript аркылуу терүүчүгө чалыңыз:

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

Параметрлер

Белгилөө

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

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

Методдор

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

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