બટન જૂથો

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

તમે વધુ જટિલ પ્રોજેક્ટ્સ માટે <div class="btn-group">a માં સેટને પણ જોડી શકો છો .<div class="btn-toolbar">

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

અને બહુવિધ જૂથો માટે ટૂલબાર સાથે:

<div class = "btn-ટૂલબાર" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

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

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

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

હેડ અપ

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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "ડ્રોપડાઉન" href = "#" >   
    ક્રિયા
    <span class = "caret" ></span> 
  </a>
  <ul class = "ડ્રોપડાઉન-મેનુ" > 
    <!-- ડ્રોપડાઉન મેનુ લિંક્સ -->
  </ul>
</div>

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > ક્રિયા </a>  
  <a class = "btn dropdown-toggle" data-toggle = "ડ્રોપડાઉન" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "ડ્રોપડાઉન-મેનુ" > 
    <!-- ડ્રોપડાઉન મેનુ લિંક્સ -->
  </ul>
</div>

શક્તિશાળી આધાર વર્ગ

અહીંના તમામ nav ઘટકો-ટેબ્સ, ગોળીઓ અને સૂચિઓ- વર્ગ દ્વારા સમાન બેઝ માર્કઅપ અને શૈલીઓ શેર કરે છે..nav

શા માટે ટેબ્સ અને ગોળીઓ

<ul>બુટસ્ટ્રેપમાં ટૅબ્સ અને ગોળીઓ સમાન કોર HTML સાથે, લિંક્સની સૂચિ પર બનેલ છે . માત્ર એક વર્ગ સાથે ટેબ અથવા ગોળીઓ વચ્ચે સ્વેપ કરો.

સામગ્રીના પેટા-વિભાગો અથવા સંબંધિત સામગ્રીના પૃષ્ઠો વચ્ચે નેવિગેટ કરવા માટે બંને વિકલ્પો શ્રેષ્ઠ છે.

મૂળભૂત ટૅબ્સ

નિયમિત <ul>લિંક્સ લો અને ઉમેરો .nav-tabs:

• ઘર
• પ્રોફાઇલ
• સંદેશાઓ

<ul class = "nav nav-tabs" > 
  <li class = "સક્રિય" > 
    <a href="#" > હોમ </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

મૂળભૂત ગોળીઓ

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

• ઘર
• પ્રોફાઇલ
• સંદેશાઓ

<ul class = "nav nav-pills" > 
  <li class = "સક્રિય" > 
    <a href="#" > હોમ </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

તેમને કેવી રીતે સ્ટેક કરવું

ટૅબ્સ અને પિલ્સ ડિફૉલ્ટ રૂપે આડા હોવાથી, .nav-stackedતેમને ઊભી રીતે સ્ટૅક્ડ દેખાય તે માટે માત્ર સેકન્ડ ક્લાસ ઉમેરો.

સ્ટૅક્ડ ટૅબ્સ

• ઘર
• પ્રોફાઇલ
• સંદેશાઓ

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

સ્ટૅક્ડ ગોળીઓ

• ઘર
• પ્રોફાઇલ
• સંદેશાઓ

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

સમૃદ્ધ મેનુ સરળ બનાવેલ છે

બુટસ્ટ્રેપ ટૅબ્સ અને પિલ્સમાં ડ્રોપડાઉન મેનૂ ખૂબ જ સરળ છે અને માત્ર થોડા વધારાના HTML અને લાઇટવેઇટ jQuery પ્લગઇનની જરૂર છે.

બુટસ્ટ્રેપમાં ડ્રોપડાઉન શરૂ કરવાના દસ્તાવેજો વાંચવા માટે Javascript પૃષ્ઠ પર જાઓ.

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

• ઘર
• પ્રોફાઇલ
• ડ્રોપડાઉન
  • ક્રિયા
  • બીજી ક્રિયા
  • અહીં કંઈક બીજું
  • અલગ લિંક

<ul class = "nav nav-tabs" > 
  <li class = "ડ્રોપડાઉન" > 
    <a વર્ગ = "ડ્રોપડાઉન-ટૉગલ" 
       data-toggle = "ડ્રોપડાઉન"
       href = "#" >
        ડ્રોપડાઉન
        <b class = "caret" ></b> 
      </a>
    <ul class = "ડ્રોપડાઉન-મેનુ" > 
      <!-- લિંક્સ -->
    </ul>
  </li>
</ul>

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

• ઘર
• પ્રોફાઇલ
• ડ્રોપડાઉન
  • ક્રિયા
  • બીજી ક્રિયા
  • અહીં કંઈક બીજું
  • અલગ લિંક

<ul class = "nav nav-pills" > 
  <li class = "ડ્રોપડાઉન" > 
    <a વર્ગ = "ડ્રોપડાઉન-ટૉગલ" 
       data-toggle = "ડ્રોપડાઉન"
       href = "#" >
        ડ્રોપડાઉન
        <b class = "caret" ></b> 
      </a>
    <ul class = "ડ્રોપડાઉન-મેનુ" > 
      <!-- લિંક્સ -->
    </ul>
  </li>
</ul>

એપ્લિકેશન-શૈલી નેવિગેશન

નેવી યાદીઓ વૈકલ્પિક હેડરો સાથે નેવી લિંક્સના જૂથો બનાવવાની એક સરળ અને સરળ રીત પ્રદાન કરે છે. તેઓ OS X માં ફાઇન્ડર જેવા સાઇડબારમાં શ્રેષ્ઠ રીતે ઉપયોગમાં લેવાય છે.

માળખાકીય રીતે, તેઓ ટેબ અને પિલ્સ જેવી જ કોર એનએવી શૈલીઓ પર બનેલ છે, તેથી ઉપયોગ અને કસ્ટમાઇઝેશન સીધું છે.

ચિહ્નો સાથે

એનએવી સૂચિઓ ચિહ્નોથી સજ્જ કરવા માટે પણ સરળ છે. વર્ગ સાથે યોગ્ય <i>ટેગ ઉમેરો અને તમે સેટ કરી લો.

ઉદાહરણ નેવી યાદી

લિંક્સની સૂચિ લો અને ઉમેરો class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    યાદી હેડર
  </li>
  <li class = "સક્રિય" > 
    <a href="#" > હોમ </a> _ _ 
  </li>
  <li>
    <a href="#" > લાઇબ્રેરી </a> _ _ 
  </li>
  ...
</ul>

ચિહ્નો સાથેનું ઉદાહરણ

સમાન ઉદાહરણ, પરંતુ <i>ચિહ્નો માટે ટૅગ્સ સાથે.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      પુસ્તકાલય
    </a>
  </li>
  ...
</ul>

શું સમાવવામાં આવેલ છે

ટૅબ દ્વારા સામગ્રી વચ્ચે ટૉગલ કરવા માટે એક સરળ પ્લગઇન વડે તમારા ટૅબ્સને જીવંત બનાવો. બુટસ્ટ્રેપ ટેબેબલ ટેબ્સને ચાર શૈલીમાં એકીકૃત કરે છે: ઉપર (ડિફોલ્ટ), જમણે, નીચે અને ડાબે.

તેમની વચ્ચે બદલવું સરળ છે અને માત્ર બહુ ઓછા માર્કઅપને બદલવાની જરૂર છે.

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

ટેબ્સને ટેબેબલ બનાવવા માટે, .nav-tabsવર્ગ સાથે બીજા ડિવમાં લપેટી .tabbable.

કસ્ટમ jQuery પ્લગઇન

બધા ટેબેબલ ટૅબ્સ અમારા હળવા વજનના jQuery પ્લગઇન દ્વારા સંચાલિત છે. જાવાસ્ક્રિપ્ટ દસ્તાવેજ પૃષ્ઠ પર ટેબેબલ ટેબ્સને કેવી રીતે જીવંત બનાવવી તે વિશે વધુ વાંચો.

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

તળિયે ટૅબ્સ

HTML ના ક્રમને ફ્લિપ કરો અને તળિયે ટેબ્સ મૂકવા માટે એક વર્ગ ઉમેરો.

<div વર્ગ = "ટૅબેબલ ટૅબ્સ-નીચે" > 
  <div વર્ગ = "ટેબ-સામગ્રી" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

ડાબી બાજુએ ટૅબ્સ

ડાબી બાજુએ ટેબ્સ મૂકવા માટે વર્ગને સ્વેપ કરો.

<div class = "ટેબેબલ ટૅબ્સ-લેફ્ટ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div વર્ગ = "ટેબ-સામગ્રી" > 
    ...
  </div>
</div>

જમણી બાજુએ ટૅબ્સ

જમણી બાજુએ ટેબ્સ મૂકવા માટે વર્ગને સ્વેપ કરો.

<div વર્ગ = "ટેબેબલ ટૅબ્સ-જમણે" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div વર્ગ = "ટેબ-સામગ્રી" > 
    ...
  </div>
</div>

નવબાર પાલખ

સ્ટેટિક અથવા ફિક્સ ડિસ્પ્લે માટે તેને સારી રીતે સ્ટ્રક્ચર કરવા માટે નવબારને માત્ર થોડા ડિવ્સની જરૂર છે.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div વર્ગ = "કન્ટેનર" > 
      ...
    </div>
  </div>
</div>

નેવબારને વ્યૂપોર્ટની ટોચ પર ફિક્સ કરવા માટે, સૌથી બહારના ડિવમાં ઉમેરો .navbar-fixed-top, .navbar. તમારા CSS માં, તમારે padding-top: 40px;તમારા <body>.

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

બ્રાન્ડ નામ

તમારી બ્રાંડ અથવા પ્રોજેક્ટનું નામ બતાવવા માટે એક સરળ લિંકને ફક્ત એન્કર ટેગની જરૂર છે.

<a class = "brand" href = "#" >  
  પ્રોજેક્ટ નામ
</a>

શોધ ફોર્મ

.navbar-searchશોધ ફોર્મ વર્ગ સાથે નેવબારમાં કસ્ટમ શૈલીઓ મેળવે છે . તેને સંરેખિત કરવા માટે શામેલ કરો .pull-leftઅથવા .pull-rightપર .form

<form class = "navbar-search pull-left" > 
  <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "શોધ-ક્વેરી" પ્લેસહોલ્ડર = "શોધ" >   
</form>

વૈકલ્પિક પ્રતિભાવ વિવિધતા

તમારા ટોપબારમાં સામગ્રીની માત્રાના આધારે, તમે પ્રતિભાવ વિકલ્પોને અમલમાં મૂકવા માગી શકો છો. આમ કરવા માટે, તમારી nav સામગ્રીને સમાવિષ્ટ div માં લપેટી .nav-collapse.collapse, અને navbar ટૉગલ બટન ઉમેરો .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div વર્ગ = "કન્ટેનર" > 
 
      <!-- .btn-navbar નો ઉપયોગ સંકુચિત નવબાર સામગ્રી માટે ટૉગલ તરીકે થાય છે -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- જો તમે તેને બતાવવા માંગતા હોવ તો --> બ્રાન્ડને ત્યાં છોડી દેવાની ખાતરી કરો
      <a class = "brand" href = "#" > પ્રોજેક્ટનું નામ </a>  
 
      <!-- તમે 940px અથવા તેનાથી ઓછા પર છુપાવવા માંગો છો તે બધું, અહીંની અંદર મૂકો -->
      <div class = "nav-collaps" > 
        <!-- .nav, .navbar-શોધ, .navbar-ફોર્મ, વગેરે -->
      </div>
 
    </div>
  </div>
</div>

એનએવી લિંક્સ

અવ્યવસ્થિત યાદીઓ દ્વારા એનએવી વસ્તુઓ ઉમેરવા માટે સરળ છે.

<ul class = "nav" > 
  <li class = "સક્રિય" > 
    <a href="#" > હોમ </a> _ _ 
  </li>
  <li><a href = "#" > લિંક </a></li> 
  <li><a href = "#" > લિંક </a></li> 
</ul>

ડ્રોપડાઉન ઉમેરી રહ્યા છીએ

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

<ul class = "nav" > 
  <li class = "ડ્રોપડાઉન" > 
    <a href = "#" 
          વર્ગ = "ડ્રોપડાઉન-ટૉગલ"
          data-toggle = "ડ્રોપડાઉન" >
          એકાઉન્ટ
          <b class = "caret" ></b> 
    </a>
    <ul class = "ડ્રોપડાઉન-મેનુ" > 
      ...
    </ul>
  </li>
</ul>

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

શા માટે તેમને વાપરો

બ્રેડક્રમ્બ નેવિગેશનનો ઉપયોગ વપરાશકર્તાઓને તેઓ એપ અથવા સાઇટની અંદર ક્યાં છે તે બતાવવાની રીત તરીકે થાય છે, પરંતુ પ્રાથમિક નેવિગેશન માટે નહીં. સૌથી વધુ અસરકારક બનવા માટે તેમના ઉપયોગને છૂટાછવાયા અને સંક્ષિપ્ત રાખો.

ઉદાહરણો

એક જ ઉદાહરણ દર્શાવવામાં આવ્યું છે કારણ કે તે બહુવિધ પૃષ્ઠો પર પ્રદર્શિત થઈ શકે છે.

• ઘર

• ઘર /
• પુસ્તકાલય

• ઘર /
• પુસ્તકાલય /
• ડેટા

માર્કઅપ

HTML એ લિંક્સ સાથેની તમારી પ્રમાણભૂત અવ્યવસ્થિત સૂચિ છે.

<ul class = "બ્રેડક્રમ્બ" > 
  <li>
    <a href = "#" > ઘર </a> <span વર્ગ = "વિભાજક" > / </span>   
  </li>
  <li>
    <a href = "#" > લાઇબ્રેરી </a> <span class = "divider" > / </span>   
  </li>
  <li class = "સક્રિય" > 
    <a href = "#" > ડેટા </a> 
  </li>
</ul>

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

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

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

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

લવચીક ગોઠવણી

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

ઉદાહરણો

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

માર્કઅપ

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

<div વર્ગ = "પેજીકરણ" > 
  <ul>
    <li><a href = "#" > પહેલાનું </a></li> 
    <li class = "સક્રિય" > 
      <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 = "#" > આગળ </a></li> 
  </ul>
</div>

પેજર વિશે

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

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

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

• અગાઉના
• આગળ

<ul class = "પેજર" > 
  <li>
    <a href="#" > પહેલાનું </a> _ _ 
  </li>
  <li>
    <a href="#" > આગળ </a> _ _ 
  </li>
</ul>

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

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

• ← જૂની
• નવું →

<ul class = "પેજર" > 
  <li class = "અગાઉ" > 
    <a href="#" > & larr ; જૂની </a> 
  </li>
  <li class = "આગલું" > 
    <a href="#" > વધુ નવું & rarr ; </a> 
  </li>
</ul>

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

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

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

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

માર્કઅપ

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

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

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

<ul class = "થંબનેલ્સ" > 
  <li class = "span3" > 
    <div class = "થંબનેલ" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> થંબનેલ લેબલ </h5>
      <p> થંબનેલ કૅપ્શન અહીં જ... </p>
    </div>
  </li>
  ...
</ul>

વધુ ઉદાહરણો

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

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

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

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

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

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

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

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

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

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

<div class = "ચેતવણી" > 
  <a વર્ગ = "બંધ" > × </a> 
  <strong> ચેતવણી! </strong> તમે તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે વધુ સારા દેખાતા નથી.
</div>

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

<div class = "alert alert-block" > 
  <a વર્ગ = "બંધ" > × </a> 
  <h4 વર્ગ = "ચેતવણી-શીર્ષક" > ચેતવણી! </h4> 
  તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે નથી...
</div>

ભૂલ અથવા ભય

<div class = "alert alert-error" > 
  ...
</div>

સફળતા

<div વર્ગ = "ચેતવણી ચેતવણી-સફળતા" > 
  ...
</div>

માહિતી

<div class = "ચેતવણી ચેતવણી-માહિતી" > 
  ...
</div>

પાયાની

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

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

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

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

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

એનિમેટેડ

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

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

વધારાના રંગો

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

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

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

વર્તન

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

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

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

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

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

કુવાઓ

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

<div class = "વેલ" > 
  ...
</div>

બેજ

વાંચ્યા વગરની ગણતરી માટે અથવા સરળ સૂચક તરીકે તત્વ પર બેજનો ઉપયોગ કરો.

<span વર્ગ = "બેજ" > 3 </div> 

ક્લોઝ આઇકન

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

×

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