Bootstrap, Twitter-დან ქართულად

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

ჩამოტვირთვა

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

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

Პარამეტრები

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

მარკირება

თქვენ შეგიძლიათ მარტივად გაააქტიუროთ მოდალები თქვენს გვერდზე, ჯავასკრიპტის ერთი ხაზის დაწერის გარეშე. უბრალოდ მიეცით ელემენტს data-controls-modalატრიბუტი, რომელიც შეესაბამება მოდალური ელემენტის id-ს და დაწკაპუნებისას ის გაუშვებს თქვენს მოდალს. მოდალური ვარიანტების დასამატებლად, უბრალოდ ჩართეთ ისინი, როგორც მონაცემთა ატრიბუტები.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > გაშვება Modal </a>

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

მეთოდები

.modal(ოფციები)

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

$ ( '#ჩემი-მოდალური' ). მოდალური ({
  closeOnEscape : მართალია 
})

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

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

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

.modal('show')

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

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

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

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

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

.მოდალური (მართალია)

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

$ ( '#ჩემი-მოდალური' ). მოდალური ( ჭეშმარიტი )

შენიშვნა ალტერნატიულად, ამის მოძიება შესაძლებელია $().data('modal').

Ივენთი

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

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

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

დემო

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

ჩამოტვირთვა

გამოყენებით boostrap-dropdown.js

$ ( '#ზედა ზოლი' ). ჩამოსაშლელი ()

მარკირება

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

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > მთავარი </a></li>  
  <li class = "Dropdown" data-dropdown = "Dropdown" >   
    <a href = "#" class = "dropdown-toggle" > ჩამოსაშლელი </a>  
    <ul class = "ჩამოშლილი მენიუ" > 
      <li><a href = "#" > მეორადი ბმული </a></li> 
      <li><a href = "#" > რაღაც სხვა აქ </a></li> 
      <li class = "გამყოფი" </li> 
      <li><a href = "#" > სხვა ბმული </a></li> 
    </ul>
  </li>
</ul>

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

მეთოდები

$().Dropdown()

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

დემო

ეს მოდული განკუთვნილია scrollspy (ავტომატური განახლების ნავი) ურთიერთქმედების დასამატებლად ჩატვირთვის ზედა ზოლში.

ჩამოტვირთვა

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

$ ( '#ზედა ზოლი' ). ჩამოსაშლელი ()

მარკირება

იმისათვის, რომ მარტივად დაამატოთ scrollspy ქცევა თქვენს ნავიგს, უბრალოდ დაამატეთ data-scrollspyატრიბუტი .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>

მეთოდები

$().scrollspy()

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

$ ( 'body > .topbar' ). scrollSpy ()

ყურადღება მიაქციეთ Topbar-ის წამყვან ტეგებს უნდა ჰქონდეს ამოსახსნელი ID სამიზნეები. მაგალითად, <a href="#home">home</a>უნდა შეესაბამებოდეს რაღაცას დომში, როგორიცაა <div id="home"></div>.

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

Scrollspy ინახავს ნავიგაციის ღილაკებს და განყოფილების კოორდინატებს შესრულებისთვის. თუ გჭირდებათ ამ ქეშის განახლება (სავარაუდოდ, თუ თქვენ გაქვთ დინამიური შინაარსი), უბრალოდ დარეკეთ ამ განახლების მეთოდზე. თუ თქვენ იყენებდით მონაცემთა ატრიბუტს თქვენი scrollspy-ის დასადგენად, უბრალოდ დარეკეთ refresh სხეულზე.

$ ( "სხეული" ). scrollspy ( "განახლება" )

დემო

შეამოწმეთ ზედა ზოლის ნავიგაცია ამ გვერდზე.

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

ჩამოტვირთვა

boostrap-tabs.js-ის გამოყენებით

$ ( '.tabs' ). ჩანართები ()

მარკირება

თქვენ შეგიძლიათ გაააქტიუროთ ჩანართების ან აბების ნავიგაცია ჯავასკრიპტის დაწერის გარეშე, უბრალოდ მინიჭებით data-tabsან data-pillsატრიბუტით.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>

მეთოდები

$().tabs ან $().pills

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

<ul class = "tabs" > 
  <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 = "აბი-შიგთავსი" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "პროფილი" > ... </div> 
  <div id = "შეტყობინებები" > ... </div> 
  <div id = "პარამეტრები" > ... </div> 
</ul>
 
<სკრიპტი>
  $ ( ფუნქცია () {  
    $ ( '.tabs' ). ჩანართები ()
  })
</script>

დემო

ნედლი ჯინსი, თქვენ ალბათ არ გსმენიათ მათ შესახებ ჯინსის შორტები 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.

Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.

Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.

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

ჩამოტვირთვა

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

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

Პარამეტრები

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

მეთოდები

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

ანიჭებს twipsy დამმუშავებელს ელემენტების კოლექციას.

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

ავლენს ელემენტებს twipsy.

$ ( '#element' ). twipsy ( "ჩვენება" )

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

მალავს ელემენტებს twipsy.

$ ( '#element' ). twipsy ( "დამალვა" )

.twipsy (მართალია)

აბრუნებს ელემენტების twipsy კლასის მაგალითს.

$ ( '#element' ). twipsy ( ჭეშმარიტი )

შენიშვნა ალტერნატიულად, ამის მოძიება შესაძლებელია $().data('twipsy').

დემო

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

პოპოვერის მოდული უზრუნველყოფს მარტივ ინტერფეისს თქვენს აპლიკაციაში პოპოვერების დასამატებლად. ის აფართოებს boostrap-twipsy.js მოდულს, ასე რომ, დარწმუნდით, რომ აითვისეთ ეს ფაილი, როდესაც თქვენს პროექტში პოპოვერებს ჩართავთ!

ჩამოტვირთვა

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

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

Პარამეტრები

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

მეთოდები

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

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

.popover ("შოუ")

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

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

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

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

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

დემო

გადაიტანეთ პოპოვერისთვის

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

ჩამოტვირთვა

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

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

მარკირება

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

მეთოდები

$().alert()

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

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

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

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

დემო

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

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

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

Bootstrap JS

Javascript Bootstrap-ისთვის

პროექტის სახელი

ScrollSpy bootstrap-scrollspy.js

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

მარკირება

მეთოდები

$().scrollspy()

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

დემო

ჩანართი bootstrap-tabs.js

boostrap-tabs.js-ის გამოყენებით

მარკირება

მეთოდები

$().tabs ან $().pills

დემო

Twipsy bootstrap-twipsy.js

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

Პარამეტრები

მეთოდები

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

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

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

.twipsy (მართალია)

დემო

Popovers bootstrap-popover.js

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

Პარამეტრები

მეთოდები

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

.popover ("შოუ")

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

დემო

გაფრთხილებები bootstrap-alerts.js

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

მარკირება

მეთოდები

$().alert()

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

დემო

Bootstrap JS

Modals bootstrap-modal.js

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

Პარამეტრები

მარკირება

მეთოდები

.modal(ოფციები)

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

.modal('show')

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

.მოდალური (მართალია)

Ივენთი

დემო

მოდალური სათაური

ჩამოსაშლელი bootstrap-dropdown.js

გამოყენებით boostrap-dropdown.js

მარკირება

მეთოდები

$().Dropdown()

დემო

პროექტის სახელი

ScrollSpy bootstrap-scrollspy.js

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

მარკირება

მეთოდები

$().scrollspy()

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

დემო

ჩანართი bootstrap-tabs.js

boostrap-tabs.js-ის გამოყენებით

მარკირება

მეთოდები

$().tabs ან $().pills

დემო

Twipsy bootstrap-twipsy.js

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

Პარამეტრები

მეთოდები

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

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

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

.twipsy (მართალია)

დემო

Popovers bootstrap-popover.js

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

Პარამეტრები

მეთოდები

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

.popover ("შოუ")

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

დემო

გაფრთხილებები bootstrap-alerts.js

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

მარკირება

მეთოდები

$().alert()

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

დემო