સ્કેફોલ્ડિંગની ટોચ પર, મૂળભૂત HTML તત્વોને તાજા, સુસંગત દેખાવ અને અનુભૂતિ પ્રદાન કરવા માટે એક્સ્ટેન્સિબલ વર્ગો સાથે સ્ટાઇલ અને ઉન્નત કરવામાં આવે છે.
સમગ્ર ટાઇપોગ્રાફિક ગ્રીડ અમારી 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.
| તત્વ | ઉપયોગ | વૈકલ્પિક |
|---|---|---|
<strong> |
મહત્વપૂર્ણ સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે | કોઈ નહિ |
<em> |
તણાવ સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે | કોઈ નહિ |
<abbr> |
હોવર પર વિસ્તૃત સંસ્કરણ બતાવવા માટે સંક્ષિપ્ત શબ્દો અને સંક્ષિપ્ત શબ્દો લપેટી |
.initialismઅપરકેસ સંક્ષેપ માટે વર્ગનો ઉપયોગ કરો . |
<address> |
તેના નજીકના પૂર્વજ અથવા સમગ્ર કાર્ય માટે સંપર્ક માહિતી માટે | સાથે તમામ રેખાઓ સમાપ્ત કરીને ફોર્મેટિંગ સાચવો<br> |
ફ્યુસે ડેપિબસ , ટેલસ એસી કર્સસ કોમોડો , ટોર્ટર મૌરીસ કન્ડીમેન્ટમ નિભ , યુટ ફર્મેન્ટમ માસ્સા જસ્ટો સીટ એમેટ રીસસ. Maecenas faucibus mollis interdum. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ.
નોંધ: નિઃસંકોચ ઉપયોગ કરો <b>અને <i>HTML5 માં, પરંતુ તેમનો વપરાશ થોડો બદલાયો છે. <b>વધારાના મહત્વ આપ્યા વિના શબ્દો અથવા શબ્દસમૂહોને પ્રકાશિત કરવા માટે છે જ્યારે <i>મોટે ભાગે અવાજ, તકનીકી શબ્દો વગેરે માટે છે.
<address>ટેગનો ઉપયોગ કેવી રીતે કરી શકાય તેના બે ઉદાહરણો અહીં આપ્યા છે :
લક્ષણ સાથેના titleસંક્ષેપોમાં હળવા ડોટેડ બોટમ બોર્ડર અને હોવર પર મદદ કર્સર હોય છે. આ વપરાશકર્તાઓને વધારાના સંકેત આપે છે કે હોવર પર કંઈક બતાવવામાં આવશે.
initialismવર્ગને થોડું નાનું લખાણ કદ આપીને ટાઇપોગ્રાફિક સંવાદિતા વધારવા માટે સંક્ષિપ્તમાં ઉમેરો .
કાતરી બ્રેડ પછી HTML એ શ્રેષ્ઠ વસ્તુ છે.
એટ્રિબ્યુટ શબ્દનું સંક્ષિપ્ત નામ attr છે .
| તત્વ | ઉપયોગ | વૈકલ્પિક |
|---|---|---|
<blockquote> |
અન્ય સ્ત્રોતમાંથી કન્ટેન્ટ ટાંકવા માટે બ્લોક-લેવલ એલિમેન્ટ |
.pull-leftઅને વર્ગો.pull-right |
<small> |
યુઝર-ફેસિંગ ટાંકણ ઉમેરવા માટે વૈકલ્પિક ઘટક, સામાન્ય રીતે કામના શીર્ષક સાથે લેખક | <cite>સ્ત્રોતના શીર્ષક અથવા નામની આસપાસ મૂકો |
<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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
સાથે કોડના ઇનલાઇન સ્નિપેટ્સ લપેટી <code>.
- ઉદાહરણ તરીકે , <code> વિભાગ </ code > ઇનલાઇન તરીકે આવરિત હોવું જોઈએ .
<pre>કોડની બહુવિધ રેખાઓ માટે ઉપયોગ કરો . યોગ્ય રેન્ડરીંગ માટે કોડમાં કોઈપણ એંગલ કૌંસમાંથી છટકી જવાની ખાતરી કરો.
<p>અહીં નમૂનાનો ટેક્સ્ટ...</p>
- <pre>
- <p>નમૂનો ટેક્સ્ટ અહીં...</p>
- </pre>
નોંધ:<pre> ટૅગ્સની અંદર કોડ શક્ય તેટલી ડાબી બાજુએ રાખવાની ખાતરી કરો ; તે તમામ ટેબને રેન્ડર કરશે.
તમે વૈકલ્પિક રીતે .pre-scrollableવર્ગ ઉમેરી શકો છો જે 350px ની મહત્તમ-ઊંચાઈ સેટ કરશે અને y-અક્ષ સ્ક્રોલબાર પ્રદાન કરશે.
સમાન <pre>તત્વ લો અને ઉન્નત રેન્ડરીંગ માટે બે વૈકલ્પિક વર્ગો ઉમેરો.
- <p> નમૂનાનો ટેક્સ્ટ અહીં... </p>
- <પ્રી ક્લાસ = "પ્રીટી પ્રિન્ટ
- લિનમ્સ" >
- <p>નમૂનો ટેક્સ્ટ અહીં...</p>
- </pre>
google-code-prettify ડાઉનલોડ કરો અને કેવી રીતે ઉપયોગ કરવો તે માટે રીડમી જુઓ.
| ટેગ | વર્ણન |
|---|---|
<table> |
ટેબ્યુલર ફોર્મેટમાં ડેટા પ્રદર્શિત કરવા માટે રેપિંગ એલિમેન્ટ |
<thead> |
<tr>ટેબલ કૉલમ્સને લેબલ કરવા માટે કોષ્ટક હેડર પંક્તિઓ ( ) માટે કન્ટેનર ઘટક |
<tbody> |
<tr>કોષ્ટકની પંક્તિઓ ( ) માટે ટેબલના મુખ્ય ભાગમાં કન્ટેનર તત્વ |
<tr> |
એક પંક્તિ પર દેખાતા ટેબલ કોષો ( <td>અથવા ) ના સમૂહ માટે કન્ટેનર તત્વ<th> |
<td> |
ડિફૉલ્ટ ટેબલ સેલ |
<th> |
કૉલમ (અથવા પંક્તિ, અવકાશ અને પ્લેસમેન્ટના આધારે) લેબલ્સ માટે ખાસ ટેબલ સેલનો ઉપયોગ એમાં થવો જોઈએ <thead> |
<caption> |
કોષ્ટકમાં શું છે તેનું વર્ણન અથવા સારાંશ, ખાસ કરીને સ્ક્રીન રીડર્સ માટે ઉપયોગી |
- <ટેબલ>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </ ટેબલ>
| નામ | વર્ગ | વર્ણન |
|---|---|---|
| ડિફૉલ્ટ | કોઈ નહિ | કોઈ શૈલીઓ નથી, ફક્ત કૉલમ અને પંક્તિઓ |
| પાયાની | .table |
પંક્તિઓ વચ્ચે માત્ર આડી રેખાઓ |
| સરહદી | .table-bordered |
ખૂણાઓને ગોળાકાર કરે છે અને બાહ્ય સરહદ ઉમેરે છે |
| ઝેબ્રા-પટ્ટી | .table-striped |
વિચિત્ર પંક્તિઓ (1, 3, 5, વગેરે) માં આછો રાખોડી પૃષ્ઠભૂમિ રંગ ઉમેરે છે |
| કન્ડેન્સ્ડ | .table-condensed |
વર્ટિકલ પેડિંગને અડધા ભાગમાં, 8px થી 4px સુધી, બધા tdઅને thતત્વોમાં કાપે છે |
વાંચનક્ષમતા સુનિશ્ચિત કરવા અને માળખું જાળવવા માટે કોષ્ટકો આપમેળે માત્ર થોડી સરહદો સાથે સ્ટાઇલ કરવામાં આવે છે. 2.0 સાથે, .tableવર્ગ જરૂરી છે.
- <ટેબલ વર્ગ = "ટેબલ" >
- …
- </ ટેબલ>
| # | પ્રથમ નામ | છેલ્લું નામ | વપરાશકર્તા નામ |
|---|---|---|---|
| 1 | ચિહ્ન | ઓટ્ટો | @mdo |
| 2 | જેકબ | થોર્ન્ટન | @ચરબી |
| 3 | લેરી | પક્ષી |
ઝેબ્રા-સ્ટ્રાઇપિંગ ઉમેરીને તમારા કોષ્ટકો સાથે થોડી ફેન્સી મેળવો—ફક્ત .table-stripedવર્ગ ઉમેરો.
નોંધ: પટ્ટાવાળી કોષ્ટકો :nth-childCSS પસંદગીકારનો ઉપયોગ કરે છે અને IE7-IE8 માં ઉપલબ્ધ નથી.
- <ટેબલ વર્ગ = "ટેબલ ટેબલ-પટ્ટાવાળી" >
- …
- </ ટેબલ>
| # | પ્રથમ નામ | છેલ્લું નામ | વપરાશકર્તા નામ |
|---|---|---|---|
| 1 | ચિહ્ન | ઓટ્ટો | @mdo |
| 2 | જેકબ | થોર્ન્ટન | @ચરબી |
| 3 | લેરી | પક્ષી |
સૌંદર્યલક્ષી હેતુઓ માટે સમગ્ર ટેબલની આસપાસ કિનારીઓ અને ગોળાકાર ખૂણાઓ ઉમેરો.
- <ટેબલ વર્ગ = "ટેબલ ટેબલ-બોર્ડર્ડ" >
- …
- </ ટેબલ>
| # | પ્રથમ નામ | છેલ્લું નામ | વપરાશકર્તા નામ |
|---|---|---|---|
| 1 | ચિહ્ન | ઓટ્ટો | @mdo |
| ચિહ્ન | ઓટ્ટો | @getbootstrap | |
| 2 | જેકબ | થોર્ન્ટન | @ચરબી |
| 3 | લેરી ધ બર્ડ | ||
.table-condensedટેબલ સેલ પેડિંગને અડધા ભાગમાં (8px થી 4px સુધી) કાપવા માટે વર્ગ ઉમેરીને તમારા કોષ્ટકોને વધુ સઘન બનાવો .
- <ટેબલ વર્ગ = "ટેબલ ટેબલ-કન્ડેન્સ્ડ" >
- …
- </ ટેબલ>
| # | પ્રથમ નામ | છેલ્લું નામ | વપરાશકર્તા નામ |
|---|---|---|---|
| 1 | ચિહ્ન | ઓટ્ટો | @mdo |
| 2 | જેકબ | થોર્ન્ટન | @ચરબી |
| 3 | લેરી ધ બર્ડ | ||
કોઈપણ ઉપલબ્ધ વર્ગોનો ઉપયોગ કરીને વિવિધ દેખાવ પ્રાપ્ત કરવા માટે કોઈપણ કોષ્ટક વર્ગોને જોડવા માટે નિઃસંકોચ.
- <ટેબલ વર્ગ = "ટેબલ ટેબલ-પટ્ટાવાળી ટેબલ-બોર્ડર્ડ ટેબલ-કન્ડેન્સ્ડ" >
- ...
- </ ટેબલ>
| પૂરું નામ | |||
|---|---|---|---|
| # | પ્રથમ નામ | છેલ્લું નામ | વપરાશકર્તા નામ |
| 1 | ચિહ્ન | ઓટ્ટો | @mdo |
| 2 | જેકબ | થોર્ન્ટન | @ચરબી |
| 3 | લેરી ધ બર્ડ | ||
બુટસ્ટ્રેપમાં ફોર્મ્સ વિશેની સૌથી સારી બાબત એ છે કે તમારા બધા ઇનપુટ્સ અને નિયંત્રણો તમે તમારા માર્કઅપમાં કેવી રીતે બનાવો છો તે કોઈ બાબત નથી. કોઈ અનાવશ્યક HTML ની આવશ્યકતા નથી, પરંતુ અમે જેમને તેની જરૂર છે તેમના માટે પેટર્ન પ્રદાન કરીએ છીએ.
વધુ જટિલ લેઆઉટ સરળ સ્ટાઇલ અને ઇવેન્ટ બંધન માટે સંક્ષિપ્ત અને માપી શકાય તેવા વર્ગો સાથે આવે છે, જેથી તમે દરેક પગલા પર આવરી લેશો.
બુટસ્ટ્રેપ ચાર પ્રકારના ફોર્મ લેઆઉટ માટે સપોર્ટ સાથે આવે છે:
વિવિધ પ્રકારના ફોર્મ લેઆઉટને માર્કઅપમાં કેટલાક ફેરફારોની જરૂર પડે છે, પરંતુ નિયંત્રણો પોતે જ રહે છે અને વર્તે છે.
બુટસ્ટ્રેપના ફોર્મમાં તમામ બેઝ ફોર્મ કંટ્રોલ જેવા કે ઇનપુટ, ટેક્સ્ટેરિયા અને તમે અપેક્ષા રાખતા હો તે પસંદ કરવા માટેની શૈલીઓનો સમાવેશ થાય છે. પરંતુ તે સંખ્યાબંધ કસ્ટમ ઘટકો સાથે પણ આવે છે જેમ કે એપેન્ડેડ અને પ્રીપેન્ડેડ ઇનપુટ્સ અને ચેકબોક્સની યાદી માટે સપોર્ટ.
દરેક પ્રકારના ફોર્મ નિયંત્રણ માટે ભૂલ, ચેતવણી અને સફળતા જેવા રાજ્યોનો સમાવેશ કરવામાં આવ્યો છે. અક્ષમ નિયંત્રણો માટેની શૈલીઓ પણ શામેલ છે.
બુટસ્ટ્રેપ સામાન્ય વેબ સ્વરૂપોની ચાર શૈલીઓ માટે સરળ માર્કઅપ અને શૈલીઓ પ્રદાન કરે છે.
| નામ | વર્ગ | વર્ણન |
|---|---|---|
| વર્ટિકલ (ડિફૉલ્ટ) | .form-vertical (જરૂરી નથી) |
સ્ટૅક્ડ, નિયંત્રણો પર ડાબે સંરેખિત લેબલ્સ |
| ઇનલાઇન | .form-inline |
કોમ્પેક્ટ શૈલી માટે ડાબે સંરેખિત લેબલ અને ઇનલાઇન-બ્લોક નિયંત્રણો |
| શોધો | .form-search |
લાક્ષણિક શોધ સૌંદર્યલક્ષી માટે વધારાની ગોળાકાર ટેક્સ્ટ ઇનપુટ |
| આડી | .form-horizontal |
નિયંત્રણો તરીકે સમાન લાઇન પર ડાબે, જમણે સંરેખિત લેબલોને ફ્લોટ કરો |
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, અમે ઇનલાઇન-બ્લોકનો ઉપયોગ કરીએ છીએ.
- <ફોર્મ વર્ગ = "વેલ ફોર્મ-ઇનલાઇન" >
- <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "ઇનપુટ-સ્મોલ" પ્લેસહોલ્ડર = "ઇમેઇલ" >
- <ઇનપુટ પ્રકાર = "પાસવર્ડ" વર્ગ = "ઇનપુટ-સ્મોલ" પ્લેસહોલ્ડર = "પાસવર્ડ" >
- <લેબલ વર્ગ = "ચેકબોક્સ" >
- <ઇનપુટ પ્રકાર = "ચેકબોક્સ" > મને યાદ રાખો
- </ label>
- <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>
અમે સપોર્ટ કરીએ છીએ તે તમામ ડિફોલ્ટ ફોર્મ નિયંત્રણો ડાબી બાજુએ દર્શાવેલ છે. અહીં બુલેટેડ સૂચિ છે:
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">ઇનપુટ એલિમેન્ટ પછી હેલ્પ ટેક્સ્ટ બ્લોકનો સમાવેશ કરો.
દરેક આયકનને વધારાની વિનંતી કરવાને બદલે, અમે તેને સ્પ્રાઈટમાં કમ્પાઈલ કર્યું છે—એક ફાઈલમાં ઈમેજોનો સમૂહ જે ઈમેજોને પોઝિશન કરવા માટે CSS નો ઉપયોગ કરે છે background-position. આ એ જ પદ્ધતિ છે જેનો અમે Twitter.com પર ઉપયોગ કરીએ છીએ અને તે અમારા માટે સારું કામ કર્યું છે.
.icon-અમારા અન્ય ઘટકોની જેમ, યોગ્ય નેમસ્પેસિંગ અને સ્કોપિંગ માટે બધા ચિહ્નોના વર્ગો સાથે ઉપસર્ગ મૂકવામાં આવે છે. આ અન્ય સાધનો સાથે તકરાર ટાળવામાં મદદ કરશે.
Glyphicons એ અમને અમારી ઓપન-સોર્સ ટૂલકિટમાં હાફલિંગ સેટનો ઉપયોગ કરવાની મંજૂરી આપી છે જ્યાં સુધી અમે અહીં દસ્તાવેજમાં લિંક અને ક્રેડિટ આપીએ છીએ. કૃપા કરીને તમારા પ્રોજેક્ટ્સમાં તે જ કરવાનું વિચારો.
બુટસ્ટ્રેપ <i>તમામ ચિહ્નો માટે ટૅગનો ઉપયોગ કરે છે, પરંતુ તેમની પાસે કોઈ કેસ વર્ગ નથી - માત્ર એક વહેંચાયેલ ઉપસર્ગ. ઉપયોગ કરવા માટે, નીચેનો કોડ લગભગ ગમે ત્યાં મૂકો:
- <i class = "icon-search" ></i>
ઊંધી (સફેદ) ચિહ્નો માટે પણ શૈલીઓ ઉપલબ્ધ છે, જે એક વધારાના વર્ગ સાથે તૈયાર છે:
- <i class = "icon-search icon-white" ></i>
તમારા ચિહ્નો માટે પસંદ કરવા માટે 120 વર્ગો છે. ફક્ત <i>યોગ્ય વર્ગો સાથે ટેગ ઉમેરો અને તમે સેટ થઈ ગયા છો. તમે સંપૂર્ણ સૂચિ sprites.less માં અથવા અહીં આ દસ્તાવેજમાં શોધી શકો છો.
હેડ અપ! ટેક્સ્ટની સ્ટ્રીંગ્સની બાજુમાં ઉપયોગ કરતી વખતે, જેમ કે બટનો અથવા નેવી લિંક્સમાં, <i>યોગ્ય અંતર માટે ટેગ પછી જગ્યા છોડવાની ખાતરી કરો.
ચિહ્નો મહાન છે, પરંતુ કોઈ તેનો ઉપયોગ ક્યાં કરશે? અહીં કેટલાક વિચારો છે:
અનિવાર્યપણે, તમે ગમે ત્યાં <i>ટેગ મૂકી શકો છો, તમે આઇકન મૂકી શકો છો.
ટૂલબાર, નેવિગેશન અથવા પ્રીપેન્ડેડ ફોર્મ ઇનપુટ્સ માટે બટનો, બટન જૂથોમાં તેનો ઉપયોગ કરો.