બટન જૂથો

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ડ્રોપડાઉન મેનૂને 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>

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

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

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

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

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

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

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

માપો

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

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

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

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

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

ડ્રોપઅપ મેનુ

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

<div વર્ગ = "btn-ગ્રુપ ડ્રોપઅપ" > 
  <button class = "btn" > ડ્રોપઅપ </button> 
  <બટન વર્ગ = "btn dropdown-toggle" data-toggle = "ડ્રોપડાઉન" >  
    <span class = "caret" ></span> 
  </ બટન>
  <ul class = "ડ્રોપડાઉન-મેનુ" > 
    <!-- ડ્રોપડાઉન મેનુ લિંક્સ -->
  </ul>
</div>

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

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

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

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

ઘટક ગોઠવણી

નેવી લિંક્સને સંરેખિત કરવા માટે, .pull-leftઅથવા .pull-rightઉપયોગિતા વર્ગોનો ઉપયોગ કરો. બંને વર્ગો નિર્દિષ્ટ દિશામાં CSS ફ્લોટ ઉમેરશે.

મૂળભૂત ટૅબ્સ

નિયમિત <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>ટેગ ઉમેરો અને તમે સેટ કરી લો.

આડા વિભાજકો

વર્ગ સાથે ખાલી સૂચિ આઇટમ બનાવીને આડી વિભાજક ઉમેરો .divider, જેમ કે:

<ul class = "nav nav-list" > 
  ...
  <li class = "વિભાજક" ></li> 
  ...
</ul>

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

લિંક્સની સૂચિ લો અને ઉમેરો 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.

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

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

જ્યારે તમે નવબારને જોડો છો, ત્યારે નીચે છુપાયેલા વિસ્તાર માટે એકાઉન્ટ કરવાનું યાદ રાખો. માં 40px અથવા વધુ ઉમેરવાનું ઉમેરો <body>. કોર બુટસ્ટ્રેપ CSS પછી અને વૈકલ્પિક પ્રતિભાવ CSS પહેલાં આ ઉમેરવાની ખાતરી કરો.

બ્રાન્ડ નામ

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

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

નવબારમાં ફોર્મ

નેવબારમાં ફોર્મને યોગ્ય રીતે સ્ટાઈલ કરવા અને સ્થાન આપવા માટે, નીચે બતાવ્યા પ્રમાણે યોગ્ય વર્ગો ઉમેરો. ડિફૉલ્ટ ફોર્મ માટે, શામેલ કરો .navbar-formઅને કાં તો .pull-leftઅથવા .pull-rightતેને યોગ્ય રીતે સંરેખિત કરો.

<form class = "navbar-form pull-left" > 
  <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "span2" >  
</form>

વધુ વૈવિધ્યપૂર્ણ શોધ ફોર્મ માટે, .navbar-searchનેવબારમાં વિશિષ્ટ શૈલીઓ પ્રાપ્ત કરવા માટે વર્ગ ઉમેરો.

<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 = "divider-vertical" ></li> 
  ...
</ul>

ઘટક ગોઠવણી

નેવી, શોધ ફોર્મ અથવા ટેક્સ્ટને સંરેખિત કરવા માટે, .pull-leftઅથવા .pull-rightઉપયોગિતા વર્ગોનો ઉપયોગ કરો. બંને વર્ગો નિર્દિષ્ટ દિશામાં CSS ફ્લોટ ઉમેરશે.

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

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

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

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

નવબારમાં ટેક્સ્ટ કરો

<p>યોગ્ય લીડિંગ અને રંગ માટે ટેગમાં ટેક્સ્ટની સ્ટ્રીંગ્સ લપેટી .

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

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

ઉદાહરણો

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

• ઘર

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

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

માર્કઅપ

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

<ul class = "બ્રેડક્રમ્બ" > 
  <li>
    <a href = "#" > ઘર </a> <span વર્ગ = "વિભાજક" > / </span>   
  </li>
  <li>
    <a href = "#" > લાઇબ્રેરી </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > ડેટા </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>

પેજર વિશે

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

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

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

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

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

• અગાઉના
• આગળ

<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>

વિશે

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

ઉપલબ્ધ વર્ગો

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

માર્કઅપ

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

<div વર્ગ = "હીરો-યુનિટ" > 
  <h1> મથાળું </h1>
  <p> ટેગલાઇન </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      વધુ શીખો
    </a>
  </p>
</div>

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

<div class = "page-header" > 
  <h1> ઉદાહરણ પૃષ્ઠ હેડર </h1>
</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

માર્કઅપ

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

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

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

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

ભૂલ અથવા ભય

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

સફળતા

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

માહિતી

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

પાયાની

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

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

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

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

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

એનિમેટેડ

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

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

વધારાના રંગો

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

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

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

વર્તન

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

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

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

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

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

કુવાઓ

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

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

ક્લોઝ આઇકન

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

×

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