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

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

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

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

નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. નુલ્લમ આઈડી ડોલર આઈડી નિભ અલ્ટ્રીસીસ વાહન.

લીડ બોડી કોપી

એક ફકરો ઉમેરીને અલગ બનાવો .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ડ્યુસ મોલીસ, તે બિન કોમોડો લેક્ટસ છે.

ભાર વાપરીને

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

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

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

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

પૂરું નામ
[email protected]

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

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

initialismવર્ગને થોડું નાનું લખાણ કદ આપીને ટાઇપોગ્રાફિક સંવાદિતા વધારવા માટે સંક્ષિપ્તમાં ઉમેરો .

કાતરી બ્રેડ પછી 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.

આડું વર્ણન

<dl class="dl-horizontal">

વર્ણન યાદીઓ

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

Euismod

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

Donec id elit non mi porta gravida at eget metus.

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

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

ફ્યુસે ડેપિબસ, ટેલસ એસી કર્સસ કોમોડો, ટોર્ટર મૌરીસ કન્ડીમેન્ટમ નિભ, યુટ ફર્મેન્ટમ મસા જસ્ટો સીટ એમેટ રિસસ.

---

હેડ અપ! આડી વર્ણન સૂચિઓ એવા શબ્દોને કાપી નાખશે જે ડાબી કૉલમ ફિક્સમાં ફિટ થવા માટે ખૂબ લાંબી છે text-overflow. સાંકડા વ્યુપોર્ટમાં, તેઓ ડિફોલ્ટ સ્ટેક કરેલા લેઆઉટમાં બદલાઈ જશે.

ઇનલાઇન

સાથે કોડના ઇનલાઇન સ્નિપેટ્સ લપેટી <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 ડાઉનલોડ કરો અને કેવી રીતે ઉપયોગ કરવો તે માટે રીડમી જુઓ.

ટેગ	વર્ણન
<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>
</ ટેબલ>

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

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

#	પ્રથમ નામ	છેલ્લું ન���મ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી	પક્ષી	@Twitter

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

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

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

#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી	પક્ષી	@Twitter

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

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

#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
	ચિહ્ન	ઓટ્ટો	@getbootstrap
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી ધ બર્ડ		@Twitter

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

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

#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી ધ બર્ડ		@Twitter

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

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

	પૂરું નામ
#	પ્રથમ નામ	છેલ્લું નામ	વપરાશકર્તા નામ
1	ચિહ્ન	ઓટ્ટો	@mdo
2	જેકબ	થોર્ન્ટન	@ચરબી
3	લેરી ધ બર્ડ		@Twitter

લવચીક HTML અને CSS

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

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

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

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

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

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

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

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

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

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

વધારાના માર્કઅપ વિના સ્માર્ટ અને લાઇટવેઇટ ડિફૉલ્ટ.

લેબલ નામ

ઉદાહરણ બ્લોક-લેવલ સહાય ટેક્સ્ટ અહીં.

મને તપાસો સબમિટ કરો

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

શોધ ફોર્મ

.form-searchફોર્મમાં અને .search-queryતેમાં ઉમેરો input.

શોધો

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

ઇનલાઇન ફોર્મ

.form-inlineફોર્મ કંટ્રોલના વર્ટિકલ એલાઈનમેન્ટ અને અંતરને ઝીણવટથી ઉમેરો .

મને યાદ સાઇન ઇન કરો

<ફોર્મ વર્ગ = "વેલ ફોર્મ-ઇનલાઇન" > 
  <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "ઇનપુટ-સ્મોલ" પ્લેસહોલ્ડર = "ઇમેઇલ" >   
  <ઇનપુટ પ્રકાર = "પાસવર્ડ" વર્ગ = "ઇનપુટ-સ્મોલ" પ્લેસહોલ્ડર = "પાસવર્ડ" >   
  <લેબલ વર્ગ = "ચેકબોક્સ" > 
    <ઇનપુટ પ્રકાર = "ચેકબોક્સ" > મને યાદ રાખો 
  </ label>
  <button type = "submit" class = "btn" > સાઇન ઇન કરો </button>  
</form>

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

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

ટેક્સ્ટ ઇનપુટ

ફ્રીફોર્મ ટેક્સ્ટ ઉપરાંત, કોઈપણ HTML5 ટેક્સ્ટ-આધારિત ઇનપુટ આના જેવું દેખાય છે.

ચેકબોક્સ

વિકલ્પ એક છે આ અને તે—તે શા માટે શા માટે સરસ છે તેનો સમાવેશ કરવાની ખાતરી કરો

સૂચિ પસંદ કરો

કંઈક 2 3 4 5

મલ્ટિકોન-પસંદ કરો

1 2 3 4 5

ફાઇલ ઇનપુટ

ટેક્સટેરિયા

ફેરફારો સંગ્રહ રદ કરો

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

ઉપરોક્ત ઉદાહરણ ફોર્મ લેઆઉટને જોતાં, અહીં પ્રથમ ઇનપુટ અને નિયંત્રણ જૂથ સાથે સંકળાયેલ માર્કઅપ છે. સ્ટાઇલ માટે , .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>

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

---

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

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

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

ધ્યાન કેન્દ્રિત ઇનપુટ

અસંપાદિત ઇનપુટ

અહીં કેટલાક મૂલ્ય

અક્ષમ કરેલ ઇનપુટ

અક્ષમ કરેલ ચેકબોક્સ

આ એક અક્ષમ ચેકબોક્સ છે

ચેતવણી સાથે ઇનપુટ

કંઈક ખોટું થયું હશે

ભૂલ સાથે ઇનપુટ

કૃપા કરીને ભૂલ સુધારો

સફળતા સાથે ઇનપુટ

વહુ!

સફળતા સાથે પસંદ કરો

1 2 3 4 5 વહુ!

ફેરફારો સંગ્રહ રદ કરો

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

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

---

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

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

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

---

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

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

---

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

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

ફોર્મ ગ્રીડ માપો

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

.span*ઇનપુટ માપો માટે ગ્રીડ સિસ્ટમમાંથી સમાન વર્ગોનો ઉપયોગ કરો .

વૈકલ્પિક માપો

તમે સ્થિર વર્ગોનો પણ ઉપયોગ કરી શકો છો જે ગ્રીડ પર મેપ ન કરે, પ્રતિભાવશીલ CSS શૈલીઓ સાથે અનુકૂલન કરે અથવા વિવિધ પ્રકારના નિયંત્રણો (દા.ત., inputવિ select.) માટે એકાઉન્ટ હોય.

પ્રીપેન્ડ કરેલ ટેક્સ્ટ

@

અહીં કેટલાક સહાયક ટેક્સ્ટ છે

ઉમેરાયેલ ટેક્સ્ટ

.00

અહીં વધુ સહાય ટેક્સ્ટ છે

ઉમેરો અને આગળ કરો

$ .00

બટન સાથે જોડો

જાઓ!

બે બટન જોડો

શોધો વિકલ્પો

ઇનલાઇન ચેકબોક્સ

1 2 3

ચેકબોક્સ

વિકલ્પ એક છે આ અને તે—તે શા માટે શા માટે સરસ છે તેનો સમાવેશ કરવાની ખાતરી કરો વિકલ્પ બે પણ તપાસી શકાય છે અને ફોર્મ પરિણામોમાં સામેલ કરી શકાય છે વિકલ્પ ત્રણ કરી શકે છે-હા, તમે અનુમાન લગાવ્યું છે-તે પણ તપાસી શકાય છે અને ફોર્મ પરિણામોમાં શામેલ છે

નોંધ: લેબલ્સ ઘણા મોટા ક્લિક વિસ્તારો અને વધુ ઉપયોગી ફોર્મ માટે તમામ વિકલ્પોને ઘેરી લે છે.

રેડિયો બટનો

વિકલ્પ એક છે આ અને તે—તે શા માટે શા માટે સરસ છે તેનો સમાવેશ કરવાની ખાતરી કરો વિકલ્પ બે કંઈક બીજું હોઈ શકે છે અને તેને પસંદ કરવાથી વિકલ્પ એક નાપસંદ થશે

ફેરફારો સંગ્રહ રદ કરો

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

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

.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
• આયકન-રિસાઈઝ-હોરીઝોન્ટલ
• icon-hdd
• આઇકોન-બુલહોર્ન
• આઇકોન-બેલ
• ચિહ્ન-પ્રમાણપત્ર
• આઇકન-થમ્બ્સ-અપ
• આઇકન-થમ્બ્સ-ડાઉન
• ચિહ્ન-હાથ-જમણે
• ચિહ્ન-હાથ-ડાબે
• આઇકોન-હેન્ડ-અપ
• આઇકોન-હેન્ડ-ડાઉન
• ચિહ્ન-વર્તુળ-તીર-જમણે
• ચિહ્ન-વર્તુળ-તીર-ડાબે
• આઇકન-સર્કલ-એરો-અપ
• આઇકન-સર્કલ-એરો-ડાઉન
• આઇકોન-ગ્લોબ
• આઇકોન-રેંચ
• ચિહ્ન-કાર્યો
• આઇકોન-ફિલ્ટર
• આઇકોન-બ્રિફકેસ
• આયકન-ફુલસ્ક્રીન

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

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

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

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

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

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

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

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

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

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

હેડ અપ! ટેક્સ્ટની સ્ટ્રીંગ્સની બાજુમાં ઉપયોગ કરતી વખતે, જેમ કે બટનો અથવા નેવી લિંક્સમાં, <i>યોગ્ય અંતર માટે ટેગ પછી જગ્યા છોડવાની ખાતરી કરો.

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

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

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

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

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

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

ઈ - મેઈલ સરનામું