બુટસ્ટ્રેપ

ઘટકો

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

હેડ અપ! આ દસ્તાવેજો v2.3.2 માટે છે, જે હવે સત્તાવાર રીતે સમર્થિત નથી. બુટસ્ટ્રેપનું નવીનતમ સંસ્કરણ તપાસો!

બટન જૂથો

ઉદાહરણો

બે મૂળભૂત વિકલ્પો, બે વધુ વિશિષ્ટ વિવિધતાઓ સાથે.

સિંગલ બટન જૂથ

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

  1. <div class = "btn-group" > 
  2.   <button class = "btn" > ડાબે </button> 
  3.   <button class = "btn" > મધ્ય </button> 
  4.   <button class = "btn" > જમણે </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>

વર્ટિકલ બટન જૂથો

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

  1. <div class = "btn-group btn-group-vertical" > 
  2.   ...
  3. </div>

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

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

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

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

બટન ડ્રોપડાઉન મેનુ

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

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

  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.

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

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

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

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

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

  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>

માપો

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

  1. <div class = "btn-group" > 
  2.   <button class = "btn btn-mini" > ક્રિયા </button> 
  3.   <બટન વર્ગ = "btn btn-mini 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 દ્વારા પ્રેરિત સરળ પૃષ્ઠ ક્રમાંકન, એપ્લિકેશનો અને શોધ પરિણામો માટે સરસ. મોટો બ્લોક ચૂકી જવો મુશ્કેલ છે, સરળતાથી માપી શકાય છે અને મોટા ક્લિક વિસ્તારો પૂરા પાડે છે.

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

વિકલ્પો

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

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

  1. <div વર્ગ = "પેજીકરણ" > 
  2.   <ul>
  3.     <li વર્ગ = "અક્ષમ" ><a href = "#" > « </a></li>  
  4.     <li વર્ગ = "સક્રિય" ><a href = "#" > 1 </a></li>  
  5.     ...
  6.   </ul>
  7. </div>

તમે વૈકલ્પિક રીતે ઇચ્છિત શૈલીઓ જાળવી રાખીને ક્લિક કાર્યક્ષમતાને દૂર કરવા માટે સ્પાન્સ માટે સક્રિય અથવા અક્ષમ એન્કરને સ્વેપ કરી શકો છો.

  1. <div વર્ગ = "પેજીકરણ" > 
  2.   <ul>
  3.     <li વર્ગ = "અક્ષમ" ><span> « </span></li> 
  4.     <li class = "active" ><span> 1 </span></li> 
  5.     ...
  6.   </ul>
  7. </div>

માપો

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

  1. <div class = "પેજિનેશન પેજીનેશન-લાર્જ" > 
  2.   <ul>
  3.     ...
  4.   </ul>
  5. </div>
  6. <div વર્ગ = "પેજીકરણ" > 
  7.   <ul>
  8.     ...
  9.   </ul>
  10. </div>
  11. <div class = "પેજીનેશન પેજીનેશન-સ્મોલ" > 
  12.   <ul>
  13.     ...
  14.   </ul>
  15. </div>
  16. <div class = "પેજિનેશન પેજીનેશન-મિની" > 
  17.   <ul>
  18.     ...
  19.   </ul>
  20. </div>

ગોઠવણી

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

  1. <div વર્ગ = "પૃષ્ઠ ક્રમાંકન પૃષ્ઠ ક્રમાંકન-કેન્દ્રિત" > 
  2.   ...
  3. </div>
  1. <div વર્ગ = "પૃષ્ઠ ક્રમાંકન પૃષ્ઠ ક્રમાંક-જમણે" > 
  2.   ...
  3. </div>

પેજર

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

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

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

  1. <ul class = "પેજર" > 
  2.   <li><a href = "#" > પહેલાનું </a></li> 
  3.   <li><a href = "#" > આગળ </a></li> 
  4. </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>

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

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

  1. <ul class = "પેજર" > 
  2.   <li class = "અગાઉ અક્ષમ" > 
  3.     <a href="#" > & larr ; જૂની </a> 
  4.   </li>
  5.   ...
  6. </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>

બેજ

નામ ઉદાહરણ માર્કઅપ
ડિફૉલ્ટ 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>

સરળતાથી સંકુચિત

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

ટાઇપોગ્રાફિક ઘટકો

હીરો યુનિટ

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

હેલો, વિશ્વ!

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

વધુ શીખો

  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> ઉદાહરણ પૃષ્ઠ હેડર <small> હેડર માટે સબટેક્સ્ટ </small></h1>
  3. </div>

છબીઓ, વિડિઓઝ, ટેક્સ્ટ અને વધુના થંબનેલ્સ ગ્રીડ

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

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

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

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

  • 300x200

    થંબનેલ લેબલ

    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.

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

  • 300x200

    થંબનેલ લેબલ

    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.

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

  • 300x200

    થંબનેલ લેબલ

    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 = "span4" > 
  3.     <a href = "#" વર્ગ = "થંબનેલ" >  
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

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

  1. <ul class = "થંબનેલ્સ" > 
  2.   <li class = "span4" > 
  3.     <div class = "થંબનેલ" > 
  4.       <img data-src = "holder.js/300x200" alt = "" >  
  5.       <h3> થંબનેલ લેબલ </h3>
  6.       <p> થંબનેલ કૅપ્શન... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

વધુ ઉદાહરણો

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

સફળતા, ચેતવણી અને ભૂલ સંદેશાઓ માટે ચેતવણીઓ શૈલીઓ

ડિફૉલ્ટ ચેતવણી

.alertમૂળભૂત ચેતવણી ચેતવણી સંદેશ માટે કોઈપણ ટેક્સ્ટ અને વૈકલ્પિક બરતરફ બટનને લપેટો .

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

બટનો કાઢી નાખો

મોબાઇલ સફારી અને મોબાઇલ ઓપેરા બ્રાઉઝર, data-dismiss="alert"વિશેષતા ઉપરાંત, ટેગનો href="#"ઉપયોગ કરતી વખતે ચેતવણીઓને બરતરફ કરવા માટે જરૂરી છે.<a>

  1. <a href = "#" વર્ગ = "બંધ" ડેટા-ડિસમિસ = "ચેતવણી" > &ટાઇમ; </a>

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

  1. <button type = "button" class = "close" data-dismiss = "ચેતવણી" > × </ બટન>

જાવાસ્ક્રિપ્ટ દ્વારા ચેતવણીઓ કાઢી નાખો

ચેતવણીઓની ઝડપી અને સરળ બરતરફી માટે ચેતવણીઓ jQuery પ્લગઇનનો ઉપયોગ કરો .

વિકલ્પો

લાંબા સંદેશાઓ માટે, ઉમેરીને ચેતવણી રેપરની ઉપર અને નીચે પેડિંગ વધારો .alert-block.

ચેતવણી!

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

  1. <div class = "alert alert-block" > 
  2.   <button type = "button" class = "close" data-dismiss = "ચેતવણી" > × </ બટન>   
  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 વર્ગ = "બાર" શૈલી = " પહોળાઈ : 60 %; " ></div>   
  3. </div>

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

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

  1. <div class = "progress progress-striped" > 
  2.   <div class = "bar" style = " પહોળાઈ : 20 %; " ></div>   
  3. </div>

એનિમેટેડ

જમણેથી ડાબે પટ્ટાઓને એનિમેટ .activeકરવા માટે ઉમેરો . .progress-stripedIE ના તમામ સંસ્કરણોમાં ઉપલબ્ધ નથી.

  1. <div class = "progress progress-striped active" > 
  2.   <div class = "bar" style = " પહોળાઈ : 40 %; " ></div>   
  3. </div>

સ્ટૅક્ડ

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

  1. <div વર્ગ = "પ્રગતિ" > 
  2.   <div class = "bar bar-success" style = " પહોળાઈ : 35 %; " ></div>   
  3.   <div class = "bar bar-warning" style = " પહોળાઈ : 20 %; " ></div>   
  4.   <div class = "bar bar-danger" style = " પહોળાઈ : 10 %; " ><</div>   
  5. </div>

વિકલ્પો

વધારાના રંગો

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

  1. <div class = "progress progress-info" > 
  2.   <div class = "bar" શૈલી = " પહોળાઈ : 20 % " ></div>   
  3. </div>
  4. <div class = "progress progress-success" > 
  5.   <div class = "bar" શૈલી = " પહોળાઈ : 40 % " ></div>   
  6. </div>
  7. <div class = "progress progress-warning" > 
  8.   <div class = "bar" શૈલી = " પહોળાઈ : 60 % " ></div>   
  9. </div>
  10. <div class = "પ્રોગ્રેસ પ્રોગ્રેસ-ડેન્જર" > 
  11.   <div class = "bar" શૈલી = " પહોળાઈ : 80 % " ></div>   
  12. </div>

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

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

  1. <div class = "progress progress-info progress-striped" > 
  2.   <div class = "bar" શૈલી = " પહોળાઈ : 20 % " ></div>   
  3. </div>
  4. <div class = "progress progress-success progress-striped" > 
  5.   <div class = "bar" શૈલી = " પહોળાઈ : 40 % " ></div>   
  6. </div>
  7. <div class = "progress progress-warning progress-striped" > 
  8.   <div class = "bar" શૈલી = " પહોળાઈ : 60 % " ></div>   
  9. </div>
  10. <div class = "progress progress-danger progress-striped" > 
  11.   <div class = "bar" શૈલી = " પહોળાઈ : 80 % " ></div>   
  12. </div>

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

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

ઈન્ટરનેટ એક્સપ્લોરર 10 અને ઓપેરા 12 કરતા પહેલાના વર્ઝન એનિમેશનને સપોર્ટ કરતા નથી.

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

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

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

ડિફૉલ્ટ મીડિયા મીડિયા ઑબ્જેક્ટ (છબીઓ, વિડિઓ, ઑડિઓ) ને સામગ્રી બ્લોકની ડાબી અથવા જમણી બાજુએ ફ્લોટ કરવાની મંજૂરી આપે છે.

64x64

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

ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
64x64

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

ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ.
64x64

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

ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. Fusce condimentum nunc ac nisi vulputate fringilla. ડોનેક લેસીનિયા કોંગ્યુ ફેલિસ ઇન ફૌસીબસ. 
  1. <div class = "મીડિયા" > 
  2.   <a વર્ગ = "પુલ-લેફ્ટ" href = "#" >  
  3.     <img class = "media-object" data-src = "holder.js/64x64" >  
  4.   </a>
  5.   <div class = "મીડિયા-બોડી" > 
  6.     <h4 વર્ગ = "મીડિયા-હેડિંગ" > મીડિયા હેડિંગ </h4> 
  7.     ...
  8.  
  9.     <!-- નેસ્ટેડ મીડિયા ઑબ્જેક્ટ -->
  10.     <div class = "મીડિયા" > 
  11.       ...
  12.     </div>
  13.   </div>
  14. </div>

મીડિયા સૂચિ

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

  • 64x64

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

    ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.

    64x64

    નેસ્ટેડ મીડિયા હેડિંગ

    ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
    64x64

    નેસ્ટેડ મીડિયા હેડિંગ

    ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
    64x64

    નેસ્ટેડ મીડિયા હેડિંગ

    ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ.
  • 64x64

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

    ક્રાસ સીટ અમેટ નિભ લિબેરો, ગ્રેવિડા નુલ્લામાં. Nulla vel metus scelerisque ante sollicitudin commodo. ક્રાસ પુરસ ઓડિયો, વેસ્ટિબુલમ ઇન વલ્પુટેટ એટ, ટેમ્પસ વિવેરા ટર્પિસ. 
  1. <ul class = "મીડિયા-લિસ્ટ" > 
  2.   <li class = "મીડિયા" > 
  3.     <a વર્ગ = "પુલ-લેફ્ટ" href = "#" >  
  4.       <img class = "media-object" data-src = "holder.js/64x64" >  
  5.     </a>
  6.     <div class = "મીડિયા-બોડી" > 
  7.       <h4 વર્ગ = "મીડિયા-હેડિંગ" > મીડિયા હેડિંગ </h4> 
  8.       ...
  9.  
  10.       <!-- નેસ્ટેડ મીડિયા ઑબ્જેક્ટ -->
  11.       <div class = "મીડિયા" > 
  12.         ...
  13.      </div>
  14.     </div>
  15.   </li>
  16. </ul>

પરચુરણ લાઇટવેઇટ ઉપયોગિતા ઘટકો

કુવાઓ

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

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

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

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

જુઓ, હું કૂવામાં છું! 
  1. <div class = "વેલ-વેલ-લાર્જ" > 
  2.   ...
  3. </div>
જુઓ, હું કૂવામાં છું! 
  1. <div વર્ગ = "સારી રીતે-નાનું" > 
  2.   ...
  3. </div>

ક્લોઝ આઇકન

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

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

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

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

સહાયક વર્ગો

નાના પ્રદર્શન અથવા વર્તન ફેરફારો માટે સરળ, કેન્દ્રિત વર્ગો.

.ખેંચો-ડાબે

બાકી એક તત્વ ફ્લોટ

  1. વર્ગ = "ડાબે ખેંચો"
  1. . ખેંચો - ડાબે {
  2.   ફ્લોટ : ડાબે ;
  3. }

.જમણી તરફ ખેંચો

તત્વને જમણે ફ્લોટ કરો

  1. વર્ગ = "જમણે ખેંચો"
  1. . ખેંચો - જમણે {
  2.   ફ્લોટ : અધિકાર ;
  3. }

.મ્યૂટ

તત્વનો રંગ આમાં બદલો#999

  1. વર્ગ = "મ્યૂટ"
  1. . મ્યૂટ {
  2.   રંગ : #999; 
  3. }

.clearfix

floatકોઈપણ ઘટક પર સાફ કરો

  1. વર્ગ = "ક્લીયરફિક્સ"
  1. . ક્લિયરફિક્સ {
  2.   * ઝૂમ : 1 ; 
  3.   &: પહેલાં ,
  4.   &: પછી {
  5.     પ્રદર્શન : ટેબલ ;
  6.     સામગ્રી : "" ; 
  7.   }
  8.   &: પછી {
  9.     સ્પષ્ટ : બંને ;
  10.   }
  11. }