ગ્લિફિકન્સ

ઉપલબ્ધ ગ્લિફ્સ

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
  • ઓછા કમ્પાઈલર દ્વારા પૂરા પાડવામાં આવેલ સંબંધિત URLs વિકલ્પનો ઉપયોગ કરો .
  • url()સંકલિત CSS માં પાથ બદલો .

તમારા ચોક્કસ ડેવલપમેન્ટ સેટઅપને શ્રેષ્ઠ અનુરૂપ કોઈપણ વિકલ્પનો ઉપયોગ કરો.

સુલભ ચિહ્નો

સહાયક તકનીકોના આધુનિક સંસ્કરણો CSS જનરેટ કરેલ સામગ્રી તેમજ વિશિષ્ટ યુનિકોડ અક્ષરોની જાહેરાત કરશે. સ્ક્રીન રીડર્સમાં અનિચ્છનીય અને ગૂંચવણભર્યા આઉટપુટને ટાળવા માટે (ખાસ કરીને જ્યારે ચિહ્નોનો ઉપયોગ સુશોભન માટે કરવામાં આવે છે), અમે તેમને aria-hidden="true"વિશેષતા સાથે છુપાવીએ છીએ.

જો તમે અર્થ દર્શાવવા માટે આયકનનો ઉપયોગ કરી રહ્યાં છો (માત્ર સુશોભન તત્વ તરીકે નહીં), તો ખાતરી કરો કે આ અર્થ સહાયક તકનીકો સુધી પણ પહોંચાડવામાં આવે છે - દાખલા તરીકે, .sr-onlyવર્ગ સાથે દૃષ્ટિની રીતે છુપાયેલ વધારાની સામગ્રી શામેલ કરો.

જો તમે અન્ય કોઈ ટેક્સ્ટ વિના નિયંત્રણો બનાવી રહ્યાં હોવ (જેમ કે જેમાં <button>માત્ર એક આયકન હોય), તો તમારે હંમેશા નિયંત્રણના હેતુને ઓળખવા માટે વૈકલ્પિક સામગ્રી પ્રદાન કરવી જોઈએ, જેથી તે સહાયક તકનીકોના વપરાશકર્તાઓને સમજમાં આવે. આ કિસ્સામાં, તમે aria-labelનિયંત્રણ પર જ એક વિશેષતા ઉમેરી શકો છો.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ઉદાહરણો

ટૂલબાર, નેવિગેશન અથવા પ્રીપેન્ડેડ ફોર્મ ઇનપુટ્સ માટે બટનો, બટન જૂથોમાં તેનો ઉપયોગ કરો.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

સહાયક ટેક્નોલોજીના વપરાશકર્તાઓને આ સંકેત પહોંચાડવા માટે વધારાના ટેક્સ્ટ સાથે, તે ભૂલનો સંદેશ છે તે જણાવવા માટે ચેતવણીમાં ઉપયોગમાં લેવાયેલ આયકન ..sr-only

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ડ્રોપડાઉન

લિંક્સની સૂચિ પ્રદર્શિત કરવા માટે ટૉગલ કરી શકાય તેવું, સંદર્ભ મેનૂ. ડ્રોપડાઉન JavaScript પ્લગઇન સાથે ઇન્ટરેક્ટિવ બનાવ્યું .

ડ્રોપડાઉનના ટ્રિગર અને ડ્રોપડાઉન મેનૂને અંદર લપેટો .dropdown, અથવા અન્ય ઘટક જે જાહેર કરે છે position: relative;. પછી મેનુનું HTML ઉમેરો.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ડ્રોપડાઉન મેનુને પેરેન્ટમાં ઉમેરીને ઉપરની તરફ (નીચેને બદલે) વિસ્તૃત કરવા માટે બદલી શકાય છે .dropup.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ડિફૉલ્ટ રૂપે, ડ્રોપડાઉન મેનૂ આપોઆપ 100% ઉપરથી અને તેના પેરેન્ટની ડાબી બાજુએ સ્થિત છે. ડ્રોપડાઉન મેનૂને જમણે સંરેખિત કરવા .dropdown-menu-rightમાટે a માં ઉમેરો ..dropdown-menu

વધારાની સ્થિતિની જરૂર પડી શકે છે

ડ્રોપડાઉન દસ્તાવેજના સામાન્ય પ્રવાહમાં CSS દ્વારા આપમેળે સ્થાન પામે છે. આનો અર્થ એ છે કે માતા-પિતા દ્વારા અમુક overflowપ્રોપર્ટીઝ સાથે ડ્રોપડાઉન કાપવામાં આવી શકે છે અથવા વ્યુપોર્ટની સીમાની બહાર દેખાઈ શકે છે. આ મુદ્દાઓ ઉદભવે ત્યારે તમારા પોતાના પર સંબોધિત કરો.

નાપસંદ .pull-rightસંરેખણ

v3.1.0 મુજબ, અમે .pull-rightડ્રોપડાઉન મેનુઓ પર નાપસંદ કર્યું છે. મેનુને જમણે-સંરેખિત કરવા માટે, ઉપયોગ કરો .dropdown-menu-right. navbar માં જમણે સંરેખિત NAV ઘટકો મેનુને આપમેળે સંરેખિત કરવા માટે આ વર્ગના મિક્સિન સંસ્કરણનો ઉપયોગ કરે છે. તેને ઓવરરાઇડ કરવા માટે, ઉપયોગ કરો .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

કોઈપણ ડ્રોપડાઉન મેનૂમાં ક્રિયાઓના વિભાગોને લેબલ કરવા માટે હેડર ઉમેરો.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ડ્રોપડાઉન મેનૂમાં લિંક્સની અલગ શ્રેણીમાં વિભાજક ઉમેરો.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

લિંકને અક્ષમ કરવા માટે ડ્રોપડાઉનમાં .disabledએક ઉમેરો .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

બટન જૂથો

બટન જૂથ સાથે એક જ લાઇન પર એકસાથે બટનોની શ્રેણીનું જૂથ બનાવો. અમારા બટન્સ પ્લગઇન સાથે વૈકલ્પિક JavaScript રેડિયો અને ચેકબોક્સ શૈલી વર્તન પર ઉમેરો .

બટન જૂથોમાં ટૂલટિપ્સ અને પોપોવર્સને ખાસ સેટિંગની જરૂર છે

ટૂલટિપ્સ અથવા પોપઓવરનો ઉપયોગ કરતી વખતે .btn-group, ની અંદરના ઘટકો પર તમારે અનિચ્છનીય આડ અસરોને ટાળવા માટે વિકલ્પનો ઉલ્લેખ કરવો પડશે container: 'body'(જેમ કે જ્યારે ટૂલટિપ અથવા પોપઓવર ટ્રિગર થાય ત્યારે તત્વ વધુ પહોળું થાય છે અને/અથવા તેના ગોળાકાર ખૂણા ગુમાવે છે).

યોગ્ય ખાતરી કરો roleઅને લેબલ પ્રદાન કરો

સહાયક તકનીકો માટે - જેમ કે સ્ક્રીન રીડર્સ - એ જણાવવા માટે કે બટનોની શ્રેણી જૂથબદ્ધ છે, એક યોગ્ય roleવિશેષતા પ્રદાન કરવાની જરૂર છે. બટન જૂથો માટે, આ હશે role="group", જ્યારે ટૂલબાર પાસે હોવું જોઈએ role="toolbar".

એક અપવાદ એવા જૂથો છે જેમાં માત્ર એક જ નિયંત્રણ હોય છે (ઉદાહરણ તરીકે તત્વો સાથેના વાજબી બટન જૂથો<button> ) અથવા ડ્રોપડાઉન.

વધુમાં, જૂથો અને ટૂલબારને સ્પષ્ટ લેબલ આપવું જોઈએ, કારણ કે મોટાભાગની સહાયક તકનીકો યોગ્ય roleવિશેષતાની હાજરી હોવા છતાં, અન્યથા તેમની જાહેરાત કરશે નહીં. અહીં આપેલા ઉદાહરણોમાં, અમે ઉપયોગ કરીએ છીએ aria-label, પરંતુ વિકલ્પો જેમ કે aria-labelledbyતેનો પણ ઉપયોગ કરી શકાય છે.

મૂળભૂત ઉદાહરણ

.btnમાં સાથે બટનોની શ્રેણી લપેટી .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

બટન ટૂલબાર

વધુ જટિલ ઘટકો માટે <div class="btn-group">a માં સેટને જોડો .<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

કદ બદલવાનું

જૂથમાં દરેક બટન પર બટન કદના વર્ગો લાગુ કરવાને બદલે, ફક્ત .btn-group-*દરેકમાં ઉમેરો .btn-group, જ્યારે બહુવિધ જૂથોને માળો બનાવતી વખતે.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

માળો

જ્યારે તમે બટનોની શ્રેણી સાથે ડ્રોપડાઉન મેનૂને મિશ્રિત કરવા માંગતા હો ત્યારે એક .btn-groupબીજામાં મૂકો ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

વર્ટિકલ વિવિધતા

બટનોનો સમૂહ આડાને બદલે ઊભી રીતે સ્ટૅક્ડ દેખાય. સ્પ્લિટ બટન ડ્રોપડાઉન અહીં સમર્થિત નથી.

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

વાજબી બટન જૂથો

તેના પેરેંટની સમગ્ર પહોળાઈને ફેલાવવા માટે બટનોના જૂથને સમાન કદમાં ખેંચો. બટન જૂથમાં બટન ડ્રોપડાઉન સાથે પણ કામ કરે છે.

સરહદો સંભાળવી

બટનોને ન્યાયી ઠેરવવા માટે વપરાતા વિશિષ્ટ HTML અને CSSને કારણે (એટલે ​​​​કે display: table-cell), તેમની વચ્ચેની સરહદો બમણી થઈ ગઈ છે. નિયમિત બટન જૂથોમાં, margin-left: -1pxતેમને દૂર કરવાને બદલે કિનારીઓને સ્ટેક કરવા માટે વપરાય છે. જો કે, marginસાથે કામ કરતું નથી display: table-cell. પરિણામે, બુટસ્ટ્રેપમાં તમારા કસ્ટમાઇઝેશન પર આધાર રાખીને, તમે કિનારીઓને દૂર કરવા અથવા ફરીથી રંગ કરવા માંગો છો.

IE8 અને સરહદો

ઈન્ટરનેટ એક્સપ્લોરર 8 વાજબી બટન જૂથમાં બટનો પર બોર્ડર્સ રેન્ડર કરતું નથી, પછી ભલે તે ચાલુ હોય <a>કે <button>તત્વો. તેની આસપાસ જવા માટે, દરેક બટનને બીજામાં લપેટો .btn-group.

વધુ માહિતી માટે જુઓ #12476 .

<a>તત્વો સાથે

ફક્ત .btnમાં s ની શ્રેણી લપેટી .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

લિંક્સ બટન તરીકે કામ કરે છે

જો <a>તત્વોનો ઉપયોગ બટનો તરીકે કાર્ય કરવા માટે કરવામાં આવે છે - વર્તમાન પૃષ્ઠની અંદરના અન્ય દસ્તાવેજ અથવા વિભાગમાં નેવિગેટ કરવાને બદલે - ઇન-પેજ કાર્યક્ષમતાને ટ્રિગર કરે છે - તો તેમને પણ યોગ્ય આપવું જોઈએ role="button".

<button>તત્વો સાથે

<button>ઘટકો સાથે વાજબી બટન જૂથોનો ઉપયોગ કરવા માટે , તમારે દરેક બટનને બટન જૂથમાં લપેટી જ જોઈએ . મોટા ભાગના બ્રાઉઝર્સ એલિમેન્ટ્સ માટે યોગ્યતા માટે અમારા CSSને યોગ્ય રીતે લાગુ કરતા નથી <button>, પરંતુ અમે બટન ડ્રોપડાઉનને સમર્થન આપતા હોવાથી, અમે તેની આસપાસ કામ કરી શકીએ છીએ.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

બટન ડ્રોપડાઉન

ડ્રોપડાઉન મેનૂને a ની અંદર મૂકીને .btn-groupઅને યોગ્ય મેનૂ માર્કઅપ પ્રદાન કરીને કોઈપણ બટનનો ઉપયોગ કરો.

પ્લગઇન નિર્ભરતા

બટન ડ્રોપડાઉનને તમારા બુટસ્ટ્રેપના સંસ્કરણમાં ડ્રોપડાઉન પ્લગઇન શામેલ કરવાની જરૂર છે.

સિંગલ બટન ડ્રોપડાઉન

કેટલાક મૂળભૂત માર્કઅપ ફેરફારો સાથે બટનને ડ્રોપડાઉન ટૉગલમાં ફેરવો.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

સ્પ્લિટ બટન ડ્રોપડાઉન

એ જ રીતે, સમાન માર્કઅપ ફેરફારો સાથે સ્પ્લિટ બટન ડ્રોપડાઉન બનાવો, માત્ર એક અલગ બટન સાથે.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

કદ બદલવાનું

બટન ડ્રોપડાઉન તમામ કદના બટનો સાથે કામ કરે છે.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ડ્રોપઅપ વિવિધતા

પેરેન્ટમાં ઉમેરીને તત્વો ઉપરના ડ્રોપડાઉન મેનુને ટ્રિગર .dropupકરો.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

ઇનપુટ જૂથો

કોઈપણ ટેક્સ્ટ-આધારિતની પહેલાં, પછી અથવા બંને બાજુએ ટેક્સ્ટ અથવા બટનો ઉમેરીને ફોર્મ નિયંત્રણોને વિસ્તૃત કરો <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

અમે એક ઇનપુટ જૂથમાં બહુવિધ ફોર્મ-નિયંત્રણોને સમર્થન આપતા નથી.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

કદ બદલવાનું

સંબંધિત ફોર્મ સાઈઝિંગ વર્ગોને .input-groupપોતાની સાથે ઉમેરો અને અંદરની સામગ્રીઓનું કદ આપોઆપ બદલાઈ જશે-દરેક તત્વ પર ફોર્મ નિયંત્રણ કદ વર્ગોનું પુનરાવર્તન કરવાની જરૂર નથી.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

ચેકબોક્સ અને રેડિયો એડઓન્સ

કોઈપણ ચેકબોક્સ અથવા રેડિયો વિકલ્પને ટેક્સ્ટને બદલે ઇનપુટ જૂથના એડનની અંદર મૂકો.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

બટન એડઓન્સ

ઇનપુટ જૂથોમાંના બટનો થોડા અલગ હોય છે અને એક વધારાના સ્તરના માળખાની જરૂર હોય છે. ની જગ્યાએ , તમારે બટનોને વીંટાળવા .input-group-addonમાટે ઉપયોગ કરવાની જરૂર પડશે . .input-group-btnડિફૉલ્ટ બ્રાઉઝર શૈલીઓને કારણે આ જરૂરી છે જેને ઓવરરાઇડ કરી શકાતી નથી.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ડ્રોપડાઉન સાથે બટનો

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

વિભાજિત બટનો

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

બહુવિધ બટનો

જ્યારે તમારી પાસે પ્રતિ બાજુ માત્ર એક એડ-ઓન હોઈ શકે છે, ત્યારે તમારી પાસે એકની અંદર બહુવિધ બટનો હોઈ શકે છે .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

નેવ્સ

બુટસ્ટ્રેપમાં ઉપલબ્ધ Navs એ બેઝ .navક્લાસથી શરૂ કરીને, તેમજ શેર કરેલા સ્ટેટ્સ સાથે માર્કઅપ શેર કર્યું છે. દરેક શૈલી વચ્ચે સ્વિચ કરવા માટે સંશોધક વર્ગોને સ્વેપ કરો.

ટૅબ પૅનલ માટે navs નો ઉપયોગ કરવા માટે JavaScript ટૅબ્સ પ્લગઇન જરૂરી છે

ટેબેબલ વિસ્તારો સાથેના ટેબ માટે, તમારે ટૅબ્સ JavaScript પ્લગઇનનો ઉપયોગ કરવો આવશ્યક છે . માર્કઅપને વધારાની roleઅને ARIA વિશેષતાઓની પણ જરૂર પડશે - વધુ વિગતો માટે પ્લગઇનનું ઉદાહરણ માર્કઅપ જુઓ.

નેવિગેશન તરીકે ઉપયોગમાં લેવાતા navs સુલભ બનાવો

જો તમે નેવિગેશન બાર પ્રદાન કરવા માટે navs નો ઉપયોગ કરી રહ્યાં છો, તો role="navigation"ના સૌથી લોજિકલ પેરેન્ટ કન્ટેનરમાં એક ઉમેરવાની ખાતરી કરો અથવા સમગ્ર નેવિગેશનની આસપાસ <ul>એક તત્વ લપેટી લો. <nav>ભૂમિકાને <ul>પોતાનામાં ઉમેરો નહીં, કારણ કે આ સહાયક તકનીકો દ્વારા તેને વાસ્તવિક સૂચિ તરીકે જાહેર કરવામાં અટકાવશે.

નોંધ કરો કે વર્ગને બેઝ ક્લાસની .nav-tabsજરૂર છે ..nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

તે જ HTML લો, પરંતુ .nav-pillsતેના બદલે ઉપયોગ કરો:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ગોળીઓ પણ ઊભી સ્ટેકેબલ છે. ફક્ત ઉમેરો .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

સાથે 768px કરતાં વધુ પહોળી સ્ક્રીન પર સરળતાથી ટેબ અથવા પિલ્સને તેમના પિતૃની સમાન પહોળાઈ બનાવો .nav-justified. નાની સ્ક્રીન પર, નેવી લિંક્સ સ્ટેક કરવામાં આવે છે.

વાજબી navbar નેવી લિંક્સ હાલમાં સમર્થિત નથી.

સફારી અને રિસ્પોન્સિવ વાજબી navs

v9.1.2 મુજબ, સફારી એક બગ પ્રદર્શિત કરે છે જેમાં તમારા બ્રાઉઝરનું આડું માપ બદલવાથી વાજબી નેવીમાં રેન્ડરિંગ ભૂલો થાય છે જે રિફ્રેશ થવા પર સાફ થાય છે. આ બગ વાજબી નેવી ઉદાહરણમાં પણ બતાવવામાં આવે છે .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

કોઈપણ નેવી ઘટક (ટેબ્સ અથવા ગોળીઓ) માટે, ગ્રે લિંક્સ.disabled માટે ઉમેરો અને કોઈ હોવર અસરો નહીં .

લિંક કાર્યક્ષમતા પ્રભાવિત નથી

આ વર્ગ ફક્ત <a>તેના દેખાવમાં ફેરફાર કરશે, તેની કાર્યક્ષમતા નહીં. અહીં લિંક્સને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરો.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

થોડા વધારાના HTML અને ડ્રોપડાઉન JavaScript પ્લગઇન સાથે ડ્રોપડાઉન મેનુ ઉમેરો .

ડ્રોપડાઉન સાથે ટૅબ્સ

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ડ્રોપડાઉન સાથે ગોળીઓ

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

નવબાર

Navbars પ્રતિભાવશીલ મેટા ઘટકો છે જે તમારી એપ્લિકેશન અથવા સાઇટ માટે નેવિગેશન હેડર તરીકે સેવા આપે છે. તેઓ મોબાઇલ વ્યૂમાં સંકુચિત થવાનું શરૂ કરે છે (અને ટૉગલ કરી શકાય તેવું છે) અને ઉપલબ્ધ વ્યૂપોર્ટની પહોળાઈ વધે તેમ આડી બની જાય છે.

વાજબી navbar નેવી લિંક્સ હાલમાં સમર્થિત નથી.

વહેતી સામગ્રી

કારણ કે બુટસ્ટ્રેપ જાણતું નથી કે તમારા નવબારમાં સામગ્રીને કેટલી જગ્યાની જરૂર છે, તમને બીજી હરોળમાં સામગ્રી વીંટાળવામાં સમસ્યા આવી શકે છે. આને ઉકેલવા માટે, તમે આ કરી શકો છો:

  1. નવબાર વસ્તુઓની માત્રા અથવા પહોળાઈ ઘટાડો.
  2. રિસ્પોન્સિવ યુટિલિટી ક્લાસનો ઉપયોગ કરીને ચોક્કસ સ્ક્રીન સાઇઝ પર અમુક નેવબાર આઇટમ છુપાવો .
  3. તમારા નેવબાર સંકુચિત અને આડા મોડ વચ્ચે સ્વિચ કરે છે તે બિંદુને બદલો. ચલને કસ્ટમાઇઝ કરો @grid-float-breakpointઅથવા તમારી પોતાની મીડિયા ક્વેરી ઉમેરો.

JavaScript પ્લગઇનની જરૂર છે

જો JavaScript અક્ષમ હોય અને વ્યુપોર્ટ એટલો સાંકડો હોય કે navbar તૂટી જાય, તો navbar ને વિસ્તૃત કરવું અને ની અંદરની સામગ્રી જોવાનું અશક્ય હશે .navbar-collapse.

રિસ્પોન્સિવ નેવબારને તમારા બુટસ્ટ્રેપના સંસ્કરણમાં સંકુચિત પ્લગઇન શામેલ કરવાની જરૂર છે.

સંકુચિત મોબાઇલ નવબાર બ્રેકપોઇન્ટ બદલવું

જ્યારે વ્યૂપોર્ટ કરતાં સાંકડો હોય ત્યારે નેવબાર તેના વર્ટિકલ મોબાઇલ વ્યૂમાં તૂટી જાય છે @grid-float-breakpointઅને જ્યારે વ્યૂપોર્ટ ઓછામાં ઓછી @grid-float-breakpointપહોળાઈમાં હોય ત્યારે તેના આડા બિન-મોબાઈલ વ્યૂમાં વિસ્તરે છે. જ્યારે નેવબાર તૂટી/વિસ્તરે ત્યારે નિયંત્રિત કરવા માટે આ ચલને ઓછા સ્ત્રોતમાં સમાયોજિત કરો. ડિફૉલ્ટ મૂલ્ય છે 768px(સૌથી નાની "નાની" અથવા "ટેબ્લેટ" સ્ક્રીન).

નેવબાર્સ સુલભ બનાવો

એલિમેન્ટનો ઉપયોગ કરવાનું સુનિશ્ચિત કરો <nav>અથવા, જો વધુ સામાન્ય તત્વ જેમ કે a નો ઉપયોગ કરતા હો, તો સહાયક ટેક્નોલોજીના વપરાશકર્તાઓ માટે તેને સીમાચિહ્ન પ્રદેશ તરીકે સ્પષ્ટ રીતે ઓળખવા માટે દરેક નેવબારમાં <div>ઉમેરો .role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

એક માટે ટેક્સ્ટને સ્વેપ કરીને નવબાર બ્રાન્ડને તમારી પોતાની છબી સાથે બદલો <img>. તેનું પોતાનું પેડિંગ અને ઊંચાઈ હોવાથી .navbar-brand, તમારે તમારી છબીના આધારે કેટલાક CSSને ઓવરરાઇડ કરવાની જરૂર પડી શકે છે.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formયોગ્ય ઊભી સંરેખણ અને સંકુચિત વર્તણૂક માટે સાંકડા વ્યુપોર્ટ્સમાં ફોર્મ સામગ્રીને અંદર મૂકો . તે navbar સામગ્રીમાં ક્યાં રહે છે તે નક્કી કરવા માટે ગોઠવણી વિકલ્પોનો ઉપયોગ કરો.

હેડ અપ તરીકે , તેનો મોટાભાગનો કોડ મિક્સિન દ્વારા .navbar-formશેર કરે છે . કેટલાક ફોર્મ નિયંત્રણો, જેમ કે ઇનપુટ જૂથો, નેવબારમાં યોગ્ય રીતે બતાવવા માટે નિશ્ચિત પહોળાઈની જરૂર પડી શકે છે..form-inline

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

મોબાઇલ ઉપકરણ ચેતવણીઓ

મોબાઇલ ઉપકરણો પર નિશ્ચિત તત્વોમાં ફોર્મ નિયંત્રણોનો ઉપયોગ કરવા સંબંધિત કેટલીક ચેતવણીઓ છે. વિગતો માટે અમારા બ્રાઉઝર સપોર્ટ દસ્તાવેજો જુઓ .

હંમેશા લેબલ્સ ઉમેરો

જો તમે દરેક ઇનપુટ માટે લેબલ શામેલ ન કરો તો સ્ક્રીન રીડર્સને તમારા ફોર્મમાં મુશ્કેલી પડશે. આ ઇનલાઇન સ્વરૂપો માટે, તમે .sr-onlyવર્ગનો ઉપયોગ કરીને લેબલ્સ છુપાવી શકો છો. સહાયક તકનીકો માટે લેબલ પ્રદાન કરવાની વધુ વૈકલ્પિક પદ્ધતિઓ છે, જેમ કે aria-label, aria-labelledbyઅથવા titleવિશેષતા. જો આમાંથી કોઈ હાજર ન હોય, તો સ્ક્રીન રીડર્સ placeholderજો હાજર હોય તો એટ્રિબ્યુટનો ઉપયોગ કરવાનો આશરો લઈ શકે છે, પરંતુ નોંધ લો કે placeholderઅન્ય લેબલિંગ પદ્ધતિઓ માટે રિપ્લેસમેન્ટ તરીકે ઉપયોગ કરવાની સલાહ આપવામાં આવતી નથી.

નેવબારમાં ઊભી રીતે કેન્દ્રમાં રાખવા માટે a માં રહેતા ન હોય તેવા તત્વોમાં .navbar-btnવર્ગ ઉમેરો .<button><form>

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

સંદર્ભ-વિશિષ્ટ ઉપયોગ

પ્રમાણભૂત બટન વર્ગોની જેમ , પર અને તત્વોનો .navbar-btnઉપયોગ કરી શકાય છે. જો કે, અંદરના તત્વો પર ન તો પ્રમાણભૂત બટન વર્ગોનો ઉપયોગ થવો જોઈએ .<a><input>.navbar-btn<a>.navbar-nav

.navbar-textસામાન્ય રીતે <p>યોગ્ય લીડિંગ અને રંગ માટે ટેગ પર, સાથે ઘટકમાં ટેક્સ્ટની સ્ટ્રિંગ્સને લપેટી .

<p class="navbar-text">Signed in as Mark Otto</p>

પ્રમાણભૂત લિંક્સનો ઉપયોગ કરતા લોકો માટે કે જે નિયમિત નેવિગેશન ઘટકની અંદર નથી, .navbar-linkડિફોલ્ટ અને ઇનવર્સ નેવબાર વિકલ્પો માટે યોગ્ય રંગો ઉમેરવા માટે વર્ગનો ઉપયોગ કરો.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftઅથવા .navbar-rightઉપયોગિતા વર્ગોનો ઉપયોગ કરીને નેવી લિંક્સ, ફોર્મ્સ, બટનો અથવા ટેક્સ્ટને સંરેખિત કરો . બંને વર્ગો નિર્દિષ્ટ દિશામાં CSS ફ્લોટ ઉમેરશે. ઉદાહરણ તરીકે, નેવી લિંક્સને સંરેખિત કરવા માટે, તેમને <ul>સંબંધિત ઉપયોગિતા વર્ગ લાગુ સાથે અલગમાં મૂકો.

.pull-leftઆ વર્ગો અને ની મિક્સ-એડી આવૃત્તિઓ છે .pull-right, પરંતુ તેઓ સમગ્ર ઉપકરણના કદમાં નેવબાર ઘટકોના સરળ સંચાલન માટે મીડિયા ક્વેરીઝ માટે વિસ્તારિત છે.

બહુવિધ ઘટકોને જમણે સંરેખિત કરવું

નવબાર હાલમાં બહુવિધ .navbar-rightવર્ગો સાથે મર્યાદા ધરાવે છે. .navbar-rightયોગ્ય રીતે જગ્યા સામગ્રી માટે, અમે છેલ્લા ઘટક પર નકારાત્મક માર્જિનનો ઉપયોગ કરીએ છીએ . જ્યારે તે વર્ગનો ઉપયોગ કરતા બહુવિધ ઘટકો હોય, ત્યારે આ માર્જિન હેતુ મુજબ કામ કરતા નથી.

જ્યારે આપણે તે ઘટકને v4 માં ફરીથી લખી શકીએ ત્યારે અમે આની ફરી મુલાકાત કરીશું.

કેન્દ્ર અને પેડ નવબારમાં સામગ્રી ઉમેરો અને .navbar-fixed-topશામેલ કરો ..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

બોડી પેડિંગ જરૂરી છે

નિશ્ચિત નવબાર તમારી અન્ય સામગ્રીને ઓવરલે કરશે, સિવાય કે તમે paddingની ટોચ પર ઉમેરશો <body>. તમારા પોતાના મૂલ્યો અજમાવી જુઓ અથવા નીચે આપેલા અમારા સ્નિપેટનો ઉપયોગ કરો. ટીપ: ડિફૉલ્ટ રૂપે, navbar 50px ઊંચો છે.

body { padding-top: 70px; }

કોર બુટસ્ટ્રેપ CSS પછી આનો સમાવેશ કરવાની ખાતરી કરો .

કેન્દ્ર અને પેડ નવબારમાં સામગ્રી ઉમેરો અને .navbar-fixed-bottomશામેલ કરો ..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

બોડી પેડિંગ જરૂરી છે

નિશ્ચિત નવબાર તમારી અન્ય સામગ્રીને ઓવરલે કરશે, સિવાય કે તમે paddingની નીચે ઉમેરશો <body>. તમારા પોતાના મૂલ્યો અજમાવી જુઓ અથવા નીચે આપેલા અમારા સ્નિપેટનો ઉપયોગ કરો. ટીપ: ડિફૉલ્ટ રૂપે, navbar 50px ઊંચો છે.

body { padding-bottom: 70px; }

કોર બુટસ્ટ્રેપ CSS પછી આનો સમાવેશ કરવાની ખાતરી કરો .

સંપૂર્ણ-પહોળાઈનો નેવબાર બનાવો કે જે પૃષ્ઠ સાથે સ્ક્રોલ થઈ જાય છે અને તેને કેન્દ્રમાં અથવા પેડ નેવબાર સામગ્રી ઉમેરીને .navbar-static-topઅને શામેલ કરે છે..container.container-fluid

વર્ગોથી વિપરીત .navbar-fixed-*, તમારે પર કોઈપણ પેડિંગ બદલવાની જરૂર નથી body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

ઉમેરીને નવબારના દેખાવમાં ફેરફાર કરો .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

બ્રેડક્રમ્સ

નેવિગેશનલ હાયરાર્કીમાં વર્તમાન પૃષ્ઠનું સ્થાન સૂચવો.

વિભાજકો આપમેળે CSS માં :beforeઅને દ્વારા ઉમેરવામાં આવે છે content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

પૃષ્ઠ ક્રમાંકન

બહુ-પૃષ્ઠ પૃષ્ઠ ક્રમાંકન ઘટક અથવા સરળ પેજર વિકલ્પ સાથે તમારી સાઇટ અથવા એપ્લિકેશન માટે પૃષ્ઠ ક્રમાંકન લિંક્સ પ્રદાન કરો .

ડિફૉલ્ટ પૃષ્ઠ ક્રમાંકન

Rdio દ્વારા પ્રેરિત સરળ પૃષ્ઠ ક્રમાંકન, એપ્લિકેશનો અને શોધ પરિણામો માટે સરસ. મોટો બ્લોક ચૂકી જવો મુશ્કેલ છે, સરળતાથી માપી શકાય છે અને મોટા ક્લિક વિસ્તારો પૂરા પાડે છે.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

પૃષ્ઠ ક્રમાંકન ઘટકનું લેબલીંગ

<nav>પૃષ્ઠ ક્રમાંકન ઘટકને સ્ક્રીન રીડર્સ અને અન્ય સહાયક તકનીકોના નેવિગેશન વિભાગ તરીકે ઓળખવા માટે એક ઘટકમાં આવરિત હોવું જોઈએ . વધુમાં, કારણ કે પૃષ્ઠમાં પહેલાથી જ આવા એક કરતાં વધુ નેવિગેશન વિભાગ (જેમ કે હેડરમાં પ્રાથમિક નેવિગેશન, અથવા સાઇડબાર નેવિગેશન) હોવાની શક્યતા છે, તેના હેતુને પ્રતિબિંબિત કરતા વર્ણનાત્મક aria-labelપ્રદાન કરવાની સલાહ આપવામાં આવે છે. <nav>ઉદાહરણ તરીકે, જો પૃષ્ઠ ક્રમાંકન ઘટકનો ઉપયોગ શોધ પરિણામોના સમૂહ વચ્ચે નેવિગેટ કરવા માટે થાય છે, તો યોગ્ય લેબલ હોઈ શકે છે aria-label="Search results pages".

અક્ષમ અને સક્રિય રાજ્યો

લિંક્સ વિવિધ સંજોગો માટે કસ્ટમાઇઝ કરી શકાય છે. .disabledક્લિક ન કરી શકાય તેવી લિંક્સ માટે અને .activeવર્તમાન પૃષ્ઠ સૂચવવા માટે ઉપયોગ કરો .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

અમે ભલામણ કરીએ છીએ કે તમે <span>ઇચ્છિત શૈલીઓ જાળવી રાખતી વખતે ક્લિક કાર્યક્ષમતાને દૂર કરવા માટે, માટે સક્રિય અથવા અક્ષમ કરેલ એન્કરને સ્વેપ કરો અથવા અગાઉના/આગલા તીરોના કિસ્સામાં એન્કરને છોડી દો.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

કદ બદલવાનું

ફેન્સી મોટા અથવા નાના પૃષ્ઠ ક્રમાંકન? ઉમેરો .pagination-lgઅથવા .pagination-smવધારાના કદ માટે.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

પેજર

પ્રકાશ માર્કઅપ અને શૈલીઓ સાથે સરળ પૃષ્ઠ ક્રમાંકન અમલીકરણ માટે ઝડપી અગાઉની અને આગલી લિંક્સ. તે બ્લોગ્સ અથવા સામયિકો જેવી સરળ સાઇટ્સ માટે સરસ છે.

મૂળભૂત ઉદાહરણ

મૂળભૂત રીતે, પેજર લિંક્સને કેન્દ્રમાં રાખે છે.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

વૈકલ્પિક રીતે, તમે દરેક લિંકને બાજુઓ પર ગોઠવી શકો છો:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

વૈકલ્પિક અક્ષમ સ્થિતિ

પેજર લિંક્સ .disabledપૃષ્ઠ ક્રમાંકમાંથી સામાન્ય ઉપયોગિતા વર્ગનો પણ ઉપયોગ કરે છે.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

લેબલ્સ

ઉદાહરણ

ઉદાહરણ મથાળું નવું

ઉદાહરણ મથાળું નવું

ઉદાહરણ મથાળું નવું

ઉદાહરણ મથાળું નવું

ઉદાહરણ મથાળું નવું
ઉદાહરણ મથાળું નવું
<h3>Example heading <span class="label label-default">New</span></h3>

ઉપલબ્ધ વિવિધતા

લેબલનો દેખાવ બદલવા માટે નીચે દર્શાવેલ મોડિફાયર વર્ગોમાંથી કોઈપણ ઉમેરો.

ડિફોલ્ટ પ્રાથમિક સફળતા માહિતી ચેતવણી જોખમ
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ટન લેબલ્સ છે?

જ્યારે તમારી પાસે સાંકડા કન્ટેનરમાં ડઝનેક ઇનલાઇન લેબલ્સ હોય ત્યારે રેન્ડરિંગ સમસ્યાઓ ઊભી થઈ શકે છે, જેમાં પ્રત્યેકનું પોતાનું inline-blockતત્વ હોય છે (જેમ કે આઇકન). આની આસપાસનો રસ્તો સેટિંગ છે display: inline-block;. સંદર્ભ અને ઉદાહરણ માટે, #13219 જુઓ .

બેજ

<span class="badge">લિંક્સ, બુટસ્ટ્રેપ નેવ્સ અને વધુમાં ઉમેરીને નવી અથવા ન વાંચેલી આઇટમ્સને સરળતાથી હાઇલાઇટ કરો.

ઇનબોક્સ42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

સ્વયં પતન

જ્યારે કોઈ નવી અથવા વાંચ્યા વગરની આઇટમ્સ ન હોય, ત્યારે બેજ ખાલી પડી જશે (CSS ના :emptyપસંદગીકર્તા દ્વારા) જો અંદર કોઈ સામગ્રી અસ્તિત્વમાં ન હોય.

ક્રોસ બ્રાઉઝર સુસંગતતા

ઈન્ટરનેટ એક્સ્પ્લોરર 8 માં બેજેસ સ્વયંભૂ થઈ જશે નહીં કારણ કે તેમાં :emptyપસંદગીકાર માટે સપોર્ટનો અભાવ છે.

સક્રિય નેવી સ્ટેટ્સ માટે અનુકૂળ

પિલ નેવિગેશનમાં સક્રિય સ્થિતિમાં બેજ મૂકવા માટે બિલ્ટ-ઇન શૈલીઓનો સમાવેશ કરવામાં આવ્યો છે.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

જમ્બોટ્રોન

એક હલકો, લવચીક ઘટક જે વૈકલ્પિક રીતે તમારી સાઇટ પર મુખ્ય સામગ્રી પ્રદર્શિત કરવા માટે સમગ્ર વ્યૂપોર્ટને વિસ્તૃત કરી શકે છે.

હેલો, વિશ્વ!

આ એક સરળ હીરો યુનિટ છે, જે વૈશિષ્ટિકૃત સામગ્રી અથવા માહિતી પર વિશેષ ધ્યાન આપવા માટે એક સરળ જમ્બોટ્રોન-શૈલી ઘટક છે.

વધુ શીખો

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

જમ્બોટ્રોનને સંપૂર્ણ પહોળાઈ અને ગોળાકાર ખૂણા વિના બનાવવા માટે, તેને બધાની બહાર મૂકો .containerઅને તેના બદલે .containerઅંદર ઉમેરો.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

પૃષ્ઠ હેડર

h1પૃષ્ઠ પર સામગ્રીના વિભાગોને યોગ્ય રીતે બહાર કાઢવા અને વિભાજન કરવા માટે એક સરળ શેલ . તે h1ના મૂળભૂત smallતત્વનો ઉપયોગ કરી શકે છે, તેમજ મોટાભાગના અન્ય ઘટકો (વધારાની શૈલીઓ સાથે).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

થંબનેલ્સ

છબીઓ, વિડિઓઝ, ટેક્સ્ટ અને વધુના ગ્રીડને સરળતાથી પ્રદર્શિત કરવા માટે થંબનેલ ઘટક સાથે બુટસ્ટ્રેપની ગ્રીડ સિસ્ટમને વિસ્તૃત કરો.

જો તમે વિવિધ ઊંચાઈઓ અને/અથવા પહોળાઈના થંબનેલ્સની Pinterest-જેવી પ્રસ્તુતિ શોધી રહ્યાં છો, તો તમારે તૃતીય-પક્ષ પ્લગઈન જેમ કે મેસનરી , આઈસોટોપ અથવા સાલ્વાટોરનો ઉપયોગ કરવાની જરૂર પડશે .

મૂળભૂત ઉદાહરણ

ડિફૉલ્ટ રૂપે, બુટસ્ટ્રેપની થંબનેલ્સ ન્યૂનતમ જરૂરી માર્કઅપ સાથે લિંક કરેલી છબીઓ દર્શાવવા માટે ડિઝાઇન કરવામાં આવી છે.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

કસ્ટમ સામગ્રી

થોડા વધારાના માર્કઅપ સાથે, થંબનેલ્સમાં હેડિંગ, ફકરા અથવા બટનો જેવી કોઈપણ પ્રકારની HTML સામગ્રી ઉમેરવાનું શક્ય છે.

100%x200

થંબનેલ લેબલ

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.

બટન બટન

100%x200

થંબનેલ લેબલ

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.

બટન બટન

100%x200

થંબનેલ લેબલ

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.

બટન બટન

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

ચેતવણીઓ

મુઠ્ઠીભર ઉપલબ્ધ અને લવચીક ચેતવણી સંદેશાઓ સાથે લાક્ષણિક વપરાશકર્તા ક્રિયાઓ માટે સંદર્ભિત પ્રતિસાદ સંદેશાઓ પ્રદાન કરો.

ઉદાહરણો

મૂળભૂત ચેતવણી સંદેશાઓ માટે કોઈપણ ટેક્સ્ટ અને વૈકલ્પિક બરતરફ બટન .alertઅને ચાર સંદર્ભિત વર્ગોમાંથી એક (દા.ત., ) લપેટો..alert-success

કોઈ ડિફોલ્ટ વર્ગ નથી

ચેતવણીઓમાં ડિફોલ્ટ વર્ગો હોતા નથી, માત્ર આધાર અને સુધારક વર્ગો. ડિફૉલ્ટ ગ્રે એલર્ટ ખૂબ અર્થપૂર્ણ નથી, તેથી તમારે સંદર્ભ વર્ગ દ્વારા એક પ્રકારનો ઉલ્લેખ કરવો જરૂરી છે. સફળતા, માહિતી, ચેતવણી અથવા જોખમમાંથી પસંદ કરો.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

બરતરફ કરી શકાય તેવી ચેતવણીઓ

.alert-dismissibleવૈકલ્પિક અને બંધ બટન ઉમેરીને કોઈપણ ચેતવણી પર બિલ્ડ કરો.

JavaScript ચેતવણી પ્લગઇનની જરૂર છે

સંપૂર્ણ રીતે કાર્ય કરવા માટે, કાઢી શકાય તેવી ચેતવણીઓ, તમારે ચેતવણીઓ JavaScript પ્લગઇનનો ઉપયોગ કરવો આવશ્યક છે .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

બધા ઉપકરણો પર યોગ્ય વર્તનની ખાતરી કરો

ડેટા એટ્રિબ્યુટ <button>સાથે તત્વનો ઉપયોગ કરવાની ખાતરી કરો .data-dismiss="alert"

.alert-linkકોઈપણ ચેતવણીમાં ઝડપથી મેળ ખાતી રંગીન લિંક્સ પ્રદાન કરવા માટે ઉપયોગિતા વર્ગનો ઉપયોગ કરો .

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

પ્રગતિ પટ્ટીઓ

સરળ છતાં લવચીક પ્રોગ્રેસ બાર સાથે વર્કફ્લો અથવા ક્રિયાની પ્રગતિ પર અપ-ટૂ-ડેટ પ્રતિસાદ આપો.

ક્રોસ બ્રાઉઝર સુસંગતતા

પ્રોગ્રેસ બાર તેમની કેટલીક અસરો પ્રાપ્ત કરવા માટે CSS3 સંક્રમણો અને એનિમેશનનો ઉપયોગ કરે છે. આ સુવિધાઓ Internet Explorer 9 અને Firefox ની નીચેની અથવા જૂની આવૃત્તિઓમાં સમર્થિત નથી. ઓપેરા 12 એનિમેશનને સપોર્ટ કરતું નથી.

સામગ્રી સુરક્ષા નીતિ (CSP) સુસંગતતા

જો તમારી વેબસાઇટમાં સામગ્રી સુરક્ષા નીતિ (CSP) છે જે મંજૂરી આપતી નથી , તો પછી તમે નીચેના અમારા ઉદાહરણોમાં બતાવ્યા પ્રમાણે પ્રગતિ પટ્ટીની પહોળાઈ સેટ કરવા style-src 'unsafe-inline'માટે ઇનલાઇન વિશેષતાઓનો ઉપયોગ કરી શકશો નહીં . styleકડક CSP સાથે સુસંગત હોય તેવી પહોળાઈને સેટ કરવાની વૈકલ્પિક પદ્ધતિઓમાં થોડી કસ્ટમ JavaScript (જે સેટ કરે છે element.style.width) અથવા કસ્ટમ CSS વર્ગોનો ઉપયોગ કરવાનો સમાવેશ થાય છે.

મૂળભૂત ઉદાહરણ

ડિફૉલ્ટ પ્રોગ્રેસ બાર.

60% પૂર્ણ
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

લેબલ સાથે

દૃશ્યમાન ટકાવારી બતાવવા માટે પ્રોગ્રેસ બારમાંથી ક્લાસ <span>સાથે દૂર કરો ..sr-only

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

ઓછી ટકાવારી માટે પણ લેબલ ટેક્સ્ટ સુવાચ્ય રહે તેની ખાતરી કરવા માટે min-width, પ્રોગ્રેસ બારમાં a ઉમેરવાનું વિચારો.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

સંદર્ભિત વિકલ્પો

પ્રોગ્રેસ બાર સાતત્યપૂર્ણ શૈલીઓ માટે સમાન બટન અને ચેતવણી વર્ગોમાંથી કેટલાકનો ઉપયોગ કરે છે.

40% પૂર્ણ (સફળતા)
20% પૂર્ણ
60% પૂર્ણ (ચેતવણી)
80% પૂર્ણ (ખતરો)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

બીજા રંગના પટાવાળું

પટ્ટાવાળી અસર બનાવવા માટે ઢાળનો ઉપયોગ કરે છે. IE9 અને નીચે ઉપલબ્ધ નથી.

40% પૂર્ણ (સફળતા)
20% પૂર્ણ
60% પૂર્ણ (ચેતવણી)
80% પૂર્ણ (ખતરો)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

એનિમેટેડ

જમણેથી ડાબે પટ્ટાઓને એનિમેટ .activeકરવા માટે ઉમેરો . .progress-bar-stripedIE9 અને નીચે ઉપલબ્ધ નથી.

45% પૂર્ણ
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

સ્ટૅક્ડ

.progressતેમને સ્ટેક કરવા માટે એકમાં બહુવિધ બાર મૂકો .

35% પૂર્ણ (સફળતા)
20% પૂર્ણ (ચેતવણી)
10% પૂર્ણ (ખતરો)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

મીડિયા ઑબ્જેક્ટ

વિવિધ પ્રકારના ઘટકો (જેમ કે બ્લોગ ટિપ્પણીઓ, ટ્વીટ્સ, વગેરે) બનાવવા માટે અમૂર્ત ઑબ્જેક્ટ શૈલીઓ કે જેમાં ટેક્સ્ટની સામગ્રીની સાથે ડાબે-અથવા જમણે-સંરેખિત છબી દર્શાવવામાં આવે છે.

ડિફૉલ્ટ મીડિયા

ડિફૉલ્ટ મીડિયા કન્ટેન્ટ બ્લોકની ડાબી કે જમણી બાજુએ મીડિયા ઑબ્જેક્ટ (છબીઓ, વિડિયો, ઑડિયો) પ્રદર્શિત કરે છે.

મીડિયા હેડિંગ

ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. 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. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

વર્ગો .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.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

મીડિયા સૂચિ

થોડી વધારાની માર્કઅપ સાથે, તમે સૂચિની અંદર મીડિયાનો ઉપયોગ કરી શકો છો (ટિપ્પણી થ્રેડો અથવા લેખોની સૂચિ માટે ઉપયોગી).

  • મીડિયા હેડિંગ

    ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. 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. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

સૂચિ જૂથ

સૂચિ જૂથો માત્ર ઘટકોની સરળ સૂચિ જ નહીં, પરંતુ કસ્ટમ સામગ્રી સાથે જટિલ મુદ્દાઓ પ્રદર્શિત કરવા માટે એક લવચીક અને શક્તિશાળી ઘટક છે.

મૂળભૂત ઉદાહરણ

સૌથી મૂળભૂત સૂચિ જૂથ એ સૂચિની આઇટમ્સ અને યોગ્ય વર્ગો સાથેની અવ્યવસ્થિત સૂચિ છે. તેના પર અનુસરતા વિકલ્પો અથવા જરૂરિયાત મુજબ તમારા પોતાના CSS સાથે બનાવો.

  • Cras justo odio
  • માં ડેપીબસ એસી ફેસિલિસીસ
  • મોરબી લીઓ રીસસ
  • પોર્ટા એસી કોન્સેકટુર એસી
  • ઇરોસ પર વેસ્ટિબુલમ
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

બેજ

કોઈપણ સૂચિ જૂથ આઇટમમાં બેજેસ ઘટક ઉમેરો અને તે આપમેળે જમણી બાજુએ સ્થિત થશે.

  • 14Cras justo odio
  • 2માં ડેપીબસ એસી ફેસિલિસીસ
  • 1મોરબી લીઓ રીસસ
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

લિંક કરેલી વસ્તુઓ

સૂચિ આઇટમ્સને બદલે એન્કર ટૅગ્સનો ઉપયોગ કરીને સૂચિ જૂથ આઇટમ્સને લિંક કરો (જેનો અર્થ એ પણ છે કે <div>ની જગ્યાએ માતાપિતા <ul>). દરેક તત્વની આસપાસ વ્યક્તિગત માતાપિતાની જરૂર નથી.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

બટન વસ્તુઓ

સૂચિ જૂથની આઇટમ્સ સૂચિની વસ્તુઓને બદલે બટનો હોઈ શકે છે (જેનો અર્થ એ પણ છે કે માતાપિતાને <div>બદલે <ul>). દરેક તત્વની આસપાસ વ્યક્તિગત માતાપિતાની જરૂર નથી. અહીં પ્રમાણભૂત .btnવર્ગોનો ઉપયોગ કરશો નહીં.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

અક્ષમ વસ્તુઓ

અક્ષમ દેખાવા માટે તેને ગ્રે આઉટ કરવા .disabledમાટે a માં ઉમેરો ..list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

સંદર્ભિત વર્ગો

ડિફૉલ્ટ અથવા લિંક કરેલ આઇટમ્સની સૂચિ બનાવવા માટે સંદર્ભિત વર્ગોનો ઉપયોગ કરો. રાજ્યનો પણ સમાવેશ થાય .activeછે.

  • માં ડેપીબસ એસી ફેસિલિસીસ
  • ક્રાસ સીટ અમેટ નિભ લિબેરો
  • પોર્ટા એસી કોન્સેકટુર એસી
  • ઇરોસ પર વેસ્ટિબુલમ
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

કસ્ટમ સામગ્રી

અંદર લગભગ કોઈપણ HTML ઉમેરો, નીચેની જેમ લિંક કરેલ સૂચિ જૂથો માટે પણ.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

પેનલ્સ

હંમેશા જરૂરી ન હોવા છતાં, કેટલીકવાર તમારે તમારા DOMને બોક્સમાં મૂકવાની જરૂર હોય છે. તે પરિસ્થિતિઓ માટે, પેનલ ઘટકનો પ્રયાસ કરો.

મૂળભૂત ઉદાહરણ

ડિફૉલ્ટ રૂપે, .panelકેટલીક સામગ્રીને સમાવવા માટે તમામ મૂળભૂત બોર્ડર અને પેડિંગ લાગુ કરે છે.

મૂળભૂત પેનલ ઉદાહરણ
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

હેડિંગ સાથે પેનલ

સાથે તમારી પેનલમાં સરળતાથી હેડિંગ કન્ટેનર ઉમેરો .panel-heading. તમે પૂર્વ-શૈલીનું મથાળું ઉમેરવા માટે વર્ગ સાથે કોઈપણ <h1>- પણ શામેલ કરી શકો છો. જો કે, - ના ફોન્ટ માપો દ્વારા ઓવરરાઇડ કરવામાં આવે છે .<h6>.panel-title<h1><h6>.panel-heading

યોગ્ય લિંક કલરિંગ માટે, શીર્ષકોની અંદર લિંક્સ મૂકવાની ખાતરી કરો .panel-title.

શીર્ષક વિના પેનલનું મથાળું
પેનલ સામગ્રી

પેનલ શીર્ષક

પેનલ સામગ્રી
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

માં લપેટી બટનો અથવા ગૌણ ટેક્સ્ટ .panel-footer. નોંધ કરો કે પેનલ ફૂટર્સ સંદર્ભિત ભિન્નતાઓનો ઉપયોગ કરતી વખતે રંગો અને બોર્ડર્સને વારસામાં લેતા નથી કારણ કે તે અગ્રભાગમાં હોવાનો હેતુ નથી.

પેનલ સામગ્રી
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

સંદર્ભિત વિકલ્પો

અન્ય ઘટકોની જેમ, કોઈપણ સંદર્ભિત રાજ્ય વર્ગો ઉમેરીને પેનલને ચોક્કસ સંદર્ભ માટે સરળતાથી વધુ અર્થપૂર્ણ બનાવો.

પેનલ શીર્ષક

પેનલ સામગ્રી

પેનલ શીર્ષક

પેનલ સામગ્રી

પેનલ શીર્ષક

પેનલ સામગ્રી

પેનલ શીર્ષક

પેનલ સામગ્રી

પેનલ શીર્ષક

પેનલ સામગ્રી
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

કોષ્ટકો સાથે

.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
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

જો ત્યાં કોઈ પેનલ બોડી ન હોય, તો ઘટક પેનલ હેડરથી ટેબલ પર વિક્ષેપ વિના ખસે છે.

પેનલ હેડિંગ
# પ્રથમ નામ છેલ્લું નામ વપરાશકર્તા નામ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી પક્ષી @Twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

સૂચિ જૂથો સાથે

કોઈપણ પેનલમાં સંપૂર્ણ-પહોળાઈવાળા સૂચિ જૂથોને સરળતાથી શામેલ કરો.

પેનલ હેડિંગ

અહીં કેટલીક ડિફોલ્ટ પેનલ સામગ્રી. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ. એનિયન લેસીનિયા બિબેન્ડમ નુલ્લા સેડ કોન્સેક્ટુર. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • માં ડેપીબસ એસી ફેસિલિસીસ
  • મોરબી લીઓ રીસસ
  • પોર્ટા એસી કોન્સેકટુર એસી
  • ઇરોસ પર વેસ્ટિબુલમ
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

રિસ્પોન્સિવ એમ્બેડ

બ્રાઉઝર્સને તેમના સમાવિષ્ટ બ્લોકની પહોળાઈના આધારે વિડિયો અથવા સ્લાઇડશોના પરિમાણો નક્કી કરવા માટે આંતરિક ગુણોત્તર બનાવીને મંજૂરી આપો જે કોઈપણ ઉપકરણ પર યોગ્ય રીતે માપવામાં આવશે.

નિયમો સીધા <iframe>, <embed>, <video>, અને <object>તત્વો પર લાગુ થાય છે; .embed-responsive-itemજ્યારે તમે અન્ય વિશેષતાઓ માટે સ્ટાઇલ સાથે મેચ કરવા માંગતા હોવ ત્યારે વૈકલ્પિક રીતે સ્પષ્ટ વંશજ વર્ગનો ઉપયોગ કરો.

પ્રો-ટીપ! frameborder="0"તમારે તમારા s માં શામેલ કરવાની જરૂર નથી <iframe>કારણ કે અમે તમારા માટે તેને ઓવરરાઇડ કરીએ છીએ.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

કુવાઓ

મૂળભૂત સારી રીતે

એક તત્વને ઇનસેટ ઇફેક્ટ આપવા માટે તેના પર સાદી અસર તરીકે વેલનો ઉપયોગ કરો.

જુઓ, હું કૂવામાં છું!
<div class="well">...</div>

વૈકલ્પિક વર્ગો

બે વૈકલ્પિક મોડિફાયર વર્ગો સાથે પેડિંગ અને ગોળાકાર ખૂણાઓને નિયંત્રિત કરો.

જુઓ, હું મોટા કૂવામાં છું!
<div class="well well-lg">...</div>
જુઓ, હું નાના કૂવામાં છું!
<div class="well well-sm">...</div>