Javascript Bootstrap-ისთვის

გააცოცხლეთ Bootstrap-ის კომპონენტები — ახლა უკვე 12 მორგებული jQuery დანამატით.

მოდალები

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

ჩამოსაშლელები

დაამატეთ ჩამოსაშლელი მენიუები Bootstrap-ში თითქმის ნებისმიერ ნივთს ამ მარტივი მოდულით. Bootstrap-ს აქვს სრული ჩამოსაშლელი მენიუს მხარდაჭერა ნავიბარში, ჩანართებსა და აბებში.

Scrollspy

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

გადართვადი ჩანართები

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

ინსტრუმენტების რჩევები

jQuery Tipsy მოდულის ახალი ვერსია, Tooltips არ ეყრდნობა სურათებს - ისინი იყენებენ CSS3 ანიმაციისთვის და მონაცემთა ატრიბუტებს ადგილობრივი სათაურის შესანახად.

პოპოვერები *

დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის.

* საჭიროებს ინსტრუმენტების ჩართვას

გაფრთხილების შეტყობინებები

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

ღილაკები

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

კოლაფსი

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

კარუსელი

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

Typeahead

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

გადასვლები *

მარტივი გადასვლის ეფექტებისთვის, ჩართეთ bootstrap-transition.js ერთხელ მოდალში გადასასვლელად ან გაფრთხილებების გასაქრობად.

* საჭიროა დანამატებში ანიმაციისთვის

Თავები მაღლა! Javascript-ის ყველა დანამატი მოითხოვს jQuery-ის უახლეს ვერსიას.

მოდალების შესახებ

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

Გადმოწერეთ ფაილი

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

ქვემოთ მოცემულია სტატიკურად გამოსახული მოდალი.

ცოცხალი დემო

ჩართეთ მოდალი Javascript-ის საშუალებით ქვემოთ მოცემულ ღილაკზე დაწკაპუნებით. ის ჩამოიწევს ქვემოთ და გაქრება გვერდის ზემოდან.

გაუშვით დემო მოდალი

Bootstrap-modal-ის გამოყენება

დარეკეთ მოდალს Javascript-ის საშუალებით:

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

Პარამეტრები

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

მარკირება

თქვენ შეგიძლიათ მარტივად გაააქტიუროთ მოდალები თქვენს გვერდზე, ჯავასკრიპტის ერთი ხაზის დაწერის გარეშე. უბრალოდ დააყენეთ data-toggle="modal"კონტროლერის ელემენტი data-target="#foo"ან href="#foo"რომელიც შეესაბამება მოდალური ელემენტის id-ს და დაწკაპუნებისას ის გაუშვებს თქვენს მოდალს.

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > გაშვება Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> მოდალური სათაური </h3>
  5. </div>
  6. <div class = "მოდალური სხეული" >
  7. <p> ერთი მშვენიერი სხეული… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > დახურვა </a>
  11. <a href = "#" class = "btn btn-primary" > ცვლილებების შენახვა </a>
  12. </div>
  13. </div>
Თავები მაღლა! თუ გსურთ, რომ თქვენი მოდალი ანიმაციური იყოს შიგნით და გარეთ, უბრალოდ დაამატეთ .fadeკლასი .modalელემენტს (იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში) და ჩართეთ bootstrap-transition.js.

მეთოდები

.modal(ოფციები)

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

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

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

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

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

.modal('show')

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

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

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

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

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

Ივენთი

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

ღონისძიება აღწერა
შოუ ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია ეს ღონისძიება გააქტიურებულია, როდესაც მოდალი მომხმარებლისთვის ხილული გახდება (დაელოდება css გადასვლების დასრულებას).
დამალვა ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hideგამოიძახება ინსტანციის მეთოდი.
დამალული ეს ღონისძიება გააქტიურებულია, როდესაც მოდალის დამალვა დასრულდება მომხმარებლისგან (დაელოდება css გადასვლების დასრულებას).
  1. $ ( '#myModal' ). on ( 'დამალული' , ფუნქცია () {
  2. // გააკეთე რამე…
  3. })

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

Გადმოწერეთ ფაილი

მაგალითი Navbar ერთად scrollspy

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

@ fat

სარეკლამო გამაშები keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi სანამ გაიყიდა qui. Tumblr ფერმა-მაგიდა ველოსიპედის უფლებები. Anim keffiyeh carles cardigan. Velit seitan Mcsweeney's Photo Booth 3 wolf moon irure. Cosby სვიტერი lomo jean შორტები, უილიამსბურგის hoodie მინიმ qui ალბათ არ გსმენიათ მათ შესახებ და კარდიგანის სატრასტო ფონდის culpa biodiesel wes anderson ესთეტიკური. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa ულვაში skateboard, adipisicing fugiat velit pitchfork წვერი. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat ოთხი ლოკო ნისი, ea helvetica nulla carles. Tattooed cosby სვიტერი კვების სატვირთო მანქანა, Mcsweeney's quis non freegan ვინილი. ლო-ფი ვეს ანდერსონი +1 სარტორიალი. კარლესი არა ესთეტიკური ვარჯიში quis gentrify. ბრუკლინის კრეფტ ლუდის ადიპისინგის ვიცე keytar deserunt.

ერთი

Occaecat commodo aliqua delectus. Fap craft ლუდი deserunt skateboard ea. ლომო ველოსიპედის უფლებების ადიპისინგ ბანი მი, ველით ეა მზის შემდეგი დონის ლოკავორი ერთი წარმოშობის ყავა მაგნა ვენიამ. მაღალი სიცოცხლის id ვინილის, ექო პარკის შედეგია quis aliquip banh mi pitchfork. Vero VHS არის დამამცირებელი. შეასრულეთ წვრილმანი წვრილმანი მესენჯერის ჩანთა. Cred ex in, მდგრადი დელექციური კონსექტტორი fanny პაკეტი 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.

three

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, რაც არ უნდა იყოს საკვები სატვირთო მანქანა. Sapiente synth id assumenda. Locavore sed helvetica კლიშე ირონია, ჭექა-ქუხილი, ალბათ არ გსმენიათ მათ შესახებ, რასაც თან ახლავს hoodie უგლუტენო lo-fi fap aliquip. Labore elit placeat სანამ გაიყიდებოდა, ტერი რიჩარდსონი proident brunch nesciunt quis cosby სვიტერი pariatur keffiyeh ut helvetica artisan. კარდიგანის ხელნაკეთი ლუდი სეიტანი მზა ველი. VHS chambray laboris tempor veniam. Anim mollit minim commodo ulamco thundercats.


bootstrap-scrollspy.js-ის გამოყენებით

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

  1. $ ( '#navbar' ). scrollspy ()

მარკირება

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

  1. <body data-spy = "scroll" > ... </body>
Თავები მაღლა! Navbar-ის ბმულებს უნდა ჰქონდეთ ამოსაცნობი ID სამიზნეები. მაგალითად, <a href="#home">home</a>უნდა შეესაბამებოდეს რაღაცას დომში, როგორიცაა <div id="home"></div>.

მეთოდები

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

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

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

Პარამეტრები

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

Ივენთი

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

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

Გადმოწერეთ ფაილი

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

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

ნედლი ჯინსი, თქვენ ალბათ არ გსმენიათ მათ შესახებ ჯინსის შორტები Austin. Nesciunt tofu stumptown aliqua, retro synth master წმენდა. ულვაში კლიშე დრო, უილიამსბურგი კარლეს ვეგანური ჰელვეტიკა. Reprehenderit ჯალათიც retro keffiyeh Dreamcatcher synth. Cosby sweater eu banh mi, qui irure ტერი რიჩარდსონი ex squid. აიფონის აბსოლუტური ადგილი. Seitan aliquip quis cardigan ამერიკული სამოსი, ჯალათი voluptate nisi qui.

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.


bootstrap-tab.js-ის გამოყენებით

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

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

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

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

მარკირება

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

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > მთავარი </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > პროფილი </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > შეტყობინებები </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > პარამეტრები </a></li>
  6. </ul>

მეთოდები

$().tab

ააქტიურებს ჩანართის ელემენტს და კონტენტის კონტეინერს. ჩანართს უნდა ჰქონდეს DOM-ში ან კონტეინერის კვანძი data-targetან სამიზნე.href

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > მთავარი </a></li>
  3. <li><a href = "#profile" > პროფილი </a></li>
  4. <li><a href = "#messages" > შეტყობინებები </a></li>
  5. <li><a href = "#settings" > პარამეტრები </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "შეტყობინებები" > ... </div>
  12. <div class = "tab-pane" id = "პარამეტრები" > ... </div>
  13. </div>
  14.  
  15. <სკრიპტი>
  16. $ ( ფუნქცია () {
  17. $ ( '#myTab a:last' ). ჩანართი ( 'ჩვენება' );
  18. })
  19. </script>

Ივენთი

ღონისძიება აღწერა
შოუ ეს ღონისძიება ჩართულია ჩანართის ჩვენებაზე, მაგრამ სანამ ახალი ჩანართი გამოჩნდება. გამოიყენეთ event.targetდა event.relatedTargetმიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
ნაჩვენებია ეს ღონისძიება ჩართულია ჩანართის ჩვენებაში მას შემდეგ, რაც გამოჩნდება ჩანართი. გამოიყენეთ event.targetდა event.relatedTargetმიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად.
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , ფუნქცია ( e ) {
  2. . სამიზნე // გააქტიურებული ჩანართი
  3. . relatedTarget // წინა ჩანართი
  4. })

Tooltips-ის შესახებ

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

Გადმოწერეთ ფაილი

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

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

მჭიდრო შარვალი შემდეგი დონის keffiyeh თქვენ ალბათ არ გსმენიათ მათ შესახებ. ფოტო ჯიხურის წვერი ნედლი ჯინსის ვეგანური მესენჯერის ჩანთა stumptown. ფერმიდან მაგიდამდე სეიტანი, Mcsweeney's fixie მდგრადი quinoa 8-ბიტიანი ამერიკული ტანსაცმელი აქვს ტერი რიჩარდსონის ვინილის შამბრი. წვერის სტამპთაუნი, კარდიგანები ბან მი ლომო ჭექა-ქუხილი. ტოფუ ბიოდიზელი ვილიამსბურგის მარფა, ოთხი ლოკო მაკსვინის გამწმენდი ვეგანური შამბრი. მართლაც ირონიული ხელოსანი , რაც არ უნდა ქეითარი , სცენის სცენის ფერმა-მაგიდა ბანკსი ოსტინ ტვიტერის სახელური freegan cred ნედლეული denim ერთი წარმოშობის ყავა ვირუსული.


bootstrap-tooltip.js-ის გამოყენებით

გააქტიურეთ ინსტრუმენტის მინიშნება Javascript-ის საშუალებით:

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

Პარამეტრები

სახელი ტიპი ნაგულისხმევი აღწერა
ანიმაცია ლოგიკური მართალია გამოიყენეთ css fade გადასვლა ინსტრუმენტზე
განთავსება სიმებიანი|ფუნქცია "ზედა" როგორ განვათავსოთ ინსტრუმენტების რჩევები - ზედა | ქვედა | მარცხენა | უფლება
სელექტორი სიმებიანი ყალბი თუ სელექტორი არის მოწოდებული, ხელსაწყოს მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე.
სათაური სიმებიანი | ფუნქცია '' სათაურის ნაგულისხმევი მნიშვნელობა, თუ `title` ტეგი არ არის
გამომწვევი სიმებიანი "ჰოვერ" როგორ ხდება ინსტრუმენტული მინიშნება - hover | ფოკუსირება | სახელმძღვანელო
დაგვიანებით ნომერი | ობიექტი 0

ხელსაწყოს მინიშნების ჩვენება და დამალვის დაგვიანება (ms) - არ ვრცელდება ხელით ტრიგერის ტიპზე

თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე

ობიექტის სტრუქტურა არის:delay: { show: 500, hide: 100 }

Თავები მაღლა!ცალკეული ინსტრუმენტების რჩევების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით.

მარკირება

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

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > გადაიტანეთ ჩემზე </a>

მეთოდები

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

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

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

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

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

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

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

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

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

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

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

პოპოვერების შესახებ

დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის.

* საჭიროებს Tooltip- ის ჩართვას

Გადმოწერეთ ფაილი

მაგალითი hover popover

გადაახვიეთ ღილაკზე პოპოვერის გასააქტიურებლად.


bootstrap-popover.js-ის გამოყენებით

ჩართეთ პოპოვერები Javascript-ის საშუალებით:

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

Პარამეტრები

სახელი ტიპი ნაგულისხმევი აღწერა
ანიმაცია ლოგიკური მართალია გამოიყენეთ css fade გადასვლა ინსტრუმენტზე
განთავსება სიმებიანი|ფუნქცია "მართალი" როგორ განვათავსოთ პოპოვერი - ტოპ | ქვედა | მარცხენა | უფლება
სელექტორი სიმებიანი ყალბი თუ სელექტორი არის მოწოდებული, ინსტრუმენტული მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე
გამომწვევი სიმებიანი "ჰოვერ" როგორ ხდება ინსტრუმენტული მინიშნება - hover | ფოკუსირება | სახელმძღვანელო
სათაური სიმებიანი | ფუნქცია '' სათაურის ნაგულისხმევი მნიშვნელობა, თუ `title` ატრიბუტი არ არის
შინაარსი სიმებიანი | ფუნქცია '' ნაგულისხმევი შინაარსის მნიშვნელობა, თუ `data-content` ატრიბუტი არ არის
დაგვიანებით ნომერი | ობიექტი 0

პოპოვერის (ms) ჩვენების და დამალვის დაგვიანება - არ ვრცელდება ხელით ტრიგერის ტიპზე

თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე

ობიექტის სტრუქტურა არის:delay: { show: 500, hide: 100 }

Თავები მაღლა! ცალკეული პოპოვერების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით.

მარკირება

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

მეთოდები

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

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

.popover ("შოუ")

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

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

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

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

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

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

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

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

შეტყობინებების შესახებ

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

ჩამოტვირთვა

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

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

წმიდა გუაკამოლე! საუკეთესოდ შეამოწმეთ საკუთარი თავი, არც თუ ისე კარგად გამოიყურებით.

ოჰ სნეპი! თქვენ მიიღეთ შეცდომა!

შეცვალეთ ეს და ეს და ისევ სცადეთ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

მიიღეთ ეს ქმედება ან გააკეთე ეს


bootstrap-alert.js-ის გამოყენებით

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

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

მარკირება

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

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

მეთოდები

$().alert()

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

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

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

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

Ივენთი

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

ღონისძიება აღწერა
დახურვა ეს მოვლენა მაშინვე ირთვება, როდესაც closeგამოიძახება ეგზემპლარის მეთოდი.
დახურული ეს ღონისძიება გააქტიურებულია, როდესაც გაფრთხილება დაიხურება (დაელოდება css გადასვლების დასრულებას).
  1. $ ( '#ჩემი-გაფრთხილება' ). bind ( 'დახურული' , ფუნქცია () {
  2. // გააკეთე რამე…
  3. })

შესახებ

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

Გადმოწერეთ ფაილი

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

გამოიყენეთ ღილაკების მოდული მდგომარეობებისა და გადართვისთვის.

სახელმწიფოებრივი
ერთჯერადი გადართვა
მოსანიშნი ველი
რადიო

bootstrap-button.js-ის გამოყენებით

ღილაკების ჩართვა Javascript-ის საშუალებით:

  1. $ ( '.nav-tabs' ). ღილაკი ()

მარკირება

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

  1. <!-- დაამატეთ data-toggle="button" ერთ ღილაკზე გადართვის გასააქტიურებლად -->
  2. <button class = "btn" data-toggle = "button" > ერთჯერადი გადართვა </button>
  3.  
  4. <!-- დაამატეთ data-toggle="buttons-checkbox" ჩამრთველის სტილის გადართვისთვის btn-ჯგუფზე -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > მარცხენა </button>
  7. <button class = "btn" > შუა </button>
  8. <button class = "btn" > მარჯვენა </button>
  9. </div>
  10.  
  11. <!-- დაამატეთ data-toggle="buttons-radio" რადიო სტილის გადართვისთვის btn-ჯგუფზე -->
  12. <div class = "btn-group" data-toggle = "buttons-რადიო" >
  13. <button class = "btn" > მარცხენა </button>
  14. <button class = "btn" > შუა </button>
  15. <button class = "btn" > მარჯვენა </button>
  16. </div>

მეთოდები

$().button('toggle')

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

Თავები მაღლა! თქვენ შეგიძლიათ ჩართოთ ღილაკის ავტომატური გადართვა data-toggleატრიბუტის გამოყენებით.
  1. <button class = "btn" data-toggle = "button" > </button>

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

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

  1. <button class = "btn" data-loading-text = "იტვირთება მასალა..." > ... </button>
Თავები მაღლა! Firefox აგრძელებს გათიშულ მდგომარეობას გვერდების ჩატვირთვისას . ამის გამოსავალი არის გამოყენება autocomplete="off".

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

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

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

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

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

შესახებ

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

Გადმოწერეთ ფა���ლი

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

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. კვების სატვირთო მანქანა quinoa nesciunt laborum eiusmod. ბრანჩი 3 მგლის მთვარე დრო, sunt aliqua დააყენა ჩიტი მასზე squid ერთი წარმოშობის ყავა nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. რეკლამა ვეგანის გარდა ჯალათი ვიცე ლომო. გამაშები occaecat ხელნაკეთი ლუდის ფერმა-მაგიდაზე, ნედლი ჯინსის ესთეტიკური სინთეზური ნესტიანი, თქვენ ალბათ არ გსმენიათ მათ შესახებ accusamus labore მდგრადი VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. კვების სატვირთო მანქანა quinoa nesciunt laborum eiusmod. ბრანჩი 3 მგლის მთვარე დრო, sunt aliqua დააყენა ჩიტი მასზე squid ერთი წარმოშობის ყავა nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. რეკლამა ვეგანის გარდა ჯალათი ვიცე ლომო. გამაშები occaecat ხელნაკეთი ლუდის ფერმა-მაგიდაზე, ნედლი ჯინსის ესთეტიკური სინთეზური ნესტიანი, თქვენ ალბათ არ გსმენიათ მათ შესახებ accusamus labore მდგრადი VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. კვების სატვირთო მანქანა quinoa nesciunt laborum eiusmod. ბრანჩი 3 მგლის მთვარე დრო, sunt aliqua დააყენა ჩიტი მასზე squid ერთი წარმოშობის ყავა nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. რეკლამა ვეგანის გარდა ჯალათი ვიცე ლომო. გამაშები occaecat ხელნაკეთი ლუდის ფერმა-მაგიდაზე, ნედლი ჯინსის ესთეტიკური სინთეზური ნესტიანი, თქვენ ალბათ არ გსმენიათ მათ შესახებ accusamus labore მდგრადი VHS.

bootstrap-collapse.js-ის გამოყენება

ჩართვა Javascript-ის საშუალებით:

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

Პარამეტრები

სახელი ტიპი ნაგულისხმევი აღწერა
მშობელი სელექტორი ყალბი თუ ამომრჩევია, მაშინ ყველა დასაკეცი ელემენტი მითითებული მშობლის ქვეშ დაიხურება, როდესაც ეს დასაკეცი ელემენტი გამოჩნდება. (ტრადიციული აკორდეონის ქცევის მსგავსი)
გადართვა ლოგიკური მართალია რთავს დასაკეც ელემენტს გამოძახებისას

მარკირება

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

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. მარტივი დასაკეცი
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Თავები მაღლა! აკორდეონის მსგავსი ჯგუფის მართვის დასამატებლად დასაკეცი კონტროლში, დაამატეთ მონაცემთა ატრიბუტი data-parent="#selector". იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში.

მეთოდები

.collapse(ოფციები)

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

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

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

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

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

აჩვენებს დასაკეც ელემენტს.

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

მალავს დასაკეც ელემენტს.

Ივენთი

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

ღონისძიება აღწერა
შოუ ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია ეს ღონისძიება გააქტიურებულია, როდესაც კოლაფსის ელემენტი მომხმარებლისთვის ხილული გახდება (დაელოდება css გადასვლების დასრულებას).
დამალვა ეს ღონისძიება ჩართულია მაშინვე, როდესაც hideმეთოდი გამოიძახება.
დამალული ეს ღონისძიება გააქტიურებულია, როდესაც მომხმარებლისგან დამალულია კოლაფსის ელემენტი (დაელოდება css გადასვლების დასრულებას).
  1. $ ( '#mycollapsible' ). on ( 'დამალული' , ფუნქცია () {
  2. // გააკეთე რამე…
  3. })

შესახებ

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

Გადმოწერეთ ფაილი

მაგალითი

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


bootstrap-typeahead.js-ის გამოყენებით

დარეკეთ ტიპაჟს Javascript-ით:

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

Პარამეტრები

სახელი ტიპი ნაგულისხმევი აღწერა
წყარო მასივი [ ] მონაცემთა წყარო, რომლის წინააღმდეგაც უნდა მოითხოვოთ.
ნივთები ნომერი 8 ჩამოსაშლელ სიაში საჩვენებელი ელემენტების მაქსიმალური რაოდენობა.
შესატყვისი ფუნქცია შემთხვევის უგრძნობი მეთოდი, რომელიც გამოიყენება იმის დასადგენად, შეესაბამება თუ არა მოთხოვნა ერთეულს. იღებს ერთ არგუმენტს, რომლის itemწინააღმდეგაც უნდა შემოწმდეს შეკითხვა. წვდომა მიმდინარე მოთხოვნაზე this.query. დააბრუნეთ ლოგიკური მნიშვნელობა, trueთუ მოთხოვნა ემთხვევა.
დამლაგებელი ფუნქცია ზუსტი შესატყვისი,
რეგისტრის მგრძნობიარე,
რეგისტრის უგრძნობი
ავტომატური შევსების შედეგების დასალაგებლად გამოყენებული მეთოდი. იღებს ერთ არგუმენტს itemsდა აქვს შრიფტის წინა მაგალითის ფარგლები. მიმართეთ მიმდინარე მოთხოვნას this.query.
ჰაილაითერი ფუნქცია ხაზს უსვამს ყველა ნაგულისხმევ შესატყვისს მეთოდი, რომელიც გამოიყენება ავტომატური შევსების შედეგების ხაზგასასმელად. იღებს ერთ არგუმენტს itemდა აქვს შრიფტის წინა მაგალითის ფარგლები. უნდა დააბრუნოს html.

მარკირება

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

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

მეთოდები

.typeahead (ოფციები)

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