બટન જૂથ સાથે સિંગલ લાઇન પર એકસાથે બટનોની શ્રેણીનું જૂથ બનાવો અને JavaScript વડે તેમને સુપર-પાવર કરો.
મૂળભૂત ઉદાહરણ
.btnમાં સાથે બટનોની શ્રેણી લપેટી .btn-group. અમારા બટન્સ પ્લગઇન સાથે વૈકલ્પિક JavaScript રેડિયો અને ચેકબોક્સ શૈલી વર્તન પર ઉમેરો .
યોગ્ય ખાતરી કરો roleઅને લેબલ પ્રદાન કરો
સહાયક તકનીકો (જેમ કે સ્ક્રીન રીડર્સ) એ જણાવવા માટે કે બટનોની શ્રેણી જૂથબદ્ધ છે, એક યોગ્ય roleવિશેષતા પ્રદાન કરવાની જરૂર છે. બટન જૂથો માટે, આ હશે role="group", જ્યારે ટૂલબાર પાસે હોવું જોઈએ role="toolbar".
વધુમાં, જૂથો અને ટૂલબારને સ્પષ્ટ લેબલ આપવું જોઈએ, કારણ કે મોટાભાગની સહાયક તકનીકો યોગ્ય ભૂમિકા વિશેષતા હોવા છતાં, અન્યથા તેમની જાહેરાત કરશે નહીં. અહીં આપેલા ઉદાહરણોમાં, અમે ઉપયોગ કરીએ છીએ aria-label, પરંતુ વિકલ્પો જેમ કે aria-labelledbyતેનો પણ ઉપયોગ કરી શકાય છે.
બટન ટૂલબાર
વધુ જટિલ ઘટકો માટે બટન ટૂલબારમાં બટન જૂથોના સેટને જોડો. જૂથો, બટનો અને વધુને ખાલી કરવા માટે જરૂરિયાત મુજબ ઉપયોગિતા વર્ગોનો ઉપયોગ કરો.
તમારા ટૂલબારમાં બટન જૂથો સાથે ઇનપુટ જૂથોને મિશ્રિત કરવા માટે મફત લાગે. ઉપરના ઉદાહરણની જેમ જ, વસ્તુઓને યોગ્ય રીતે સ્પેસ કરવા માટે તમારે કેટલીક ઉપયોગિતાઓની જરૂર પડશે.
@
@
કદ બદલવાનું
જૂથમાં દરેક બટન પર બટન કદના વર્ગો લાગુ કરવાને બદલે, બહુવિધ જૂથોને માળો બનાવતી વખતે દરેક સહિત , ફક્ત .btn-group-*દરેકમાં ઉમેરો..btn-group
માળો
જ્યારે તમે બટનોની શ્રેણી સાથે ડ્રોપડાઉન મેનૂને મિશ્રિત કરવા માંગતા હો ત્યારે એક .btn-groupબીજામાં મૂકો ..btn-group