ღილაკები

გამოიყენეთ 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>

გამორთეთ ტექსტის შეფუთვა

თუ არ გსურთ ღილაკის ტექსტის შეფუთვა, შეგიძლიათ დაამატოთ .text-nowrapკლასი ღილაკზე. Sass-ში შეგიძლიათ დააყენოთ $btn-white-space: nowrapტექსტის შეფუთვის გამორთვა თითოეული ღილაკისთვის.

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

.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წამყვან ღილაკებზე ყველაფრის გასათიშად. ბრაუზერებში, რომლებიც მხარს უჭერენ ამ თვისებას, თქვენ საერთოდ ვერ ნახავთ გათიშულ კურსორს.
• გამორთული ღილაკების გამოყენება <a>უნდა შეიცავდეს aria-disabled="true"ატრიბუტს, რომელიც მიუთითებს ელემენტის მდგომარეობაზე დამხმარე ტექნოლოგიებზე.
• გამორთული ღილაკები <a> არ უნდა შეიცავდეს hrefატრიბუტს.

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

ბმული ფუნქციონალურობის გაფრთხილება

იმ შემთხვევების დასაფარად, როდესაც თქვენ უნდა შეინახოთ hrefატრიბუტი გათიშულ ბმულზე, .disabledკლასი იყენებს s- pointer-events: noneის ბმულის ფუნქციონირების გამორთვას <a>. გაითვალისწინეთ, რომ ეს CSS თვისება ჯერ არ არის სტანდარტიზებული HTML-ისთვის, მაგრამ ყველა თანამედროვე ბრაუზერი მხარს უჭერს მას. გარდა ამისა, ბრაუზერებშიც კი, რომლებიც მხარს უჭერენ pointer-events: none, კლავიატურის ნავიგაცია უცვლელი რჩება, რაც იმას ნიშნავს, რომ მხედველობითი კლავიატურის მომხმარებლები და დამხმარე ტექნოლოგიების მომხმარებლები კვლავ შეძლებენ ამ ბმულების გააქტიურებას. ასე რომ, რომ იყოთ უსაფრთხო, გარდა ამისა aria-disabled="true", შეიტანეთ tabindex="-1"ატრიბუტი ამ ბმულებზე, რათა თავიდან აიცილოთ მათ კლავიატურაზე ფოკუსირება და გამოიყენეთ მორგებული JavaScript, რომ საერთოდ გამორთოთ მათი ფუნქციონირება.

<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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

მეთოდები