ინდივიდუალური ან შედგენილი

დანამატები შეიძლება ჩაერთოს ინდივიდუალურად (თუმცა ზოგიერთს საჭირო აქვს დამოკიდებულებები), ან ერთდროულად. ორივე bootstrap.js და bootstrap.min.js შეიცავს ყველა დანამატს ერთ ფაილში.

მონაცემთა ატრიბუტები

თქვენ შეგიძლიათ გამოიყენოთ Bootstrap-ის ყველა დანამატი მხოლოდ მარკირების API-ის საშუალებით JavaScript-ის ერთი ხაზის დაწერის გარეშე. ეს არის Bootstrap-ის პირველი კლასის API და უნდა იყოს თქვენი პირველი განხილვა მოდულის გამოყენებისას.

ამის თქმით, ზოგიერთ სიტუაციაში შეიძლება სასურველი იყოს ამ ფუნქციის გამორთვა. აქედან გამომდინარე, ჩვენ ასევე გთავაზობთ მონაცემთა ატრიბუტის API-ის გამორთვის შესაძლებლობას სხეულის სახელების სივრცის ყველა მოვლენის გაუქმების გზით `'data-api''. ეს ასე გამოიყურება:

$ ( "სხეული" ). გამორთულია ( '.data-api' )

ალტერნატიულად, კონკრეტული დანამატის დასამიზნებლად, უბრალოდ ჩართეთ მოდულის სახელი, როგორც სახელთა სივრცე, მონაცემთა api სახელების სივრცესთან ერთად, როგორიცაა:

$ ( "სხეული" ). გამორთულია ( '.alert.data-api' )

პროგრამული API

ჩვენ ასევე გვჯერა, რომ თქვენ უნდა შეძლოთ Bootstrap-ის ყველა დანამატის გამოყენება მხოლოდ JavaScript API-ის მეშვეობით. ყველა საჯარო API არის ერთჯერადი, ჯაჭვური მეთოდები და აბრუნებს მოქმედების კოლექციას.

$ ( ".btn.danger" ). ღილაკი ( "გადართვა" ). addClass ( "მსუქანი" )

ყველა მეთოდმა უნდა მიიღოს არასავალდებულო ოფციების ობიექტი, სტრიქონი, რომელიც მიზნად ისახავს კონკრეტულ მეთოდს, ან არაფერს (რომელიც იწყებს ნაგულისხმევი ქცევის დანამატს):

$ ( "#myModal" ). მოდალური () // ინიციალიზებულია ნაგულისხმევად                       
$ ( "#myModal" ). მოდალური ({ keyboard : false }) // ინიციალიზაცია კლავიატურის გარეშე     
$ ( "#myModal" ). მოდალური ( 'show' ) // ინიციალიზაცია და გამოძახება აჩვენებს დაუყოვნებლივ                

თითოეული მოდული ასევე ავლენს თავის დაუმუშავებელ კონსტრუქტორს `Constructor` თვისებაზე: $.fn.popover.Constructor. თუ გსურთ მიიღოთ კონკრეტული მოდულის მაგალითი, აიღეთ იგი პირდაპირ ელემენტიდან: $('[rel=popover]').data('popover').

არანაირი კონფლიქტი

ზოგჯერ საჭიროა Bootstrap დანამატების გამოყენება სხვა UI ჩარჩოებთან ერთად. ამ პირობებში, სახელთა სივრცის შეჯახება ზოგჯერ შეიძლება მოხდეს. თუ ეს მოხდება, შეგიძლიათ დაურეკოთ .noConflictდანამატს, რომლის მნიშვნელობის დაბრუნება გსურთ.

var bootstrapButton = $ . ფნ . ღილაკი . noConflict () // დააბრუნეთ $.fn.button ადრე მინიჭებულ მნიშვნელობაზე 
$ . ფნ . bootstrapBtn = bootstrapButton             // მიეცით $().bootstrapBtn bootstrap ფუნქცია

Ივენთი

Bootstrap უზრუნველყოფს მორგებულ მოვლენებს მოდულების უნიკალურ ქმედებებისთვის. ზოგადად, ესენი მოდის ინფინიტივისა და წარსული ნაწილაკების სახით - სადაც ინფინიტივი (მაგ. show) ჩნდება მოვლენის დაწყებისას, ხოლო მისი წარსული ნაწილაკის ფორმა (მაგ. shown) არის გამომწვევი მოქმედების დასრულებისას.

ყველა უსასრულო მოვლენა უზრუნველყოფს preventDefault ფუნქციონირებას. ეს იძლევა შესაძლებლობას შეაჩეროს მოქმედების შესრულება მის დაწყებამდე.

$ ( '#myModal' ). on ( 'show' , ფუნქცია ( e ) {   
    თუ (! მონაცემები ) დააბრუნებს ე . preventDefault () // აჩერებს მოდალის ჩვენებას   
})

გადასვლების შესახებ

მარტივი გადასვლის ეფექტებისთვის, ჩართეთ bootstrap-transition.js ერთხელ სხვა JS ფაილებთან ერთად. თუ თქვენ იყენებთ შედგენილ (ან მინიფიცირებულ) bootstrap.js- ს , არ არის საჭირო ამის ჩართვა — ის უკვე არსებობს.

გამოიყენეთ შემთხვევები

გარდამავალი მოდულის რამდენიმე მაგალითი:

• სრიალი ან ქრებოდა მოდალებში
• ჩანართების გაქრობა
• გაფრთხილებების გაქრობა
• კარუსელის მოცურების მინები

მაგალითები

მოდალები არის გამარტივებული, მაგრამ მოქნილი, დიალოგის მოთხოვნა მინიმალური საჭირო ფუნქციონირებით და ჭკვიანი ნაგულისხმევი პარამეტრებით.

სტატიკური მაგალითი

გაფორმებული მოდალი სათაურით, ტექსტით და მოქმედებების კომპლექტით ქვედაბოლოში.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> მოდალური სათაური </h3>
  </div>
  <div class = "მოდალური სხეული" > 
    <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" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > მოდალური სათაური </h3> 
  </div>
  <div class = "მოდალური სხეული" > 
    <p> ერთი მშვენიერი სხეული… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "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-ის საშუალებით

დარეკეთ მოდალს id- myModalით JavaScript-ის ერთი ხაზით:

$ ( '#myModal' ). მოდალური ( ოფციები )

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-backdrop="".

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

მეთოდები

.modal(ოფციები)

ააქტიურებს თქვენს შინაარსს, როგორც მოდალს. იღებს არასავალდებულო ვარიანტებს object.

$ ( '#myModal' ). მოდალური ({
  კლავიატურა : ყალბი 
})

.modal ('გადართვა')

ხელით ცვლის მოდალს.

$ ( '#myModal' ). მოდალური ( "გადართვა" )

.modal('show')

ხელით ხსნის მოდალს.

$ ( '#myModal' ). მოდალური ( "ჩვენება" )

.modal ('დამალვა')

ხელით მალავს მოდალს.

$ ( '#myModal' ). მოდალური ( "დამალვა" )

Ივენთი

Bootstrap-ის მოდალური კლასი ავლენს რამდენიმე მოვლენას მოდალურ ფუნქციონირებაში ჩასართავად.

$ ( '#myModal' ). on ( 'დამალული' , ფუნქცია () {   
  // გააკეთე რამე…
})

მაგალითები

დაამატეთ ჩამოსაშლელი მენიუები თითქმის ყველაფერში ამ მარტივი მოდულით, მათ შორის ნავიგატორი, ჩანართები და აბები.

ნავიბარის ფარგლებში

ჩანართების ფარგლებში

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

დაამატეთ data-toggle="dropdown"ბმულზე ან ღილაკზე ჩამოსაშლელი მენიუს გადასართავად.

<div class = "ჩამოშლილი" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > ჩამოსაშლელი ტრიგერი </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL-ების ხელუხლებლად შესანარჩუნებლად გამოიყენეთ data-targetატრიბუტი href="#".

<div class = "ჩამოშლილი" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Ძირს დაგდება
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript-ის საშუალებით

გამოიძახეთ ჩამოსაშლელები JavaScript-ით:

$ ( '.dropdown-toggle' ). ჩამოსაშლელი ()

Პარამეტრები

არცერთი

მეთოდები

$().dropdown('toggle')

პროგრამული api მენიუს გადართვისთვის მოცემული ნავიგაციისთვის ან ჩანართებით ნავიგაციისთვის.

მაგალითი ნავიბარში

ScrollSpy მოდული განკუთვნილია ნავი მიზნების ავტომატურად განახლებისთვის, გადახვევის პოზიციიდან გამომდინარე. გადაახვიეთ ნავიგაციის ზოლის ქვემოთ და უყურეთ აქტიური კლასის ცვლილებას. ასევე მონიშნული იქნება ჩამოსაშლელი ქვეპუნქტები.

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

იმისათვის, რომ ადვილად დაამატოთ scrollspy ქცევა თქვენს ზედა ზოლის ნავიგაციაში, უბრალოდ დაამატეთ data-spy="scroll"ელემენტი, რომელზეც გსურთ თვალთვალისთვის (ყველაზე ხშირად ეს იქნება სხეული) და data-target=".navbar"შეარჩიეთ რომელი ნავიგაცია გამოიყენოთ. თქვენ გსურთ გამოიყენოთ scrollspy .navკომპონენტთან ერთად.

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

JavaScript-ის საშუალებით

დარეკეთ scrollspy-ს JavaScript-ით:

$ ( '#navbar' ). scrollspy ()

მეთოდები

.scrollspy('განახლება')

როდესაც იყენებთ scrollspy-ს DOM-დან ელემენტების დამატებასთან ან ამოღებასთან ერთად, თქვენ უნდა გამოიძახოთ განახლების მეთოდი ასე:

$ ( '[data-spy="scroll"]' ). თითოეული ( ფუნქცია () {  
  var $spy = $ ( ეს ). scrollspy ( "განახლება" )
});

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-offset="".

Ივენთი

ჩანართების მაგალითი

დაამატეთ სწრაფი, დინამიური ჩანართის ფუნქციონალობა ადგილობრივი შინაარსის პანელის გადასასვლელად, თუნდაც ჩამოსაშლელი მენიუს საშუალებით.

გამოყენება

ჩანართის ჩანართების ჩართვა JavaScript-ის საშუალებით (თითოეული ჩანართი ინდივიდუალურად უნდა გააქტიურდეს):

$ ( '#myTab a' ). დააწკაპუნეთ ( ფუნქცია ( e ) {  
  ე . preventDefault ();
  $ ( ეს ). ჩანართი ( 'ჩვენება' );
})

თქვენ შეგიძლიათ გაააქტიუროთ ინდივიდუალური ჩანართები რამდენიმე გზით:

$ ( '#myTab a[href="#პროფილი"]' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ ჩანართი სახელის მიხედვით 
$ ( '#myTab a:first' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ პირველი ჩანართი 
$ ( '#myTab a:last' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ ბოლო ჩანართი 
$ ( '#myTab li:eq(2) a' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ მესამე ჩანართი (0-ინდექსირებული) 

მარკირება

თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია JavaScript-ის დაწერის გარეშე უბრალოდ ელემენტის მითითებით data-toggle="tab"ან მასზე. და კლასების ჩანართზე data-toggle="pill"დამატება გამოიყენებს Bootstrap ჩანართის სტილს.navnav-tabsul

<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 ( 'shown' , ფუნქცია ( e ) {   
  ე . სამიზნე // გააქტიურებული ჩანართი
  ე . relatedTarget // წინა ჩანართი
})

მაგალითები

შთაგონებულია ჯეისონ ფრეიმის მიერ დაწერილი შესანიშნავი jQuery.tipsy მოდულით; Tooltips არის განახლებული ვერსია, რომელიც არ ეყრდნობა სურათებს, იყენებს CSS3 ანიმაციისთვის და მონაცემთა ატრიბუტებს ადგილობრივი სათაურის შესანახად.

შესრულების მიზეზების გამო, ხელსაწყოების მინიშნება და popover data-apis ნებადართულია, რაც იმას ნიშნავს, რომ თქვენ თავად უნდა მოაწყოთ ისინი .

ინსტრუმენტების რჩევების სანახავად გადაიტანეთ მაუსი ქვემოთ მოცემულ ბმულებზე:

ოთხი მიმართულება

ინსტრუმენტების რჩევები შეყვანის ჯგუფებში

Bootstrap-ის შეყვანის ჯგუფებთან ინსტრუმენტების რჩევების და პოპოვერების გამოყენებისას, თქვენ უნდა დააყენოთ container(ქვემოთ დოკუმენტირებული) ვარიანტი არასასურველი გვერდითი ეფექტების თავიდან ასაცილებლად.

გამოყენება

ჩართეთ ინსტრუმენტული მინიშნება JavaScript-ის საშუალებით:

$ ( '#მაგალითი' ). ინსტრუმენტის მინიშნება ( ოფციები )

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-animation="".

მარკირება

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > გადაიტანეთ ჩემზე </a>   

მეთოდები

$().tooltip(ოფციები)

ამაგრებს ხელსაწყოების დამმუშავებელს ელემენტების კოლექციაზე.

.tooltip ("ჩვენება")

ავლენს ელემენტის ინსტრუმენტს.

$ ( '#element' ). ინსტრუმენტის მინიშნება ( "ჩვენება" )

.tooltip ('დამალვა')

მალავს ელემენტის ხელსაწყოს მინიშნებას.

$ ( '#element' ). ინსტრუმენტის მინიშნება ( "დამალვა" )

.tooltip ('გადართვა')

ცვლის ელემენტის ხელსაწყოს მინიშნებას.

$ ( '#element' ). ინსტრუმენტის მინიშნება ( "გადართვა" )

.tooltip ("განადგურება")

მალავს და ანადგურებს ელემენტის ინსტრუმენტს.

$ ( '#element' ). ინსტრუმენტის მინიშნება ( "განადგურება" )

მაგალითები

დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის. გადაახვიეთ ღილაკზე პოპოვერის გასააქტიურებლად. საჭიროებს Tooltip- ის ჩართვას.

სტატიკური პოპოვერი

ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული.

dataარანაირი მარკირება არ არის ნაჩვენები, როგორც popover-ები გენერირდება JavaScript-დან და ატრიბუტის შიგნით არსებული შინაარსით .

ცოცხალი დემო

ოთხი მიმართულება

გამოყენება

ჩართეთ პოპოვერები JavaScript-ით:

$ ( '#მაგალითი' ). პოპოვერი ( ოფციები )

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-animation="".

მარკირება

შესრულების მიზეზების გამო, Tooltip და Popover data-apis არის დაშვებული. თუ გსურთ მათი გამოყენება, უბრალოდ მიუთითეთ ამომრჩევის ვარიანტი.

მეთოდები

$().popover(ოფციები)

ახორციელებს პოპოვერების ინიციალიზებას ელემენტების კოლექციისთვის.

.popover ("შოუ")

ავლენს ელემენტების პოპოვერს.

$ ( '#element' ). პოპოვერი ( "შოუ" )

.popover ('დამალვა')

მალავს ელემენტების პოპოვერს.

$ ( '#element' ). პოპოვერი ( "დამალვა" )

.popover ('გადართვა')

ცვლის ელემენტების პოპოვერს.

$ ( '#element' ). პოპოვერი ( "გადართვა" )

.popover ("განადგურება")

მალავს და ანადგურებს ელემენტის პოპოვერს.

$ ( '#element' ). პოპოვერი ( "განადგურება" )

გაფრთხილების მაგალითები

დაამატეთ გაუქმების ფუნქცია ყველა გაფრთხილების შეტყობინებას ამ მოდულით.

გამოყენება

გაფრთხილების გაუქმების ჩართვა JavaScript-ის საშუალებით:

$ ( ".alert" ). გაფრთხილება ()

მარკირება

უბრალოდ დაამატეთ data-dismiss="alert"თქვენი დახურვის ღილაკს, რათა ავტომატურად მისცეს გაფრთხილების დახურვის ფუნქცია.

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

მეთოდები

$().alert()

ახვევს ყველა გაფრთხილებას მჭიდრო ფუნქციონალობით. იმისათვის, რომ თქვენი გაფრთხილებები ანიმაციური იყოს დახურვისას, დარწმუნდით, რომ მათ უკვე აქვთ .fadeგამოყენებული .inკლასი და მათზე.

.alert ('დახურვა')

ხურავს გაფრთხილებას.

$ ( ".alert" ). გაფრთხილება ( "დახურვა" )

Ივენთი

Bootstrap-ის გაფრთხილების კლასი ავლენს რამდენიმე მოვლენას გაფრთხილების ფუნქციონირებაში ჩასართავად.

$ ( '#ჩემი-გაფრთხილება' ). bind ( 'დახურული' , ფუნქცია () {   
  // გააკეთე რამე…
})

გამოყენების მაგალითები

გააკეთე მეტი ღილაკებით. აკონტროლეთ ღილაკის მდგომარეობა ან შექმენით ღილაკების ჯგუფები მეტი კომპონენტისთვის, როგორიცაა ხელსაწყოთა ზოლები.

სახელმწიფოებრივი

დამატება data-loading-text="Loading..."ღილაკზე ჩატვირთვის მდგომარეობის გამოსაყენებლად.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > ჩატვირთვის მდგომარეობა </button>   

ერთჯერადი გადართვა

დაამატეთ data-toggle="button"ერთ ღილაკზე გადართვის გასააქტიურებლად.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > ერთჯერადი გადართვა </button>   

მოსანიშნი ველი

დაამატეთ 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 class = "btn-group" data-toggle = "buttons-რადიო" >  
  <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('toggle')

გადართავს ბიძგის მდგომარეობას. ღილაკს აძლევს იმ იერს, რომ ის გააქტიურებულია.

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

$().button('იტვირთება')

აყენებს ღილაკის მდგომარეობას ჩატვირთვაზე - გამორთავს ღილაკს და ცვლის ტექსტს ჩატვირთვის ტექსტზე. ტექსტის ჩატვირთვა უნდა განისაზღვროს ღილაკის ელემენტზე მონაცემთა ატრიბუტის გამოყენებით data-loading-text.

<button type = "button" class = "btn" data-loading-text = "იტვირთება მასალა..." > ... </button>    

$().button('გადატვირთვა')

აღადგენს ღილაკის მდგომარეობას - ცვლის ტექსტს ორიგინალ ტექსტზე.

$(). ღილაკი (სტრიქონი)

აღადგენს ღილაკის მდგომარეობას - ცვლის ტექსტს ნებისმიერი მონაცემებით განსაზღვრულ ტექსტურ მდგომარეობაზე.

<button type = "button" class = "btn" data-complete-text = "დასრულებულია!" > ... </button>    
<სკრიპტი>
  $ ( '.btn' ). ღილაკი ( "სრული" )
</script>

შესახებ

მიიღეთ საბაზისო სტილები და მოქნილი მხარდაჭერა დასაკეცი კომპონენტებისთვის, როგორიცაა აკორდეონები და ნავიგაცია.

* მოითხოვს Transitions მოდულის ჩართვას.

აკორდეონის მაგალითი

კოლაფსის მოდულის გამოყენებით, ჩვენ ავაშენეთ მარტივი აკორდეონის სტილის ვიჯეტი:

<div class = "აკორდეონი" id = "აკორდეონი2" >  
  <div class = "აკორდეონი-ჯგუფი" > 
    <div class = "აკორდეონის სათაური" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        დასაკეცი ჯგუფის ერთეული #1
      </a>
    </div>
    <div id = "collapseOne" class = "აკორდეონის სხეულის კოლაფსი" >  
      <div class = "აკორდეონი-შიდა" > 
        ანიმაციური კლიშე...
      </div>
    </div>
  </div>
  <div class = "აკორდეონი-ჯგუფი" > 
    <div class = "აკორდეონის სათაური" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        დასაკეცი ჯგუფის ერთეული #2
      </a>
    </div>
    <div id = "collapseTwo" class = "აკორდეონის სხეულის კოლაფსი" >  
      <div class = "აკორდეონი-შიდა" > 
        ანიმაციური კლიშე...
      </div>
    </div>
  </div>
</div>
...

თქვენ ასევე შეგიძლიათ გამოიყენოთ მოდული აკორდეონის მარკირების გარეშე. გააკეთეთ ღილაკი სხვა ელემენტის გაფართოებისა და დაშლის გადართვაზე.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  მარტივი დასაკეცი
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

უბრალოდ დაამატეთ data-toggle="collapse"და a data-targetელემენტს, რათა ავტომატურად მიენიჭოთ კონტროლი დასაკეცი ელემენტზე. ატრიბუტი იღებს css ამომრჩეველს data-targetკოლაფსის გამოსაყენებლად. დარწმუნდით, რომ დაამატეთ კლასი collapseდასაკეც ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი in.

აკორდეონის მსგავსი ჯგუფის მართვის დასამატებლად დასაკეცი კონტროლში, დაამატეთ მონაცემთა ატრიბუტი data-parent="#selector". იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში.

JavaScript-ის საშუალებით

ხელით ჩართეთ:

$ ( ".collapse" ). კოლაფსი ()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-parent="".

მეთოდები

.collapse(ოფციები)

ააქტიურებს თქვენს კონტენტს, როგორც დასაკეცი ელემენტს. იღებს არასავალდებულო ვარიანტებს object.

$ ( '#mycollapsible' ). კოლაფსი ({
  გადართვა : ყალბი 
})

.collapse ('გადართვა')

გადართავს დასაკეც ელემენტს ჩვენებაზე ან დამალვაზე.

.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 ultrices vehicula ut id elit.

Second Thumbnail label

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.

Third Thumbnail label

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" class = "კარუსელის სლაიდი" >  
  <ol class = "კარუსელ-ინდიკატორები" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "აქტიური" </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>
  <!-- კარუსელი ნავი -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "წინ" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "შემდეგი" > › </a>   
</div>

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

გამოიყენეთ მონაცემთა ატრიბუტები კარუსელის პოზიციის მარტივად გასაკონტროლებლად. data-slideიღებს საკვანძო სიტყვებს prevან next, რომელიც ცვლის სლაიდის პოზიციას მისი მიმდინარე პოზიციის მიმართ. ალტერნატიულად, გამოიყენეთ data-slide-toნედლი სლაიდის ინდექსის კარუსელში გადასაცემად data-slide-to="2", რომელიც არის სლაიდის პოზიცია კონკრეტულ ინდექსზე დაწყებული 0.

JavaScript-ის საშუალებით

კარუსელის ხელით გამოძახება:

$ ( '.კარუსელი' ). კარუსელი ()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScriptz-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-interval="".

მეთოდები

.კარუსელი(ოფციები)

ახორციელებს კარუსელის ინიციალიზაციას არჩევითი ოფციებით objectდა იწყებს ველოსიპედით სვლას ნივთებზე.

$ ( '.კარუსელი' ). კარუსელი ({
  ინტერვალი : 2000 
})

.კარუსელი ('ციკლი')

მოძრაობს კარუსელის ელემენტებში მარცხნიდან მარჯვნივ.

.კარუსელი ('პაუზა')

აჩერებს კარუსელს ნივთების ველოსიპედით გადაადგილებას.

.კარუსელი(ნომერი)

აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი).

.კარუსელი ('წინა')

ციკლები წინა პუნქტამდე.

.კარუსელი ("შემდეგი")

ციკლები შემდეგ პუნქტზე.

Ივენთი

Bootstrap-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად.

მაგალითი

ძირითადი, ადვილად გაფართოებული დანამატი ელეგანტური შრიფტების სწრაფად შესაქმნელად ნებისმიერი ფორმის ტექსტის შეყვანით.

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

თქვენ უნდა დააყენოთ autocomplete="off", რათა თავიდან აიცილოთ ნაგულისხმევი ბრაუზერის მენიუები Bootstrap typeahead ჩამოსაშლელ სიაში.

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

დაამატეთ მონაცემთა ატრიბუტები, რათა დაარეგისტრიროთ ელემენტი typeahead ფუნქციით, როგორც ეს ნაჩვენებია ზემოთ მოცემულ მაგალითში.

JavaScript-ის საშუალებით

ხელით დარეკეთ აკრიფტით:

$ ( '.typeahead' ). შრიფტი ()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-source="".

მეთოდები

.typeahead (ოფციები)

ახდენს შეყვანის ინიცირებას შრიფტით.

მაგალითი

ქვენავიგაცია მარცხნივ არის affix მოდულის ცოცხალი დემო ვერსია.

გამოყენება

მონაცემთა ატრიბუტების მეშვეობით

იმისათვის, რომ მარტივად დაამატოთ აფიქსის ქცევა ნებისმიერ ელემენტზე, უბრალოდ დაამატეთ ელემენტი, data-spy="affix"რომლის დაზვერვა გსურთ. შემდეგ გამოიყენეთ ოფსეტები, რათა განსაზღვროთ, როდის უნდა ჩართოთ და გამორთოთ ელემენტის ჩამაგრება.

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

JavaScript-ის საშუალებით

დარეკეთ აფიქსის დანამატს JavaScript-ის საშუალებით:

$ ( '#navbar' ). დამაგრება ()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-offset-top="200".