გააცოცხლეთ Bootstrap-ის კომპონენტები — ახლა უკვე 12 მორგებული jQuery დანამატით.
გამარტივებული, მაგრამ მოქნილი, ტრადიციული javascript მოდალური დანამატი მხოლოდ მინიმალური საჭირო ფუნქციონირებითა და ჭკვიანი ნაგულისხმევებით.
დაამატეთ ჩამოსაშლელი მენიუები Bootstrap-ში თითქმის ნებისმიერ ნივთს ამ მარტივი მოდულით. Bootstrap-ს აქვს სრული ჩამოსაშლელი მენიუს მხარდაჭერა ნავიბარში, ჩანართებსა და აბებში.
გამოიყენეთ scrollspy, რათა ავტომატურად განაახლოთ ბმულები თქვენს ნავიგბარში, რათა აჩვენოთ მიმდინარე აქტიური ბმული გადახვევის პოზიციიდან გამომდინარე.
გამოიყენეთ ეს დანამატი, რათა ჩანართები და აბები უფრო გამოსადეგი გახადოთ, რაც მათ საშუალებას აძლევთ გადაერთონ ადგილობრივი შინაარსის ჩანართების პანელს.
jQuery Tipsy მოდულის ახალი ვერსია, Tooltips არ ეყრდნობა სურათებს - ისინი იყენებენ CSS3 ანიმაციისთვის და მონაცემთა ატრიბუტებს ადგილობრივი სათაურის შესანახად.
დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის.
* საჭიროებს ინსტრუმენტების ჩართვას
გაფრთხილების მოდული არის პატარა კლასი გაფრთხილებებისთვის ახლო ფუნქციონირების დასამატებლად.
გააკეთე მეტი ღილაკებით. აკონტროლეთ ღილაკის მდგომარეობა ან შექმენით ღილაკების ჯგუფები მეტი კომპონენტისთვის, როგორიცაა ხელსაწყოთა ზოლები.
მიიღეთ საბაზისო სტილები და მოქნილი მხარდაჭერა დასაკეცი კომპონენტებისთვის, როგორიცაა აკორდეონები და ნავიგაცია.
შექმენით ნებისმიერი კონტენტის მხიარული სურათი, რომლის საშუალებითაც გსურთ შინაარსის ინტერაქტიული სლაიდშოუ.
ძირითადი, ადვილად გაფართოებული დანამატი ელეგანტური შრიფტების სწრაფად შესაქმნელად ნებისმიერი ფორმის ტექსტის შეყვანით.
მარტივი გადასვლის ეფექტებისთვის, ჩართეთ bootstrap-transition.js ერთხელ მოდალში გადასასვლელად ან გაფრთხილებების გასაქრობად.
* საჭიროა დანამატებში ანიმაციისთვის
გამარტივებული, მაგრამ მოქნილი, ტრადიციული javascript მოდალური დანამატი მხოლოდ მინიმალური საჭირო ფუნქციონირებითა და ჭკვიანი ნაგულისხმევებით.
Გადმოწერეთ ფაილიქვემოთ მოცემულია სტატიკურად გამოსახული მოდალი.
ერთი კარგი სხეული…
ჩართეთ მოდალი Javascript-ის საშუალებით ქვემოთ მოცემულ ღილაკზე დაწკაპუნებით. ის ჩამოიწევს ქვემოთ და გაქრება გვერდის ზემოდან.
გაუშვით დემო მოდალიდარეკეთ მოდალს Javascript-ის საშუალებით:
- $ ( '#myModal' ). მოდალური ( ოფციები )
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ფონი | ლოგიკური | მართალია | მოიცავს მოდალური ფონის ელემენტს. ალტერნატიულად, მიუთითეთ static ფონი, რომელიც არ ხურავს მოდალს დაწკაპუნებისას. |
კლავიატურა | ლოგიკური | მართალია | ხურავს მოდალს გაქცევის ღილაკის დაჭერისას |
შოუ | ლოგიკური | მართალია | აჩვენებს მოდალს ინიციალიზაციისას. |
თქვენ შეგიძლიათ მარტივად გაააქტიუროთ მოდალები თქვენს გვერდზე, ჯავასკრიპტის ერთი ხაზის დაწერის გარეშე. უბრალოდ დააყენეთ data-toggle="modal"
კონტროლერის ელემენტი data-target="#foo"
ან href="#foo"
რომელიც შეესაბამება მოდალური ელემენტის id-ს და დაწკაპუნებისას ის გაუშვებს თქვენს მოდალს.
ასევე, თქვენს მოდალურ ინსტანციაში ოფციების დასამატებლად, უბრალოდ ჩართეთ ისინი, როგორც დამატებითი მონაცემთა ატრიბუტები საკონტროლო ელემენტზე ან თავად მოდალურ მარკირებაზე.
- <a class = "btn" data-toggle = "modal" href = "#myModal" > გაშვება Modal </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>
.fade
კლასი
.modal
ელემენტს (იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში) და ჩართეთ bootstrap-transition.js.
ააქტიურებს თქვენს შინაარსს, როგორც მოდალს. იღებს არასავალდებულო ვარიანტებს object
.
- $ ( '#myModal' ). მოდალური ({
- კლავიატურა : ყალბი
- })
ხელით ცვლის მოდალს.
- $ ( '#myModal' ). მოდალური ( "გადართვა" )
ხელით ხსნის მოდალს.
- $ ( '#myModal' ). მოდალური ( "ჩვენება" )
ხელით მალავს მოდალს.
- $ ( '#myModal' ). მოდალური ( "დამალვა" )
Bootstrap-ის მოდალური კლასი ავლენს რამდენიმე მოვლენას მოდალურ ფუნქციონირებაში ჩასართავად.
ღონისძიება | აღწერა |
---|---|
შოუ | ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. |
ნაჩვენებია | ეს ღონისძიება გააქტიურებულია, როდესაც მოდალი მომხმარებლისთვის ხილული გახდება (დაელოდება css გადასვლების დასრულებას). |
დამალვა | ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hide გამოიძახება ინსტანციის მეთოდი. |
დამალული | ეს ღონისძიება გააქტიურებულია, როდესაც მოდალის დამალვა დასრულდება მომხმარებლისგან (დაელოდება css გადასვლების დასრულებას). |
- $ ( '#myModal' ). on ( 'დამალული' , ფუნქცია () {
- // გააკეთე რამე…
- })
დაამატეთ ჩამოსაშლელი მენიუები Bootstrap-ში თითქმის ნებისმიერ ნივთს ამ მარტივი მოდულით. Bootstrap-ს აქვს სრული ჩამოსაშლელი მენიუს მხარდაჭერა ნავიბარში, ჩანართებსა და აბებში.
Გადმოწერეთ ფაილიდააწკაპუნეთ ჩამოსაშლელ ნავიგ ბმულებზე ნავიგბარში და ქვემოთ მოცემულ აბებზე ჩამოსაშლელი ველების შესამოწმებლად.
გამოიძახეთ ჩამოსაშლელები ჯავასკრიპტის საშუალებით:
- $ ( '.dropdown-toggle' ). ჩამოსაშლელი ()
ნებისმიერი ელემენტისთვის ჩამოსაშლელი ფუნქციის სწრაფად დასამატებლად, უბრალოდ დაამატეთ data-toggle="dropdown"
და ნებისმიერი მოქმედი ჩატვირთვის ჩამოსაშლელი მენიუ ავტომატურად გააქტიურდება.
data-target="#fat"
ან
href="#fat"
.
- <ul class = "nav nav-pills" >
- <li class = "active" ><a href = "#" > რეგულარული ბმული </a></li>
- <li class = "ჩამოშლილი " id = "menu1" >
- <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 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 = "ჩამოშლილი მენიუ" >
- ...
- </ul>
- </li>
- </ul>
პროგრამული api მენიუს გასააქტიურებლად მოცემული ნავიგაციისთვის ან ჩანართებით ნავიგაციისთვის.
ScrollSpy მოდული განკუთვნილია ნავი მიზნების ავტომატურად განახლებისთვის, გადახვევის პოზიციიდან გამომდინარე.
Გადმოწერეთ ფაილიგადაახვიეთ ქვემოთ მოცემულ ზონაში და უყურეთ ნავიგაციის განახლებას. ასევე მონიშნული იქნება ჩამოსაშლელი ქვეპუნქტები. Სცადე!
სარეკლამო გამაშები 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.
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.
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.
დარეკეთ scrollspy-ს Javascript-ით:
- $ ( '#navbar' ). scrollspy ()
იმისათვის, რომ ადვილად დაამატოთ scrollspy ქცევა თქვენს ზედა ზოლის ნავიგაციაში, უბრალოდ დაამატეთ data-spy="scroll"
ელემენტი, რომელზეც გსურთ თვალთვალისთვის (ჩვეულებრივ, ეს იქნება სხეული).
- <body data-spy = "scroll" > ... </body>
<a href="#home">home</a>
უნდა შეესაბამებოდეს რაღაცას დომში, როგორიცაა
<div id="home"></div>
.
როდესაც იყენებთ scrollspy-ს DOM-დან ელემენტების დამატებასთან ან ამოღებასთან ერთად, თქვენ უნდა გამოიძახოთ განახლების მეთოდი ასე:
- $ ( '[data-spy="scroll"]' ). თითოეული ( ფუნქცია () {
- var $spy = $ ( ეს ). scrollspy ( "განახლება" )
- });
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ოფსეტური | ნომერი | 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
ნდობის ფონდი seitan letterpress, keytar raw denim keffiyeh etsy არტ წვეულება მანამ, სანამ გაიყიდებოდა სამაგისტრო წმენდის უგლუტენო კალმარის სცენსტერ ფრიგან კოსბის სვიტერი. Fanny Pack portland seitan DIY, არტ წვეულება ლოკატორ მგლის კლიშე მაღალი ცხოვრების ექო პარკი Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi, სანამ ისინი გაიყიდებოდნენ ფერმა-მაგიდაზე VHS ვირუსული ლოკალური კოსბის სვიტრი. Lomo wolf ვირუსული, ულვაში მზად thundercats keffiyeh craft ლუდი marfa ეთიკური. მგელი სალვია ფრიგანი, სარტორიული კეფიე ექო პარკი ვეგანი.
ჩართეთ tabbable ჩანართები Javascript-ის საშუალებით (თითოეული ჩანართი ინდივიდუალურად უნდა გააქტიურდეს):
- $ ( '#myTab a' ). დააწკაპუნეთ ( ფუნქცია ( e ) {
- ე . preventDefault ();
- $ ( ეს ). ჩანართი ( 'ჩვენება' );
- })
თქვენ შეგიძლიათ გაააქტიუროთ ინდივიდუალური ჩანართები რამდენიმე გზით:
- $ ( '#myTab a[href="#პროფილი"]' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ ჩანართი სახელის მიხედვით
- $ ( '#myTab a:first' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ პირველი ჩანართი
- $ ( '#myTab a:last' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ ბოლო ჩანართი
- $ ( '#myTab li:eq(2) a' ). ჩანართი ( 'ჩვენება' ); // აირჩიეთ მესამე ჩანართი (0-ინდექსირებული)
თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია ჯავასკრიპტის დაწერის გარეშე , ელემენტის უბრალოდ მითითებით data-toggle="tab"
ან მასზე. და კლასების ჩანართზე data-toggle="pill"
დამატება გამოიყენებს ჩატვირთვის ჩანართის სტილს.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>
ააქტიურებს ჩანართის ელემენტს და კონტენტის კონტეინერს. ჩანართს უნდა ჰქონდეს 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>
ღონისძიება | აღწერა |
---|---|
შოუ | ეს ღონისძიება ჩართულია ჩანართის ჩვენებაზე, მაგრამ სანამ ახალი ჩანართი გამოჩნდება. გამოიყენეთ event.target და event.relatedTarget მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად. |
ნაჩვენებია | ეს ღონისძიება ჩართულია ჩანართის ჩვენებაში მას შემდეგ, რაც გამოჩნდება ჩანართი. გამოიყენეთ event.target და event.relatedTarget მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად. |
- $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , ფუნქცია ( e ) {
- ე . სამიზნე // გააქტიურებული ჩანართი
- ე . relatedTarget // წინა ჩანართი
- })
შთაგონებულია ჯეისონ ფრეიმის მიერ დაწერილი შესანიშნავი jQuery.tipsy მოდულით; Tooltips არის განახლებული ვერსია, რომელიც არ ეყრდნობა სურათებს, იყენებს css3 ანიმაციისთვის და მონაცემთა ატრიბუტებს ადგილობრივი სათაურის შესანახად.
Გადმოწერეთ ფაილიინსტრუმენტების რჩევების სანახავად გადაიტანეთ მაუსი ქვემოთ მოცემულ ბმულებზე:
მჭიდრო შარვალი შემდეგი დონის keffiyeh თქვენ ალბათ არ გსმენიათ მათ შესახებ. ფოტო ჯიხურის წვერი ნედლი ჯინსის ვეგანური მესენჯერის ჩანთა stumptown. ფერმიდან მაგიდამდე სეიტანი, Mcsweeney's fixie მდგრადი quinoa 8-ბიტიანი ამერიკული ტანსაცმელი აქვს ტერი რიჩარდსონის ვინილის შამბრი. წვერის სტამპთაუნი, კარდიგანები ბან მი ლომო ჭექა-ქუხილი. ტოფუ ბიოდიზელი ვილიამსბურგის მარფა, ოთხი ლოკო მაკსვინის გამწმენდი ვეგანური შამბრი. მართლაც ირონიული ხელოსანი , რაც არ უნდა ქეითარი , სცენის სცენის ფერმა-მაგიდა ბანკსი ოსტინ ტვიტერის სახელური freegan cred ნედლეული denim ერთი წარმოშობის ყავა ვირუსული.
გააქტიურეთ ინსტრუმენტის მინიშნება Javascript-ის საშუალებით:
- $ ( '#მაგალითი' ).ინსტრუმენტის მინიშნება ( ოფციები )
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ანიმაცია | ლოგიკური | მართალია | გამოიყენეთ css fade გადასვლა ინსტრუმენტზე |
განთავსება | სიმებიანი|ფუნქცია | "ზედა" | როგორ განვათავსოთ ინსტრუმენტების რჩევები - ზედა | ქვედა | მარცხენა | უფლება |
სელექტორი | სიმებიანი | ყალბი | თუ სელექტორი არის მოწოდებული, ხელსაწყოს მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. |
სათაური | სიმებიანი | ფუნქცია | '' | სათაურის ნაგულისხმევი მნიშვნელობა, თუ `title` ტეგი არ არის |
გამომწვევი | სიმებიანი | "ჰოვერ" | როგორ ხდება ინსტრუმენტული მინიშნება - hover | ფოკუსირება | სახელმძღვანელო |
დაგვიანებით | ნომერი | ობიექტი | 0 | ხელსაწყოს მინიშნების ჩვენება და დამალვის დაგვიანება (ms) - არ ვრცელდება ხელით ტრიგერის ტიპზე თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე ობიექტის სტრუქტურა არის: |
შესრულების მიზეზების გამო, Tooltip და Popover data-apis არის დაშვებული. თუ გსურთ მათი გამოყენება, უბრალოდ მიუთითეთ ამომრჩევის ვარიანტი.
- <a href = "#" rel = "tooltip" title = "first tooltip" > გადაიტანეთ ჩემზე </a>
ამაგრებს ხელსაწყოების დამმუშავებელს ელემენტების კოლექციაზე.
ავლენს ელემენტის ინსტრუმენტს.
- $ ( '#element' ). ინსტრუმენტის მინიშნება ( "ჩვენება" )
მალავს ელემენტის ხელსაწყოს მინიშნებას.
- $ ( '#element' ). ინსტრუმენტის მინიშნება ( "დამალვა" )
ცვლის ელემენტის ხელსაწყოს მინიშნებას.
- $ ( '#element' ). ინსტრუმენტის მინიშნება ( "გადართვა" )
დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის.
* საჭიროებს Tooltip- ის ჩართვას
Გადმოწერეთ ფაილიგადაახვიეთ ღილაკზე პოპოვერის გასააქტიურებლად.
ჩართეთ პოპოვერები Javascript-ის საშუალებით:
- $ ( '#მაგალითი' ). პოპოვერი ( ოფციები )
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ანიმაცია | ლოგიკური | მართალია | გამოიყენეთ css fade გადასვლა ინსტრუმენტზე |
განთავსება | სიმებიანი|ფუნქცია | "მართალი" | როგორ განვათავსოთ პოპოვერი - ტოპ | ქვედა | მარცხენა | უფლება |
სელექტორი | სიმებიანი | ყალბი | თუ სელექტორი არის მოწოდებული, ინსტრუმენტული მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე |
გამომწვევი | სიმებიანი | "ჰოვერ" | როგორ ხდება ინსტრუმენტული მინიშნება - hover | ფოკუსირება | სახელმძღვანელო |
სათაური | სიმებიანი | ფუნქცია | '' | სათაურის ნაგულისხმევი მნიშვნელობა, თუ `title` ატრიბუტი არ არის |
შინაარსი | სიმებიანი | ფუნქცია | '' | ნაგულისხმევი შინაარსის მნიშვნელობა, თუ `data-content` ატრიბუტი არ არის |
დაგვიანებით | ნომერი | ობიექტი | 0 | პოპოვერის (ms) ჩვენების და დამალვის დაგვიანება - არ ვრცელდება ხელით ტრიგერის ტიპზე თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე ობიექტის სტრუქტურა არის: |
შესრულების მიზეზების გამო, Tooltip და Popover data-apis არის დაშვებული. თუ გსურთ მათი გამოყენება, უბრალოდ მიუთითეთ ამომრჩევის ვარიანტი.
ახორციელებს პოპოვერების ინიციალიზებას ელემენტების კოლექციისთვის.
ავლენს ელემენტების პოპოვერს.
- $ ( '#element' ). პოპოვერი ( "შოუ" )
მალავს ელემენტების პოპოვერს.
- $ ( '#element' ). პოპოვერი ( "დამალვა" )
ცვლის ელემენტების პოპოვერს.
- $ ( '#element' ). პოპოვერი ( "გადართვა" )
გაფრთხილების მოდული არის პატარა კლასი გაფრთხილებებისთვის ახლო ფუნქციონირების დასამატებლად.
ჩამოტვირთვაგაფრთხილების მოდული მუშაობს რეგულარულ გაფრთხილებებზე და ბლოკავს შეტყობინებებს.
შეცვალეთ ეს და ეს და ისევ სცადეთ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
გაფრთხილების გაუქმების ჩართვა Javascript-ის საშუალებით:
- $ ( ".alert" ). გაფრთხილება ()
უბრალოდ დაამატეთ data-dismiss="alert"
თქვენი დახურვის ღილაკს, რათა ავტომატურად მისცეს გაფრთხილების დახურვის ფუნქცია.
- <a class = "close" data-dismiss = "alert" href = "#" > × </a>
ახვევს ყველა გაფრთხილებას მჭიდრო ფუნქციონალობით. იმისათვის, რომ თქვენი გაფრთხილებები ანიმაციური იყოს დახურვისას, დარწმუნდით, რომ მათ უკვე აქვთ .fade
გამოყენებული .in
კლასი და მათზე.
ხურავს გაფრთხილებას.
- $ ( ".alert" ). გაფრთხილება ( "დახურვა" )
Bootstrap-ის გაფრთხილების კლასი ავლენს რამდენიმე მოვლენას გაფრთხილების ფუნქციონირებაში ჩასართავად.
ღონისძიება | აღწერა |
---|---|
დახურვა | ეს მოვლენა მაშინვე ირთვება, როდესაც close გამოიძახება ეგზემპლარის მეთოდი. |
დახურული | ეს ღონისძიება გააქტიურებულია, როდესაც გაფრთხილება დაიხურება (დაელოდება css გადასვლების დასრულებას). |
- $ ( '#ჩემი-გაფრთხილება' ). bind ( 'დახურული' , ფუნქცია () {
- // გააკეთე რამე…
- })
მიიღეთ საბაზისო სტილები და მოქნილი მხარდაჭერა დასაკეცი კომპონენტებისთვის, როგორიცაა აკორდეონები და ნავიგაცია.
Გადმოწერეთ ფა���ლი* მოითხოვს Transitions მოდულის ჩართვას.
კოლაფსის მოდულის გამოყენებით, ჩვენ ავაშენეთ მარტივი აკორდეონის სტილის ვიჯეტი:
ჩართვა Javascript-ის საშუალებით:
- $ ( ".collapse" ). კოლაფსი ()
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
მშობელი | სელექტორი | ყალბი | თუ ამომრჩევია, მაშინ ყველა დასაკეცი ელემენტი მითითებული მშობლის ქვეშ დაიხურება, როდესაც ეს დასაკეცი ელემენტი გამოჩნდება. (ტრადიციული აკორდეონის ქცევის მსგავსი) |
გადართვა | ლოგიკური | მართალია | რთავს დასაკეც ელემენტს გამოძახებისას |
უბრალოდ დაამატეთ data-toggle="collapse"
და a data-target
ელემენტს, რათა ავტომატურად მიენიჭოთ კონტროლი დასაკეცი ელემენტზე. ატრიბუტი იღებს css ამომრჩეველს data-target
კოლაფსის გამოსაყენებლად. დარწმუნდით, რომ დაამატეთ კლასი collapse
დასაკეც ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი in
.
- <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
- მარტივი დასაკეცი
- </button>
- <div id = "demo" class = "collapse in" > … </div>
data-parent="#selector"
. იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში.
ააქტიურებს თქვენს კონტენტს, როგორც დასაკეცი ელემენტს. იღებს არასავალდებულო ვარიანტებს object
.
- $ ( '#mycollapsible' ). კოლაფსი ({
- გადართვა : ყალბი
- })
გადართავს დასაკეც ელემენტს ჩვენებაზე ან დამალვაზე.
აჩვენებს დასაკეც ელემენტს.
მალავს დასაკეც ელემენტს.
Bootstrap-ის კოლაფსის კლასი ავლენს რამდენიმე მოვლენას კოლაფსის ფუნქციონირებაში ჩასართავად.
ღონისძიება | აღწერა |
---|---|
შოუ | ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. |
ნაჩვენებია | ეს ღონისძიება გააქტიურებულია, როდესაც კოლაფსის ელემენტი მომხმარებლისთვის ხილული გახდება (დაელოდება css გადასვლების დასრულებას). |
დამალვა | ეს ღონისძიება ჩართულია მაშინვე, როდესაც hide მეთოდი გამოიძახება. |
დამალული | ეს ღონისძიება გააქტიურებულია, როდესაც მომხმარებლისგან დამალულია კოლაფსის ელემენტი (დაელოდება css გადასვლების დასრულებას). |
- $ ( '#mycollapsible' ). on ( 'დამალული' , ფუნქცია () {
- // გააკეთე რამე…
- })
ზოგადი დანამატი ელემენტების მეშვეობით ველოსიპედით გადასაადგილებლად. მხიარულება.
Გადმოწერეთ ფაილიუყურეთ სლაიდშოუს ქვემოთ.
დარეკეთ Javascript-ით:
- $ ( '.კარუსელი' ). კარუსელი ()
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ინტერვალი | ნომერი | 5000 | დრო, რომელიც დაგვიანებულია ნივთის ავტომატურ ველოსიპედს შორის. თუ არასწორია, კარუსელი ავტომატურად არ დატრიალდება. |
პაუზა | სიმებიანი | "ჰოვერ" | აჩერებს კარუსელის ველოსიპედს თაგვის ფურცელზე და განაახლებს კარუსელის ველოსიპედს თაგვის ფურცელზე. |
მონაცემთა ატრიბუტები გამოიყენება წინა და შემდეგი კონტროლისთვის. შეამოწმეთ მარკირების მაგალითი ქვემოთ.
- <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 = "წინ" > ‹ </a>
- <a class = "carousel-control right" href = "#myCarousel" data-slide = "შემდეგი" > › </a>
- </div>
ახორციელებს კარუსელის ინიციალიზაციას არჩევითი ოფციებით object
და იწყებს ველოსიპედით სვლას ნივთებზე.
- $ ( '.კარუსელი' ). კარუსელი ({
- ინტერვალი : 2000
- })
მოძრაობს კარუსელის ელემენტებში მარცხნიდან მარჯვნივ.
აჩერებს კარუსელს ნივთების ველოსიპედით გადაადგილებას.
აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი).
ციკლები წინა პუნქტამდე.
ციკლები შემდეგ პუნქტზე.
Bootstrap-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად.
ღონისძიება | აღწერა |
---|---|
სლაიდი | ეს მოვლენა მაშინვე ირთვება, როდესაც slide ინსტანციის მეთოდი გამოიძახება. |
სრიალებს | ეს ღონისძიება გააქტიურებულია, როდესაც კარუსელი დაასრულებს სლაიდზე გადასვლას. |
ძირითადი, ადვილად გაფართოებული დანამატი ელეგანტური შრიფტების სწრაფად შესაქმნელად ნებისმიერი ფორმის ტექსტის შეყვანით.
Გადმოწერეთ ფაილიდაიწყეთ აკრეფა ქვემოთ მოცემულ ველში, რათა ნახოთ შრიფტის წინა შედეგები.
დარეკეთ ტიპაჟს Javascript-ით:
- $ ( '.typeahead' ). შრიფტი ()
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
წყარო | მასივი | [ ] | მონაცემთა წყარო, რომლის წინააღმდეგაც უნდა მოითხოვოთ. |
ნივთები | ნომერი | 8 | ჩამოსაშლელ სიაში საჩვენებელი ელემენტების მაქსიმალური რაოდენობა. |
შესატყვისი | ფუნქცია | შემთხვევის უგრძნობი | მეთოდი, რომელიც გამოიყენება იმის დასადგენად, შეესაბამება თუ არა მოთხოვნა ერთეულს. იღებს ერთ არგუმენტს, რომლის item წინააღმდეგაც უნდა შემოწმდეს შეკითხვა. წვდომა მიმდინარე მოთხოვნაზე this.query . დააბრუნეთ ლოგიკური მნიშვნელობა, true თუ მოთხოვნა ემთხვევა. |
დამლაგებელი | ფუნქცია | ზუსტი შესატყვისი, რეგისტრის მგრძნობიარე, რეგისტრის უგრძნობი |
ავტომატური შევსების შედეგების დასალაგებლად გამოყენებული მეთოდი. იღებს ერთ არგუმენტს items და აქვს შრიფტის წინა მაგალითის ფარგლები. მიმართეთ მიმდინარე მოთხოვნას this.query . |
ჰაილაითერი | ფუნქცია | ხაზს უსვამს ყველა ნაგულისხმევ შესატყვისს | მეთოდი, რომელიც გამოიყენება ავტომატური შევსების შედეგების ხაზგასასმელად. იღებს ერთ არგუმენტს item და აქვს შრიფტის წინა მაგალითის ფარგლები. უნდა დააბრუნოს html. |
დაამატეთ მონაცემთა ატრიბუტები ელემენტის დასარეგისტრირებლად typeahead ფუნქციონირებით.
- <input type = "text" data- provide = "typeahead" >
ახდენს შეყვანის ინიცირებას შრიფტით.