બુટસ્ટ્રેપ

ઘટકો

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

બટન જૂથો વધુ ટૂલબાર જેવી કાર્યક્ષમતા માટે બટનો સાથે જોડાઓ

બટન જૂથો

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

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

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

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

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

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

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

ડાબી મધ્ય અધિકાર 
  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > 1 </a>  
  3.   <a class = "btn" href = "#" > 2 </a>  
  4.   <a class = "btn" href = "#" > 3 </a>  
  5. </div>

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

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

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

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

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

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

હેડ અપ

બટન જૂથો માટે CSS એક અલગ ફાઇલમાં છે, button-groups.less.

બટનો ડ્રોપડાઉન બટન જૂથો પર બનેલ સંદર્ભિત ડ્રોપડાઉન મેનુ

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

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

ક્રિયા
ક્રિયા
જોખમ
સફળતા
માહિતી

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

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

બટન જૂથની જેમ, અમારું માર્કઅપ નિયમિત બટન માર્કઅપનો ઉપયોગ કરે છે, પરંતુ શૈલીને રિફાઇન કરવા અને બુટસ્ટ્રેપના ડ્રોપડાઉન 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>

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

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

ક્રિયા
ક્રિયા
જોખમ
સફળતા
માહિતી

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

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

  1. <div class = "btn-group" > 
  2.   <a class = "btn" href = "#" > ક્રિયા </a>  
  3.   <a class = "btn dropdown-toggle" data-toggle = "ડ્રોપડાઉન" href = "#" >   
  4.     <span class = "caret" ></span> 
  5.   </a>
  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>

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

પેજર વિશે

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

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

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

  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>

ટાઇપોગ્રાફિક ઘટકો પૃષ્ઠ હેડર અને સામગ્રીને વિભાજિત કરવા માટે હીરો એકમ

હીરો યુનિટ

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

માર્કઅપ

તમારી સામગ્રીને આ રીતે લપેટી 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-haeder" > 
  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.   <a class = "close" data-dismiss = "ચેતવણી" > × </a>  
  3.   <strong> ચેતવણી! </strong> તમે તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે વધુ સારા દેખાતા નથી.
  4. </div>

બે વૈકલ્પિક વર્ગો સાથે પ્રમાણભૂત ચેતવણી સંદેશને સરળતાથી વિસ્તૃત કરો: .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 = "ચેતવણી" > × </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>

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

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

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

એનિમેટેડ

પટ્ટાવાળા ઉદાહરણ લે છે અને તેને એનિમેટ કરે છે.

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

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

વધારાના રંગો

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

  • .progress-info
  • .progress-success
  • .progress-danger

વૈકલ્પિક રીતે, તમે ઓછી ફાઇલોને કસ્ટમાઇઝ કરી શકો છો અને તમારા પોતાના રંગો અને કદને રોલ કરી શકો છો.

વર્તન

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

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

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

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

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

પરચુરણ કુવાઓ, બેજ અને બંધ આયકન

કુવાઓ

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

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

ક્લોઝ આઇકન

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

×

  1. <a class = "બંધ" > × </a>