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

સમગ્ર ટાઇપોગ્રાફિક ગ્રીડ અમારી 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> ટૅગ્સની અંદર કોડ શક્ય તેટલી ડાબી બાજુએ રાખવાની ખાતરી કરો ; તે તમામ ટેબને રેન્ડર કરશે.

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 સાથે, અમારી પાસે ફોર્મ શૈલીઓ માટે હળવા અને સ્માર્ટ ડિફોલ્ટ છે. કોઈ વધારાના માર્કઅપ નથી, ફક્ત ફોર્મ નિયંત્રણો.

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

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

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

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

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

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>તત્વો પર જ લાગુ કરવા માંગો છો.

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

બહુવિધ કદ

ફેન્સી મોટા કે નાના બટનો? તે છે!

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

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

અપંગ રાજ્ય

અક્ષમ બટનો માટે, .btn-disabledલિંક્સ અને ઘટકો :disabledમાટે ઉપયોગ કરો.<button>

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

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

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

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

સંબંધિત, IE9 અક્ષમ તત્વોને જાંકીકૃત buttonકરે છે, એક બીભત્સ ટેક્સ્ટ-શેડો સાથે ટેક્સ્ટ ગ્રે રેન્ડર કરે છે- કમનસીબે અમે આને ઠીક કરી શકતા નથી.

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

દરેક આયકનને વધારાની વિનંતી કરવાને બદલે, અમે તેને સ્પ્રાઈટમાં કમ્પાઈલ કર્યું છે—એક ફાઈલમાં ઈમેજોનો સમૂહ જે ઈમેજોને પોઝિશન કરવા માટે CSS નો ઉપયોગ કરે છે background-position. આ એ જ પદ્ધતિ છે જેનો અમે Twitter.com પર ઉપયોગ કરીએ છીએ અને તે અમારા માટે સારું કામ કર્યું છે.

.icon-અમારા અન્ય ઘટકોની જેમ, યોગ્ય નેમસ્પેસિંગ અને સ્કોપિંગ માટે બધા ચિહ્નોના વર્ગો સાથે ઉપસર્ગ મૂકવામાં આવે છે. આ અન્ય સાધનો સાથે તકરાર ટાળવામાં મદદ કરશે.

Glyphicons એ અમને અમારી ઓપન-સોર્સ ટૂલકિટમાં હાફલિંગ સેટનો ઉપયોગ કરવાની મંજૂરી આપી છે જ્યાં સુધી અમે અહીં દસ્તાવેજમાં લિંક અને ક્રેડિટ આપીએ છીએ. કૃપા કરીને તમારા પ્રોજેક્ટ્સમાં તે જ કરવાનું વિચારો.

કેવી રીતે વાપરવું

v2.0.0 સાથે, અમે અમારા બધા ચિહ્નો માટે ટેગનો ઉપયોગ કરવાનું પસંદ કર્યું છે <i>, પરંતુ તેમની પાસે કોઈ કેસ વર્ગ નથી-માત્ર એક વહેંચાયેલ ઉપસર્ગ છે. ઉપયોગ કરવા માટે, નીચેનો કોડ લગભગ ગમે ત્યાં મૂકો:

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

ઊંધી (સફેદ) ચિહ્નો માટે પણ શૈલીઓ ઉપલબ્ધ છે, જે એક વધારાના વર્ગ સાથે તૈયાર છે:

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

તમારા ચિહ્નો માટે પસંદ કરવા માટે 120 વર્ગો છે. ફક્ત <i>યોગ્ય વર્ગો સાથે ટેગ ઉમેરો અને તમે સેટ થઈ ગયા છો. તમે સંપૂર્ણ સૂચિ sprites.less માં અથવા અહીં આ દસ્તાવેજમાં શોધી શકો છો.

કેસોનો ઉપયોગ કરો

ચિહ્નો મહાન છે, પરંતુ કોઈ તેનો ઉપયોગ ક્યાં કરશે? અહીં કેટલાક વિચારો છે:

• તમારા સાઇડબાર નેવિગેશન માટે વિઝ્યુઅલ તરીકે
• સંપૂર્ણ રીતે આયકન-સંચાલિત નેવિગેશન માટે
• ક્રિયાનો અર્થ દર્શાવવામાં મદદ કરવા માટે બટનો
• વપરાશકર્તાના ગંતવ્ય પર સંદર્ભ શેર કરવા માટેની લિંક્સ સાથે

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

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

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