Խմբավորեք կոճակների շարքը մեկ տողի վրա կոճակների խմբի հետ և գերհզորացրեք դրանք JavaScript-ով:
Հիմնական օրինակ
Փաթեթավորեք մի շարք կոճակներ ներսով .btn: .btn-groupԱվելացրեք լրացուցիչ JavaScript ռադիոյի և վանդակի ոճի վարքագիծ մեր կոճակների հավելվածով :
Համոզվեք, որ ճիշտ roleէ և տրամադրեք պիտակ
Որպեսզի օժանդակ տեխնոլոգիաները (օրինակ՝ էկրանի ընթերցողները) փոխանցեն, որ մի շարք կոճակներ խմբավորված են, անհրաժեշտ է համապատասխան roleհատկանիշ տրամադրել: Կոճակների խմբերի համար սա կլինի role="group", մինչդեռ գործիքների տողերը պետք է ունենան role="toolbar".
Բացի այդ, խմբերին և գործիքների տողերին պետք է տրվի հստակ պիտակ, քանի որ օժանդակ տեխնոլոգիաների մեծ մասը հակառակ դեպքում դրանք չեն հայտարարի, չնայած ճիշտ դերի հատկանիշի առկայությանը: Այստեղ ներկայացված օրինակներում մենք օգտագործում ենք aria-label, բայց կարող են օգտագործվել նաև այնպիսի այլընտրանքներ, ինչպիսիք են aria-labelledby:
Կոճակների գործիքագոտին
Միավորել կոճակների խմբերը կոճակների գործիքների տողերի մեջ՝ ավելի բարդ բաղադրիչների համար: Անհրաժեշտության դեպքում օգտագործեք օգտակար դասեր՝ խմբերը, կոճակները և այլն բացատ թողնելու համար:
Ազատորեն խառնեք մուտքային խմբերը կոճակների խմբերի հետ ձեր գործիքների տողերում: Ինչպես վերը նշված օրինակին, ձեզ հավանաբար անհրաժեշտ կլինեն որոշ կոմունալ ծառայություններ, թեև իրերը ճիշտ տեղակայելու համար:
@
@
Չափսերը
Խմբի յուրաքանչյուր կոճակի վրա կոճակների չափման դասեր կիրառելու փոխարեն, պարզապես ավելացրեք .btn-group-*յուրաքանչյուրին .btn-group, ներառյալ յուրաքանչյուրը մի քանի խմբեր տեղադրելու ժամանակ:
Բնադրում
Տեղադրեք a .btn-groupմյուսի .btn-groupմեջ, երբ ցանկանում եք, որ բացվող ընտրացանկերը խառնվեն մի շարք կոճակներով: