Մոդալների մասին

Պարզեցված, բայց ճկուն, ավանդական javascript մոդալ հավելումը միայն նվազագույն պահանջվող ֆունկցիոնալությամբ և խելացի լռելյայններով:

Ստատիկ օրինակ

Ստորև բերված է ստատիկ կերպով ներկայացված մոդալ:

Կենդանի ցուցադրություն

Միացնել մոդալը Javascript-ի միջոցով՝ սեղմելով ստորև նշված կոճակը: Այն կսահի ներքև և կխամրի էջի վերևից:

Օգտագործելով bootstrap-modal

Զանգահարեք մոդալը Javascript-ի միջոցով.

$ ( «#myModal» ): մոդալ ( ընտրանքներ )

Ընտրանքներ

Նշում

Դուք կարող եք հեշտությամբ ակտիվացնել մոդալները ձեր էջում՝ առանց Javascript-ի մեկ տող գրելու: Պարզապես դրեք data-toggle="modal"կարգավորիչի տարրը data-target="#foo"կամ href="#foo"որը համապատասխանում է մոդալ տարրի id-ին, և սեղմելուց հետո այն կգործարկի ձեր մոդալը:

Բացի այդ, ձեր մոդալ օրինակին տարբերակներ ավելացնելու համար պարզապես ներառեք դրանք որպես լրացուցիչ տվյալների ատրիբուտներ կամ կառավարման տարրի կամ մոդալ նշագրման վրա:

<a class = "btn" data-toggle = "modal" href = "#myModal" > Գործարկել մոդալը </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Մոդալ վերնագիր </h3>
  </div>
  <div class = «մոդալ-մարմին» > 
    <p> Մեկ նուրբ մարմին… </p>
  </div>
  <div class = «modal-footer» > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Փակել </a>   
    <a href = "#" class = "btn btn-primary" > Պահպանել փոփոխությունները </a>  
  </div>
</div>

Մեթոդներ

.modal(ընտրանքներ)

Ակտիվացնում է ձեր բովանդակությունը որպես մոդալ: Ընդունում է ընտրովի տարբերակներ object:

$ ( «#myModal» ): մոդալ ({
  ստեղնաշար : կեղծ 
})

.modal ('toggle')

Ձեռքով փոխում է մոդալը:

$ ( «#myModal» ): մոդալ ( «անջատել» )

.modal ('ցուցադրել')

Ձեռքով բացում է մոդալ:

$ ( «#myModal» ): մոդալ ( «ցուցադրել» )

.modal ('թաքցնել')

Ձեռքով թաքցնում է մոդալը:

$ ( «#myModal» ): մոդալ ( «թաքցնել» )

Իրադարձություններ

Bootstrap-ի մոդալ դասը բացահայտում է մի քանի իրադարձություն՝ մոդալ ֆունկցիոնալությանը միանալու համար:

$ ( «#myModal» ): on ( 'թաքնված' , ֆունկցիա () {   
  // անել ինչ որ բան…
})

Բացվողների մասին

Բացվող ընտրացանկերը ավելացրեք Bootstrap-ում գրեթե ցանկացած բանի այս պարզ հավելվածի միջոցով: Bootstrap-ն ապահովում է բացվող ընտրացանկի ամբողջական աջակցությունը navbar-ում, ներդիրներում և հաբերում:

Օրինակներ

Կտտացրեք նավարկիչի բացվող հղումների վրա և ներքևում գտնվող հաբերի վրա՝ բացվող ցանկերը փորձարկելու համար:

• Կանոնավոր հղում
• Բացվող
  • 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-ի միջոցով.

$ ( '.dropdown-toggle' ): բացվող ()

Նշում

Ցանկացած տարրի բացվող ֆունկցիոնալությունը արագ ավելացնելու համար պարզապես ավելացրեք data-toggle="dropdown", և ցանկացած վավեր bootstrap բացվող ցանկն ավտոմատ կերպով կակտիվանա:

<ul class = «nav nav-pills» > 
  <li class = "active" ><a href = "#" > Կանոնավոր հղում </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Բացվող
      <b class = «caret» ></b> 
    </a>
    <ul class = «dropdown-menu» > 
      <li><a href = "#" > Գործողություն </a></li> 
      <li><a href = "#" > Մեկ այլ գործողություն </a></li> 
      <li><a href = "#" > Այստեղ այլ բան </a></li> 
      <li class = «բաժանարար» ></li> 
      <li><a href = "#" > Առանձնացված հղում </a></li> 
    </ul>
  </li>
  ...
</ul>

URL-ները անփոփոխ պահելու համար օգտագործեք data-targetհատկանիշը .-ի փոխարեն href="#":

<ul class = «nav nav-pills» > 
  <li class = «բացվող» > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Բացվող
      <b class = «caret» ></b> 
    </a>
    <ul class = «dropdown-menu» > 
      ...
    </ul>
  </li>
</ul>

Մեթոդներ

$(). dropdown()

Ծրագրային api՝ տվյալ նավագոտու կամ ներդիրներով նավիգացիայի համար ընտրացանկերի ակտիվացման համար:

ScrollSpy հավելվածը նախատեսված է նավի թիրախների ավտոմատ թարմացման համար՝ հիմնվելով ոլորման դիրքի վրա:

Օրինակ նավագոտի scrollspy-ով

Ոլորեք ներքևի տարածքը և դիտեք նավիգացիայի թարմացումը: Բացվող ենթակետերը նույնպես ընդգծված կլինեն: Փորձիր!

Օգտագործելով bootstrap-scrollspy.js

Զանգահարեք scrollspy-ին Javascript-ի միջոցով.

$ ( '#navbar' ): scrollspy ()

Նշում

Որպեսզի հեշտությամբ ավելացնեք ձեր վերևի տողի նավարկության մեջ գաղտնալսման վարքագիծը, պարզապես ավելացրեք data-spy="scroll"այն տարրը, որը ցանկանում եք լրտեսել (սովորաբար սա կլինի մարմինը):

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

Մեթոդներ

.scrollspy ('թարմացնել')

Երբ օգտագործում եք scrollspy-ը DOM-ից տարրեր ավելացնելու կամ հեռացնելու հետ մեկտեղ, դուք պետք է զանգահարեք թարմացման մեթոդը այսպես.

$ ( '[data-spy="scroll"]' ): յուրաքանչյուրը ( ֆունկցիա () {  
  var $spy = $ ( սա ): scrollspy ( «թարմացում» )
});

Ընտրանքներ

Իրադարձություններ

Այս փլագինը ավելացնում է արագ, դինամիկ ներդիրների և հաբերի ֆունկցիոնալությունը՝ տեղական բովանդակության միջոցով անցնելու համար:

Օրինակ ներդիրներ

Կտտացրեք ստորև բերված ներդիրներին՝ թաքնված վահանակների միջև փոխարկվելու համար, նույնիսկ բացվող ընտրացանկերի միջոցով:

• տուն
• Անձնագիր
• Բացվող
  • @fat
  • @mdo

Օգտագործելով bootstrap-tab.js

Միացնել tabbable ներդիրները javascript-ի միջոցով (յուրաքանչյուր ներդիր պետք է առանձին ակտիվացվի).

$ ( «#myTab a» ): սեղմեք ( ֆունկցիա ( e ) {  
  ե . preventDefault ();
  $ ( սա ): ներդիր ( «ցուցադրել» );
})

Դուք կարող եք ակտիվացնել առանձին ներդիրները մի քանի եղանակով.

$ ( '#myTab a[href="#profile"]' ): ներդիր ( «ցուցադրել» ); // Ընտրեք ներդիրը անունով 
$ ( '#myTab a:first' ): ներդիր ( «ցուցադրել» ); // Ընտրեք առաջին ներդիրը 
$ ( '#myTab a:last' ): ներդիր ( «ցուցադրել» ); // Ընտրեք վերջին ներդիրը 
$ ( '#myTab li:eq(2) a' ): ներդիր ( «ցուցադրել» ); // Ընտրեք երրորդ ներդիրը (0-ինդեքսավորված) 

Նշում

Դուք կարող եք ակտիվացնել ներդիրի կամ հաբերի նավարկությունը՝ առանց որևէ javascript գրելու՝ պարզապես նշելով data-toggle="tab"կամ data-toggle="pill"որևէ տարրի վրա: navև nav-tabsդասերը ներդիրում ավելացնելու ulդեպքում կկիրառվի bootstrap ներդիրի ոճավորումը:

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

Մեթոդներ

$().էջանիշ

Ակտիվացնում է ներդիրի տարրը և բովանդակության կոնտեյները: Ներդիրը պետք է ունենա DOM-ում կամ a 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 = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( ֆունկցիա () {  
    $ ( '#myTab a:last' ): ներդիր ( «ցուցադրել» );
  })
</script>

Իրադարձություններ

$ ( 'a[data-toggle="tab"]' ): on ( 'ցուցադրված' , ֆունկցիա ( e ) {   
  ե . թիրախ // ակտիվացված ներդիր
  ե . relatedTarget // նախորդ ներդիր
})

Tooltips-ի մասին

Ոգեշնչված է հիանալի jQuery.tipsy հավելվածով, որը գրվել է Ջեյսոն Ֆրեյմի կողմից; Tooltips-ը թարմացված տարբերակ է, որը չի հիմնվում պատկերների վրա, օգտագործում է css3 անիմացիաների համար, իսկ տվյալների ատրիբուտները տեղական վերնագրերի պահպանման համար:

Tooltips-ի օգտագործման օրինակ

Գործիքների հուշումները տեսնելու համար սավառնեք ստորև նշված հղումների վրա.

Օգտագործելով bootstrap-tooltip.js

Գործարկեք գործիքի հուշումը Javascript-ի միջոցով.

$ ( '#example' ): գործիքի հուշում ( ընտրանքներ )

Ընտրանքներ

Նշում

Կատարման նկատառումներից ելնելով, Tooltip-ը և Popover data-apis-ը միացված են: Եթե ցանկանում եք դրանք օգտագործել, պարզապես նշեք ընտրիչի տարբերակը:

<a href = "#" rel = "tooltip" title = "first tooltip" > սավառնել իմ վրա </a>   

Մեթոդներ

$().tooltip(ընտրանքներ)

Կցում է գործիքի հուշման կարգավորիչը տարրերի հավաքածուին:

.tooltip ('ցուցադրել')

Բացահայտում է տարրի գործիքի հուշումը:

$ ( '#element' ): գործիքի հուշում ( «ցուցադրել» )

.tooltip ('թաքցնել')

Թաքցնում է տարրի գործիքի հուշումը:

$ ( '#element' ): գործիքի հուշում ( «թաքցնել» )

.tooltip ('toggle')

Փոխում է տարրի գործիքի հուշումը:

$ ( '#element' ): գործիքի հուշում ( «անջատել» )

Պոպովերի մասին

Ավելացրեք բովանդակության փոքր ծածկույթներ, ինչպիսիք են iPad-ի բովանդակությունը, ցանկացած տարրի վրա՝ երկրորդական տեղեկատվության պահպանման համար:

* Պահանջվում է Tooltip ներառել

Օրինակ hover popover

Սավառնեք կոճակի վրա՝ պոպովերը գործարկելու համար:

Օգտագործելով bootstrap-popover.js

Միացնել popover-ները Javascript-ի միջոցով.

$ ( '#example' ): popover ( տարբերակներ )

Ընտրանքներ

Նշում

Կատարման նկատառումներից ելնելով, Tooltip-ը և Popover data-apis-ը միացված են: Եթե ցանկանում եք դրանք օգտագործել, պարզապես նշեք ընտրիչի տարբերակը:

Մեթոդներ

$().popover(տարբերակներ)

Նախաձեռնում է popovers տարրերի հավաքածուի համար:

.popover ('show')

Բացահայտում է տարրերի պոպովեր:

$ ( '#element' ): popover ( «ցուցադրում» )

.popover ('թաքցնել')

Թաքցնում է տարրերի պոպովերը:

$ ( '#element' ): popover ( «թաքցնել» )

.popover ('toggle')

Անջատում է տարրերի փոփվերը:

$ ( '#element' ): popover ( «անջատել» )

Ահազանգերի մասին

Զգուշացման հավելումը փոքր դաս է զգուշացումներին մոտ ֆունկցիոնալություն ավելացնելու համար:

Զգուշացումների օրինակներ

Ծանուցումների հավելվածն աշխատում է կանոնավոր ահազանգերի վրա և արգելափակում է հաղորդագրությունները:

Օգտագործելով bootstrap-alert.js

Միացնել ահազանգի անջատումը Javascript-ի միջոցով.

$ ( «.alert» ): զգոն ()

Նշում

Պարզապես ավելացրեք data-dismiss="alert"ձեր փակման կոճակին, որպեսզի ավտոմատ կերպով ազդանշան փակման գործառույթը տրամադրվի:

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

Մեթոդներ

$().alert()

Փաթաթում է բոլոր ահազանգերը փակ ֆունկցիոնալությամբ: Որպեսզի ձեր ծանուցումները փակ լինեն, համոզվեք, որ դրանք .fadeև .inդասը արդեն կիրառվել են դրանց համար:

.alert ('փակել')

Փակում է ահազանգը:

$ ( «.alert» ): զգուշացում ( «փակ» )

Իրադարձություններ

Bootstrap-ի ազդանշանային դասը բացահայտում է մի քանի իրադարձություններ՝ ազդանշանային գործառույթին միանալու համար:

$ ( '#my-alert' ): bind ( 'փակ' , ֆունկցիա () {   
  // անել ինչ որ բան…
})

Մասին

Կատարեք ավելին կոճակներով: Կառավարեք կոճակի վիճակը կամ ստեղծեք կոճակների խմբեր ավելի շատ բաղադրիչների համար, ինչպիսիք են գործիքների տողերը:

Օգտագործման օրինակներ

Օգտագործեք կոճակների հավելվածը վիճակների և անջատիչների համար:

Օգտագործելով bootstrap-button.js

Միացնել կոճակները Javascript-ի միջոցով.

$ ( '.nav-tabs' ): կոճակ ()

Նշում

Տվյալների ատրիբուտները անբաժանելի են կոճակի հավելվածի համար: Ստուգեք ստորև բերված օրինակի կոդը տարբեր նշագրման տեսակների համար:

<!-- Ավելացնել data-toggle="button"՝ մեկ կոճակի վրա փոխարկումն ակտիվացնելու համար -->
<button class = "btn" data-toggle = "button" > Մեկ անջատիչ </button>  
 
<!-- Ավելացնել data-toggle="buttons-checkbox"՝ btn-group-ում վանդակի ոճը փոխելու համար -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Ձախ </button> 
  <button class = "btn" > Միջին </button> 
  <button class = "btn" > Աջ </button> 
</div>
 
<!-- Ավելացնել data-toggle="buttons-radio"` btn-group-ում ռադիոյի ոճը փոխելու համար -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Ձախ </button> 
  <button class = "btn" > Միջին </button> 
  <button class = "btn" > Աջ </button> 
</div>

Մեթոդներ

$().button('toggle')

Անջատում է մղման վիճակը: Կոճակին տալիս է այն տեսքը, որ այն ակտիվացված է:

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

$().button('loading')

Սահմանում է կոճակի վիճակը բեռնման համար - անջատում է կոճակը և փոխում է տեքստը բեռնվող տեքստի: Տեքստի բեռնումը պետք է սահմանվի կոճակի տարրի վրա՝ օգտագործելով տվյալների հատկանիշը data-loading-text:

<button class = "btn" data-loading-text = "loading stuff..." > ... </button>   

$().button('reset')

Վերականգնում է կոճակի վիճակը - տեքստը փոխում է բնօրինակ տեքստի:

$().button(string)

Վերականգնում է կոճակի վիճակը - տեքստը փոխում է ցանկացած տվյալների սահմանված տեքստային վիճակի:

<button class = "btn" data-complete-text = "ավարտված է!" > ... </button>   
<script>
  $ ( '.btn' ): կոճակ ( «ավարտել» )
</script>

Մասին

Ստացեք հիմնական ոճեր և ճկուն աջակցություն ծալվող բաղադրիչների համար, ինչպիսիք են ակորդեոնները և նավիգացիան:

* Պահանջում է ներառել Transitions հավելվածը:

Օրինակ ակորդեոն

Օգտագործելով collapse plugin-ը, մենք կառուցեցինք պարզ ակորդեոնի ոճի վիդջեթ.

Օգտագործելով bootstrap-collapse.js

Միացնել Javascript-ի միջոցով.

$ ( «.collapse» ): փլուզում ()

Ընտրանքներ

Նշում

Պարզապես ավելացրեք data-toggle="collapse"և a data-targetտարր՝ ծալվող տարրի կառավարումը ավտոմատ կերպով նշանակելու համար: Հատկանիշն data-targetընդունում է css ընտրիչ՝ փլուզումը կիրառելու համար: Համոզվեք, որ դասը ավելացրե՛ք collapseծալվող տարրին: Եթե ​​ցանկանում եք, որ այն լռելյայն բացվի, ավելացրեք լրացուցիչ դասը in:

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  պարզ ծալվող
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Մեթոդներ

.collapse (տարբերակներ)

Ակտիվացնում է ձեր բովանդակությունը որպես ծալովի տարր: Ընդունում է ընտրովի տարբերակներ object:

$ ( '#myCollapsible' ): փլուզում ({
  փոխարկել ՝ կեղծ 
})

.collapse ('toggle')

Անջատում է ծալվող տարրը ցուցադրված կամ թաքցվածի:

.collapse ('ցուցադրել')

Ցույց է տալիս ծալվող տարր:

.collapse ('թաքցնել')

Թաքցնում է ծալվող տարրը:

Իրադարձություններ

Bootstrap-ի փլուզման դասը բացահայտում է մի քանի իրադարձություններ՝ փլուզման գործառույթին միանալու համար:

$ ( '#myCollapsible' ): 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" class = "կարուսելի սլայդ" >  
  <!-- Կարուսելի իրեր -->
  <div class = «կարուսել-ներքին» > 
    <div class = "ակտիվ նյութ" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Կարուսել նավ -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Մեթոդներ

.կարուսել (տարբերակներ)

Նախաձեռնում է կարուսելը կամընտիր ընտրանքներով objectև սկսում հեծանվով անցնել իրերի միջով:

$ ( '.կարուսել' ): կարուսել ({
  ընդմիջումը ՝ 2000 
})

.կարուսել («ցիկլ»)

Շրջում է կարուսելի տարրերի միջով ձախից աջ:

.կարուսել ('դադար')

Դադարեցնում է կարուսելը իրերի միջով հեծանիվ անցնելուց:

.կարուսել(համար)

Կարուսելը տեղափոխում է որոշակի շրջանակ (0-ի վրա հիմնված, զանգվածի նման):

.կարուսել ('նախորդ')

Ցիկլեր դեպի նախորդ կետը:

.կարուսել ('հաջորդ')

Շրջագայություններ դեպի հաջորդ կետ:

Իրադարձություններ

Bootstrap-ի կարուսելի դասը բացահայտում է երկու իրադարձություն՝ կարուսելի ֆունկցիոնալությանը միանալու համար:

Մասին

Հիմնական, հեշտությամբ ընդլայնվող հավելված՝ ցանկացած ձևի տեքստի մուտքագրմամբ էլեգանտ տառատեսակներ արագ ստեղծելու համար:

Օրինակ

Սկսեք մուտքագրել ներքևի դաշտում` տպագրության արդյունքները ցույց տալու համար:

Օգտագործելով bootstrap-typeahead.js

Զանգահարեք տառատեսակը Javascript-ի միջոցով.

$ ( '.typeahead' ): տպագիր ()

Ընտրանքներ

Նշում

Տվյալների ատրիբուտներ ավելացրեք՝ տպագիր գլխի ֆունկցիոնալությամբ տարր գրանցելու համար:

<input type = "text" data- provide = "typeahead" >  

Մեթոդներ

.typeahead (տարբերակներ)

Նախաձեռնում է մուտքագրումը տառատեսակով: