JavaScript
გააცოცხლეთ Bootstrap-ის კომპონენტები ათზე მეტი მორგებული jQuery მოდულით. მარტივად ჩართეთ ისინი ყველა, ან სათითაოდ.
გააცოცხლეთ Bootstrap-ის კომპონენტები ათზე მეტი მორგებული jQuery მოდულით. მარტივად ჩართეთ ისინი ყველა, ან სათითაოდ.
დანამატები შეიძლება ჩაერთოს ინდივიდუალურად (Bootstrap-ის ინდივიდუალური *.js
ფაილების გამოყენებით), ან ერთდროულად (გამოყენებით bootstrap.js
ან შემცირებული bootstrap.min.js
).
ორივე bootstrap.js
და bootstrap.min.js
შეიცავს ყველა დანამატს ერთ ფაილში. ჩართეთ მხოლოდ ერთი.
ზოგიერთი დანამატი და CSS კომპონენტი დამოკიდებულია სხვა დანამატებზე. თუ ინდივიდუალურად ჩართავთ დანამატებს, დარწმუნდით, რომ შეამოწმეთ ეს დამოკიდებულებები დოკუმენტებში. ასევე გაითვალისწინეთ, რომ ყველა დანამატი დამოკიდებულია jQuery-ზე (ეს ნიშნავს, რომ jQuery უნდა იყოს ჩართული დანამატის ფაილებამდე) . გაიარეთ კონსულტაციაbower.json
, რომ ნახოთ jQuery-ის რომელი ვერსიებია მხარდაჭერილი.
თქვენ შეგიძლიათ გამოიყენოთ Bootstrap-ის ყველა დანამატი მხოლოდ მარკირების API-ის საშუალებით JavaScript-ის ერთი ხაზის დაწერის გარეშე. ეს არის Bootstrap-ის პირველი კლასის API და უნდა იყოს თქვენი პირველი განხილვა მოდულის გამოყენებისას.
ამის თქმით, ზოგიერთ სიტუაციაში შეიძლება სასურველი იყოს ამ ფუნქციის გამორთვა. ამიტომ, ჩვენ ასევე გთავაზობთ მონაცემთა ატრიბუტის API-ს გამორთვის შესაძლებლობას დოკუმენტის სახელების სივრცის ყველა მოვლენის გაუქმებით data-api
. ეს ასე გამოიყურება:
ალტერნატიულად, კონკრეტული დანამატის დასამიზნებლად, უბრალოდ ჩართეთ მოდულის სახელი, როგორც სახელთა სივრცე, მონაცემთა api სახელების სივრცესთან ერთად, როგორიცაა:
ნუ გამოიყენებთ მონაცემთა ატრიბუტებს მრავალი დანამატიდან იმავე ელემენტზე. მაგალითად, ღილაკს არ შეიძლება ჰქონდეს ინსტრუმენტის მინიშნება და გადართვა მოდალი. ამის მისაღწევად გამოიყენეთ შესაფუთი ელემენტი.
ჩვენ ასევე გვჯერა, რომ თქვენ უნდა შეძლოთ Bootstrap-ის ყველა დანამატის გამოყენება მხოლოდ JavaScript API-ის მეშვეობით. ყველა საჯარო API არის ერთჯერადი, ჯაჭვური მეთოდები და აბრუნებს მოქმედების კოლექციას.
ყველა მეთოდმა უნდა მიიღოს არასავალდებულო ოფციების ობიექტი, სტრიქონი, რომელიც მიზნად ისახავს კონკრეტულ მეთოდს, ან არაფერს (რომელიც იწყებს ნაგულისხმევი ქცევის დანამატს):
თითოეული მოდული ასევე ავლენს თავის ნედლეულ კონსტრუქტორს Constructor
თვისებაზე: $.fn.popover.Constructor
. თუ გსურთ მიიღოთ კონკრეტული მოდულის მაგალითი, აიღეთ იგი პირდაპირ ელემენტიდან: $('[rel="popover"]').data('popover')
.
თქვენ შეგიძლიათ შეცვალოთ მოდულის ნაგულისხმევი პარამეტრები მოდულის Constructor.DEFAULTS
ობიექტის შეცვლით:
ზოგჯერ საჭიროა Bootstrap დანამატების გამოყენება სხვა UI ჩარჩოებთან ერთად. ამ პირობებში, სახელთა სივრცის შეჯახება ზოგჯერ შეიძლება მოხდეს. თუ ეს მოხდება, შეგიძლიათ დაურეკოთ .noConflict
დანამატს, რომლის მნიშვნელობის დაბრუნება გსურთ.
Bootstrap უზრუნველყოფს მორგებულ მოვლენებს პლაგინების უნიკალურ ქმედებებისთვის. როგორც წესი, ესენი მოდის ინფინიტივი და წარსული ნაწილაკის სახით - სადაც ინფინიტივი (მაგ. show
) ჩნდება მოვლენის დაწყებისას, ხოლო მისი წარსული ნაწილაკი (მაგ. shown
) მოქმედების დასრულებისას.
3.0.0-ის მდგომარეობით, Bootstrap-ის ყველა მოვლენა არის სახელთა სივრცე.
ყველა უსასრულო მოვლენა უზრუნველყოფს preventDefault
ფუნქციონირებას. ეს იძლევა შესაძლებლობას შეაჩეროს მოქმედების შესრულება მის დაწყებამდე.
Bootstrap-ის jQuery-ის თითოეული მოდულის ვერსიაზე წვდომა შესაძლებელია VERSION
მოდულის კონსტრუქტორის საკუთრების მეშვეობით. მაგალითად, ხელსაწყოების მოდულისთვის:
Bootstrap-ის დანამატები არ იბრუნებს განსაკუთრებით მოხდენილად, როდესაც JavaScript გამორთულია. თუ თქვენ აინტერესებთ მომხმარებლის გამოცდილება ამ შემთხვევაში, გამოიყენეთ <noscript>
სიტუაციის ახსნა (და როგორ ხელახლა ჩართოთ JavaScript) თქვენს მომხმარებლებს და/ან დაამატეთ თქვენი საკუთარი შენიშვნები.
Bootstrap ოფიციალურად არ უჭერს მხარს მესამე მხარის JavaScript ბიბლიოთეკებს , როგორიცაა Prototype ან jQuery UI. მიუხედავად .noConflict
და სახელთა სივრცის მოვლენებისა, შეიძლება არსებობდეს თავსებადობის პრობლემები, რომლებიც დამოუკიდებლად უნდა მოაგვაროთ.
მარტივი გადასვლის ეფექტებისთვის, ჩართეთ transition.js
ერთხელ სხვა JS ფაილებთან ერთად. თუ თქვენ იყენებთ შედგენილ (ან მინიფიცირებულ) bootstrap.js
, არ არის საჭირო ამის ჩართვა — ის უკვე არსებობს.
Transition.js არის ძირითადი დამხმარე transitionEnd
მოვლენებისთვის, ასევე CSS გადასვლის ემულატორი. მას სხვა დანამატები იყენებენ CSS გადასვლის მხარდაჭერის შესამოწმებლად და ჩამოკიდებული გადასვლების დასაჭერად.
გადასვლები შეიძლება გლობალურად გამორთოთ შემდეგი JavaScript სნიპეტის გამოყენებით, რომელიც უნდა მოდიოდეს ჩატვირთვის შემდეგ transition.js
(ან bootstrap.js
ან bootstrap.min.js
, როგორც შეიძლება იყოს):
მოდალები არის გამარტივებული, მაგრამ მოქნილი, დიალოგის მოთხოვნა მინიმალური საჭირო ფუნქციონირებით და ჭკვიანი ნაგულისხმევი პარამეტრებით.
დარწმუნდით, რომ არ გახსნათ მოდალი, სანამ მეორე ჯერ კიდევ ჩანს. ერთზე მეტი მოდალის ჩვენება ერთდროულად მოითხოვს მორგებულ კოდს.
ყოველთვის შეეცადეთ მოათავსოთ მოდალის HTML კოდი თქვენს დოკუმენტში ზედა დონის პოზიციაზე, რათა თავიდან აიცილოთ სხვა კომპონენტები მოდალის გარეგნობაზე და/ან ფუნქციონირებაზე.
არსებობს გარკვეული გაფრთხილებები მოდალების გამოყენებასთან დაკავშირებით მობილურ მოწყობილობებზე. იხილეთ ჩვენი ბრაუზერის მხარდაჭერის დოკუმენტები დეტალებისთვის.
იმის გამო, თუ როგორ განსაზღვრავს HTML5 მის სემანტიკას, autofocus
HTML ატრიბუტს არანაირი ეფექტი არ აქვს Bootstrap მოდალში. იგივე ეფექტის მისაღწევად გამოიყენეთ რამდენიმე მორგებული JavaScript:
გაფორმებული მოდალი სათაურით, ტექსტით და მოქმედებების კომპლექტით ქვედაბოლოში.
გადართეთ მოდალი JavaScript-ის საშუალებით ქვემოთ მოცემულ ღილაკზე დაწკაპუნებით. ის ჩამოიწევს ქვემოთ და გაქრება გვერდის ზემოდან.
დარწმუნდით, რომ დაამატეთ role="dialog"
და aria-labelledby="..."
, მოდალური სათაურის მითითებით .modal
, და role="document"
თავად .modal-dialog
.
გარდა ამისა, შეგიძლიათ მიუთითოთ თქვენი მოდალური დიალოგის aria-describedby
შესახებ .modal
.
YouTube ვიდეოების მოდალში ჩასმა მოითხოვს დამატებით JavaScript-ს, რომელიც არ არის Bootstrap-ში, რათა ავტომატურად შეწყვიტოს დაკვრა და სხვა. იხილეთ ეს სასარგებლო Stack Overflow პოსტი დამატებითი ინფორმაციისთვის.
მოდალებს აქვთ ორი სურვილისამებრ ზომა, რომლებიც ხელმისაწვდომია მოდიფიკატორის კლასების საშუალებით, რათა განთავსდეს .modal-dialog
.
მოდალებისთვის, რომლებიც უბრალოდ ჩნდება, ვიდრე ქრება სანახავად, ამოიღეთ .fade
კლასი თქვენი მოდალური მარკირებიდან.
იმისათვის, რომ ისარგებლოთ Bootstrap ქსელის სისტემით მოდალში, უბრალოდ ჩადეთ ბუდე .row
შიგნით .modal-body
და შემდეგ გამოიყენეთ ჩვეულებრივი ქსელის სისტემის კლასები.
გაქვთ რამოდენიმე ღილაკი, რომელიც ყველა ერთსა და იმავე მოდალს უშვებს, ოდნავ განსხვავებული შინაარსით? გამოიყენეთ event.relatedTarget
და HTML data-*
ატრიბუტები (შესაძლოა jQuery- ის საშუალებით ), რათა შეიცვალოს მოდალის შინაარსი იმისდა მიხედვით, თუ რომელ ღილაკზე დააწკაპუნეთ. იხილეთ მოდალური მოვლენების დოკუმენტები დეტალებისთვის relatedTarget
,
მოდალური დანამატი ცვლის თქვენს ფარულ შინაარსს მოთხოვნისამებრ, მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. ის ასევე ამატებს გადახვევის ნაგულისხმევ ქცევას და აგენერირებს დაწკაპუნების .modal-open
ზონას მოდალის გარეთ დაწკაპუნებისას ნაჩვენები მოდალების გაუქმებისთვის.<body>
.modal-backdrop
გაააქტიურეთ მოდალი JavaScript-ის ჩაწერის გარეშე. დაყენებულია data-toggle="modal"
კონტროლერის ელემენტზე, როგორიცაა ღილაკი, data-target="#foo"
ან href="#foo"
მიზნად ისახავს კონკრეტული მოდალის გადართვას.
დარეკეთ მოდალს id- myModal
ით JavaScript-ის ერთი ხაზით:
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-
, როგორც data-backdrop=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ფონი | ლოგიკური ან სტრიქონი'static' |
მართალია | მოიცავს მოდალური ფონის ელემენტს. ალტერნატიულად, მიუთითეთ static ფონი, რომელიც არ ხურავს მოდალს დაწკაპუნებისას. |
კლავიატურა | ლოგიკური | მართალია | ხურავს მოდალს გაქცევის ღილაკის დაჭერისას |
შოუ | ლოგიკური | მართალია | აჩვენებს მოდალს ინიციალიზაციისას. |
დისტანციური | გზა | ყალბი | ეს ვარიანტი მოძველებულია v3.3.0-დან და ამოღებულია v4-ში. ამის ნაცვლად, გირჩევთ გამოიყენოთ კლიენტის მხარის შაბლონი ან მონაცემთა დამაკავშირებელი ჩარჩო, ან თავად დარეკოთ jQuery.load . თუ მოწოდებულია დისტანციური URL, კონტენტი ჩაიტვირთება ერთხელ jQuery-ის |
.modal(options)
ააქტიურებს თქვენს შინაარსს, როგორც მოდალს. იღებს არასავალდებულო ვარიანტებს object
.
.modal('toggle')
ხელით ცვლის მოდალს. უბრუნდება აბონენტს მოდალის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ shown.bs.modal
ან hidden.bs.modal
მოვლენა მოხდება).
.modal('show')
ხელით ხსნის მოდალს. უბრუნდება აბონენტს მოდალის რეალურად ჩვენებამდე (ანუ shown.bs.modal
მოვლენის დადგომამდე).
.modal('hide')
ხელით მალავს მოდალს. უბრუნდება აბონენტს მანამ, სანამ მოდალი ნამდვილად დამალული იქნება (ანუ hidden.bs.modal
მოვლენის დადგომამდე).
.modal('handleUpdate')
ხელახლა არეგულირებს მოდალის პოზიციონირებას გადახვევის ზოლის დასაპირისპირებლად, თუ ის გამოჩნდება, რაც მოდალურ ნახტომს მარცხნივ ხდის.
საჭიროა მხოლოდ მაშინ, როდესაც მოდალის სიმაღლე იცვლება, სანამ ის ღიაა.
Bootstrap-ის მოდალური კლასი ავლენს რამდენიმე მოვლენას მოდალურ ფუნქციონირებაში ჩასართავად.
ყველა მოდალური მოვლენა ისროლება თავად მოდალზე (ანუ ზე <div class="modal">
).
ღონისძიების ტიპი | აღწერა |
---|---|
შოუ.ბს.მოდალური | ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. თუ დაწკაპუნებით არის გამოწვეული, დაწკაპუნებული ელემენტი ხელმისაწვდომია relatedTarget მოვლენის თვისებად. |
ნაჩვენებია.ბს.მოდალური | ეს ღონისძიება გააქტიურებულია, როდესაც მოდალი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას). თუ დაწკაპუნებით არის გამოწვეული, დაწკაპუნებული ელემენტი ხელმისაწვდომია relatedTarget მოვლენის თვისებად. |
დამალვა.ბს.მოდალური | ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hide გამოიძახება ინსტანციის მეთოდი. |
დამალული.ბს.მოდალური | ეს ღონისძიება გააქტიურებულია, როდესაც მოდალის დამალვა დასრულდება მომხმარებლისგან (დაელოდება CSS გადასვლების დასრულებას). |
დატვირთული.ბს.მოდალური | ეს ღონისძიება გააქტიურებულია, როდესაც მოდალი იტვირთება კონტენტი remote ოფციის გამოყენებით. |
დაამატეთ ჩამოსაშლელი მენიუები თითქმის ყველაფერში ამ მარტივი მოდულით, მათ შორის ნავიგატორი, ჩანართები და აბები.
მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით, ჩამოსაშლელი დანამატი გადართავს ფარულ შინაარსს (ჩამოშლელ მენიუებს) .open
კლასის გადართვით მშობელი სიის ელემენტზე.
მობილურ მოწყობილობებზე, ჩამოსაშლელი ფანჯრის გახსნა ამატებს ჩამოსაშლელ .dropdown-backdrop
ზონას მენიუს გარეთ შეხებისას ჩამოსაშლელი მენიუების დახურვისთვის, რაც iOS-ის სათანადო მხარდაჭერის მოთხოვნაა. ეს ნიშნავს, რომ ღია ჩამოსაშლელი მენიუდან სხვა ჩამოსაშლელ მენიუზე გადართვა საჭიროებს დამატებით შეხებას მობილურზე.
შენიშვნა: data-toggle="dropdown"
ატრიბუტს ეყრდნობა ჩამოსაშლელი მენიუების დახურვისთვის აპლიკაციის დონეზე, ამიტომ კარგი იდეაა მისი ყოველთვის გამოყენება.
დაამატეთ data-toggle="dropdown"
ბმულზე ან ღილაკზე ჩამოსაშლელი მენიუს გადასართავად.
URL-ების ხელუხლებლად შესანარჩუნებლად ბმულის ღილაკებით, გამოიყენეთ data-target
ატრიბუტი href="#"
.
გამოიძახეთ ჩამოსაშლელები JavaScript-ით:
data-toggle="dropdown"
ჯერ კიდევ საჭიროაგანურჩევლად იმისა, გამოიძახებთ თუ არა თქვენს ჩამოსაშლელს JavaScript-ის საშუალებით, თუ სანაცვლოდ იყენებთ data-api-ს, data-toggle="dropdown"
ყოველთვის საჭიროა ჩამოსაშლელი ტრიგერის ელემენტზე ყოფნა.
არცერთი
$().dropdown('toggle')
გადართავს ჩამოსაშლელ მენიუს მოცემული ნავიგაციის ზოლის ან ჩანართებით ნავიგაციის.
ყველა ჩამოსაშლელი მოვლენა გააქტიურებულია .dropdown-menu
's მშობლის ელემენტზე.
ყველა ჩამოსაშლელ მოვლენას აქვს relatedTarget
თვისება, რომლის მნიშვნელობა არის გადართვის წამყვანი ელემენტი.
ღონისძიების ტიპი | აღწერა |
---|---|
ჩვენება.ბს.ჩამოშლილი | ეს მოვლენა მაშინვე ირთვება, როდესაც შოუს მაგალითის მეთოდი გამოიძახება. |
ნაჩვენებია.ბს.ჩამოშლილი | ეს ღონისძიება გააქტიურებულია, როდესაც ჩამოსაშლელი ფაილი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას). |
დამალვა.ბს.ჩამოშლილი | ეს ღონისძიება გააქტიურებულია დაუყოვნებლივ, როდესაც გამოიძახება დამალვის მაგალითის მეთოდი. |
დამალული.ბს.ჩამოშლილი | ეს ღონისძიება გააქტიურებულია, როდესაც ჩამოსაშლელი ფაილი მომხმარებლისგან დამალულია (დაელოდება CSS გადასვლების დასრულებას). |
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.
Navbar-ის ბმულებს უნდა ჰქონდეთ ამოსაცნობი ID სამიზნეები. მაგალითად, <a href="#home">home</a>
უნდა შეესაბამებოდეს რაღაც DOM-ში, როგორიცაა <div id="home"></div>
.
:visible
ელემენტები იგნორირებულიასამიზნე ელემენტები, რომლებიც არ :visible
შეესაბამება jQuery-ს, იგნორირებული იქნება და მათი შესაბამისი ნავი ელემენტები არასოდეს იქნება ხაზგასმული.
განხორციელების მეთოდის მიუხედავად, scrollspy მოითხოვს იმ position: relative;
ელემენტის გამოყენებას, რომელსაც თქვენ ჯაშუშობთ. უმეტეს შემთხვევაში ეს არის <body>
. როდესაც Scrollspying ელემენტების გარდა <body>
, დარწმუნდით, რომ აქვს height
კომპლექტი და overflow-y: scroll;
გამოიყენება.
იმისათვის, რომ ადვილად დაამატოთ scrollspy ქცევა თქვენს ზედა ზოლის ნავიგაციაში, დაამატეთ data-spy="scroll"
ელემენტი, რომელზეც გსურთ თვალთვალისთვის (ყველაზე ხშირად ეს იქნება <body>
). შემდეგ დაამატეთ data-target
ატრიბუტი ნებისმიერი Bootstrap .nav
კომპონენტის მშობელი ელემენტის ID-ით ან კლასით.
CSS-ის დამატების position: relative;
შემდეგ, დარეკეთ scrollspy-ს JavaScript-ით:
.scrollspy('refresh')
როდესაც იყენებთ scrollspy-ს DOM-დან ელემენტების დამატებასთან ან ამოღებასთან ერთად, თქვენ უნდა გამოიძახოთ განახლების მეთოდი ასე:
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-
, როგორც data-offset=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ოფსეტური | ნომერი | 10 | გადახვევის პოზიციის გამოთვლისას ზემოდან გადასატანი პიქსელები. |
ღონისძიების ტიპი | აღწერა |
---|---|
activate.bs.scrollspy | ეს ღონისძიება ირთვება, როდესაც ახალი ელემენტი გააქტიურდება 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.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
ეს მოდული აფართოებს ჩანართებით ნავიგაციის კომპონენტს , რათა დაამატოთ სანიშნეები.
ჩანართის ჩანართების ჩართვა JavaScript-ის საშუალებით (თითოეული ჩანართი ინდივიდუალურად უნდა გააქტიურდეს):
თქვენ შეგიძლიათ გაააქტიუროთ ინდივიდუალური ჩანართები რამდენიმე გზით:
თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია JavaScript-ის დაწერის გარეშე უბრალოდ ელემენტის მითითებით data-toggle="tab"
ან მასზე. და კლასების ჩანართზე data-toggle="pill"
დამატება გამოიყენებს Bootstrap ჩანართის სტილს , ხოლო და კლასების დამატება გამოიყენებს აბების სტილს .nav
nav-tabs
ul
nav
nav-pills
ჩანართების გაქრობის მიზნით, დაამატეთ .fade
თითოეულს .tab-pane
. პირველი ჩანართის პანელს ასევე უნდა ჰქონდეს .in
თავდაპირველი შინაარსი ხილული.
$().tab
ააქტიურებს ჩანართის ელემენტს და კონტენტის კონტეინერს. ჩანართს უნდა ჰქონდეს DOM-ში ან კონტეინერის კვანძი data-target
ან სამიზნე. href
ზემოთ მოყვანილ მაგალითებში, ჩანართები არის <a>
ატრიბუტებით data-toggle="tab"
.
.tab('show')
ირჩევს მოცემულ ჩანართს და აჩვენებს მის დაკავშირებულ შინაარსს. ნებისმიერი სხვა ჩანართი, რომელიც ადრე იყო არჩეული, გაუქმდება და მასთან დაკავშირებული შინაარსი იმალება. უბრუნდება აბონენტს ჩანართების პანელის რეალურად ჩვენებამდე (ანუ shown.bs.tab
მოვლენის დადგომამდე).
ახალი ჩანართის ჩვენებისას, მოვლენები ჩნდება შემდეგი თანმიმდევრობით:
hide.bs.tab
(მიმდინარე აქტიურ ჩანართზე)show.bs.tab
(გამოსაჩენ ჩანართზე)hidden.bs.tab
(წინა აქტიურ ჩანართზე, იგივე რაც hide.bs.tab
ღონისძიებისთვის)shown.bs.tab
(ახლად აქტიურ ახლად ნაჩვენები ჩანართზე, იგივე რაც show.bs.tab
ღონისძიებისთვის)თუ არცერთი ჩანართი არ იყო აქტიური, მაშინ hide.bs.tab
და hidden.bs.tab
მოვლენები არ გაიხსნება.
ღონისძიების ტიპი | აღწერა |
---|---|
show.bs.tab | ეს ღონისძიება ჩართულია ჩანართის ჩვენებაზე, მაგრამ სანამ ახალი ჩანართი გამოჩნდება. გამოიყენეთ event.target და event.relatedTarget მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად. |
ნაჩვენები.ბს.ჩანართი | ეს ღონისძიება ჩართულია ჩანართის ჩვენებაში მას შემდეგ, რაც გამოჩნდება ჩანართი. გამოიყენეთ event.target და event.relatedTarget მიზნად აქტიური ჩანართი და წინა აქტიური ჩანართი (თუ შესაძლებელია) შესაბამისად. |
დამალვა.ბს.ჩანართი | ეს მოვლენა ირთვება, როდესაც უნდა იყოს ნაჩვენები ახალი ჩანართი (და ამით წინა აქტიური ჩანართი უნდა დაიმალოს). გამოიყენეთ event.target და event.relatedTarget მიზნად ისახავს მიმდინარე აქტიური ჩანართი და ახალი მალე აქტიური ჩანართი, შესაბამისად. |
დამალული.bs.tab | ეს მოვლენა ირთვება მას შემდეგ, რაც გამოჩნდება ახალი ჩანართი (და ამით წინა აქტიური ჩანართი დამალულია). გამოიყენეთ event.target და event.relatedTarget მიზნად ისახავს წინა აქტიური ჩანართი და ახალი აქტიური ჩანართი, შესაბამისად. |
შთაგონებულია ჯეისონ ფრეიმის მიერ დაწერილი შესანიშნავი jQuery.tipsy მოდულით; Tooltips არის განახლებული ვერსია, რომელიც არ ეყრდნობა სურათებს, იყენებს CSS3 ანიმაციისთვის და მონაცემთა ატრიბუტებს ადგილობრივი სათაურის შესანახად.
ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.
ინსტრუმენტების რჩევების სანახავად გადაიტანეთ მაუსი ქვემოთ მოცემულ ბმულებზე:
მჭიდრო შარვალი შემდეგი დონის keffiyeh თქვენ ალბათ არ გსმენიათ მათ შესახებ. ფოტო ჯიხურის წვერი ნედლი ჯინსის ვეგანური მესენჯერის ჩანთა stumptown. ფერმიდან მაგიდამდე სეიტანი, Mcsweeney's fixie მდგრადი quinoa 8-ბიტიანი ამერიკული ტანსაცმელი აქვს ტერი რიჩარდსონის ვინილის შამბრი. წვერის სტამპთაუნი, კარდიგანები ბან მი ლომო ჭექა-ქუხილი. ტოფუ ბიოდიზელი ვილიამსბურგის მარფა, ოთხი ლოკო მაკსვინის გამწმენდი ვეგანური შამბრი. მართლაც ირონიული ხელოსანი , რაც არ უნდა ქეითარი , სცენის სცენის ფერმა-მაგიდა ბანკსი ოსტინ ტვიტერის სახელური freegan cred ნედლეული denim ერთი წარმოშობის ყავა ვირუსული.
ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული.
შესრულების მიზეზების გამო, Tooltip და Popover data-apis არის დაშვებული, რაც ნიშნავს, რომ თქვენ თავად უნდა მოაწყოთ ისინი .
გვერდზე ყველა ინსტრუმენტების ინიციალიზაციის ერთ-ერთი გზა იქნება მათი data-toggle
ატრიბუტის მიხედვით შერჩევა:
Tooltip დანამატი წარმოქმნის შინაარსს და მარკირებას მოთხოვნისამებრ, და ნაგულისხმევად ათავსებს ინსტრუმენტების რჩევებს მათი ტრიგერის ელემენტის შემდეგ.
ჩართეთ ინსტრუმენტული მინიშნება JavaScript-ის საშუალებით:
ინსტრუმენტის მითითებისთვის საჭირო მარკირება მხოლოდ data
ატრიბუტია და title
HTML ელემენტზე გსურთ გქონდეთ ინსტრუმენტული მინიშნება. ინსტრუმენტთა რჩევის გენერირებული მარკირება საკმაოდ მარტივია, თუმცა ის მოითხოვს პოზიციას (ნაგულისხმევად, დაყენებულია top
დანამატის მიერ).
ზოგჯერ გსურთ დაამატოთ ინსტრუმენტების მინიშნება ჰიპერბმულზე, რომელიც ახვევს რამდენიმე ხაზს. Tooltip მოდულის ნაგულისხმევი ქცევა არის მისი ჰორიზონტალურად და ვერტიკალურად ცენტრირება. დაამატეთ white-space: nowrap;
თქვენს წამყვანებს ამის თავიდან ასაცილებლად.
როდესაც იყენებთ ინსტრუმენტების ინსტრუმენტებს ელემენტებზე a .btn-group
ან an .input-group
, ან ცხრილთან დაკავშირებულ ელემენტებზე ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), თქვენ უნდა მიუთითოთ ვარიანტი container: 'body'
(დოკუმენტირებული ქვემოთ) არასასურველი გვერდითი ეფექტების თავიდან ასაცილებლად (როგორიცაა ელემენტის გაფართოება და/ ან კარგავს მომრგვალებულ კუთხეებს, როდესაც ხელსაწყოს წვერი ამოქმედდება).
კლავიატურით ნავიგაციური მომხმარებლებისთვის და განსაკუთრებით დამხმარე ტექნოლოგიების მომხმარებლებისთვის, თქვენ უნდა დაამატოთ მხოლოდ ინსტრუმენტების რჩევები კლავიატურაზე ფოკუსირებულ ელემენტებზე, როგორიცაა ბმულები, ფორმის მართვის საშუალებები ან რაიმე თვითნებური ელემენტი tabindex="0"
ატრიბუტით.
disabled
a-ს ან ელემენტზე მინიშნების დასამატებლად .disabled
, ჩადეთ ელემენტი a-ს შიგნით და ამის ნაცვლად <div>
გამოიყენეთ ინსტრუმენტების მინიშნება.<div>
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-
, როგორც data-animation=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ანიმაცია | ლოგიკური | მართალია | გამოიყენეთ CSS fade გადასვლა ინსტრუმენტზე |
კონტეინერი | სიმებიანი | ყალბი | ყალბი | ანიჭებს ხელსაწყოს მინიშნებას კონკრეტულ ელემენტს. მაგალითი |
დაგვიანებით | ნომერი | ობიექტი | 0 | ინსტრუმენტების მითითების ჩვენება და დამალვის დაგვიანება (ms) - არ ვრცელდება ხელით ტრიგერის ტიპზე თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე ობიექტის სტრუქტურა არის: |
html | ლოგიკური | ყალბი | ჩადეთ HTML ინსტრუმენტთა რჩევაში. თუ არასწორია, jQuery-ის text მეთოდი გამოყენებული იქნება შინაარსის DOM-ში ჩასართავად. გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები. |
განთავსება | სიმებიანი | ფუნქცია | "ზედა" | როგორ განვათავსოთ ხელსაწყოს მინიშნება - ზედა | ქვედა | მარცხენა | მარჯვენა | ავტო. როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება ინსტრუმენტების რჩევით DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძით, როგორც მეორე. |
სელექტორი | სიმებიანი | ყალბი | თუ სელექტორი არის მოწოდებული, ხელსაწყოს მინიშნების ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება დინამიური HTML შინაარსის ინსტრუმენტების დასამატებლად. იხილეთ ეს და ინფორმაციული მაგალითი . |
შაბლონი | სიმებიანი | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
HTML-ის საბაზისო გამოყენება ინსტრუმენტთა რჩევის შექმნისას. ხელსაწყოთი
ყველაზე გარე შეფუთვის ელემენტს უნდა ჰქონდეს |
სათაური | სიმებიანი | ფუნქცია | '' | სათაურის ნაგულისხმევი მნიშვნელობა, თუ თუ ფუნქცია მოცემულია, ის გამოიძახება მისი |
გამომწვევი | სიმებიანი | "ფოკუსირება" | როგორ ხდება ინსტრუმენტების მითითება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში. manual არ შეიძლება გაერთიანდეს სხვა ტრიგერთან. |
ხედვის პორტი | სიმებიანი | ობიექტი | ფუნქცია | { ამომრჩევი: 'სხეული', padding: 0 } | ინახავს ხელსაწყოს მინიშნებას ამ ელემენტის საზღვრებში. მაგალითი: თუ ფუნქცია მოცემულია, ის გამოიძახება გამომწვევი ელემენტის DOM კვანძის ერთადერთ არგუმენტად. |
ცალკეული ინსტრუმენტების რჩევების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით, როგორც ეს ზემოთ იყო ახსნილი.
$().tooltip(options)
ამაგრებს ხელსაწყოების დამმუშავებელს ელემენტების კოლექციაზე.
.tooltip('show')
ავლენს ელემენტის ინსტრუმენტს. უბრუნდება აბონენტს ინსტრუმენტების მითითების რეალურად ჩვენებამდე (ანუ shown.bs.tooltip
მოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად. ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.
.tooltip('hide')
მალავს ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტების მინიშნება რეალურად იქნება დამალული (ანუ hidden.bs.tooltip
მოვლენის დადგომამდე). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.
.tooltip('toggle')
ცვლის ელემენტის ხელსაწყოს მინიშნებას. უბრუნდება აბონენტს მანამ, სანამ ინსტრუმენტის მინიშნება რეალურად გამოჩნდება ან დამალული იქნებაshown.bs.tooltip
( ანუ, სანამ მოხდება hidden.bs.tooltip
მოვლენა). ეს განიხილება ინსტრუმენტების რჩევის „ხელით“ გააქტიურებად.
.tooltip('destroy')
მალავს და ანადგურებს ელემენტის ინსტრუმენტს. ინსტრუმენტების რჩევები, რომლებიც იყენებენ დელეგირებასselector
(რომლებიც შექმნილია ოფციის გამოყენებით ) არ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.
ღონისძიების ტიპი | აღწერა |
---|---|
show.bs.tooltip | ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. |
ნაჩვენებია.ბს.ინსტრუმენტების მინიშნება | ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას). |
დამალვა.ბს.ინსტრუმენტების მინიშნება | ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hide გამოიძახება ინსტანციის მეთოდი. |
დამალული.bs.tooltip | ეს ღონისძიება გააქტიურებულია, როდესაც ინსტრუმენტების მინიშნება დასრულდა მომხმარებლისგან დამალული (დაელოდება CSS გადასვლების დასრულებას). |
ჩასმული.bs.tooltip | ეს ღონისძიება გააქტიურებულია show.bs.tooltip ღონისძიების შემდეგ, როდესაც ინსტრუმენტის მინიშნება შაბლონი დაემატება DOM-ს. |
დაამატეთ შინაარსის მცირე გადაფარვები, როგორიცაა iPad-ზე, ნებისმიერ ელემენტს მეორადი ინფორმაციის განთავსებისთვის.
პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასდროს არ გამოჩნდება.
Popovers მოითხოვს Tooltip მოდულის ჩართვას Bootstrap-ის თქვენს ვერსიაში.
შესრულების მიზეზების გამო, Tooltip და Popover data-apis არის დაშვებული, რაც ნიშნავს, რომ თქვენ თავად უნდა მოაწყოთ ისინი .
გვერდზე ყველა პოპოვერის ინიციალიზაციის ერთ-ერთი გზა იქნება მათი data-toggle
ატრიბუტის მიხედვით შერჩევა:
პოპოვერების გამოყენებისას ელემენტებზე a .btn-group
ან an-ში .input-group
, ან მაგიდასთან დაკავშირებულ ელემენტებზე ( <td>
, <th>
, <tr>
, <thead>
, <tbody>
, <tfoot>
), თქვენ უნდა მიუთითოთ ვარიანტი container: 'body'
(დოკუმენტირებული ქვემოთ) არასასურველი გვერდითი ეფექტების თავიდან ასაცილებლად (როგორიცაა ელემენტის გაფართოება და/ ან კარგავს მომრგვალებულ კუთხეებს პოპოვერის გააქტიურებისას).
disabled
a-ს ან ელემენტზე პოპოვერის დასამატებლად, ჩადეთ .disabled
ელემენტი a-ს შიგნით <div>
და მის ნაცვლად გამოიყენეთ პოპოვერი <div>
.
ზოგჯერ გსურთ დაამატოთ popover ჰიპერბმულზე, რომელიც ახვევს რამდენიმე ხაზს. Popover მოდულის ნაგულისხმევი ქცევა არის მისი ჰორიზონტალურად და ვერტიკალურად ცენტრირება. დაამატეთ white-space: nowrap;
თქვენს წამყვანებს ამის თავიდან ასაცილებლად.
ოთხი ვარიანტია ხელმისაწვდომი: ზემოთ, მარჯვნივ, ქვედა და მარცხნივ გასწორებული.
Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Sed posuere consectetur est at lobortis. ენეან ეუ ლეო ქუამ. Pellentesque ornare sem lacinia quam venenatis vestibulum.
გამოიყენეთ focus
ტრიგერი პოპოვერების გასაუქმებლად მომხმარებლის შემდეგ დაწკაპუნებაზე.
ბრაუზერისა და კროს პლატფორმის სწორი ქცევისთვის, თქვენ უნდა გამოიყენოთ <a>
ტეგი და არა ტეგი<button>
, ასევე უნდა შეიცავდეს role="button"
და tabindex
ატრიბუტებს.
ჩართეთ პოპოვერები JavaScript-ით:
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-
, როგორც data-animation=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ანიმაცია | ლოგიკური | მართალია | გამოიყენეთ CSS fade გადასვლა პოპოვერზე |
კონტეინერი | სიმებიანი | ყალბი | ყალბი | ანიჭებს პოპოვერს კონკრეტულ ელემენტს. მაგალითი |
შინაარსი | სიმებიანი | ფუნქცია | '' | კონტენტის ნაგულისხმევი მნიშვნელობა, თუ თუ ფუნქცია მოცემულია, ის გამოიძახება მისი |
დაგვიანებით | ნომერი | ობიექტი | 0 | პოპოვერის (ms) ჩვენება და დამალვის დაგვიანება - არ ვრცელდება ხელით ტრიგერის ტიპზე თუ ნომერი მოწოდებულია, დაგვიანება გამოიყენება ორივე დამალვა/ჩვენებაზე ობიექტის სტრუქტურა არის: |
html | ლოგიკური | ყალბი | ჩადეთ HTML პოპოვერში. თუ არასწორია, jQuery-ის text მეთოდი გამოყენებული იქნება შინაარსის DOM-ში ჩასართავად. გამოიყენეთ ტექსტი, თუ გაწუხებთ XSS შეტევები. |
განთავსება | სიმებიანი | ფუნქცია | "მართალი" | როგორ განვათავსოთ პოპოვერი - ტოპ | ქვედა | მარცხენა | მარჯვენა | ავტო. როდესაც ფუნქცია გამოიყენება განლაგების დასადგენად, ის გამოიძახება popover DOM კვანძით, როგორც მისი პირველი არგუმენტი და გამომწვევი ელემენტის DOM კვანძი, როგორც მისი მეორე. |
სელექტორი | სიმებიანი | ყალბი | თუ სელექტორი არის მოწოდებული, popover ობიექტები დელეგირებული იქნება მითითებულ სამიზნეებზე. პრაქტიკაში, ეს გამოიყენება დინამიური HTML შინაარსის დასამატებლად popovers. იხილეთ ეს და ინფორმაციული მაგალითი . |
შაბლონი | სიმებიანი | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>' |
ბაზის HTML გამოყენება პოპოვერის შექმნისას. პოპოვერის პოპოვერის
ყველაზე გარე შეფუთვის ელემენტს უნდა ჰქონდეს |
სათაური | სიმებიანი | ფუნქცია | '' | სათაურის ნაგულისხმევი მნიშვნელობა, თუ თუ ფუნქცია მოცემულია, ის გამოიძახება მისი |
გამომწვევი | სიმებიანი | "დაწკაპუნება" | როგორ ხდება პოპოვერის გააქტიურება - დააწკაპუნეთ | hover | ფოკუსირება | სახელმძღვანელო. თქვენ შეგიძლიათ გაიაროთ მრავალი ტრიგერი; გამოყავით ისინი სივრცეში. manual არ შეიძლება გაერთიანდეს სხვა ტრიგერთან. |
ხედვის პორტი | სიმებიანი | ობიექტი | ფუნქცია | { ამომრჩევი: 'სხეული', padding: 0 } | ინარჩუნებს პოპოვერს ამ ელემენტის საზღვრებში. მაგალითი: თუ ფუნქცია მოცემულია, ის გამოიძახება გამომწვევი ელემენტის DOM კვანძის ერთადერთ არგუმენტად. |
ცალკეული პოპოვერების ვარიანტები შეიძლება ალტერნატიულად განისაზღვროს მონაცემთა ატრიბუტების გამოყენებით, როგორც ეს ზემოთ იყო ახსნილი.
$().popover(options)
ახორციელებს პოპოვერების ინიციალიზებას ელემენტების კოლექციისთვის.
.popover('show')
ავლენს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე (ანუ shown.bs.popover
მოვლენის დადგომამდე). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად. პოპოვერები, რომელთა სათაურიც და შინაარსიც ნულოვანი სიგრძისაა, არასდროს არ გამოჩნდება.
.popover('hide')
მალავს ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად დამალვამდე (ანუ hidden.bs.popover
მოვლენის დადგომამდე). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად.
.popover('toggle')
ცვლის ელემენტის პოპოვერს. უბრუნდება აბონენტს პოპოვერის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ shown.bs.popover
ან hidden.bs.popover
მოვლენა მოხდება). ეს განიხილება პოპოვერის "სახელმძღვანელო" გამომწვევად.
.popover('destroy')
მალავს და ანადგურებს ელემენტის პოპოვერს. პოპოვერები, რომლებიც იყენებენ დელეგირებას (რომლებიც იქმნება ოფციის გამოყენებით ) selector
არ შეიძლება ინდივიდუალურად განადგურდეს შთამომავლობის ტრიგერების ელემენტებზე.
ღონისძიების ტიპი | აღწერა |
---|---|
შოუ.ბს.პოპოვერი | ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. |
ნაჩვენებია.ბს.პოპოვერი | ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას). |
დამალვა.ბს.პოპოვერი | ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hide გამოიძახება ინსტანციის მეთოდი. |
დამალული.ბს.პოპოვერი | ეს ღონისძიება გააქტიურებულია, როდესაც პოპოვერი დაასრულებს მომხმარებლისგან დამალვას (დაელოდება CSS გადასვლების დასრულებას). |
ჩასმული.ბს.პოპოვერი | ეს ღონისძიება show.bs.popover გააქტიურებულია ღონისძიების შემდეგ, როდესაც popover-ის შაბლონი დაემატება DOM-ს. |
დაამატეთ გაუქმების ფუნქცია ყველა გაფრთხილების შეტყობინებას ამ მოდულით.
ღილაკის გამოყენებისას .close
, ის უნდა იყოს ღილაკის პირველი შვილი .alert-dismissible
და მარკირებაში ტექსტის შემცველობა არ შეიძლება იყოს მის წინ.
შეცვალეთ ეს და ეს და ისევ სცადეთ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
უბრალოდ დაამატეთ data-dismiss="alert"
თქვენი დახურვის ღილაკს, რათა ავტომატურად მისცეს გაფრთხილების დახურვის ფუნქცია. გაფრთხილების დახურვა შლის მას DOM-დან.
იმისათვის, რომ გაფრთხილებებმა გამოიყენონ ანიმაცია დახურვისას, დარწმუნდით, რომ მათ აქვთ უკვე .fade
გამოყენებული .in
კლასები.
$().alert()
ხდის გაფრთხილებას მოისმენს დაწკაპუნების მოვლენებს შთამომავლ ელემენტებზე, რომლებსაც აქვთ data-dismiss="alert"
ატრიბუტი. (არ არის საჭირო data-api-ის ავტომატური ინიციალიზაციის გამოყენებისას.)
$().alert('close')
ხურავს გაფრთხილებას DOM-დან ამოღებით. თუ ელემენტზე არის .fade
და .in
კლასები, გაფრთხილება გაქრება მის წაშლამდე.
Bootstrap-ის გაფრთხილების მოდული ავლენს რამდენიმე მოვლენას გაფრთხილების ფუნქციონირებაში ჩასართავად.
ღონისძიების ტიპი | აღწერა |
---|---|
დახურვა.ბს.გაფრთხილება | ეს მოვლენა მაშინვე ირთვება, როდესაც close გამოიძახება ეგზემპლარის მეთოდი. |
დახურულია.ბს.გაფრთხილება | ეს ღონისძიება გააქტიურებულია, როდესაც გაფრთხილება დაიხურება (დაელოდება CSS გადასვლების დასრულებას). |
გააკეთე მეტი ღილაკებით. აკონტროლეთ ღილაკის მდგომარეობა ან შექმენით ღილაკების ჯგუფები მეტი კომპონენტისთვის, როგორიცაა ხელსაწყოთა ზოლები.
Firefox აგრძელებს კონტროლის მდგომარეობებს (გათიშვა და შემოწმება) გვერდების ჩატვირთვისას . ამის გამოსავალი არის გამოყენება autocomplete="off"
. იხილეთ Mozilla-ს შეცდომა #654072 .
დამატება data-loading-text="Loading..."
ღილაკზე ჩატვირთვის მდგომარეობის გამოსაყენებლად.
ეს ფუნქცია მოძველებულია v3.3.5-დან და წაიშალა v4-ში.
ამ დემონსტრაციის მიზნით, ჩვენ ვიყენებთ data-loading-text
და $().button('loading')
, მაგრამ ეს არ არის ერთადერთი მდგომარეობა, რომლის გამოყენებაც შეგიძლიათ. ამის შესახებ მეტი იხილეთ ქვემოთ $().button(string)
დოკუმენტაციაში .
დაამატეთ data-toggle="button"
ერთ ღილაკზე გადართვის გასააქტიურებლად.
.active
დაaria-pressed="true"
წინასწარ ჩართული ღილაკებისთვის, თქვენ უნდა დაამატოთ .active
კლასი და aria-pressed="true"
ატრიბუტი button
საკუთარ თავს.
დაამატეთ ჩამრთველ ველს ან რადიო შეყვანებს, რათა ჩართოთ მათი შესაბამისი სტილის გადართვა data-toggle="buttons"
..btn-group
.active
წინასწარ შერჩეული ვარიანტებისთვის, თქვენ თავად უნდა დაამატოთ .active
კლასი შეყვანის განყოფილებაში label
.
თუ მონიშნული ველის ღილაკის მონიშნული მდგომარეობა განახლებულია ღილაკზე click
მოვლენის გასროლის გარეშე (მაგ . შეყვანის თვისების <input type="reset">
დაყენების საშუალებით ), თქვენ თავად მოგიწევთ კლასის checked
გადართვა შესაყვანზე ..active
label
$().button('toggle')
გადართავს ბიძგის მდგომარეობას. ღილაკს აძლევს იმ იერს, რომ ის გააქტიურებულია.
$().button('reset')
აღადგენს ღილაკის მდგომარეობას - ცვლის ტექსტს ორიგინალ ტექსტზე. ეს მეთოდი ასინქრონულია და ბრუნდება გადატვირთვის რეალურად დასრულებამდე.
$().button(string)
ცვლის ტექსტს ნებისმიერი მონაცემებით განსაზღვრულ ტექსტურ მდგომარეობაში.
მოქნილი დანამატი, რომელიც იყენებს რამდენიმე კლასს ადვილად გადართვის ქცევისთვის.
კოლაფსი მოითხოვს გადასვლების მოდულის ჩართვას Bootstrap-ის თქვენს ვერსიაში.
დააწკაპუნეთ ქვემოთ მოცემულ ღილაკებზე, რათა ნახოთ და დამალოთ სხვა ელემენტი კლასის ცვლილებების მეშვეობით:
.collapse
მალავს შინაარსს.collapsing
გამოიყენება გადასვლების დროს.collapse.in
აჩვენებს შინაარსსშეგიძლიათ გამოიყენოთ ბმული href
ატრიბუტით, ან ღილაკი data-target
ატრიბუტით. ორივე შემთხვევაში data-toggle="collapse"
აუცილებელია.
გააფართოვეთ ნაგულისხმევი კოლაფსის ქცევა პანელის კომპონენტთან აკორდეონის შესაქმნელად.
ასევე შესაძლებელია .panel-body
s-ის შეცვლა .list-group
s-ით.
დარწმუნდით, რომ დაამატეთ aria-expanded
საკონტროლო ელემენტს. ეს ატრიბუტი ცალსახად განსაზღვრავს დასაკეცი ელემენტის ამჟამინდელ მდგომარეობას ეკრანის წამკითხველებისთვის და მსგავსი დამხმარე ტექნოლოგიებისთვის. თუ დასაკეცი ელემენტი ნაგულისხმევად დახურულია, მას უნდა ჰქონდეს მნიშვნელობა aria-expanded="false"
. თუ თქვენ დააყენეთ დასაკეცი ელემენტი ნაგულისხმევად ღიად in
კლასის გამოყენებით, დააყენეთaria-expanded="true"
სანაცვლოდ დააყენეთ კონტროლზე. დანამატი ავტომატურად გადართავს ამ ატრიბუტს იმის მიხედვით, არის თუ არა დასაკეცი ელემენტი გახსნილი ან დახურული.
გარდა ამისა, თუ თქვენი საკონტროლო ელემენტი მიზნად ისახავს ერთ დასაკეც ელემენტს - ანუ data-target
ატრიბუტი მიუთითებს id
ამომრჩეველზე - შეგიძლიათ დაამატოთ დამატებითი aria-controls
ატრიბუტი საკონტროლო ელემენტს, რომელიც შეიცავს id
დასაკეც ელემენტს. თანამედროვე ეკრანის წამკითხველები და მსგავსი დამხმარე ტექნოლოგიები იყენებენ ამ ატრიბუტს, რათა მომხმარებლებს მიაწოდონ დამატებითი მალსახმობები, რათა ნავიგაციონ უშუალოდ თვით დასაკეც ელემენტზე.
კოლაფსის დანამატი იყენებს რამდენიმე კლასს მძიმე აწევისთვის:
.collapse
მალავს შინაარსს.collapse.in
აჩვენებს შინაარსს.collapsing
ემატება გადასვლის დაწყებისას და ამოღებულია როცა დასრულდებაამ კლასების ნახვა შეგიძლიათ component-animations.less
.
უბრალოდ დაამატეთ data-toggle="collapse"
და a data-target
ელემენტს, რათა ავტომატურად მიენიჭოს კონტროლი დასაკეც ელემენტს. ატრიბუტი იღებს CSS ამომრჩეველს data-target
კოლაფსის გამოსაყენებლად. დარწმუნდით, რომ დაამატეთ კლასი collapse
დასაკეც ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი in
.
აკორდეონის მსგავსი ჯგუფის მართვის დასამატებლად დასაკეცი კონტროლში, დაამატეთ მონაცემთა ატრიბუტი data-parent="#selector"
. იხილეთ დემო ვერსია, რომ ნახოთ ეს მოქმედებაში.
ხელით ჩართეთ:
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-
, როგორც data-parent=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
მშობელი | სელექტორი | ყალბი | თუ სელექტორი არის მოწოდებული, მაშინ ყველა დასაკეცი ელემენტი მითითებული მშობლის ქვეშ დაიხურება, როდესაც ეს დასაკეცი ელემენტი გამოჩნდება. (ტრადიციული აკორდეონის ქცევის მსგავსად - ეს დამოკიდებულია panel კლასზე) |
გადართვა | ლოგიკური | მართალია | რთავს დასაკეც ელემენტს გამოძახებისას |
.collapse(options)
ააქტიურებს თქვენს კონტენტს, როგორც დასაკეცი ელემენტს. იღებს არასავალდებულო ვარიანტებს object
.
.collapse('toggle')
გადართავს დასაკეც ელემენტს ჩვენებაზე ან დამალვაზე. უბრუნდება აბონენტს მანამ, სანამ დასაკეცი ელემენტი რეალურად იქნება ნაჩვენები ან დამალული (ანუ, სანამ shown.bs.collapse
ან hidden.bs.collapse
მოვლენა მოხდება).
.collapse('show')
აჩვენებს დასაკეც ელემენტს. უბრუნდება აბონენტს, სანამ დასაკეცი ელემენტი რეალურად გამოჩნდება (ანუ shown.bs.collapse
მოვლენის დადგომამდე).
.collapse('hide')
მალავს დასაკეც ელემენტს. უბრუნდება აბონენტს, სანამ დასაკეცი ელემენტი რეალურად დამალული იქნება (ანუ hidden.bs.collapse
მოვლენის დადგომამდე).
Bootstrap-ის კოლაფსის კლასი ავლენს რამდენიმე მოვლენას კოლაფსის ფუნქციონირებაში ჩასართავად.
ღონისძიების ტიპი | აღწერა |
---|---|
ჩვენება.ბს.ჩამოქცევა | ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. |
ნაჩვენებია.ბს.ჩამოშლა | ეს ღონისძიება გააქტიურებულია, როდესაც კოლაფსის ელემენტი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას). |
დამალვა.ბს.ჩამოქცევა | ეს ღონისძიება ჩართულია მაშინვე, როდესაც hide მეთოდი გამოიძახება. |
დამალული.ბს.ჩამოქცევა | ეს ღონისძიება გააქტიურებულია, როდესაც მომხმარებლისგან დამალულია კოლაფსის ელემენტი (დაელოდება CSS გადასვლების დასრულებას). |
სლაიდშოუს კომპონენტი ელემენტებში ველოსიპედით გადასაადგილებლად, როგორიცაა კარუსელი. ჩადგმული კარუსელები მხარდაჭერილი არ არის.
კარუსელის კომპონენტი, როგორც წესი, არ შეესაბამება ხელმისაწვდომობის სტანდარტებს. თუ თქვენ გჭირდებათ შესაბამისობა, გთხოვთ განიხილოთ თქვენი შინაარსის წარმოდგენის სხვა ვარიანტები.
Bootstrap ექსკლუზიურად იყენებს CSS3-ს თავისი ანიმაციებისთვის, მაგრამ Internet Explorer 8 და 9 არ უჭერს მხარს აუცილებელ CSS თვისებებს. ამრიგად, ამ ბრაუზერების გამოყენებისას არ არსებობს სლაიდების გადასვლის ანიმაციები. ჩვენ განზრახ გადავწყვიტეთ არ ჩავრთოთ jQuery-ზე დაფუძნებული რეზერვები გადასვლებისთვის.
.active
კლასი უნდა დაემატოს ერთ-ერთ სლაიდს . წინააღმდეგ შემთხვევაში, კარუსელი არ გამოჩნდება.
და .glyphicon .glyphicon-chevron-left
კლასები .glyphicon .glyphicon-chevron-right
სულაც არ არის საჭირო კონტროლისთვის. Bootstrap გთავაზობთ უნიკოდის .icon-prev
უბრალო .icon-next
ალტერნატივებს.
დაამატეთ სუბტიტრები თქვენს სლაიდებს მარტივად .carousel-caption
ნებისმიერი ელემენტის ფარგლებში .item
. მოათავსეთ თითქმის ნებისმიერი არასავალდებულო HTML იქ და ის ავტომატურად გასწორდება და ფორმატირდება.
კარუსელი მოითხოვს id
გარე კონტეინერზე (the .carousel
) გამოყენებას კარუსელის კონტროლის სწორად ფუნქციონირებისთვის. რამდენიმე კარუსელის დამატებისას ან კარუსელის შეცვლისას id
აუცილებლად განაახლეთ შესაბამისი კონტროლი.
გამოიყენეთ მონაცემთა ატრიბუტები კარუსელის პოზიციის მარტივად გასაკონტროლებლად. data-slide
იღებს საკვანძო სიტყვებს prev
ან next
, რომელიც ცვლის სლაიდის პოზიციას მის ამჟამინდელ პოზიციასთან შედარებით. ალტერნატიულად, გამოიყენეთ data-slide-to
ნედლი სლაიდის ინდექსის კარუსელში გადასაცემად data-slide-to="2"
, რომელიც ცვლის სლაიდის პოზიციას კონკრეტულ ინდექსზე დაწყებული 0
.
ატრიბუტი გამოიყენება კარუსელის აღსანიშნავად data-ride="carousel"
, როგორც ანიმაციური გვერდის ჩატვირთვისას. მისი გამოყენება შეუძლებელია იმავე კარუსელის (ზედმეტად და არასაჭირო) აშკარა JavaScript ინიციალიზაციასთან ერთად.
კარუსელის ხელით გამოძახება:
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-
, როგორც data-interval=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ინტერვალი | ნომერი | 5000 | დრო, რომელიც დაგვიანებულია ნივთის ავტომატურ ველოსიპედს შორის. თუ არასწორია, კარუსელი ავტომატურად არ დატრიალდება. |
პაუზა | სიმებიანი | null | "ჰოვერ" | თუ დაყენებულია "hover" , აჩერებს კარუსელის mouseenter ველოსიპედს და განაახლებს კარუსელის ველოსიპედის ჩართვას mouseleave . თუ დაყენებულია null -ზე, კარუსელზე გადახვევა არ შეაჩერებს მას. |
გადახვევა | ლოგიკური | მართალია | უნდა მოძრაობდეს თუ არა კარუსელი განუწყვეტლივ თუ რთული გაჩერებები. |
კლავიატურა | ლოგიკური | მართალია | უნდა რეაგირებდეს თუ არა კარუსელი კლავიატურის მოვლენებზე. |
.carousel(options)
ახორციელებს კარუსელის ინიციალიზაციას არჩევითი ოფციებით object
და იწყებს ველოსიპედით სვლას ნივთებზე.
.carousel('cycle')
მოძრაობს კარუსელის ელემენტებში მარცხნიდან მარჯვნივ.
.carousel('pause')
აჩერებს კარუსელს ნივთების ველოსიპედით გადაადგილებას.
.carousel(number)
აბრუნებს კარუსელს კონკრეტულ ჩარჩოზე (0-ზე დაფუძნებული, მასივის მსგავსი).
.carousel('prev')
ციკლები წინა პუნქტამდე.
.carousel('next')
ციკლები შემდეგ პუნქტზე.
Bootstrap-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად.
ორივე მოვლენას აქვს შემდეგი დამატებითი თვისებები:
direction
: მიმართულება, რომლითაც სრიალებს კარუსელი (ან "left"
ან "right"
).relatedTarget
: DOM ელემენტი, რომელიც სრიალდება ადგილზე, როგორც აქტიური ელემენტი.კარუსელის ყველა ღონისძიება ისროლება თავად კარუსელზე (ანუ ზე <div class="carousel">
).
ღონისძიების ტიპი | აღწერა |
---|---|
სლაიდი.ბს.კარუსელი | ეს მოვლენა მაშინვე ირთვება, როდესაც slide ინსტანციის მეთოდი გამოიძახება. |
სრიალი.ბს.კარუსელი | ეს ღონისძიება გააქტიურებულია, როდესაც კარუსელი დაასრულებს სლაიდზე გადასვლას. |
აფიქსის დანამატი position: fixed;
ჩართულია და გამორთულია, რაც ასახავს ეფექტს position: sticky;
. ქვენავიგაცია მარჯვნივ არის affix მოდულის ცოცხალი დემო ვერსია.
გამოიყენეთ აფიქსის დანამატი მონაცემთა ატრიბუტების საშუალებით ან ხელით თქვენი JavaScript-ით.ორივე შემთხვევაში, თქვენ უნდა მიაწოდოთ CSS თქვენი დამაგრებული შინაარსის პოზიციონირებისა და სიგანისთვის.
შენიშვნა: არ გამოიყენოთ აფიქსის დანამატი ელემენტზე, რომელიც შეიცავს შედარებით განლაგებულ ელემენტს, როგორიცაა გამოყვანილი ან აწეული სვეტი, Safari-ის რენდერის ხარვეზის გამო .
აფიქსის დანამატი გადართავს სამ კლასს შორის, თითოეული წარმოადგენს კონკრეტულ მდგომარეობას: .affix
, .affix-top
და .affix-bottom
. თქვენ უნდა მიაწოდოთ სტილები, გარდა position: fixed;
on-ისა .affix
, ამ კლასებისთვის (ამ დანამატისგან დამოუკიდებლად), რათა გაუმკლავდეთ რეალურ პოზიციებს.
აი, როგორ მუშაობს აფიქსის მოდული:
.affix-top
იმის მითითებას, რომ ელემენტი ყველაზე მაღალ პოზიციაზეა. ამ ეტაპზე არ არის საჭირო CSS პოზიციონირება..affix
ჩანაცვლება .affix-top
და კომპლექტი position: fixed;
(მოწოდებულია Bootstrap-ის CSS-ით)..affix
შეიცვალოს .affix-bottom
. ვინაიდან ოფსეტები არჩევითია, ერთის დაყენება მოითხოვს, რომ დააყენოთ შესაბამისი CSS. ამ შემთხვევაში, საჭიროების შემთხვევაში დაამატეთ position: absolute;
. დანამატი იყენებს მონაცემთა ატრიბუტს ან JavaScript ოფციას, რათა დადგინდეს, სად უნდა განთავსდეს ელემენტი იქიდან.მიჰყევით ზემოთ მოცემულ ნაბიჯებს, რომ დააყენოთ თქვენი CSS ქვემოთ მოცემული გამოყენების რომელიმე ვარიანტისთვის.
იმისათვის, რომ მარტივად დაამატოთ აფიქსის ქცევა ნებისმიერ ელემენტზე, უბრალოდ დაამატეთ ელემენტი, data-spy="affix"
რომლის დაზვერვა გსურთ. გამოიყენეთ ოფსეტები, რათა განსაზღვროთ, როდის უნდა გადართოთ ელემენტის ჩამაგრება.
დარეკეთ აფიქსის დანამატს JavaScript-ის საშუალებით:
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-
, როგორც data-offset-top="200"
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
ოფსეტური | ნომერი | ფუნქცია | ობიექტი | 10 | გადახვევის პოზიციის გაანგარიშებისას ეკრანიდან გადასატანი პიქსელები. თუ მოწოდებულია ერთი ნომერი, ოფსეტი გამოყენებული იქნება როგორც ზედა, ასევე ქვედა მიმართულებით. უნიკალური, ქვედა და ზედა ოფსეტის უზრუნველსაყოფად, უბრალოდ მიაწოდეთ ობიექტი offset: { top: 10 } ან offset: { top: 10, bottom: 5 } . გამოიყენეთ ფუნქცია, როდესაც საჭიროა დინამიურად გამოთვალოთ ოფსეტური. |
სამიზნე | სელექტორი | კვანძი | jQuery ელემენტი | window ობიექტი _ |
განსაზღვრავს აფიქსის სამიზნე ელემენტს. |
.affix(options)
ააქტიურებს თქვენს შინაარსს, როგორც დამაგრებულ კონტენტს. იღებს არასავალდებულო ვარიანტებს object
.
.affix('checkPosition')
ხელახლა ითვლის აფიქსის მდგომარეობას შესაბამისი ელემენტების ზომების, პოზიციისა და გადახვევის პოზიციის მიხედვით. , .affix
, .affix-top
და .affix-bottom
კლასები ემატება ან ამოღებულია დამაგრებულ კონტენტზე ახალი მდგომარეობის მიხედვით. ამ მეთოდის გამოძახებაა საჭირო, როდესაც შეიცვლება დამაგრებული შინაარსის ან სამიზნე ელემენტის ზომები, დამაგრებული შინაარსის სწორი პოზიციონირების უზრუნველსაყოფად.
Bootstrap-ის აფიქსის დანამატი ავლენს რამდენიმე მოვლენას აფიქსის ფუნქციონირებაში ჩასართავად.
ღონისძიების ტიპი | აღწერა |
---|---|
დამაგრება.ბს.აფიქსი | ეს მოვლენა ირთვება ელემენტის დამაგრებამდე. |
დამაგრებული.ბს.აფიქსი | ეს ღონისძიება გააქტიურებულია ელემენტის დამაგრების შემდეგ. |
affix-top.bs.affix | ეს მოვლენა ირთვება უშუალოდ ელემენტის თავზე დამაგრებამდე. |
დამაგრებული-ზედა.ბს.აფიქსი | ეს ღონისძიება გააქტიურებულია მას შემდეგ, რაც ელემენტი დამაგრებულია ზემოთ. |
აფიქს-ქვედა.ბს.აფიქსი | ეს მოვლენა ირთვება ელემენტის ბოლოში დამაგრებამდე. |
დამაგრებული-ქვედა.ბს.აფიქსი | ეს ღონისძიება გააქტიურებულია ელემენტის ბოლოში დამაგრების შემდეგ. |