Bootstrap 4 aftreklys
Basiese aftreklys
'n Aftrekkieslys is 'n wisselbare kieslys wat die gebruiker toelaat om een waarde uit 'n voorafbepaalde lys te kies:
Voorbeeld
<div class="dropdown">
<button type="button" class="btn btn-primary
dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</div>
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.
Voeg die .dropdown-menuklas by 'n <div>element om werklik die aftrekkieslys te bou. Voeg dan die
.dropdown-itemklas by elke element (skakels of knoppies) binne die aftrekkieslys.
Aftreklysverdeler
Die .dropdown-dividerklas word gebruik om skakels binne die aftreklys te skei met 'n dun horisontale rand:
Voorbeeld
<div class="dropdown-divider"></div>
Aftrekopskrif
Die .dropdown-headerklas word gebruik om opskrifte in die aftrekkieslys by te voeg:
Voorbeeld
<div class="dropdown-header">Dropdown header 1</div>
Deaktiveer en Aktiewe items
Merk 'n spesifieke aftrek-item saam met die .activeklas (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):
Voorbeeld
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Dropdown posisie
Jy kan ook 'n "dropright" of "dropleft"-kieslys skep deur die .droprightof .dropleftklas by die dropdown-element te voeg. Let daarop dat die teken/pyltjie outomaties bygevoeg word:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Aftreklys Regs
Om die aftreklys regs te belyn, voeg die .dropdown-menu-rightklas by die element met .dropdown-menu:
Voorbeeld
<div class="dropdown-menu dropdown-menu-right">
Dropup
As jy wil hê die aftreklys moet opwaarts in plaas van afwaarts uitbrei, verander die <div>-element met class="dropdown" na "dropup":
Voorbeeld
<div class="dropup">
Aftreklys teks
Die .dropdown-item-textklas word gebruik om gewone teks by 'n dropdown-item te voeg, of gebruik op skakels vir verstekskakelstilering.
Voorbeeld
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link
1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item-text" href="#">Text Link</a>
<span
class="dropdown-item-text">Just Text</span>
</div>
Gegroepeerde knoppies met 'n aftreklys
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Verdeelknoppie-aftrekkies
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Vertikale knoppiegroep met aftreklys
Voorbeeld
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Voltooi Bootstrap 4-aftreklysverwysing
Vir 'n volledige verwysing van alle aftrekopsies, metodes en gebeure, gaan na ons Bootstrap 4 JS aftreklysverwysing .