ღილაკები

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

მაგალითები

Bootstrap მოიცავს რამდენიმე წინასწარ განსაზღვრულ ღილაკების სტილს, რომელთაგან თითოეული ემსახურება თავის სემანტიკურ მიზანს, მეტი კონტროლისთვის ჩადებული რამდენიმე დამატებით.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

ღილაკების ტეგები

.btnკლასები შექმნილია ელემენტებთან <button>გამოსაყენებლად. თუმცა, თქვენ ასევე შეგიძლიათ გამოიყენოთ ეს კლასები <a>ან <input>ელემენტებზე (თუმცა ზოგიერთმა ბრაუზერმა შეიძლება გამოიყენოს ოდნავ განსხვავებული რენდერი).

როდესაც იყენებთ ღილაკების კლასებს <a>ელემენტებზე, რომლებიც გამოიყენება გვერდის ფუნქციონირების გასააქტიურებლად (როგორიცაა კონტენტის კოლაფსი), ნაცვლად ახალი გვერდების ან სექციების ბმული მიმდინარე გვერდზე, ამ ბმულებს უნდა მიეცეს role="button"მათი დანიშნულების სათანადოდ გადმოცემა დამხმარე ტექნოლოგიებზე, როგორიცაა ეკრანის წამკითხველები.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

კონტურის ღილაკები

გჭირდებათ ღილაკი, მაგრამ არა მათ მიერ მოტანილი ფონის ძლიერი ფერები? შეცვალეთ ნაგულისხმევი მოდიფიკატორის კლასები იმით .btn-outline-*, რომ წაშალოთ ფონის ყველა სურათი და ფერი ნებისმიერ ღილაკზე.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

ზომები

გსურთ უფრო დიდი თუ პატარა ღილაკები? დაამატეთ .btn-lgან .btn-smდამატებითი ზომებისთვის.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

შექმენით ბლოკის დონის ღილაკები — ისინი, რომლებიც მოიცავს მშობლის მთელ სიგანეს — დამატებით .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

აქტიური მდგომარეობა

ღილაკები გამოჩნდება დაჭერით (უფრო მუქი ფონით, მუქი საზღვრით და ჩასმული ჩრდილით) გააქტიურებისას. არ არის საჭირო <button>s-ში კლასის დამატება, რადგან ისინი იყენებენ ფსევდო-კლასს . თუმცა, თქვენ კვლავ შეგიძლიათ აიძულოთ იგივე აქტიური გარეგნობა .active(და შეიტანოთ aria-pressed="true"ატრიბუტი), თუ დაგჭირდებათ მდგომარეობის პროგრამულად გამეორება.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

ინვალიდი მდგომარეობა

გახადეთ ღილაკები არააქტიურად disabled, ნებისმიერი <button>ელემენტისთვის ლოგიკური ატრიბუტის დამატებით.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

ელემენტის გამოყენებით გამორთული ღილაკები <a>ცოტა განსხვავებულად იქცევიან:

• <a>s არ აქვს disabledატრიბუტის მხარდაჭერა, ამიტომ თქვენ უნდა დაამატოთ .disabledკლასი, რომ ვიზუალურად გამორთული იყოს.
• მომავლისთვის შესაფერისი რამდენიმე სტილი ჩართულია pointer-eventsწამყვან ღილაკებზე ყველაფრის გასათიშად. ბრაუზერებში, რომლებიც მხარს უჭერენ ამ თვისებას, თქვენ საერთოდ ვერ ნახავთ გათიშულ კურსორს.
• გამორთული ღილაკები უნდა შეიცავდეს aria-disabled="true"ატრიბუტს, რომელიც მიუთითებს ელემენტის მდგომარეობაზე დამხმარე ტექნოლოგიებზე.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ღილაკის მოდული

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

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

დაამატეთ data-toggle="button"ღილაკის მდგომარეობის გადართვაზე active. თუ ღილაკზე წინასწარ ჩართავთ, ხელით უნდა დაამატოთ .activeკლასი და aria-pressed="true" .<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

მოსანიშნი ველი და რადიო ღილაკები

Bootstrap-ის .buttonსტილები შეიძლება გამოყენებულ იქნას სხვა ელემენტებზე, როგორიცაა <label>s, რათა უზრუნველყოს ჩამრთველი ან რადიო სტილის ღილაკის გადართვა. დაამატეთ data-toggle="buttons"ამ .btn-groupშეცვლილი ღილაკების შემცველ ღილაკებს, რათა ჩართოთ მათი გადართვის ქცევა JavaScript-ის საშუალებით და დაამატეთ s-ის .btn-group-toggleსტილში <input>თქვენს ღილაკებში. გაითვალისწინეთ, რომ თქვენ შეგიძლიათ შექმნათ ერთი შეყვანის ღილაკები ან მათი ჯგუფები.

ამ ღილაკების შემოწმებული მდგომარეობა მხოლოდ ღილაკზე ღონისძიების საშუალებით განახლდებაclick . თუ თქვენ იყენებთ სხვა მეთოდს შეყვანის განახლებისთვის - მაგ., <input type="reset">შეყვანის თვისების ხელით ან ხელით გამოყენებით checked- თქვენ უნდა გადართოთ .activeხელით <label>.

გაითვალისწინეთ, რომ წინასწარ შემოწმებული ღილაკები მოითხოვს, რომ ხელით დაამატოთ .activeკლასი შეყვანის <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

მეთოდები