Bootstrap -aftrekkies

Basiese aftreklys

'n Aftrekkieslys is 'n wisselbare kieslys wat die gebruiker toelaat om een ​​waarde uit 'n voorafbepaalde lys te kies:

Voorbeeld Verduidelik

Die .dropdownklas dui 'n aftreklys aan.

Om die aftreklys oop te maak, gebruik 'n knoppie of 'n skakel met 'n klas van .dropdown-toggleen die data-toggle="dropdown"kenmerk.

Die .caretklas skep 'n karetpyl-ikoon (), wat aandui dat die knoppie 'n aftreklys is.

Voeg die .dropdown-menuklas by 'n <ul>element om werklik die aftrekkieslys te bou.

Aftreklysverdeler

Die .dividerklas word gebruik om skakels binne die aftreklys te skei met 'n dun horisontale rand:

Aftrekopskrif

Die .dropdown-headerklas word gebruik om opskrifte in die aftrekkieslys by te voeg:

Deaktiveer en Aktiewe items

Merk 'n spesifieke aftrek-item met die .active-klas (voeg 'n blou agtergrondkleur by).

Om 'n item in die aftreklys te deaktiveer, gebruik die .disabledklas (kry 'n liggrys tekskleur en 'n "nie-parkeer-teken"-ikoon wanneer jy beweeg):

Dropdown posisie

Om die aftreklys regs te belyn, voeg die .dropdown-menu-rightklas by die element met .dropdown-menu:

Dropup

As jy wil hê die aftreklys moet opwaarts in plaas van afwaarts uitbrei, verander die <div>-element met class="dropdown" na "dropup":

Aftreklys Toeganklikheid

Om te help om toeganklikheid te verbeter vir mense wat skermlesers gebruik, moet jy die volgende roleen aria-*kenmerke insluit wanneer jy 'n aftrekkieslys skep:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Voltooi Bootstrap-aftreklysverwysing

Vir 'n volledige verwysing van alle aftrekopsies, metodes en gebeure, gaan na ons Bootstrap JS- aftreklysverwysing .