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

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

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

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

ცოცხალი დემო

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

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

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

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

Პარამეტრები

მარკირება

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > გაშვება Modal </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <a class = "close" data-dismiss = "modal" > × </a>  
    <h3> მოდალური სათაური </h3>
  </div>
  <div class = "მოდალური სხეული" > 
    <p> ერთი მშვენიერი სხეული… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > დახურვა </a>  
    <a href = "#" class = "btn btn-primary" > ცვლილებების შენახვა </a>  
  </div>
</div>

მეთოდები

.modal(ოფციები)

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

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

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

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

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

.modal('show')

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

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

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

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

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

Ივენთი

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

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

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

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

მაგალითები

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

• რეგულარული ბმული
• Ძირს დაგდება
  • Action
  • Another action
  • Something else here
  • Separated link
• ჩამოსაშლელი 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ჩამოსაშლელი სია 3
  • Action
  • Another action
  • Something else here
  • Separated link

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

გამოიძახეთ ჩამოსაშლელები ჯავასკრიპტის საშუალებით:

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

მარკირება

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

<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>

მეთოდები

$().Dropdown()

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

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

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

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

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

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

$ ( '#navbar' ). scrollspy ()

მარკირება

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

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

Პარამეტრები

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

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

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

• მთავარი
• პროფილი
• Ძირს დაგდება
  • @fat
  • @mdo

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

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

$ ( '#myTab' ). ჩანართი ( "ჩვენება" )

მარკირება

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

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

მეთოდები

$().tab

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

<ul class = "nav nav-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 = "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>
 
<სკრიპტი>
  $ ( ფუნქცია () {  
    $ ( '.tabs a:last' ). ჩანართი ( "ჩვენება" )
  })
</script>

Ივენთი

$ ( 'a[data-toggle="tab"]' ). on ( 'shown' , ფუნქცია ( e ) {   
  ე . სამიზნე // გააქტიურებული ჩანართი
  ე . relatedTarget // წინა ჩანართი
})

Tooltips-ის შესახებ

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

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

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

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

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

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

Პარამეტრები

მარკირება

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

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

მეთოდები

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

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

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

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

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

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

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

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

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

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

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

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

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

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

მაგალითი hover popover

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

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

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

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

Პარამეტრები

მარკირება

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

მეთოდები

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

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

.popover ("შოუ")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

მარკირება

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

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

მეთოდები

$().alert()

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

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

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

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

Ივენთი

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

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

შესახებ

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

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

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

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

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

$ ( '.tabs' ). ღილაკი ()

მარკირება

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

<!-- დაამატეთ data-toggle="button" ერთ ღილაკზე გადართვის გასააქტიურებლად -->
<button class = "btn" data-toggle = "button" > ერთჯერადი გადართვა </button>  
 
<!-- დაამატეთ data-toggle="buttons-checkbox" ჩამრთველის სტილის გადართვისთვის btn-ჯგუფზე -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > მარცხენა </button> 
  <button class = "btn" > შუა </button> 
  <button class = "btn" > მარჯვენა </button> 
</div>
 
<!-- დაამატეთ data-toggle="buttons-radio" რადიო სტილის გადართვისთვის btn-ჯგუფზე -->
<div class = "btn-group" data-toggle = "buttons-რადიო" >  
  <button class = "btn" > მარცხენა </button> 
  <button class = "btn" > შუა </button> 
  <button class = "btn" > მარჯვენა </button> 
</div>

მეთოდები

$().button('toggle')

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

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

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

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

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

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

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

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

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

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

შესახებ

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

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

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

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

ჩართვა 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>  

მეთოდები

.collapse(ოფციები)

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

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

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

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

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

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

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

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

Ივენთი

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

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

შესახებ

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

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

უყურეთ სლაიდშოუს ქვემოთ.

პირველი მინიატურების ეტიკეტი

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

მეორე მინიატურების ეტიკეტი

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

მესამე მინიატურული ეტიკეტი

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultrices vehicula ut id elit.

‹ ›

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

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

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

Პარამეტრები

მარკირება

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

<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-ის კარუსელის კლასი ავლენს ორ მოვლენას კარუსელის ფუნქციონალებში ჩასართავად.

შესახებ

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

მაგალითი

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

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

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

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

Პარამეტრები

მარკირება

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

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

მეთოდები

.typeahead (ოფციები)

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