ઘટકો

નેવિગેશન, ચેતવણીઓ, પોપોવર્સ અને ઘણું બધું પ્રદાન કરવા માટે ડઝનેક ફરીથી વાપરી શકાય તેવા ઘટકો બુટસ્ટ્રેપમાં બનાવવામાં આવ્યા છે.

બટન જૂથો

એક સંયુક્ત ઘટક તરીકે બહુવિધ બટનોને એકસાથે જોડવા માટે બટન જૂથોનો ઉપયોગ કરો. તેમને શ્રેણી <a>અથવા <button>તત્વો સાથે બનાવો.

શ્રેષ્ઠ વ્યવહાર

અમે બટન જૂથો અને ટૂલબારનો ઉપયોગ કરવા માટે નીચેના માર્ગદર્શિકાની ભલામણ કરીએ છીએ:

  • હંમેશા એક જ બટન જૂથમાં સમાન તત્વનો ઉપયોગ કરો, <a>અથવા <button>.
  • સમાન બટન જૂથમાં વિવિધ રંગોના બટનોને મિશ્રિત કરશો નહીં.
  • ટેક્સ્ટ ઉપરાંત અથવા તેના બદલે ચિહ્નોનો ઉપયોગ કરો, પરંતુ જ્યાં યોગ્ય હોય ત્યાં Alt અને શીર્ષક ટેક્સ્ટનો સમાવેશ કરવાની ખાતરી કરો.

ડ્રોપડાઉન (નીચે જુઓ) સાથે સંબંધિત બટન જૂથોને અલગથી બોલાવવા જોઈએ અને હેતુપૂર્વકની વર્તણૂક દર્શાવવા માટે હંમેશા ડ્રોપડાઉન કેરેટનો સમાવેશ કરવો જોઈએ.

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

એન્કર ટેગ બટનો સાથે બનેલ પ્રમાણભૂત બટન જૂથ માટે HTML કેવી રીતે જુએ છે તે અહીં છે:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

ટૂલબાર ઉદાહરણ

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

  1. <div class = "btn-ટૂલબાર" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

ચેકબૉક્સ અને રેડિયો ફ્લેવર્સ

બટન જૂથો રેડિયો તરીકે પણ કાર્ય કરી શકે છે, જ્યાં માત્ર એક બટન સક્રિય હોઈ શકે છે, અથવા ચેકબોક્સ, જ્યાં કોઈપણ સંખ્યાના બટનો સક્રિય હોઈ શકે છે. તે માટે Javascript દસ્તાવેજો જુઓ .

જાવાસ્ક્રિપ્ટ મેળવો »

બટન જૂથોમાં ડ્રોપડાઉન

હેડ અપ! યોગ્ય રેન્ડરીંગ માટે ડ્રોપડાઉન સાથેના બટનો વ્યક્તિગત રીતે પોતાની .btn-groupઅંદર લપેટેલા હોવા જોઈએ..btn-toolbar

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

ઉદાહરણ માર્કઅપ

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "ડ્રોપડાઉન" href = "#" >
  3. ક્રિયા
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ડ્રોપડાઉન-મેનુ" >
  7. <!-- ડ્રોપડાઉન મેનુ લિંક્સ -->
  8. </ul>
  9. </div>

બધા બટન માપો સાથે કામ કરે છે

બટન ડ્રોપડાઉન કોઈપણ કદ પર કામ કરે છે. તમારા બટનનું કદ .btn-large, .btn-smallઅથવા .btn-mini.

જાવાસ્ક્રિપ્ટની જરૂર છે

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

કેટલાક કિસ્સાઓમાં - જેમ કે મોબાઇલ - ડ્રોપડાઉન મેનુ વ્યુપોર્ટની બહાર વિસ્તરશે. તમારે ગોઠવણીને મેન્યુઅલી અથવા કસ્ટમ જાવાસ્ક્રિપ્ટ સાથે ઉકેલવાની જરૂર છે.


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

વિહંગાવલોકન અને ઉદાહરણો

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

માપો

વધારાના બટન વર્ગોનો ઉપયોગ કરો .btn-mini, .btn-smallઅથવા .btn-largeકદ બદલવા માટે.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "ડ્રોપડાઉન-મેનુ પુલ-જમણે" >
  4. <!-- ડ્રોપડાઉન મેનુ લિંક્સ -->
  5. </ul>
  6. </div>

ઉદાહરણ માર્કઅપ

અમે બીજી બટન ક્રિયા પ્રદાન કરવા માટે સામાન્ય બટન ડ્રોપડાઉન પર વિસ્તૃત કરીએ છીએ જે એક અલગ ડ્રોપડાઉન ટ્રિગર તરીકે કાર્ય કરે છે.

  1. <div class = "btn-group" >
  2. <button class = "btn" > ક્રિયા </button>
  3. <બટન વર્ગ = "btn dropdown-toggle" data-toggle = "ડ્રોપડાઉન" >
  4. <span class = "caret" ></span>
  5. </ બટન>
  6. <ul class = "ડ્રોપડાઉન-મેનુ" >
  7. <!-- ડ્રોપડાઉન મેનુ લિંક્સ -->
  8. </ul>
  9. </div>

ડ્રોપઅપ મેનુ

ડ્રોપડાઉન મેનૂઝને તળિયેથી ઉપર સુધી ટોગલ કરી શકાય છે. ના તાત્કાલિક પેરેન્ટમાં એક વર્ગ ઉમેરીને .dropdown-menu. તે ની દિશાને ફ્લિપ કરશે .caretઅને ઉપરથી નીચે જવાને બદલે નીચેથી ઉપર જવા માટે મેનુને જ રિપોઝિશન કરશે.

  1. <div વર્ગ = "btn-ગ્રુપ ડ્રોપઅપ" >
  2. <button class = "btn" > ડ્રોપઅપ </button>
  3. <બટન વર્ગ = "btn dropdown-toggle" data-toggle = "ડ્રોપડાઉન" >
  4. <span class = "caret" ></span>
  5. </ બટન>
  6. <ul class = "ડ્રોપડાઉન-મેનુ" >
  7. <!-- ડ્રોપડાઉન મેનુ લિંક્સ -->
  8. </ul>
  9. </div>

મલ્ટિકોન-પૃષ્ઠ પૃષ્ઠ ક્રમાંક

ક્યારે વાપરવું

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

સ્ટેટફુલ પૃષ્ઠ લિંક્સ

લિંક્સ વૈવિધ્યપૂર્ણ છે અને યોગ્ય વર્ગ સાથે સંખ્યાબંધ સંજોગોમાં કાર્ય કરે છે. .disabledક્લિક ન કરી શકાય તેવી લિંક્સ અને .activeવર્તમાન પૃષ્ઠ માટે.

લવચીક ગોઠવણી

પૃષ્ઠ ક્રમાંકન લિંક્સની ગોઠવણી બદલવા માટે બે વૈકલ્પિક વર્ગોમાંથી એક ઉમેરો: .pagination-centeredઅને .pagination-right.

ઉદાહરણો

ડિફૉલ્ટ પૃષ્ઠ ક્રમાંકન ઘટક લવચીક છે અને સંખ્યાબંધ વિવિધતાઓમાં કાર્ય કરે છે.

માર્કઅપ

એક માં આવરિત <div>, પૃષ્ઠ ક્રમાંકન માત્ર એક છે <ul>.

  1. <div વર્ગ = "પેજીકરણ" >
  2. <ul>
  3. <li><a href = "#" > પહેલાનું </a></li>
  4. <li class = "સક્રિય" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > આગળ </a></li>
  11. </ul>
  12. </div>

ઝડપી પાછલી અને આગલી લિંક્સ માટે પેજર

પેજર વિશે

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

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

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

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

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

  1. <ul class = "પેજર" >
  2. <li>
  3. <a href="#" > પહેલાનું </a> _ _
  4. </li>
  5. <li>
  6. <a href="#" > આગળ </a> _ _
  7. </li>
  8. </ul>

સંરેખિત લિંક્સ

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

  1. <ul class = "પેજર" >
  2. <li class = "અગાઉ" >
  3. <a href="#" > & larr ; જૂની </a>
  4. </li>
  5. <li class = "આગલું" >
  6. <a href="#" > વધુ નવું & rarr ; </a>
  7. </li>
  8. </ul>
લેબલ્સ માર્કઅપ
ડિફૉલ્ટ <span class="label">Default</span>
સફળતા <span class="label label-success">Success</span>
ચેતવણી <span class="label label-warning">Warning</span>
મહત્વપૂર્ણ <span class="label label-important">Important</span>
માહિતી <span class="label label-info">Info</span>
વ્યસ્ત <span class="label label-inverse">Inverse</span>

વિશે

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

ઉપલબ્ધ વર્ગો

નામ ઉદાહરણ માર્કઅપ
ડિફૉલ્ટ 1 <span class="badge">1</span>
સફળતા 2 <span class="badge badge-success">2</span>
ચેતવણી 4 <span class="badge badge-warning">4</span>
મહત્વપૂર્ણ 6 <span class="badge badge-important">6</span>
માહિતી 8 <span class="badge badge-info">8</span>
વ્યસ્ત 10 <span class="badge badge-inverse">10</span>

હીરો યુનિટ

બુટસ્ટ્રેપ તમારી સાઇટ પર સામગ્રી પ્રદર્શિત કરવા માટે હીરો યુનિટ તરીકે ઓળખાતા હળવા, લવચીક ઘટક પ્રદાન કરે છે. તે માર્કેટિંગ અને સામગ્રી-ભારે સાઇટ્સ પર સારી રીતે કાર્ય કરે છે.

માર્કઅપ

તમારી સામગ્રીને આ રીતે લપેટી div:

  1. <div વર્ગ = "હીરો-યુનિટ" >
  2. <h1> મથાળું </h1>
  3. <p> ટેગલાઇન </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. વધુ શીખો
  7. </a>
  8. </p>
  9. </div>

હેલો, વિશ્વ!

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

વધુ શીખો

પૃષ્ઠ હેડર

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

  1. <div class = "page-header" >
  2. <h1> ઉદાહરણ પૃષ્ઠ હેડર </h1>
  3. </div>

ડિફૉલ્ટ થંબનેલ્સ

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

અત્યંત વૈવિધ્યપૂર્ણ

થોડા વધારાના માર્કઅપ સાથે, થંબનેલ્સમાં હેડિંગ, ફકરા અથવા બટનો જેવી કોઈપણ પ્રકારની 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.

    ક્રિયા ક્રિયા

થંબનેલ્સ શા માટે વાપરો

થંબનેલ્સ (અગાઉ .media-gridv1.4 સુધી) ફોટા અથવા વિડિઓઝ, છબી શોધ પરિણામો, છૂટક ઉત્પાદનો, પોર્ટફોલિયો અને ઘણું બધું માટે શ્રેષ્ઠ છે. તે લિંક્સ અથવા સ્થિર સામગ્રી હોઈ શકે છે.

સરળ, લવચીક માર્કઅપ

થંબનેલ માર્કઅપ સરળ છે - ulકોઈપણ સંખ્યાના liઘટકો સાથે જરૂરી છે. તે સુપર લવચીક પણ છે, જે તમારી સામગ્રીઓને લપેટવા માટે થોડી વધુ માર્કઅપ સાથે કોઈપણ પ્રકારની સામગ્રીને મંજૂરી આપે છે.

ગ્રીડ કૉલમ કદનો ઉપયોગ કરે છે

છેલ્લે, થંબનેલ્સ ઘટક થંબનેલ પરિમાણોના નિયંત્રણ માટે હાલના ગ્રીડ સિસ્ટમ વર્ગોનો ઉપયોગ કરે છે - જેમ .span2કે અથવા -..span3

માર્કઅપ

અગાઉ ઉલ્લેખ કર્યો છે તેમ, થંબનેલ્સ માટે જરૂરી માર્કઅપ હળવા અને સીધા છે. અહીં લિંક કરેલી છબીઓ માટે ડિફોલ્ટ સેટઅપ પર એક નજર છે :

  1. <ul class = "થંબનેલ્સ" >
  2. <li class = "span3" >
  3. <a href = "#" વર્ગ = "થંબનેલ" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

થંબનેલ્સમાં કસ્ટમ HTML સામગ્રી માટે, માર્કઅપ સહેજ બદલાય છે. ગમે ત્યાં બ્લોક લેવલની સામગ્રીને મંજૂરી આપવા માટે, અમે લાઇક <a>માટે સ્વેપ કરીએ છીએ <div>:

  1. <ul class = "થંબનેલ્સ" >
  2. <li class = "span3" >
  3. <div class = "થંબનેલ" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> થંબનેલ લેબલ </h5>
  6. <p> થંબનેલ કૅપ્શન અહીં જ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

વધુ ઉદાહરણો

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

લાઇટવેઇટ ડિફોલ્ટ્સ

ફરીથી લખાયેલ આધાર વર્ગ

બુટસ્ટ્રેપ 2 સાથે, અમે બેઝ ક્લાસને સરળ બનાવ્યું છે: .alertની જગ્યાએ .alert-message. અમે ન્યૂનતમ જરૂરી માર્કઅપ પણ ઘટાડી દીધું <p>છે - ડિફૉલ્ટ રૂપે ના જરૂરી નથી, ફક્ત બાહ્ય <div>.

એક ચેતવણી સંદેશ

ઓછા કોડ સાથે વધુ ટકાઉ ઘટક માટે, અમે બ્લોક ચેતવણીઓ, વધુ પેડિંગ અને સામાન્ય રીતે વધુ ટેક્સ્ટ સાથે આવતા સંદેશાઓ માટેનો તફાવત દૂર કર્યો છે. વર્ગ પણ બદલાઈ ગયો છે .alert-block.


જાવાસ્ક્રિપ્ટ સાથે સરસ જાય છે

બુટસ્ટ્રેપ એક મહાન jQuery પ્લગઇન સાથે આવે છે જે ચેતવણી સંદેશાઓને સપોર્ટ કરે છે, તેને ઝડપી અને સરળ બનાવે છે.

પ્લગઇન મેળવો »

ઉદાહરણ ચેતવણીઓ

તમારા સંદેશ અને વૈકલ્પિક ક્લોઝ આઇકનને સરળ વર્ગ સાથે ડિવમાં લપેટો.

ચેતવણી! તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે ખૂબ સારા દેખાતા નથી.
  1. <div class = "ચેતવણી" >
  2. <બટન વર્ગ = "બંધ" ડેટા-ડિસમિસ = "ચેતવણી" > × </ બટન>
  3. <strong> ચેતવણી! </strong> તમે તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે વધુ સારા દેખાતા નથી.
  4. </div>

હેડ અપ! iOS ઉપકરણોને href="#"ચેતવણીઓની બરતરફી માટે જરૂરી છે. એન્કર ક્લોઝ આઇકન્સ માટે તેને અને ડેટા એટ્રિબ્યુટ શામેલ કરવાની ખાતરી કરો. વૈકલ્પિક રીતે, તમે <button>ડેટા એટ્રિબ્યુટ સાથે એક ઘટકનો ઉપયોગ કરી શકો છો, જે અમે અમારા દસ્તાવેજો માટે પસંદ કર્યું છે. નો ઉપયોગ કરતી વખતે <button>, તમારે શામેલ કરવું આવશ્યક છે type="button"અથવા તમારા ફોર્મ્સ સબમિટ કરી શકશે નહીં.

બે વૈકલ્પિક વર્ગો સાથે પ્રમાણભૂત ચેતવણી સંદેશને સરળતાથી વિસ્તૃત કરો: .alert-blockવધુ પેડિંગ અને ટેક્સ્ટ નિયંત્રણો અને .alert-headingમેળ ખાતા મથાળા માટે.

ચેતવણી!

તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે ખૂબ સારા દેખાતા નથી. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 વર્ગ = "ચેતવણી-શીર્ષક" > ચેતવણી! </h4>
  4. તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે નથી...
  5. </div>

સંદર્ભિત વિકલ્પો ચેતવણીનો અર્થ બદલવા માટે વૈકલ્પિક વર્ગો ઉમેરો

ભૂલ અથવા ભય

ઓહ ત્વરિત! થોડી વસ્તુઓ બદલો અને ફરીથી સબમિટ કરવાનો પ્રયાસ કરો.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

સફળતા

શાબ્બાશ! તમે આ મહત્વપૂર્ણ ચેતવણી સંદેશ સફળતાપૂર્વક વાંચ્યો.
  1. <div વર્ગ = "ચેતવણી ચેતવણી-સફળતા" >
  2. ...
  3. </div>

માહિતી

હેડ અપ! આ ચેતવણીને તમારા ધ્યાનની જરૂર છે, પરંતુ તે અતિ મહત્વનું નથી.
  1. <div class = "ચેતવણી ચેતવણી-માહિતી" >
  2. ...
  3. </div>

ઉદાહરણો અને માર્કઅપ

પાયાની

વર્ટિકલ ગ્રેડિયન્ટ સાથે ડિફૉલ્ટ પ્રોગ્રેસ બાર.

  1. <div વર્ગ = "પ્રગતિ" >
  2. <div વર્ગ = "બાર"
  3. શૈલી = " પહોળાઈ : 60 %; " ></div>
  4. </div>

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

પટ્ટાવાળી અસર બનાવવા માટે ઢાળનો ઉપયોગ કરે છે (કોઈ IE નથી).

  1. <div class = "progress progress-striped" >
  2. <div વર્ગ = "બાર"
  3. શૈલી = " પહોળાઈ : 20 %; " ></div>
  4. </div>

એનિમેટેડ

પટ્ટાવાળા ઉદાહરણ લે છે અને તેને એનિમેટ કરે છે (કોઈ IE નથી).

  1. <div વર્ગ = "પ્રગતિ પ્રગતિ-પટ્ટાવાળી
  2. સક્રિય" >
  3. <div વર્ગ = "બાર"
  4. શૈલી = " પહોળાઈ : 40 %; " ></div>
  5. </div>

વિકલ્પો અને બ્રાઉઝર સપોર્ટ

વધારાના રંગો

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

પટ્ટાવાળી બાર

નક્કર રંગોની જેમ, અમારી પાસે વિવિધ પટ્ટાવાળા પ્રોગ્રેસ બાર છે.

વર્તન

પ્રોગ્રેસ બાર CSS3 સંક્રમણોનો ઉપયોગ કરે છે, તેથી જો તમે જાવાસ્ક્રિપ્ટ દ્વારા પહોળાઈને ગતિશીલ રીતે સમાયોજિત કરો છો, તો તે સરળતાથી કદ બદલશે.

જો તમે .activeવર્ગનો ઉપયોગ કરો છો, તો તમારા .progress-stripedપ્રોગ્રેસ બાર ડાબેથી જમણે પટ્ટાઓને એનિમેટ કરશે.

બ્રાઉઝર સપોર્ટ

પ્રોગ્રેસ બાર તેમની તમામ અસરો પ્રાપ્ત કરવા માટે CSS3 ગ્રેડિયન્ટ્સ, ટ્રાન્ઝિશન અને એનિમેશનનો ઉપયોગ કરે છે. આ સુવિધાઓ IE7-9 અથવા ફાયરફોક્સના જૂના સંસ્કરણોમાં સમર્થિત નથી.

ઓપેરા અને IE આ સમયે એનિમેશનને સપોર્ટ કરતા નથી.

કુવાઓ

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

જુઓ, હું કૂવામાં છું!
  1. <div class = "વેલ" >
  2. ...
  3. </div>

ક્લોઝ આઇકન

મોડલ અને ચેતવણીઓ જેવી સામગ્રીને કાઢી નાખવા માટે સામાન્ય બંધ આયકનનો ઉપયોગ કરો.

  1. <બટન વર્ગ = "બંધ કરો" > &ટાઇમ; </ બટન>

જો તમે એન્કરનો ઉપયોગ કરવાને બદલે iOS ઉપકરણોને ક્લિક ઇવેન્ટ્સ માટે એક href="#" ની જરૂર છે.

  1. <a class = "close" href = "#" > × </a>