આઇકોનોગ્રાફી, ડ્રોપડાઉન, ઇનપુટ જૂથો, નેવિગેશન, ચેતવણીઓ અને ઘણું બધું પ્રદાન કરવા માટે એક ડઝનથી વધુ ફરીથી વાપરી શકાય તેવા ઘટકો બનાવવામાં આવ્યા છે.
ગ્લિફિકન્સ
ઉપલબ્ધ ગ્લિફ્સ
Glyphicon Halflings સેટમાંથી ફોન્ટ ફોર્મેટમાં 250 થી વધુ ગ્લિફ્સનો સમાવેશ કરે છે. Glyphicons Halflings સામાન્ય રીતે મફતમાં ઉપલબ્ધ હોતા નથી, પરંતુ તેમના સર્જકે તેમને બુટસ્ટ્રેપ માટે મફતમાં ઉપલબ્ધ કરાવ્યા છે. તમારા આભાર તરીકે, અમે ફક્ત એટલું જ કહીએ છીએ કે તમે જ્યારે પણ શક્ય હોય ત્યારે Glyphicons પર પાછા એક લિંક શામેલ કરો.
glyphicon glyphicon-ફૂદડી
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-Cloud
glyphicon glyphicon-પરબિડીયું
glyphicon glyphicon-પેન્સિલ
glyphicon glyphicon-glass
glyphicon glyphicon-સંગીત
glyphicon glyphicon-શોધ
glyphicon glyphicon-હૃદય
glyphicon glyphicon-તારો
glyphicon glyphicon-તારો-ખાલી
glyphicon glyphicon-વપરાશકર્તા
glyphicon glyphicon-ફિલ્મ
glyphicon glyphicon-th-મોટો
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ઓકે
glyphicon glyphicon-દૂર કરો
glyphicon glyphicon-zoom-in
glyphicon glyphicon-ઝૂમ-આઉટ
glyphicon glyphicon-off
glyphicon glyphicon-સિગ્નલ
glyphicon glyphicon-cog
glyphicon glyphicon-કચરો
glyphicon glyphicon-ઘર
glyphicon glyphicon-file
glyphicon glyphicon-સમય
glyphicon glyphicon-રોડ
glyphicon glyphicon-download-alt
glyphicon glyphicon-ડાઉનલોડ કરો
glyphicon glyphicon-અપલોડ
glyphicon glyphicon-inbox
glyphicon glyphicon-play-sircle
glyphicon glyphicon-પુનરાવર્તન
glyphicon glyphicon-રિફ્રેશ
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-ધ્વજ
glyphicon glyphicon-હેડફોન
glyphicon glyphicon-વોલ્યુમ-ઓફ
glyphicon glyphicon-વોલ્યુમ-ડાઉન
glyphicon glyphicon-વોલ્યુમ-અપ
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-બુક
glyphicon glyphicon-બુકમાર્ક
glyphicon glyphicon-પ્રિન્ટ
glyphicon glyphicon-કેમેરો
glyphicon glyphicon-ફોન્ટ
glyphicon glyphicon-બોલ્ડ
glyphicon glyphicon-Italic
glyphicon glyphicon-ટેક્સ્ટ-ઊંચાઈ
glyphicon glyphicon-ટેક્સ્ટ-પહોળાઈ
glyphicon glyphicon-સંરેખિત-ડાબે
glyphicon glyphicon-align-center
glyphicon glyphicon-align-જમણે
glyphicon glyphicon-align-justify
glyphicon glyphicon-સૂચિ
glyphicon glyphicon-ઇન્ડેન્ટ-ડાબે
glyphicon glyphicon-Indent-જમણે
glyphicon glyphicon-facetime-video
glyphicon glyphicon-ચિત્ર
glyphicon glyphicon-નકશો-માર્કર
glyphicon glyphicon-વ્યવસ્થિત
glyphicon glyphicon-ટિન્ટ
glyphicon glyphicon-સંપાદિત કરો
glyphicon glyphicon-share
glyphicon glyphicon-ચેક
glyphicon glyphicon-ચાલ
glyphicon glyphicon-પગલું-પછાત
glyphicon glyphicon-ઝડપી-પછાત
glyphicon glyphicon-પછાત
glyphicon glyphicon-play
glyphicon glyphicon-થોભો
glyphicon glyphicon-સ્ટોપ
glyphicon glyphicon-આગળ
glyphicon glyphicon-ફાસ્ટ-ફોરવર્ડ
glyphicon glyphicon-પગલું-આગળ
glyphicon glyphicon-ઇજેક્ટ
glyphicon glyphicon-શેવરોન-ડાબે
glyphicon glyphicon-શેવરોન-જમણે
glyphicon glyphicon-plus-sign
glyphicon glyphicon-માઈનસ-ચિહ્ન
glyphicon glyphicon-દૂર કરો-ચિહ્ન
glyphicon glyphicon-ok-ચિહ્ન
glyphicon glyphicon-પ્રશ્ન-ચિહ્ન
glyphicon glyphicon-માહિતી-ચિહ્ન
glyphicon glyphicon-સ્ક્રીનશોટ
glyphicon glyphicon-દૂર-વર્તુળ
glyphicon glyphicon-ok-સર્કલ
glyphicon glyphicon-ban-sircle
glyphicon glyphicon-તીર-ડાબે
glyphicon glyphicon-તીર-જમણે
glyphicon glyphicon-તીર-અપ
glyphicon glyphicon-તીર-નીચે
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-ઉદ્ગારવાચક-ચિહ્ન
glyphicon glyphicon-ભેટ
glyphicon glyphicon-પાંદડું
glyphicon glyphicon-આગ
glyphicon glyphicon-આંખ ખોલો
glyphicon glyphicon-આંખ-બંધ
glyphicon glyphicon-ચેતવણી-ચિહ્ન
glyphicon glyphicon-પ્લેન
glyphicon glyphicon-કેલેન્ડર
glyphicon glyphicon-રેન્ડમ
glyphicon glyphicon-ટિપ્પણી
glyphicon glyphicon-ચુંબક
glyphicon glyphicon-chevron-up
glyphicon glyphicon-શેવરોન-ડાઉન
glyphicon glyphicon-રીટ્વીટ
glyphicon glyphicon-શોપિંગ-કાર્ટ
glyphicon glyphicon-ફોલ્ડર-બંધ
glyphicon glyphicon-ફોલ્ડર-ઓપન
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-બેલ
glyphicon glyphicon-પ્રમાણપત્ર
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-હાથ-જમણે
glyphicon glyphicon-હાથ-ડાબે
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-ગોળ-તીર-જમણે
glyphicon glyphicon-વર્તુળ-તીર-ડાબે
glyphicon glyphicon-સર્કલ-એરો-અપ
glyphicon glyphicon-સર્કલ-એરો-ડાઉન
glyphicon glyphicon-ગ્લોબ
glyphicon glyphicon-rench
glyphicon glyphicon-કાર્યો
glyphicon glyphicon-filter
glyphicon glyphicon-બ્રિફકેસ
glyphicon glyphicon-ફુલસ્ક્રીન
glyphicon glyphicon-ડૅશબોર્ડ
glyphicon glyphicon-paperclip
glyphicon glyphicon-હૃદય-ખાલી
glyphicon glyphicon-link
glyphicon glyphicon-ફોન
glyphicon glyphicon-pushpin
glyphicon glyphicon-USD
glyphicon glyphicon-gbp
glyphicon glyphicon-સૉર્ટ
glyphicon glyphicon-સૉર્ટ-બાય-આલ્ફાબેટ
glyphicon glyphicon-અલ્ફાબેટ-Alt-દ્વારા સૉર્ટ કરો
ગ્લિફિકન ગ્લિફિકોન-ક્રમ-ક્રમ
glyphicon glyphicon-ક્રમ-બાય-ક્રમ-Alt
glyphicon glyphicon-સૉર્ટ-બાય-એટ્રિબ્યુટ્સ
glyphicon glyphicon-સૉર્ટ-બાય-એટ્રિબ્યુટ્સ-alt
glyphicon glyphicon-અનચેક
glyphicon glyphicon-વિસ્તૃત
glyphicon glyphicon-પતન-ડાઉન
ગ્લિફીકોન ગ્લાયફીકોન-પતન
glyphicon glyphicon-log-in
glyphicon glyphicon-ફ્લેશ
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-રેકોર્ડ
glyphicon glyphicon-સેવ
glyphicon glyphicon-ઓપન
glyphicon glyphicon-સાચવાયેલ
glyphicon glyphicon-આયાત
glyphicon glyphicon-નિકાસ
glyphicon glyphicon-send
glyphicon glyphicon-ફ્લોપી-ડિસ્ક
glyphicon glyphicon-ફ્લોપી-સેવ
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-ફ્લોપી-ઓપન
glyphicon glyphicon-credit-card
glyphicon glyphicon-ટ્રાન્સફર
glyphicon glyphicon-cutlery
glyphicon glyphicon-હેડર
glyphicon glyphicon-સંકુચિત
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-ટાવર
glyphicon glyphicon-આંકડા
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-સબટાઈટલ્સ
glyphicon glyphicon-સાઉન્ડ-સ્ટીરિયો
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-નોંધણી-ચિહ્ન
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-ટ્રી-કોનિફર
glyphicon glyphicon-વૃક���ષ-પાનખર
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-ઓપન-ફાઈલ
glyphicon glyphicon-લેવલ-અપ
glyphicon glyphicon-copy
glyphicon glyphicon-પેસ્ટ
glyphicon glyphicon-ચેતવણી
glyphicon glyphicon-Equalizer
glyphicon glyphicon-king
glyphicon glyphicon-ક્વીન
glyphicon glyphicon-પ્યાદુ
glyphicon glyphicon-બિશપ
glyphicon glyphicon-નાઈટ
glyphicon glyphicon-બેબી-ફોર્મ્યુલા
glyphicon glyphicon-તંબુ
glyphicon glyphicon-બ્લેકબોર્ડ
glyphicon glyphicon-બેડ
glyphicon glyphicon-સફરજન
glyphicon glyphicon- ભૂંસી નાખવું
glyphicon glyphicon-hourglass
glyphicon glyphicon-દીવો
glyphicon glyphicon-ડુપ્લિકેટ
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-કાતર
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-Yen
glyphicon glyphicon-jpy
glyphicon glyphicon-રુબલ
glyphicon glyphicon-rub
glyphicon glyphicon-સ્કેલ
glyphicon glyphicon-ice-lolly
ગ્લિફીકોન ગ્લાયફીકોન-આઇસ-લોલી-સ્વાદ
glyphicon glyphicon-શિક્ષણ
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-મેનુ-હેમબર્ગર
glyphicon glyphicon-modal-window
glyphicon glyphicon-તેલ
glyphicon glyphicon-અનાજ
glyphicon glyphicon-સનગ્લાસ
glyphicon glyphicon-ટેક્સ્ટ-સાઈઝ
glyphicon glyphicon-ટેક્સ્ટ-રંગ
glyphicon glyphicon-ટેક્સ્ટ-બેકગ્રાઉન્ડ
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-ઑબ્જેક્ટ-align-horizontal
glyphicon glyphicon-ઑબ્જેક્ટ-એલાઈન-ડાબે
glyphicon glyphicon-ઑબ્જેક્ટ-align-vertical
glyphicon glyphicon-object-align-જમણે
glyphicon glyphicon-ત્રિકોણ-જમણે
glyphicon glyphicon-ત્રિકોણ-ડાબે
glyphicon glyphicon-ત્રિકોણ-નીચે
glyphicon glyphicon-ત્રિકોણ-ટોપ
glyphicon glyphicon-કન્સોલ
glyphicon glyphicon-superscript
glyphicon glyphicon-સબસ્ક્રિપ્ટ
glyphicon glyphicon-મેનુ-ડાબે
glyphicon glyphicon-મેનુ-જમણે
glyphicon glyphicon-મેનુ-ડાઉન
glyphicon glyphicon-મેનુ-અપ
કેવી રીતે વાપરવું
પ્રદર્શનના કારણોસર, બધા ચિહ્નોને આધાર વર્ગ અને વ્યક્તિગત ચિહ્ન વર્ગની જરૂર છે. ઉપયોગ કરવા માટે, નીચેનો કોડ લગભગ ગમે ત્યાં મૂકો. યોગ્ય પેડિંગ માટે આઇકન અને ટેક્સ્ટ વચ્ચે જગ્યા છોડવાની ખાતરી કરો.
અન્ય ઘટકો સાથે ભળશો નહીં
આયકન વર્ગોને અન્ય ઘટકો સાથે સીધા જોડી શકાતા નથી. તેનો ઉપયોગ સમાન તત્વ પર અન્ય વર્ગો સાથે થવો જોઈએ નહીં. તેના બદલે, નેસ્ટેડ ઉમેરો <span>અને આયકન વર્ગો પર લાગુ કરો <span>.
માત્ર ખાલી તત્વો પર ઉપયોગ માટે
આઇકન ક્લાસનો ઉપયોગ ફક્ત એવા તત્વો પર જ થવો જોઈએ જેમાં કોઈ ટેક્સ્ટ કન્ટેન્ટ નથી અને તેમાં કોઈ ચાઈલ્ડ એલિમેન્ટ્સ નથી.
આઇકન ફોન્ટ સ્થાન બદલવું
બુટસ્ટ્રેપ ધારે છે કે આયકન ફોન્ટ ફાઈલો ../fonts/કમ્પાઈલ કરેલ CSS ફાઈલોની તુલનામાં ડિરેક્ટરીમાં સ્થિત હશે. તે ફોન્ટ ફાઇલોને ખસેડવા અથવા તેનું નામ બદલવાનો અર્થ છે કે ત્રણમાંથી એક રીતે CSS અપડેટ કરવું:
સ્ત્રોત ઓછી ફાઇલોમાં @icon-font-pathઅને/અથવા ચલોને બદલો .@icon-font-name
તમારા ચોક્કસ ડેવલપમેન્ટ સેટઅપને શ્રેષ્ઠ અનુરૂપ કોઈપણ વિકલ્પનો ઉપયોગ કરો.
સુલભ ચિહ્નો
સહાયક તકનીકોના આધુનિક સંસ્કરણો CSS જનરેટ કરેલ સામગ્રી તેમજ વિશિષ્ટ યુનિકોડ અક્ષરોની જાહેરાત કરશે. સ્ક્રીન રીડર્સમાં અનિચ્છનીય અને ગૂંચવણભર્યા આઉટપુટને ટાળવા માટે (ખાસ કરીને જ્યારે ચિહ્નોનો ઉપયોગ સુશોભન માટે કરવામાં આવે છે), અમે તેમને aria-hidden="true"વિશેષતા સાથે છુપાવીએ છીએ.
જો તમે અર્થ દર્શાવવા માટે આયકનનો ઉપયોગ કરી રહ્યાં છો (માત્ર સુશોભન તત્વ તરીકે નહીં), તો ખાતરી કરો કે આ અર્થ સહાયક તકનીકો સુધી પણ પહોંચાડવામાં આવે છે - દાખલા તરીકે, .sr-onlyવર્ગ સાથે દૃષ્ટિની રીતે છુપાયેલ વધારાની સામગ્રી શામેલ કરો.
જો તમે અન્ય કોઈ ટેક્સ્ટ વિના નિયંત્રણો બનાવી રહ્યાં હોવ (જેમ કે જેમાં <button>માત્ર એક આયકન હોય), તો તમારે હંમેશા નિયંત્રણના હેતુને ઓળખવા માટે વૈકલ્પિક સામગ્રી પ્રદાન કરવી જોઈએ, જેથી તે સહાયક તકનીકોના વપરાશકર્તાઓને સમજમાં આવે. આ કિસ્સામાં, તમે aria-labelનિયંત્રણ પર જ એક વિશેષતા ઉમેરી શકો છો.
ઉદાહરણો
ટૂલબાર, નેવિગેશન અથવા પ્રીપેન્ડેડ ફોર્મ ઇનપુટ્સ માટે બટનો, બટન જૂથોમાં તેનો ઉપયોગ કરો.
સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને આ સંકેત પહોંચાડવા માટે વધારાના ટેક્સ્ટ સાથે, તે ભૂલનો સંદેશ છે તે જણાવવા માટે ચેતવણીમાં ઉપયોગમાં લેવાયેલ આયકન ..sr-only
ભૂલ:યોગ્ય ઇ - મેલ એડ્રેસ આપો
ડ્રોપડાઉન
લિંક્સની સૂચિ પ્રદર્શિત કરવા માટે ટૉગલ કરી શકાય તેવું, સંદર્ભ મેનૂ. ડ્રોપડાઉન JavaScript પ્લગઇન સાથે ઇન્ટરેક્ટિવ બનાવ્યું .
ઉદાહરણ
ડ્રોપડાઉનના ટ્રિગર અને ડ્રોપડાઉન મેનૂને અંદર લપેટો .dropdown, અથવા અન્ય ઘટક જે જાહેર કરે છે position: relative;. પછી મેનુનું HTML ઉમેરો.
ડિફૉલ્ટ રૂપે, ડ્રોપડાઉન મેનૂ આપોઆપ 100% ઉપરથી અને તેના પેરેન્ટની ડાબી બાજુએ સ્થિત છે. ડ્રોપડાઉન મેનૂને જમણે સંરેખિત કરવા .dropdown-menu-rightમાટે a માં ઉમેરો ..dropdown-menu
વધારાની સ્થિતિની જરૂર પડી શકે છે
ડ્રોપડાઉન દસ્તાવેજના સામાન્ય પ્રવાહમાં CSS દ્વારા આપમેળે સ્થાન પામે છે. આનો અર્થ એ છે કે માતા-પિતા દ્વારા અમુક overflowપ્રોપર્ટીઝ સાથે ડ્રોપડાઉન કાપવામાં આવી શકે છે અથવા વ્યુપોર્ટની સીમાની બહાર દેખાઈ શકે છે. આ મુદ્દાઓ ઉદભવે ત્યારે તમારા પોતાના પર સંબોધિત કરો.
નાપસંદ .pull-rightસંરેખણ
v3.1.0 મુજબ, અમે .pull-rightડ્રોપડાઉન મેનુઓ પર નાપસંદ કર્યું છે. મેનુને જમણે-સંરેખિત કરવા માટે, ઉપયોગ કરો .dropdown-menu-right. navbar માં જમણે સંરેખિત NAV ઘટકો મેનુને આપમેળે સંરેખિત કરવા માટે આ વર્ગના મિક્સિન સંસ્કરણનો ઉપયોગ કરે છે. તેને ઓવરરાઇડ કરવા માટે, ઉપયોગ કરો .dropdown-menu-left.
હેડરો
કોઈપણ ડ્રોપડાઉન મેનૂમાં ક્રિયાઓના વિભાગોને લેબલ કરવા માટે હેડર ઉમેરો.
બટન જૂથ સાથે એક જ લાઇન પર એકસાથે બટનોની શ્રેણીનું જૂથ બનાવો. અમારા બટન્સ પ્લગઇન સાથે વૈકલ્પિક JavaScript રેડિયો અને ચેકબોક્સ શૈલી વર્તન પર ઉમેરો .
બટન જૂથોમાં ટૂલટિપ્સ અને પોપોવર્સને ખાસ સેટિંગની જરૂર છે
ટૂલટિપ્સ અથવા પોપઓવરનો ઉપયોગ કરતી વખતે .btn-group, ની અંદરના ઘટકો પર તમારે અનિચ્છનીય આડ અસરોને ટાળવા માટે વિકલ્પનો ઉલ્લેખ કરવો પડશે container: 'body'(જેમ કે જ્યારે ટૂલટિપ અથવા પોપઓવર ટ્રિગર થાય ત્યારે તત્વ વધુ પહોળું થાય છે અને/અથવા તેના ગોળાકાર ખૂણા ગુમાવે છે).
યોગ્ય ખાતરી કરો roleઅને લેબલ પ્રદાન કરો
સહાયક તકનીકો માટે - જેમ કે સ્ક્રીન રીડર્સ - એ જણાવવા માટે કે બટનોની શ્રેણી જૂથબદ્ધ છે, એક યોગ્ય roleવિશેષતા પ્રદાન કરવાની જરૂર છે. બટન જૂથો માટે, આ હશે role="group", જ્યારે ટૂલબાર પાસે હોવું જોઈએ role="toolbar".
એક અપવાદ એવા જૂથો છે જેમાં માત્ર એક જ નિયંત્રણ હોય છે (ઉદાહરણ તરીકે તત્વો સાથેના વાજબી બટન જૂથો<button> ) અથવા ડ્રોપડાઉન.
વધુમાં, જૂથો અને ટૂલબારને સ્પષ્ટ લેબલ આપવું જોઈએ, કારણ કે મોટાભાગની સહાયક તકનીકો યોગ્ય roleવિશેષતાની હાજરી હોવા છતાં, અન્યથા તેમની જાહેરાત કરશે નહીં. અહીં આપેલા ઉદાહરણોમાં, અમે ઉપયોગ કરીએ છીએ aria-label, પરંતુ વિકલ્પો જેમ કે aria-labelledbyતેનો પણ ઉપયોગ કરી શકાય છે.
મૂળભૂત ઉદાહરણ
.btnમાં સાથે બટનોની શ્રેણી લપેટી .btn-group.
બટન ટૂલબાર
વધુ જટિલ ઘટકો માટે <div class="btn-group">a માં સેટને જોડો .<div class="btn-toolbar">
કદ બદલવાનું
જૂથમાં દરેક બટન પર બટન કદના વર્ગો લાગુ કરવાને બદલે, ફક્ત .btn-group-*દરેકમાં ઉમેરો .btn-group, જ્યારે બહુવિધ જૂથોને માળો બનાવતી વખતે.
માળો
જ્યારે તમે બટનોની શ્રેણી સાથે ડ્રોપડાઉન મેનૂને મિશ્રિત કરવા માંગતા હો ત્યારે એક .btn-groupબીજામાં મૂકો ..btn-group
તેના પેરેંટની સમગ્ર પહોળાઈને ફેલાવવા માટે બટનોના જૂથને સમાન કદમાં ખેંચો. બટન જૂથમાં બટન ડ્રોપડાઉન સાથે પણ કામ કરે છે.
સરહદો સંભાળવી
બટનોને ન્યાયી ઠેરવવા માટે વપરાતા વિશિષ્ટ HTML અને CSSને કારણે (એટલે કે display: table-cell), તેમની વચ્ચેની સરહદો બમણી થઈ ગઈ છે. નિયમિત બટન જૂથોમાં, margin-left: -1pxતેમને દૂર કરવાને બદલે કિનારીઓને સ્ટેક કરવા માટે વપરાય છે. જો કે, marginસાથે કામ કરતું નથી display: table-cell. પરિણામે, બુટસ્ટ્રેપમાં તમારા કસ્ટમાઇઝેશન પર આધાર રાખીને, તમે કિનારીઓને દૂર કરવા અથવા ફરીથી રંગ કરવા માંગો છો.
IE8 અને સરહદો
ઈન્ટરનેટ એક્સપ્લોરર 8 વાજબી બટન જૂથમાં બટનો પર બોર્ડર્સ રેન્ડર કરતું નથી, પછી ભલે તે ચાલુ હોય <a>કે <button>તત્વો. તેની આસપાસ જવા માટે, દરેક બટનને બીજામાં લપેટો .btn-group.
જો <a>તત્વોનો ઉપયોગ બટનો તરીકે કાર્ય કરવા માટે કરવામાં આવે છે - વર્તમાન પૃષ્ઠની અંદરના અન્ય દસ્તાવેજ અથવા વિભાગમાં નેવિગેટ કરવાને બદલે - ઇન-પેજ કાર્યક્ષમતાને ટ્રિગર કરે છે - તો તેમને પણ યોગ્ય આપવું જોઈએ role="button".
<button>તત્વો સાથે
<button>ઘટકો સાથે વાજબી બટન જૂથોનો ઉપયોગ કરવા માટે , તમારે દરેક બટનને બટન જૂથમાં લપેટી જ જોઈએ . મોટા ભાગના બ્રાઉઝર્સ એલિમેન્ટ્સ માટે યોગ્યતા માટે અમારા CSSને યોગ્ય રીતે લાગુ કરતા નથી <button>, પરંતુ અમે બટન ડ્રોપડાઉનને સમર્થન આપતા હોવાથી, અમે તેની આસપાસ કામ કરી શકીએ છીએ.
બટન ડ્રોપડાઉન
ડ્રોપડાઉન મેનૂને a ની અંદર મૂકીને .btn-groupઅને યોગ્ય મેનૂ માર્કઅપ પ્રદાન કરીને કોઈપણ બટનનો ઉપયોગ કરો.
કોઈપણ ટેક્સ્ટ-આધારિતની પહેલાં, પછી અથવા બંને બાજુએ ટેક્સ્ટ અથવા બટનો ઉમેરીને ફોર્મ નિયંત્રણોને વિસ્તૃત કરો <input>. .input-groupએક સાથે ઉપયોગ કરો .input-group-addonઅથવા .input-group-btnએકમાં ઘટકોને આગળ જોડવા અથવા જોડવા માટે .form-control.
માત્ર ટેક્સ્ટ્યુઅલ <input>એસ
અહીં તત્વોનો ઉપયોગ કરવાનું ટાળો <select>કારણ કે તે વેબકિટ બ્રાઉઝર્સમાં સંપૂર્ણ રીતે સ્ટાઈલ કરી શકાતા નથી.
<textarea>અહીં તત્વોનો ઉપયોગ કરવાનું ટાળો કારણ rowsકે કેટલાક કિસ્સાઓમાં તેમની વિશેષતાનું સન્માન કરવામાં આવશે નહીં.
ઇનપુટ જૂથોમાં ટૂલટિપ્સ અને પોપોવર્સને વિશિષ્ટ સેટિંગની જરૂર છે
ટૂલટિપ્સ અથવા પોપઓવરનો ઉપયોગ કરતી વખતે ની અંદરના તત્વો પર .input-group, તમારે અનિચ્છનીય આડ અસરોને ટાળવા માટે વિકલ્પનો ઉલ્લેખ કરવો પડશે container: 'body'(જેમ કે જ્યારે ટૂલટિપ અથવા પોપઓવર ટ્રિગર થાય ત્યારે તત્વ વધુ પહોળું થાય છે અને/અથવા તેના ગોળાકાર ખૂણા ગુમાવે છે).
અન્ય ઘટકો સાથે ભળશો નહીં
ફોર્મ જૂથો અથવા ગ્રીડ કૉલમ વર્ગોને સીધા ઇનપુટ જૂથો સાથે મિશ્રિત કરશો નહીં. તેના બદલે, ફોર્મ જૂથ અથવા ગ્રીડ-સંબંધિત તત્વની અંદર ઇનપુટ જૂથને માળો.
હંમેશા લેબલ્સ ઉમેરો
જો તમે દરેક ઇનપુટ માટે લેબલ શામેલ ન કરો તો સ્ક્રીન રીડર્સને તમારા ફોર્મમાં મુશ્કેલી પડશે. આ ઇનપુટ જૂથો માટે, ખાતરી કરો કે કોઈપણ વધારાનું લેબલ અથવા કાર્યક્ષમતા સહાયક તકનીકો સુધી પહોંચાડવામાં આવી છે.
ઉપયોગ કરવા માટેની ચોક્કસ તકનીક (દ્રશ્ય <label>તત્વો, વર્ગનો <label>ઉપયોગ કરીને છુપાયેલા તત્વો, અથવા , , , અથવા વિશેષતાનો ઉપયોગ) અને કઈ વધારાની માહિતી પહોંચાડવાની જરૂર પડશે તે ચોક્કસ પ્રકારના ઇન્ટરફેસ વિજેટના આધારે બદલાશે જે તમે અમલમાં મૂકી રહ્યાં છો. આ વિભાગમાંના ઉદાહરણો થોડા સૂચવેલા, કેસ-વિશિષ્ટ અભિગમો પૂરા પાડે છે..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
મૂળભૂત ઉદાહરણ
ઇનપુટની બંને બાજુએ એક એડ-ઓન અથવા બટન મૂકો. તમે ઇનપુટની બંને બાજુએ એક પણ મૂકી શકો છો.
અમે એક બાજુએ બહુવિધ એડ-ઓન ( .input-group-addonઅથવા ) ને સપોર્ટ કરતા નથી..input-group-btn
અમે એક ઇનપુટ જૂથમાં બહુવિધ ફોર્મ-નિયંત્રણોને સમર્થન આપતા નથી.
કદ બદલવાનું
સંબંધિત ફોર્મ સાઈઝિંગ વર્ગોને .input-groupપોતાની સાથે ઉમેરો અને અંદરની સામગ્રીઓનું કદ આપોઆપ બદલાઈ જશે-દરેક તત્વ પર ફોર્મ નિયંત્રણ કદ વર્ગોનું પુનરાવર્તન કરવાની જરૂર નથી.
ઇનપુટ જૂથોમાંના બટનો થોડા અલગ હોય છે અને એક વધારાના સ્તરના માળખાની જરૂર હોય છે. ની જગ્યાએ , તમારે બટનોને વીંટાળવા .input-group-addonમાટે ઉપયોગ કરવાની જરૂર પડશે . .input-group-btnડિફૉલ્ટ બ્રાઉઝર શૈલીઓને કારણે આ જરૂરી છે જેને ઓવરરાઇડ કરી શકાતી નથી.
ડ્રોપડાઉન સાથે બટનો
વિભાજિત બટનો
બહુવિધ બટનો
જ્યારે તમારી પાસે પ્રતિ બાજુ માત્ર એક એડ-ઓન હોઈ શકે છે, ત્યારે તમારી પાસે એકની અંદર બહુવિધ બટનો હોઈ શકે છે .input-group-btn.
નેવ્સ
બુટસ્ટ્રેપમાં ઉપલબ્ધ Navs એ બેઝ .navક્લાસથી શરૂ કરીને, તેમજ શેર કરેલા સ્ટેટ્સ સાથે માર્કઅપ શેર કર્યું છે. દરેક શૈલી વચ્ચે સ્વિચ કરવા માટે સંશોધક વર્ગોને સ્વેપ કરો.
ટૅબ પૅનલ માટે navs નો ઉપયોગ કરવા માટે JavaScript ટૅબ્સ પ્લગઇન જરૂરી છે
ટેબેબલ વિસ્તારો સાથેના ટેબ માટે, તમારે ટૅબ્સ JavaScript પ્લગઇનનો ઉપયોગ કરવો આવશ્યક છે . માર્કઅપને વધારાની roleઅને ARIA વિશેષતાઓની પણ જરૂર પડશે - વધુ વિગતો માટે પ્લગઇનનું ઉદાહરણ માર્કઅપ જુઓ.
નેવિગેશન તરીકે ઉપયોગમાં લેવાતા navs સુલભ બનાવો
જો તમે નેવિગેશન બાર પ્રદાન કરવા માટે navs નો ઉપયોગ કરી રહ્યાં છો, તો role="navigation"ના સૌથી લોજિકલ પેરેન્ટ કન્ટેનરમાં એક ઉમેરવાની ખાતરી કરો અથવા સમગ્ર નેવિગેશનની આસપાસ <ul>એક તત્વ લપેટી લો. <nav>ભૂમિકાને <ul>પોતાનામાં ઉમેરો નહીં, કારણ કે આ સહાયક તકનીકો દ્વારા તેને વાસ્તવિક સૂચિ તરીકે જાહેર કરવામાં અટકાવશે.
ટૅબ્સ
નોંધ કરો કે વર્ગને બેઝ ક્લાસની .nav-tabsજરૂર છે ..nav
સાથે 768px કરતાં વધુ પહોળી સ્ક્રીન પર સરળતાથી ટેબ અથવા પિલ્સને તેમના પિતૃની સમાન પહોળાઈ બનાવો .nav-justified. નાની સ્ક્રીન પર, નેવી લિંક્સ સ્ટેક કરવામાં આવે છે.
વાજબી navbar નેવી લિંક્સ હાલમાં સમર્થિત નથી.
સફારી અને રિસ્પોન્સિવ વાજબી navs
v9.1.2 મુજબ, સફારી એક બગ પ્રદર્શિત કરે છે જેમાં તમારા બ્રાઉઝરનું આડું માપ બદલવાથી વાજબી નેવીમાં રેન્ડરિંગ ભૂલો થાય છે જે રિફ્રેશ થવા પર સાફ થાય છે. આ બગ વાજબી નેવી ઉદાહરણમાં પણ બતાવવામાં આવે છે .
Navbars પ્રતિભાવશીલ મેટા ઘટકો છે જે તમારી એપ્લિકેશન અથવા સાઇટ માટે નેવિગેશન હેડર તરીકે સેવા આપે છે. તેઓ મોબાઇલ વ્યૂમાં સંકુચિત થવાનું શરૂ કરે છે (અને ટૉગલ કરી શકાય તેવું છે) અને ઉપલબ્ધ વ્યૂપોર્ટની પહોળાઈ વધે તેમ આડી બની જાય છે.
વાજબી navbar નેવી લિંક્સ હાલમાં સમર્થિત નથી.
વહેતી સામગ્રી
કારણ કે બુટસ્ટ્રેપ જાણતું નથી કે તમારા નવબારમાં સામગ્રીને કેટલી જગ્યાની જરૂર છે, તમને બીજી હરોળમાં સામગ્રી વીંટાળવામાં સમસ્યા આવી શકે છે. આને ઉકેલવા માટે, તમે આ કરી શકો છો:
તમારા નેવબાર સંકુચિત અને આડા મોડ વચ્ચે સ્વિચ કરે છે તે બિંદુને બદલો. ચલને કસ્ટમાઇઝ કરો @grid-float-breakpointઅથવા તમારી પોતાની મીડિયા ક્વેરી ઉમેરો.
JavaScript પ્લગઇનની જરૂર છે
જો JavaScript અક્ષમ હોય અને વ્યુપોર્ટ એટલો સાંકડો હોય કે navbar તૂટી જાય, તો navbar ને વિસ્તૃત કરવું અને ની અંદરની સામગ્રી જોવાનું અશક્ય હશે .navbar-collapse.
જ્યારે વ્યૂપોર્ટ કરતાં સાંકડો હોય ત્યારે નેવબાર તેના વર્ટિકલ મોબાઇલ વ્યૂમાં તૂટી જાય છે @grid-float-breakpointઅને જ્યારે વ્યૂપોર્ટ ઓછામાં ઓછી @grid-float-breakpointપહોળાઈમાં હોય ત્યારે તેના આડા બિન-મોબાઈલ વ્યૂમાં વિસ્તરે છે. જ્યારે નેવબાર તૂટી/વિસ્તરે ત્યારે નિયંત્રિત કરવા માટે આ ચલને ઓછા સ્ત્રોતમાં સમાયોજિત કરો. ડિફૉલ્ટ મૂલ્ય છે 768px(સૌથી નાની "નાની" અથવા "ટેબ્લેટ" સ્ક્રીન).
નેવબાર્સ સુલભ બનાવો
એલિમેન્ટનો ઉપયોગ કરવાનું સુનિશ્ચિત કરો <nav>અથવા, જો વધુ સામાન્ય તત્વ જેમ કે a નો ઉપયોગ કરતા હો, તો સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ માટે તેને સીમાચિહ્ન પ્રદેશ તરીકે સ્પષ્ટ રીતે ઓળખવા માટે દરેક નેવબારમાં <div>ઉમેરો .role="navigation"
વસ્તુ ની ઓળખ
એક માટે ટેક્સ્ટને સ્વેપ કરીને નવબાર બ્રાન્ડને તમારી પોતાની છબી સાથે બદલો <img>. તેનું પોતાનું પેડિંગ અને ઊંચાઈ હોવાથી .navbar-brand, તમારે તમારી છબીના આધારે કેટલાક CSSને ઓવરરાઇડ કરવાની જરૂર પડી શકે છે.
સ્વરૂપો
.navbar-formયોગ્ય ઊભી સંરેખણ અને સંકુચિત વર્તણૂક માટે સાંકડા વ્યુપોર્ટ્સમાં ફોર્મ સામગ્રીને અંદર મૂકો . તે navbar સામગ્રીમાં ક્યાં રહે છે તે નક્કી કરવા માટે ગોઠવણી વિકલ્પોનો ઉપયોગ કરો.
હેડ અપ તરીકે , તેનો મોટાભાગનો કોડ મિક્સિન દ્વારા .navbar-formશેર કરે છે . કેટલાક ફોર્મ નિયંત્રણો, જેમ કે ઇનપુટ જૂથો, નેવબારમાં યોગ્ય રીતે બતાવવા માટે નિશ્ચિત પહોળાઈની જરૂર પડી શકે છે..form-inline
જો તમે દરેક ઇનપુટ માટે લેબલ શામેલ ન કરો તો સ્ક્રીન રીડર્સને તમારા ફોર્મમાં મુશ્કેલી પડશે. આ ઇનલાઇન સ્વરૂપો માટે, તમે .sr-onlyવર્ગનો ઉપયોગ કરીને લેબલ્સ છુપાવી શકો છો. સહાયક તકનીકો માટે લેબલ પ્રદાન કરવાની વધુ વૈકલ્પિક પદ્ધતિઓ છે, જેમ કે aria-label, aria-labelledbyઅથવા titleવિશેષતા. જો આમાંથી કોઈ હાજર ન હોય, તો સ્ક્રીન રીડર્સ placeholderજો હાજર હોય તો એટ્રિબ્યુટનો ઉપયોગ કરવાનો આશરો લઈ શકે છે, પરંતુ નોંધ લો કે placeholderઅન્ય લેબલિંગ પદ્ધતિઓ માટે રિપ્લેસમેન્ટ તરીકે ઉપયોગ કરવાની સલાહ આપવામાં આવતી નથી.
બટનો
નેવબારમાં ઊભી રીતે કેન્દ્રમાં રાખવા માટે a માં રહેતા ન હોય તેવા તત્વોમાં .navbar-btnવર્ગ ઉમેરો .<button><form>
સંદર્ભ-વિશિષ્ટ ઉપયોગ
પ્રમાણભૂત બટન વર્ગોની જેમ , પર અને તત્વોનો .navbar-btnઉપયોગ કરી શકાય છે. જો કે, અંદરના તત્વો પર ન તો પ્રમાણભૂત બટન વર્ગોનો ઉપયોગ થવો જોઈએ .<a><input>.navbar-btn<a>.navbar-nav
ટેક્સ્ટ
.navbar-textસામાન્ય રીતે <p>યોગ્ય લીડિંગ અને રંગ માટે ટેગ પર, સાથે ઘટકમાં ટેક્સ્ટની સ્ટ્રિંગ્સને લપેટી .
બિન-નેવી લિંક્સ
પ્રમાણભૂત લિંક્સનો ઉપયોગ કરતા લોકો માટે કે જે નિયમિત નેવિગેશન ઘટકની અંદર નથી, .navbar-linkડિફોલ્ટ અને ઇનવર્સ નેવબાર વિકલ્પો માટે યોગ્ય રંગો ઉમેરવા માટે વર્ગનો ઉપયોગ કરો.
ઘટક ગોઠવણી
.navbar-leftઅથવા .navbar-rightઉપયોગિતા વર્ગોનો ઉપયોગ કરીને નેવી લિંક્સ, ફોર્મ્સ, બટનો અથવા ટેક્સ્ટને સંરેખિત કરો . બંને વર્ગો નિર્દિષ્ટ દિશામાં CSS ફ્લોટ ઉમેરશે. ઉદાહરણ તરીકે, નેવી લિંક્સને સંરેખિત કરવા માટે, તેમને <ul>સંબંધિત ઉપયોગિતા વર્ગ લાગુ સાથે અલગમાં મૂકો.
.pull-leftઆ વર્ગો અને ની મિક્સ-એડી આવૃત્તિઓ છે .pull-right, પરંતુ તેઓ સમગ્ર ઉપકરણના કદમાં નેવબાર ઘટકોના સરળ સંચાલન માટે મીડિયા ક્વેરીઝ માટે વિસ્તારિત છે.
બહુવિધ ઘટકોને જમણે સંરેખિત કરવું
નવબાર હાલમાં બહુવિધ .navbar-rightવર્ગો સાથે મર્યાદા ધરાવે છે. .navbar-rightયોગ્ય રીતે જગ્યા સામગ્રી માટે, અમે છેલ્લા ઘટક પર નકારાત્મક માર્જિનનો ઉપયોગ કરીએ છીએ . જ્યારે તે વર્ગનો ઉપયોગ કરતા બહુવિધ ઘટકો હોય, ત્યારે આ માર્જિન હેતુ મુજબ કામ કરતા નથી.
જ્યારે આપણે તે ઘટકને v4 માં ફરીથી લખી શકીએ ત્યારે અમે આની ફરી મુલાકાત કરીશું.
ટોચ પર સ્થિર
કેન્દ્ર અને પેડ નવબારમાં સામગ્રી ઉમેરો અને .navbar-fixed-topશામેલ કરો ..container.container-fluid
બોડી પેડિંગ જરૂરી છે
નિશ્ચિત નવબાર તમારી અન્ય સામગ્રીને ઓવરલે કરશે, સિવાય કે તમે paddingની ટોચ પર ઉમેરશો <body>. તમારા પોતાના મૂલ્યો અજમાવી જુઓ અથવા નીચે આપેલા અમારા સ્નિપેટનો ઉપયોગ કરો. ટીપ: ડિફૉલ્ટ રૂપે, navbar 50px ઊંચો છે.
કોર બુટસ્ટ્રેપ CSS પછી આનો સમાવેશ કરવાની ખાતરી કરો .
તળિયે સ્થિર
કેન્દ્ર અને પેડ નવબારમાં સામગ્રી ઉમેરો અને .navbar-fixed-bottomશામેલ કરો ..container.container-fluid
બોડી પેડિંગ જરૂરી છે
નિશ્ચિત નવબાર તમારી અન્ય સામગ્રીને ઓવરલે કરશે, સિવાય કે તમે paddingની નીચે ઉમેરશો <body>. તમારા પોતાના મૂલ્યો અજમાવી જુઓ અથવા નીચે આપેલા અમારા સ્નિપેટનો ઉપયોગ કરો. ટીપ: ડિફૉલ્ટ રૂપે, navbar 50px ઊંચો છે.
કોર બુટસ્ટ્રેપ CSS પછી આનો સમાવેશ કરવાની ખાતરી કરો .
સ્થિર ટોચ
સંપૂર્ણ-પહોળાઈનો નેવબાર બનાવો કે જે પૃષ્ઠ સાથે સ્ક્રોલ થઈ જાય છે અને તેને કેન્દ્રમાં અથવા પેડ નેવબાર સામગ્રી ઉમેરીને .navbar-static-topઅને શામેલ કરે છે..container.container-fluid
વર્ગોથી વિપરીત .navbar-fixed-*, તમારે પર કોઈપણ પેડિંગ બદલવાની જરૂર નથી body.
Rdio દ્વારા પ્રેરિત સરળ પૃષ્ઠ ક્રમાંકન, એપ્લિકેશનો અને શોધ પરિણામો માટે સરસ. મોટો બ્લોક ચૂકી જવો મુશ્કેલ છે, સરળતાથી માપી શકાય છે અને મોટા ક્લિક વિસ્તારો પૂરા પાડે છે.
પૃષ્ઠ ક્રમાંકન ઘટકનું લેબલીંગ
<nav>પૃષ્ઠ ક્રમાંકન ઘટકને સ્ક્રીન રીડર્સ અને અન્ય સહાયક તકનીકોના નેવિગેશન વિભાગ તરીકે ઓળખવા માટે એક ઘટકમાં આવરિત હોવું જોઈએ . વધુમાં, કારણ કે પૃષ્ઠમાં પહેલાથી જ આવા એક કરતાં વધુ નેવિગેશન વિભાગ (જેમ કે હેડરમાં પ્રાથમિક નેવિગેશન, અથવા સાઇડબાર નેવિગેશન) હોવાની શક્યતા છે, તેના હેતુને પ્રતિબિંબિત કરતા વર્ણનાત્મક aria-labelપ્રદાન કરવાની સલાહ આપવામાં આવે છે. <nav>ઉદાહરણ તરીકે, જો પૃષ્ઠ ક્રમાંકન ઘટકનો ઉપયોગ શોધ પરિણામોના સમૂહ વચ્ચે નેવિગેટ કરવા માટે થાય છે, તો યોગ્ય લેબલ હોઈ શકે છે aria-label="Search results pages".
અક્ષમ અને સક્રિય રાજ્યો
લિંક્સ વિવિધ સંજોગો માટે કસ્ટમાઇઝ કરી શકાય છે. .disabledક્લિક ન કરી શકાય તેવી લિંક્સ માટે અને .activeવર્તમાન પૃષ્ઠ સૂચવવા માટે ઉપયોગ કરો .
અમે ભલામણ કરીએ છીએ કે તમે <span>ઇચ્છિત શૈલીઓ જાળવી રાખતી વખતે ક્લિક કાર્યક્ષમતાને દૂર કરવા માટે, માટે સક્રિય અથવા અક્ષમ કરેલ એન્કરને સ્વેપ કરો અથવા અગાઉના/આગલા તીરોના કિસ્સામાં એન્કરને છોડી દો.
કદ બદલવાનું
ફેન્સી મોટા અથવા નાના પૃષ્ઠ ક્રમાંકન? ઉમેરો .pagination-lgઅથવા .pagination-smવધારાના કદ માટે.
પેજર
પ્રકાશ માર્કઅપ અને શૈલીઓ સાથે સરળ પૃષ્ઠ ક્રમાંકન અમલીકરણ માટે ઝડપી અગાઉની અને આગલી લિંક્સ. તે બ્લોગ્સ અથવા સામયિકો જેવી સરળ સાઇટ્સ માટે સરસ છે.
મૂળભૂત ઉદાહરણ
મૂળભૂત રીતે, પેજર લિંક્સને કેન્દ્રમાં રાખે છે.
સંરેખિત લિંક્સ
વૈકલ્પિક રીતે, તમે દરેક લિંકને બાજુઓ પર ગોઠવી શકો છો:
વૈકલ્પિક અક્ષમ સ્થિતિ
પેજર લિંક્સ .disabledપૃષ્ઠ ક્રમાંકમાંથી સામાન્ય ઉપયોગિતા વર્ગનો પણ ઉપયોગ કરે છે.
લેબલ્સ
ઉદાહરણ
ઉદાહરણ મથાળું નવું
ઉદાહરણ મથાળું નવું
ઉદાહરણ મથાળું નવું
ઉદાહરણ મથાળું નવું
ઉદાહરણ મથાળું નવું
ઉદાહરણ મથાળું નવું
ઉપલબ્ધ વિવિધતા
લેબલનો દેખાવ બદલવા માટે નીચે દર્શાવેલ મોડિફાયર વર્ગોમાંથી કોઈપણ ઉમેરો.
ડિફોલ્ટ પ્રાથમિક સફળતા માહિતી ચેતવણી જોખમ
ટન લેબલ્સ છે?
જ્યારે તમારી પાસે સાંકડા કન્ટેનરમાં ડઝનેક ઇનલાઇન લેબલ્સ હોય ત્યારે રેન્ડરિંગ સમસ્યાઓ ઊભી થઈ શકે છે, જેમાં પ્રત્યેકનું પોતાનું inline-blockતત્વ હોય છે (જેમ કે આઇકન). આની આસપાસનો રસ્તો સેટિંગ છે display: inline-block;. સંદર્ભ અને ઉદાહરણ માટે, #13219 જુઓ .
બેજ
<span class="badge">લિંક્સ, બુટસ્ટ્રેપ નેવ્સ અને વધુમાં ઉમેરીને નવી અથવા ન વાંચેલી આઇટમ્સને સરળતાથી હાઇલાઇટ કરો.
જમ્બોટ્રોનને સંપૂર્ણ પહોળાઈ અને ગોળાકાર ખૂણા વિના બનાવવા માટે, તેને બધાની બહાર મૂકો .containerઅને તેના બદલે .containerઅંદર ઉમેરો.
પૃષ્ઠ હેડર
h1પૃષ્ઠ પર સામગ્રીના વિભાગોને યોગ્ય રીતે બહાર કાઢવા અને વિભાજન કરવા માટે એક સરળ શેલ . તે h1ના મૂળભૂત smallતત્વનો ઉપયોગ કરી શકે છે, તેમજ મોટાભાગના અન્ય ઘટકો (વધારાની શૈલીઓ સાથે).
ઉદાહરણ પૃષ્ઠ હેડર હેડર માટે સબટેક્સ્ટ
થંબનેલ્સ
છબીઓ, વિડિઓઝ, ટેક્સ્ટ અને વધુના ગ્રીડને સરળતાથી પ્રદર્શિત કરવા માટે થંબનેલ ઘટક સાથે બુટસ્ટ્રેપની ગ્રીડ સિસ્ટમને વિસ્તૃત કરો.
જો તમે વિવિધ ઊંચાઈઓ અને/અથવા પહોળાઈના થંબનેલ્સની Pinterest-જેવી પ્રસ્તુતિ શોધી રહ્યાં છો, તો તમારે તૃતીય-પક્ષ પ્લગઈન જેમ કે મેસનરી , આઈસોટોપ અથવા સાલ્વાટોરનો ઉપયોગ કરવાની જરૂર પડશે .
મૂળભૂત ઉદાહરણ
ડિફૉલ્ટ રૂપે, બુટસ્ટ્રેપની થંબનેલ્સ ન્યૂનતમ જરૂરી માર્કઅપ સાથે લિંક કરેલી છબીઓ દર્શાવવા માટે ડિઝાઇન કરવામાં આવી છે.
કસ્ટમ સામગ્રી
થોડા વધારાના માર્કઅપ સાથે, થંબનેલ્સમાં હેડિંગ, ફકરા અથવા બટનો જેવી કોઈપણ પ્રકારની HTML સામગ્રી ઉમેરવાનું શક્ય છે.
થંબનેલ લેબલ
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
મુઠ્ઠીભર ઉપલબ્ધ અને લવચીક ચેતવણી સંદેશાઓ સાથે લાક્ષણિક વપરાશકર્તા ક્રિયાઓ માટે સંદર્ભિત પ્રતિસાદ સંદેશાઓ પ્રદાન કરો.
ઉદાહરણો
મૂળભૂત ચેતવણી સંદેશાઓ માટે કોઈપણ ટેક્સ્ટ અને વૈકલ્પિક બરતરફ બટન .alertઅને ચાર સંદર્ભિત વર્ગોમાંથી એક (દા.ત., ) લપેટો..alert-success
કોઈ ડિફોલ્ટ વર્ગ નથી
ચેતવણીઓમાં ડિફોલ્ટ વર્ગો હોતા નથી, માત્ર આધાર અને સુધારક વર્ગો. ડિફૉલ્ટ ગ્રે એલર્ટ ખૂબ અર્થપૂર્ણ નથી, તેથી તમારે સંદર્ભ વર્ગ દ્વારા એક પ્રકારનો ઉલ્લેખ કરવો જરૂરી છે. સફળતા, માહિતી, ચેતવણી અથવા જોખમમાંથી પસંદ કરો.
શાબ્બાશ! તમે આ મહત્વપૂર્ણ ચેતવણી સંદેશ સફળતાપૂર્વક વાંચ્યો.
હેડ અપ! આ ચેતવણીને તમારા ધ્યાનની જરૂર છે, પરંતુ તે અતિ મહત્વનું નથી.
ચેતવણી! તમારી જાતને વધુ સારી રીતે તપાસો, તમે ખૂબ સારા દેખાતા નથી.
સરળ છતાં લવચીક પ્રોગ્રેસ બાર સાથે વર્કફ્લો અથવા ક્રિયાની પ્રગતિ પર અપ-ટૂ-ડેટ પ્રતિસાદ આપો.
ક્રોસ બ્રાઉઝર સુસંગતતા
પ્રોગ્રેસ બાર તેમની કેટલીક અસરો પ્રાપ્ત કરવા માટે CSS3 સંક્રમણો અને એનિમેશનનો ઉપયોગ કરે છે. આ સુવિધાઓ Internet Explorer 9 અને Firefox ની નીચેની અથવા જૂની આવૃત્તિઓમાં સમર્થિત નથી. ઓપેરા 12 એનિમેશનને સપોર્ટ કરતું નથી.
સામગ્રી સુરક્ષા નીતિ (CSP) સુસંગતતા
જો તમારી વેબસાઇટમાં સામગ્રી સુરક્ષા નીતિ (CSP) છે જે મંજૂરી આપતી નથી , તો પછી તમે નીચેના અમારા ઉદાહરણોમાં બતાવ્યા પ્રમાણે પ્રગતિ પટ્ટીની પહોળાઈ સેટ કરવા style-src 'unsafe-inline'માટે ઇનલાઇન વિશેષતાઓનો ઉપયોગ કરી શકશો નહીં . styleકડક CSP સાથે સુસંગત હોય તેવી પહોળાઈને સેટ કરવાની વૈકલ્પિક પદ્ધતિઓમાં થોડી કસ્ટમ JavaScript (જે સેટ કરે છે element.style.width) અથવા કસ્ટમ CSS વર્ગોનો ઉપયોગ કરવાનો સમાવેશ થાય છે.
મૂળભૂત ઉદાહરણ
ડિફૉલ્ટ પ્રોગ્રેસ બાર.
60% પૂર્ણ
લેબલ સાથે
દૃશ્યમાન ટકાવારી બતાવવા માટે પ્રોગ્રેસ બારમાંથી ક્લાસ <span>સાથે દૂર કરો ..sr-only
60%
ઓછી ટકાવારી માટે પણ લેબલ ટેક્સ્ટ સુવાચ્ય રહે તેની ખાતરી કરવા માટે min-width, પ્રોગ્રેસ બારમાં a ઉમેરવાનું વિચારો.
0%
2%
સંદર્ભિત વિકલ્પો
પ્રોગ્રેસ બાર સાતત્યપૂર્ણ શૈલીઓ માટે સમાન બટન અને ચેતવણી વર્ગોમાંથી કેટલાકનો ઉપયોગ કરે છે.
40% પૂર્ણ (સફળતા)
20% પૂર્ણ
60% પૂર્ણ (ચેતવણી)
80% પૂર્ણ (ખતરો)
બીજા રંગના પટાવાળું
પટ્ટાવાળી અસર બનાવવા માટે ઢાળનો ઉપયોગ કરે છે. IE9 અને નીચે ઉપલબ્ધ નથી.
40% પૂર્ણ (સફળતા)
20% પૂર્ણ
60% પૂર્ણ (ચેતવણી)
80% પૂર્ણ (ખતરો)
એનિમેટેડ
જમણેથી ડાબે પટ્ટાઓને એનિમેટ .activeકરવા માટે ઉમેરો . .progress-bar-stripedIE9 અને નીચે ઉપલબ્ધ નથી.
45% પૂર્ણ
સ્ટૅક્ડ
.progressતેમને સ્ટેક કરવા માટે એકમાં બહુવિધ બાર મૂકો .
35% પૂર્ણ (સફળતા)
20% પૂર્ણ (ચેતવણી)
10% પૂર્ણ (ખતરો)
મીડિયા ઑબ્જેક્ટ
વિવિધ પ્રકારના ઘટકો (જેમ કે બ્લોગ ટિપ્પણીઓ, ટ્વીટ્સ, વગેરે) બનાવવા માટે અમૂર્ત ઑબ્જેક્ટ શૈલીઓ કે જેમાં ટેક્સ્ટની સામગ્રીની સાથે ડાબે-અથવા જમણે-સંરેખિત છબી દર્શાવવામાં આવે છે.
ડિફૉલ્ટ મીડિયા
ડિફૉલ્ટ મીડિયા કન્ટેન્ટ બ્લોકની ડાબી કે જમણી બાજુએ મીડિયા ઑબ્જેક્ટ (છબીઓ, વિડિયો, ઑડિયો) પ્રદર્શિત કરે છે.
મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
નેસ્ટેડ મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
વર્ગો .pull-leftઅને .pull-rightતે પણ અસ્તિત્વમાં છે અને અગાઉ મીડિયા ઘટકના ભાગ તરીકે ઉપયોગમાં લેવાતા હતા, પરંતુ તે v3.3.0 ના ઉપયોગ માટે નાપસંદ કરવામાં આવ્યા છે. તેઓ લગભગ સમકક્ષ છે .media-leftઅને .media-right, સિવાય કે તે html માં .media-rightપછી મૂકવું જોઈએ ..media-body
મીડિયા સંરેખણ
છબીઓ અથવા અન્ય માધ્યમોને ટોચ, મધ્ય અથવા નીચે ગોઠવી શકાય છે. ડિફૉલ્ટ ટોચ સંરેખિત છે.
ટોચનું સંરેખિત મીડિયા
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
Donec sed odio dui. નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
મધ્ય સંરેખિત મીડિયા
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
Donec sed odio dui. નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
નીચે સંરેખિત મીડિયા
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
Donec sed odio dui. નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
મીડિયા સૂચિ
થોડી વધારાની માર્કઅપ સાથે, તમે સૂચિની અંદર મીડિયાનો ઉપયોગ કરી શકો છો (ટિપ્પણી થ્રેડો અથવા લેખોની સૂચિ માટે ઉપયોગી).
મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
નેસ્ટેડ મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
નેસ્ટેડ મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
નેસ્ટેડ મીડિયા હેડિંગ
ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
સૂચિ જૂથ
સૂચિ જૂથો માત્ર ઘટકોની સરળ સૂચિ જ નહીં, પરંતુ કસ્ટમ સામગ્રી સાથે જટિલ મુદ્દાઓ પ્રદર્શિત કરવા માટે એક લવચીક અને શક્તિશાળી ઘટક છે.
મૂળભૂત ઉદાહરણ
સૌથી મૂળભૂત સૂચિ જૂથ એ સૂચિની આઇટમ્સ અને યોગ્ય વર્ગો સાથેની અવ્યવસ્થિત સૂચિ છે. તેના પર અનુસરતા વિકલ્પો અથવા જરૂરિયાત મુજબ તમારા પોતાના CSS સાથે બનાવો.
Cras justo odio
માં ડેપીબસ એસી ફેસિલિસીસ
મોરબી લીઓ રીસસ
પોર્ટા એસી કોન્સેકટુર એસી
ઇરોસ પર વેસ્ટિબુલમ
બેજ
કોઈપણ સૂચિ જૂથ આઇટમમાં બેજેસ ઘટક ઉમેરો અને તે આપમેળે જમણી બાજુએ સ્થિત થશે.
14Cras justo odio
2માં ડેપીબસ એસી ફેસિલિસીસ
1મોરબી લીઓ રીસસ
લિંક કરેલી વસ્તુઓ
સૂચિ આઇટમ્સને બદલે એન્કર ટૅગ્સનો ઉપયોગ કરીને સૂચિ જૂથ આઇટમ્સને લિંક કરો (જેનો અર્થ એ પણ છે કે <div>ની જગ્યાએ માતાપિતા <ul>). દરેક તત્વની આસપાસ વ્યક્તિગત માતાપિતાની જરૂર નથી.
સૂચિ જૂથની આઇટમ્સ સૂચિની વસ્તુઓને બદલે બટનો હોઈ શકે છે (જેનો અર્થ એ પણ છે કે માતાપિતાને <div>બદલે <ul>). દરેક તત્વની આસપાસ વ્યક્તિગત માતાપિતાની જરૂર નથી. અહીં પ્રમાણભૂત .btnવર્ગોનો ઉપયોગ કરશો નહીં.
અક્ષમ વસ્તુઓ
અક્ષમ દેખાવા માટે તેને ગ્રે આઉટ કરવા .disabledમાટે a માં ઉમેરો ..list-group-item
હંમેશા જરૂરી ન હોવા છતાં, કેટલીકવાર તમારે તમારા DOMને બોક્સમાં મૂકવાની જરૂર હોય છે. તે પરિસ્થિતિઓ માટે, પેનલ ઘટકનો પ્રયાસ કરો.
મૂળભૂત ઉદાહરણ
ડિફૉલ્ટ રૂપે, .panelકેટલીક સામગ્રીને સમાવવા માટે તમામ મૂળભૂત બોર્ડર અને પેડિંગ લાગુ કરે છે.
મૂળભૂત પેનલ ઉદાહરણ
હેડિંગ સાથે પેનલ
સાથે તમારી પેનલમાં સરળતાથી હેડિંગ કન્ટેનર ઉમેરો .panel-heading. તમે પૂર્વ-શૈલીનું મથાળું ઉમેરવા માટે વર્ગ સાથે કોઈપણ <h1>- પણ શામેલ કરી શકો છો. જો કે, - ના ફોન્ટ માપો દ્વારા ઓવરરાઇડ કરવામાં આવે છે .<h6>.panel-title<h1><h6>.panel-heading
માં લપેટી બટનો અથવા ગૌણ ટેક્સ્ટ .panel-footer. નોંધ કરો કે પેનલ ફૂટર્સ સંદર્ભિત ભિન્નતાઓનો ઉપયોગ કરતી વખતે રંગો અને બોર્ડર્સને વારસામાં લેતા નથી કારણ કે તે અગ્રભાગમાં હોવાનો હેતુ નથી.
પેનલ સામગ્રી
સંદર્ભિત વિકલ્પો
અન્ય ઘટકોની જેમ, કોઈપણ સંદર્ભિત રાજ્ય વર્ગો ઉમેરીને પેનલને ચોક્કસ સંદર્ભ માટે સરળતાથી વધુ અર્થપૂર્ણ બનાવો.
પેનલ શીર્ષક
પેનલ સામગ્રી
પેનલ શીર્ષક
પેનલ સામગ્રી
પેનલ શીર્ષક
પેનલ સામગ્રી
પેનલ શીર્ષક
પેનલ સામગ્રી
પેનલ શીર્ષક
પેનલ સામગ્રી
કોષ્ટકો સાથે
.tableસીમલેસ ડિઝાઇન માટે પેનલની અંદર કોઈપણ બિન-બોર્ડર ઉમેરો . જો ત્યાં હોય તો .panel-body, અમે અલગ કરવા માટે કોષ્ટકની ટોચ પર વધારાની સરહદ ઉમેરીએ છીએ.
પેનલ હેડિંગ
અહીં કેટલીક ડિફોલ્ટ પેનલ સામગ્રી. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ. એનિયન લેસીનિયા બિબેન્ડમ નુલ્લા સેડ કોન્સેક્ટુર. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
પ્રથમ નામ
છેલ્લું નામ
વપરાશકર્તા નામ
1
ચિહ્ન
ઓટ્ટો
@mdo
2
જેકબ
થોર્ન્ટન
@ચરબી
3
લેરી
પક્ષી
@Twitter
જો ત્યાં કોઈ પેનલ બોડી ન હોય, તો ઘટક પેનલ હેડરથી ટેબલ પર વિક્ષેપ વિના ખસે છે.
અહીં કેટલીક ડિફોલ્ટ પેનલ સામગ્રી. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ. એનિયન લેસીનિયા બિબેન્ડમ નુલ્લા સેડ કોન્સેક્ટુર. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
માં ડેપીબસ એસી ફેસિલિસીસ
મોરબી લીઓ રીસસ
પોર્ટા એસી કોન્સેકટુર એસી
ઇરોસ પર વેસ્ટિબુલમ
રિસ્પોન્સિવ એમ્બેડ
બ્રાઉઝર્સને તેમના સમાવિષ્ટ બ્લોકની પહોળાઈના આધારે વિડિયો અથવા સ્લાઇડશોના પરિમાણો નક્કી કરવા માટે આંતરિક ગુણોત્તર બનાવીને મંજૂરી આપો જે કોઈપણ ઉપકરણ પર યોગ્ય રીતે માપવામાં આવશે.
નિયમો સીધા <iframe>, <embed>, <video>, અને <object>તત્વો પર લાગુ થાય છે; .embed-responsive-itemજ્યારે તમે અન્ય વિશેષતાઓ માટે સ્ટાઇલ સાથે મેચ કરવા માંગતા હોવ ત્યારે વૈકલ્પિક રીતે સ્પષ્ટ વંશજ વર્ગનો ઉપયોગ કરો.
પ્રો-ટીપ! frameborder="0"તમારે તમારા s માં શામેલ કરવાની જરૂર નથી <iframe>કારણ કે અમે તમારા માટે તેને ઓવરરાઇડ કરીએ છીએ.
કુવાઓ
મૂળભૂત સારી રીતે
એક તત્વને ઇનસેટ ઇફેક્ટ આપવા માટે તેના પર સાદી અસર તરીકે વેલનો ઉપયોગ કરો.
જુઓ, હું કૂવામાં છું!
વૈકલ્પિક વર્ગો
બે વૈકલ્પિક મોડિફાયર વર્ગો સાથે પેડિંગ અને ગોળાકાર ખૂણાઓને નિયંત્રિત કરો.