ટાઇપોગ્રાફિક સ્કેલ

સમગ્ર ટાઇપોગ્રાફિક ગ્રીડ અમારી variables.less ફાઇલમાં બે ઓછા વેરીએબલ પર આધારિત છે: @baseFontSizeઅને @baseLineHeight. પ્રથમ સમગ્ર ઉપયોગમાં લેવાતો આધાર ફોન્ટ-કદ છે અને બીજો આધાર રેખા-ઊંચાઈ છે.

અમે તે ચલો અને કેટલાક ગણિતનો ઉપયોગ અમારા તમામ પ્રકારના અને વધુના માર્જિન, પેડિંગ્સ અને લાઇન-હાઈટ્સ બનાવવા માટે કરીએ છીએ.

બોડી ટેક્સ્ટનું ઉદાહરણ

નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

ભાર વાપરીને

ફ્યુસે ડેપિબસ , ટેલસ એસી કર્સસ કોમોડો , ટોર્ટર મૌરીસ કન્ડીમેન્ટમ નિભ , યુટ ફર્મેન્ટમ માસ્સા જસ્ટો સીટ એમેટ રીસસ. Maecenas faucibus mollis interdum. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ.

નોંધ: નિઃસંકોચ ઉપયોગ કરો <b>અને <i>HTML5 માં, પરંતુ તેમનો વપરાશ થોડો બદલાયો છે. <b>વધારાના મહત્વ આપ્યા વિના શબ્દો અથવા શબ્દસમૂહોને પ્રકાશિત કરવા માટે છે જ્યારે <i>મોટે ભાગે અવાજ, તકનીકી શબ્દો વગેરે માટે છે.

ઉદાહરણ સરનામાં

<address>ટેગનો ઉપયોગ કેવી રીતે કરી શકાય તેના બે ઉદાહરણો અહીં આપ્યા છે :

ઉદાહરણ સંક્ષેપ

સંક્ષિપ્ત શબ્દો અપરકેસ ટેક્સ્ટ અને હળવા ડોટેડ બોટમ બોર્ડર સાથે સ્ટાઇલ કરવામાં આવે છે. તેમની પાસે હોવર પર મદદ કર્સર પણ છે જેથી વપરાશકર્તાઓ પાસે વધારાના સંકેત હોય છે કે હોવર પર કંઈક બતાવવામાં આવશે.

કાતરી બ્રેડ પછી HTML એ શ્રેષ્ઠ વસ્તુ છે.

એટ્રિબ્યુટ શબ્દનું સંક્ષિપ્ત નામ attr છે .

<blockquote>બ્લોકક્વોટનો સમાવેશ કરવા માટે, કોઈપણ HTML ને ક્વોટ તરીકે લપેટી લો. સીધા અવતરણ માટે અમે ભલામણ કરીએ છીએ <p>.

તમારા સ્રોતને ટાંકવા માટે વૈકલ્પિક <small>ઘટક શામેલ કરો અને તમને —સ્ટાઇલના હેતુઓ માટે તે પહેલાં એક em ડેશ મળશે.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante venenatis. </p>
  <small> કોઈ પ્રખ્યાત </small>
</blockquote>

ડિફૉલ્ટ બ્લોકક્વોટ્સ આ રીતે સ્ટાઇલ કરવામાં આવે છે:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante venenatis.

કામના શરીરમાં પ્રખ્યાત વ્યક્તિ

તમારા બ્લોકક્વોટને જમણી તરફ ફ્લોટ કરવા માટે, ઉમેરો class="pull-right":

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante venenatis.

કામના શરીરમાં પ્રખ્યાત વ્યક્તિ

અવ્યવસ્થિત

<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
• પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
• નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
  • ફેસેલસ iaculis neque
  • પુરસ સોડેલ્સ અલ્ટ્રિસીસ
  • વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
  • એસી tristique libero volutpat ખાતે
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nc
• Eget porttitor lorem

અનસ્ટાઇલ

<ul class="unstyled">

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
• પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
• નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
  • ફેસેલસ iaculis neque
  • પુરસ સોડેલ્સ અલ્ટ્રિસીસ
  • વેસ્ટીબુલમ લાઓરેટ પોર્ટીટર સેમ
  • એસી tristique libero volutpat ખાતે
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nc
• Eget porttitor lorem

આદેશ આપ્યો

<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
4. પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
5. નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nc
8. Eget porttitor lorem

વર્ણન

<dl>

વર્ણન યાદીઓ

વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.

Euismod

વેસ્ટિબુલમ આઈડી લિગુલા પોર્ટા ફેલિસ યુઈસ્મોડ સેમ્પર એગેટ લેસીનિયા ઓડિયો સેમ એનઈસી એલિટ.

Donec id elit non mi porta gravida at eget metus.

માલેસુડા પોર્ટા

Etiam porta sem malesuada magna mollis euismod.

ઇનલાઇન

સાથે કોડના ઇનલાઇન સ્નિપેટ્સ લપેટી <code>.

ઉદાહરણ તરીકે , <code> વિભાગ </ code > ઇનલાઇન તરીકે આવરિત હોવું જોઈએ .  

મૂળભૂત બ્લોક

<pre>કોડની બહુવિધ રેખાઓ માટે ઉપયોગ કરો . યોગ્ય રેન્ડરીંગ માટે કોડમાં કોઈપણ એંગલ કૌંસમાંથી છટકી જવાની ખાતરી કરો.

<p>અહીં નમૂનાનો ટેક્સ્ટ...</p>

<pre>
  <p>નમૂનો ટેક્સ્ટ અહીં...</p>
</pre>

નોંધ:<pre> ટૅગ્સની અંદર કોડ શક્ય તેટલી ડાબી બાજુએ રાખવાની ખાતરી કરો ; તે તમામ ટેબને રેન્ડર કરશે.

તમે વૈકલ્પિક રીતે .pre-scrollableવર્ગ ઉમેરી શકો છો જે 350px ની મહત્તમ-ઊંચાઈ સેટ કરશે અને y-અક્ષ સ્ક્રોલબાર પ્રદાન કરશે.

Google Prettify

સમાન <pre>તત્વ લો અને ઉન્નત રેન્ડરીંગ માટે બે વૈકલ્પિક વર્ગો ઉમેરો.

<p> નમૂનાનો ટેક્સ્ટ અહીં... </p>

<પ્રી ક્લાસ = "પ્રીટી પ્રિન્ટ 
     લિનમ્સ" >
  <p>નમૂનો ટેક્સ્ટ અહીં...</p>
</pre>

google-code-prettify ડાઉનલોડ કરો અને કેવી રીતે ઉપયોગ કરવો તે માટે રીડમી જુઓ.

<ટેબલ>
  <thead>
    <tr>
      <th> … </th>
      <th> … </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> … </td>
      <td> … </td>
    </tr>
  </tbody>
</ ટેબલ>

વાંચનક્ષમતા સુનિશ્ચિત કરવા અને માળખું જાળવવા માટે કોષ્ટકો આપમેળે માત્ર થોડી સરહદો સાથે સ્ટાઇલ કરવામાં આવે છે. 2.0 સાથે, .tableવર્ગ જરૂરી છે.

<ટેબલ વર્ગ = "ટેબલ" > 
  …
</ ટેબલ>

ઝેબ્રા-સ્ટ્રાઇપિંગ ઉમેરીને તમારા કોષ્ટકો સાથે થોડી ફેન્સી મેળવો—ફક્ત .table-stripedવર્ગ ઉમેરો.

નોંધ: પટ્ટાવાળી કોષ્ટકો :nth-childCSS પસંદગીકારનો ઉપયોગ કરે છે અને IE7-IE8 માં ઉપલબ્ધ નથી.

<ટેબલ વર્ગ = "ટેબલ ટેબલ-પટ્ટાવાળી" > 
  …
</ ટેબલ>

સૌંદર્યલક્ષી હેતુઓ માટે સમગ્ર ટેબલની આસપાસ કિનારીઓ અને ગોળાકાર ખૂણાઓ ઉમેરો.

<ટેબલ વર્ગ = "ટેબલ ટેબલ-બોર્ડર્ડ" > 
  …
</ ટેબલ>

.table-condensedટેબલ સેલ પેડિંગને અડધા ભાગમાં (8px થી 4px સુધી) કાપવા માટે વર્ગ ઉમેરીને તમારા કોષ્ટકોને વધુ સઘન બનાવો .

<ટેબલ વર્ગ = "ટેબલ ટેબલ-કન્ડેન્સ્ડ" > 
  …
</ ટેબલ>

કોઈપણ ઉપલબ્ધ વર્ગોનો ઉપયોગ કરીને વિવિધ દેખાવ પ્રાપ્ત કરવા માટે કોઈપણ કોષ્ટક વર્ગોને જોડવા માટે નિઃસંકોચ.

<ટેબલ વર્ગ = "ટેબલ ટેબલ-પટ્ટાવાળી ટેબલ-બોર્ડર્ડ ટેબલ-કન્ડેન્સ્ડ" > 
  ...
</ ટેબલ>

લવચીક HTML અને CSS

બુટસ્ટ્રેપમાં ફોર્મ્સ વિશેની સૌથી સારી બાબત એ છે કે તમારા બધા ઇનપુટ્સ અને નિયંત્રણો તમે તમારા માર્કઅપમાં કેવી રીતે બનાવો છો તે કોઈ બાબત નથી. કોઈ અનાવશ્યક HTML ની ​​આવશ્યકતા નથી, પરંતુ અમે જેમને તેની જરૂર છે તેમના માટે પેટર્ન પ્રદાન કરીએ છીએ.

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

ચાર લેઆઉટ સમાવેશ થાય છે

બુટસ્ટ્રેપ ચાર પ્રકારના ફોર્મ લેઆઉટ માટે સપોર્ટ સાથે આવે છે:

• વર્ટિકલ (ડિફૉલ્ટ)
• શોધો
• ઇનલાઇન
• આડી

વિવિધ પ્રકારના ફોર્મ લેઆઉટને માર્કઅપમાં કેટલાક ફેરફારોની જરૂર પડે છે, પરંતુ નિયંત્રણો પોતે જ રહે છે અને વર્તે છે.

નિયંત્રણ રાજ્યો અને વધુ

બુટસ્ટ્રેપના ફોર્મમાં તમામ બેઝ ફોર્મ કંટ્રોલ જેવા કે ઇનપુટ, ટેક્સ્ટેરિયા અને તમે અપેક્ષા રાખતા હો તે પસંદ કરવા માટેની શૈલીઓનો સમાવેશ થાય છે. પરંતુ તે સંખ્યાબંધ કસ્ટમ ઘટકો સાથે પણ આવે છે જેમ કે એપેન્ડેડ અને પ્રીપેન્ડેડ ઇનપુટ્સ અને ચેકબોક્સની યાદી માટે સપોર્ટ.

દરેક પ્રકારના ફોર્મ નિયંત્રણ માટે ભૂલ, ચેતવણી અને સફળતા જેવા રાજ્યોનો સમાવેશ કરવામાં આવ્યો છે. અક્ષમ નિયંત્રણો માટેની શૈલીઓ પણ શામેલ છે.

મૂળભૂત સ્વરૂપ

v2.0 સાથે, અમારી પાસે ફોર્મ શૈલીઓ માટે હળવા અને સ્માર્ટ ડિફોલ્ટ છે. કોઈ વધારાના માર્કઅપ નથી, ફક્ત ફોર્મ નિયંત્રણો.

<ફોર્મ વર્ગ = "સારી" > 
  <label> લેબલ નામ </label>
  <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "span3" પ્લેસહોલ્ડર = "કંઈક લખો..." >   
  <span class = "help-inline" > સંકળાયેલ સહાય ટેક્સ્ટ! </span> 
  <લેબલ વર્ગ = "ચેકબોક્સ" > 
    <ઇનપુટ પ્રકાર = "ચેકબોક્સ" > મને તપાસો 
  </ label>
  <button type = "submit" class = "btn" > સબમિટ કરો </button>  
</form>

શોધ ફોર્મ

ડિફૉલ્ટ વેબકિટ શૈલીઓનું પ્રતિબિંબ, ફક્ત .form-searchવધારાના ગોળાકાર શોધ ક્ષેત્રો માટે ઉમેરો.

<ફોર્મ વર્ગ = "વેલ ફોર્મ-સર્ચ" > 
  <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "ઇનપુટ-મધ્યમ શોધ-ક્વેરી" >  
  <button type = "submit" class = "btn" > શોધો </button>  
</form>

ઇનલાઇન ફોર્મ

ઇનપુટ્સ શરૂ કરવા માટે બ્લોક સ્તર છે. માટે .form-inlineઅને .form-horizontal, અમે ઇનલાઇન-બ્લોકનો ઉપયોગ કરીએ છીએ.

<ફોર્મ વર્ગ = "વેલ ફોર્મ-ઇનલાઇન" > 
  <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "ઇનપુટ-સ્મોલ" પ્લેસહોલ્ડર = "ઇમેઇલ" >   
  <ઇનપુટ પ્રકાર = "પાસવર્ડ" વર્ગ = "ઇનપુટ-સ્મોલ" પ્લેસહોલ્ડર = "પાસવર્ડ" >   
  <button type = "submit" class = "btn" > જાઓ </button>  
</form>

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

ઉપરોક્ત ઉદાહરણ ફોર્મ લેઆઉટને જોતાં, અહીં પ્રથમ ઇનપુટ અને નિયંત્રણ જૂથ સાથે સંકળાયેલ માર્કઅપ છે. સ્ટાઇલ માટે , .control-group, .control-labelઅને .controlsવર્ગો બધા જરૂરી છે.

<ફોર્મ વર્ગ = "ફોર્મ-હોરીઝોન્ટલ" > 
  <fieldset>
    <દંતકથા> દંતકથા ટેક્સ્ટ </ લિજેન્ડ>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > ટેક્સ્ટ ઇનપુટ </label>  
      <div વર્ગ = "નિયંત્રણો" > 
        <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "input-xlarge" id = "input01" >   
        <p class = "help-block" > સહાયક મદદ ટેક્સ્ટ </p> 
      </div>
    </div>
  </fieldset>
</form>

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

અમે સપોર્ટ કરીએ છીએ તે તમામ ડિફોલ્ટ ફોર્મ નિયંત્રણો ડાબી બાજુએ દર્શાવેલ છે. અહીં બુલેટેડ સૂચિ છે:

• ટેક્સ્ટ ઇનપુટ્સ (ટેક્સ્ટ, પાસવર્ડ, ઇમેઇલ, વગેરે)
• ચેકબોક્સ
• રેડિયો
• પસંદ કરો
• બહુવિધ પસંદ કરો
• ફાઇલ ઇનપુટ
• ટેક્સટેરિયા

v2.0 સાથે નવા ડિફોલ્ટ

v1.4 સુધી, બુટસ્ટ્રેપની ડિફોલ્ટ ફોર્મ શૈલીઓ આડી લેઆઉટનો ઉપયોગ કરે છે. બુટસ્ટ્રેપ 2 સાથે, અમે કોઈપણ ફોર્મ માટે વધુ સ્માર્ટ, વધુ સ્કેલેબલ ડિફોલ્ટ્સ રાખવા માટે તે અવરોધ દૂર કર્યો છે.

ફરીથી ડિઝાઇન કરેલ બ્રાઉઝર સ્ટેટ્સ

બુટસ્ટ્રેપ બ્રાઉઝર-સપોર્ટેડ ફોકસ્ડ અને સ્ટેટ્સ માટે શૈલીઓ disabledદર્શાવે છે. અમે ડિફૉલ્ટ વેબકિટ દૂર કરીએ છીએ અને તેના સ્થાને outlineએક લાગુ કરીએ છીએ .box-shadow:focus

ફોર્મ માન્યતા

તેમાં ભૂલો, ચેતવણીઓ અને સફળતા માટે માન્યતા શૈલીઓ પણ શામેલ છે. ઉપયોગ કરવા માટે, આસપાસનામાં ભૂલ વર્ગ ઉમેરો .control-group.

<ફિલ્ડસેટ
  વર્ગ = "નિયંત્રણ-જૂથ ભૂલ" >
  …
</fieldset>

ઇનપુટ્સ આગળ અને જોડો

ઇનપુટ જૂથો—જોડાયેલ અથવા પૂર્વ-પેન્ડ કરેલા ટેક્સ્ટ સાથે—તમારા ઇનપુટ્સ માટે વધુ સંદર્ભ આપવા માટે એક સરળ રીત પ્રદાન કરે છે. શ્રેષ્ઠ ઉદાહરણોમાં Twitter વપરાશકર્તાનામો માટે @ સાઇન અથવા ફાઇનાન્સ માટે $નો સમાવેશ થાય છે.

ચેકબોક્સ અને રેડિયો

v1.4 સુધી, બુટસ્ટ્રેપને ચેકબોક્સ અને રેડિયોની આસપાસ વધારાના માર્કઅપની જરૂર પડે છે. <label class="checkbox">હવે, તે લપેટીને પુનરાવર્તિત કરવાની એક સરળ બાબત છે <input type="checkbox">.

ઇનલાઇન ચેકબોક્સ અને રેડિયો પણ સપોર્ટેડ છે. ફક્ત .inlineકોઈપણમાં ઉમેરો .checkboxઅથવા .radioઅને તમે પૂર્ણ કરી લો.

ઇનલાઇન ફોર્મ્સ અને જોડો/પ્રીપેન્ડ કરો

ઇનલાઇન ફોર્મમાં ઇનપુટ્સ પ્રીપેન્ડ અથવા એપેન્ડનો ઉપયોગ કરવા માટે , ખાલી જગ્યાઓ વિના, અને સમાન લાઇન પર .add-onમૂકવાની ખાતરી કરો .input

ફોર્મ સહાય ટેક્સ્ટ

તમારા ફોર્મ ઇનપુટ્સ માટે હેલ્પ ટેક્સ્ટ ઉમેરવા માટે, ઇનલાઇન હેલ્પ ટેક્સ્ટ સાથે <span class="help-inline">અથવા <p class="help-block">ઇનપુટ એલિમેન્ટ પછી હેલ્પ ટેક્સ્ટ બ્લોકનો સમાવેશ કરો.

ક્રિયાઓ માટે બટનો

સંમેલન તરીકે, બટનોનો ઉપયોગ ફક્ત ક્રિયાઓ માટે જ થવો જોઈએ જ્યારે ઑબ્જેક્ટ માટે હાઇપરલિંકનો ઉપયોગ કરવાનો હોય. દાખલા તરીકે, "ડાઉનલોડ" એક બટન હોવું જોઈએ જ્યારે "તાજેતરની પ્રવૃત્તિ" એક લિંક હોવી જોઈએ.

.btnબટન શૈલીઓ લાગુ કરેલ વર્ગ સાથે કોઈપણ વસ્તુ પર લાગુ કરી શકાય છે . જો કે, સામાન્ય રીતે તમે આને માત્ર <a>અને <button>તત્વો પર જ લાગુ કરવા માંગો છો.

ક્રોસ બ્રાઉઝર સુસંગતતા

IE9 ગોળાકાર ખૂણાઓ પર પૃષ્ઠભૂમિ ઢાળ કાપતું નથી, તેથી અમે તેને દૂર કરીએ છીએ. સંબંધિત, IE9 અક્ષમ તત્વોને જાંકીકૃત buttonકરે છે, એક બીભત્સ ટેક્સ્ટ-શેડો સાથે ટેક્સ્ટ ગ્રે રેન્ડર કરે છે જેને અમે ઠીક કરી શકતા નથી.

બહુવિધ કદ

ફેન્સી મોટા કે નાના બટનો? ઉમેરો .btn-large, .btn-small, અથવા .btn-miniબે વધારાના કદ માટે.

પ્રાથમિક કાર્યવાહી ક્રિયા

પ્રાથમિક કાર્યવાહી ક્રિયા

પ્રાથમિક કાર્યવાહી ક્રિયા

અપંગ રાજ્ય

અક્ષમ બટનો માટે, .disabledવર્ગને લિંક્સમાં ઉમેરો અને તત્વો માટે disabledવિશેષતા .<button>

પ્રાથમિક લિંક લિંક

પ્રાથમિક બટન બટન

હેડ અપ! અમે .disabledઅહીં ઉપયોગિતા વર્ગ તરીકે ઉપયોગ કરીએ છીએ, સામાન્ય .activeવર્ગની જેમ, તેથી કોઈ ઉપસર્ગની જરૂર નથી.

એક વર્ગ, બહુવિધ ટૅગ્સ

, , અથવા તત્વ .btnપર વર્ગનો ઉપયોગ કરો .<a><button><input>

<a class="btn" href=""> લિંક </a> _ _ _ _ _  
<બટન વર્ગ = "btn" પ્રકાર = "સબમિટ કરો" >  
  બટન
</ બટન>
<ઇનપુટ વર્ગ = "btn" પ્રકાર = "બટન"  
         મૂલ્ય = "ઇનપુટ" >
<ઇનપુટ વર્ગ = "btn" પ્રકાર = "સબમિટ કરો"  
         મૂલ્ય = "સબમિટ કરો" >

શ્રેષ્ઠ પ્રેક્ટિસ તરીકે, ક્રોસ-બ્રાઉઝર રેન્ડરિંગ સાથે મેળ ખાતી હોય તેની ખાતરી કરવા માટે તમારા સંદર્ભ માટે ઘટક સાથે મેળ કરવાનો પ્રયાસ કરો. જો તમારી પાસે હોય , તો તમારા બટન માટે એકનો inputઉપયોગ કરો.<input type="submit">

• આઇકોન-ગ્લાસ
• આઇકોન-સંગીત
• ચિહ્ન-શોધ
• ચિહ્ન-પરબિડીયું
• ચિહ્ન-હૃદય
• આઇકોન-સ્ટાર
• આઇકોન-સ્ટાર-ખાલી
• ચિહ્ન-વપરાશકર્તા
• આઇકોન-ફિલ્મ
• ચિહ્ન-થી-મોટા
• icon-th
• icon-th-list
• આઇકોન-ઓકે
• ચિહ્ન-દૂર કરો
• આઇકન-ઝૂમ-ઇન
• આઇકોન-ઝૂમ-આઉટ
• આઇકોન-ઓફ
• આઇકોન-સિગ્નલ
• icon-cog
• ચિહ્ન-કચરો
• icon-home
• icon-file
• ચિહ્ન-સમય
• આઇકોન-રોડ
• icon-download-alt
• આઇકોન-ડાઉનલોડ કરો
• આઇકોન-અપલોડ
• icon-inbox
• આઇકોન-પ્લે-સર્કલ
• આઇકોન-રીપીટ

• આઇકોન-રિફ્રેશ
• icon-list-alt
• આઇકોન-લોક
• ચિહ્ન-ધ્વજ
• આઇકોન-હેડફોન
• આઇકન-વોલ્યુમ-ઓફ
• આઇકન-વોલ્યુમ-ડાઉન
• આઇકન-વોલ્યુમ-અપ
• icon-qrcode
• આઇકોન-બારકોડ
• આઇકોન-ટેગ
• આઇકોન-ટેગ્સ
• આઇકોન-બુક
• ચિહ્ન-બુકમાર્ક
• આઇકોન-પ્રિન્ટ
• આઇકોન-કેમેરો
• આઇકોન-ફોન્ટ
• ચિહ્ન-બોલ્ડ
• આઇકોન-ઇટાલિક
• ચિહ્ન-ટેક્સ્ટ-ઊંચાઈ
• ચિહ્ન-ટેક્સ્ટ-પહોળાઈ
• ચિહ્ન-સંરેખિત-ડાબે
• ચિહ્ન-સંરેખિત-કેન્દ્ર
• ચિહ્ન-સંરેખિત-જમણે
• icon-align-justify
• ચિહ્ન-સૂચિ
• આઇકન-ઇન્ડેન્ટ-ડાબે
• આઇકન-ઇન્ડેન્ટ-જમણે
• આઇકોન-ફેસટાઇમ-વિડિયો
• ચિહ્ન-ચિત્ર

• આઇકોન-પેન્સિલ
• ચિહ્ન-નકશો-માર્કર
• icon-adjust
• આઇકોન-ટિન્ટ
• ચિહ્ન-સંપાદિત કરો
• આઇકન-શેર
• આઇકોન-ચેક
• આઇકોન-મૂવ
• આઇકન-સ્ટેપ-પછાત
• icon-fast-backward
• ચિહ્ન-પછાત
• આઇકોન-પ્લે
• ચિહ્ન-વિરામ
• આઇકોન-સ્ટોપ
• આઇકન-ફોરવર્ડ
• આઇકન-ફાસ્ટ-ફોરવર્ડ
• આઇકન-સ્ટેપ-ફોરવર્ડ
• ચિહ્ન-બહાર કાઢો
• ચિહ્ન-શેવરોન-ડાબે
• ચિહ્ન-શેવરોન-જમણે
• આઇકોન-પ્લસ-સાઇન
• ચિહ્ન-માઈનસ-સાઇન
• ચિહ્ન-દૂર કરો-સાઇન
• આઇકોન-ઓકે-સાઇન
• ચિહ્ન-પ્રશ્ન-ચિહ્ન
• ચિહ્ન-માહિતી-ચિહ્ન
• આઇકોન-સ્ક્રીનશોટ
• ચિહ્ન-દૂર-વર્તુળ
• ચિહ્ન-ઓકે-વર્તુળ
• ચિહ્ન-પ્રતિબંધ-વર્તુળ

• ચિહ્ન-તીર-ડાબે
• ચિહ્ન-તીર-જમણે
• આઇકોન-એરો-અપ
• ચિહ્ન-તીર-નીચે
• icon-share-alt
• આયકન-રિસાઈઝ-��ુલ
• icon-resize-small
• આઇકોન-પ્લસ
• ચિહ્ન-માઈનસ
• ચિહ્ન-ફૂદડી
• ચિહ્ન-ઉદગાર-ચિહ્ન
• ચિહ્ન-ભેટ
• ચિહ્ન-પર્ણ
• આઇકોન-ફાયર
• આઇકોન-આઇ-ઓપન
• આઇકોન-આંખ-બંધ
• ચિહ્ન-ચેતવણી-ચિહ્ન
• આઇકોન-પ્લેન
• આઇકોન-કેલેન્ડર
• ચિહ્ન-રેન્ડમ
• ચિહ્ન-ટિપ્પણી
• ચિહ્ન-ચુંબક
• આઇકોન-શેવરોન-અપ
• આઇકોન-શેવરોન-ડાઉન
• આઇકન-રીટ્વીટ
• આઇકોન-શોપિંગ-કાર્ટ
• આઇકોન-ફોલ્ડર-બંધ
• આઇકન-ફોલ્ડર-ઓપન
• icon-resize-vertical
• આયકન-રિસાઈઝ-હોરીઝોન્ટલ

સ્પ્રાઈટ તરીકે બિલ્ટ

Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

How to use

With v2.0.1, we have opted to use an <i> tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class:

<i class="icon-search icon-white"></i>

There are 120 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

Use cases

Icons are great, but where would one use them? Here are a few ideas:

• As visuals for your sidebar navigation
• For a purely icon-driven navigation
• For buttons to help convey the meaning of an action
• With links to share context on a user's destination

અનિવાર્યપણે, તમે ગમે ત્યાં <i>ટેગ મૂકી શકો છો, તમે આઇકન મૂકી શકો છો.

તાજું કરો ચેકઆઉટ કાઢી નાખો

ટિપ્પણી સેટિંગ્સ વધુ માહિતી