બુટસ્ટ્રેપ

આધાર CSS

મૂળભૂત HTML તત્વો એક્સ્ટેન્સિબલ વર્ગો સાથે શૈલીયુક્ત અને ઉન્નત છે.

ટાઇપોગ્રાફી

હેડિંગ

બધા HTML શીર્ષકો, <h1>મારફતે <h6>ઉપલબ્ધ છે.

h1. મથાળું 1

h2. મથાળું 2

h3. મથાળું 3

h4. મથાળું 4

h5. મથાળું 5
h6. મથાળું 6

શારીરિક નકલ

બુટસ્ટ્રેપનું વૈશ્વિક ડિફોલ્ટ 14pxfont-size છે , જેમાં 20px છે . આ અને તમામ ફકરાઓ પર લાગુ થાય છે. વધુમાં, (ફકરો) તેમની રેખા-ઊંચાઈ (ડિફૉલ્ટ રૂપે 10px)નો અડધો તળિયે માર્જિન મેળવે છે.line-height<body><p>

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

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

લીડ બોડી કોપી

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

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

<p વર્ગ = "લીડ" > ... </p>

લેસ સાથે બિલ્ટ

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

ભાર

હળવા વજનની શૈલીઓ સાથે HTML ના મૂળભૂત ભાર ટૅગ્સનો ઉપયોગ કરો.

<small>

ઇનલાઇન અથવા ટેક્સ્ટના બ્લોક્સ પર ભાર મૂકવા માટે, નાના ટેગનો ઉપયોગ કરો.

ટેક્સ્ટની આ લાઇનને ફાઇન પ્રિન્ટ તરીકે ગણવામાં આવે છે.

<p> <small> લખાણની આ લાઇનને ફાઇન પ્રિન્ટ તરીકે ગણવામાં આવે છે. </small> </p>

બોલ્ડ

મહત્વપૂર્ણ સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે

ટેક્સ્ટની નીચેની સ્નિપેટ બોલ્ડ ટેક્સ્ટ તરીકે રેન્ડર કરવામાં આવી છે .

<strong> બોલ્ડ ટેક્સ્ટ તરીકે પ્રસ્તુત </strong>

ત્રાંસી

તણાવ સાથે ટેક્સ્ટના સ્નિપેટ પર ભાર મૂકવા માટે

ટેક્સ્ટની નીચેની સ્નિપેટ ઇટાલિક લખાણ તરીકે પ્રસ્તુત કરવામાં આવી છે .

<em> ઇટાલિક લખાણ તરીકે પ્રસ્તુત </em>

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

ભાર વર્ગો

મુઠ્ઠીભર ભાર ઉપયોગિતા વર્ગો સાથે રંગ દ્વારા અર્થ જણાવો.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p વર્ગ = "મ્યૂટ" > ફ્યુસ ડેપિબસ, ટેલસ એસી કર્સસ કોમોડો, ટોર્ટર મૌરીસ નિભ. </p> 
  2. <p class = "ટેક્સ્ટ-ચેતવણી" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

સંક્ષેપ

<abbr>હોવર પર વિસ્તૃત સંસ્કરણ બતાવવા માટે સંક્ષેપ અને ટૂંકાક્ષરો માટે HTML ના તત્વનું શૈલીયુક્ત અમલીકરણ . લક્ષણ સાથેના titleસંક્ષેપોમાં હળવા ડોટેડ બોટમ બોર્ડર અને હોવર પર મદદ કર્સર હોય છે, જે હોવર પર વધારાનો સંદર્ભ આપે છે.

<abbr>

સંક્ષેપના લાંબા હોવર પર વિસ્તૃત ટેક્સ્ટ માટે, titleવિશેષતા શામેલ કરો.

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

<abbr title = "attribute" > attr </abbr>

<abbr class="initialism">

.initialismથોડા નાના ફોન્ટ-સાઇઝ માટે સંક્ષેપમાં ઉમેરો .

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

<abbr શીર્ષક = "હાયપરટેક્સ્ટ માર્કઅપ લેંગ્વેજ" વર્ગ = "પ્રારંભવાદ" > HTML </abbr>

સરનામાં

નજીકના પૂર્વજ અથવા સમગ્ર કાર્ય માટે સંપર્ક માહિતી પ્રસ્તુત કરો.

<address>

સાથે તમામ રેખાઓ સમાપ્ત કરીને ફોર્મેટિંગ સાચવો <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
પૂરું નામ
[email protected] 
  1. <સરનામું>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 ફોલ્સમ એવ, સ્યુટ 600 <br>
  4.   સાન ફ્રાન્સિસ્કો, CA 94107 <br>
  5.   <abbr title = "ફોન" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <સરનામું>
  9.   <strong> પૂરું નામ </strong><br>
  10.   <a href="mailto:#" > [email protected] </a> _ _ 
  11. </address>

બ્લોકક્વોટ્સ

તમારા દસ્તાવેજમાં અન્ય સ્ત્રોતમાંથી સામગ્રીના બ્લોક્સ ટાંકવા માટે.

ડિફૉલ્ટ બ્લોકક્વોટ

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે. </p>
  3. </blockquote>

બ્લોકક્વોટ વિકલ્પો

પ્રમાણભૂત બ્લોકક્વોટ પર સરળ ભિન્નતા માટે શૈલી અને સામગ્રી ફેરફારો.

સ્ત્રોતનું નામકરણ

<small>સ્ત્રોતને ઓળખવા માટે ટેગ ઉમેરો . માં સ્ત્રોત કાર્યનું નામ લપેટી <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.

સ્ત્રોત શીર્ષકમાં પ્રખ્યાત વ્યક્તિ 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે. </p>
  3.   <small> કોઈ પ્રખ્યાત <cite title = "Source Title" > સ્ત્રોત શીર્ષક </cite></small> 
  4. </blockquote>

વૈકલ્પિક ડિસ્પ્લે

.pull-rightફ્લોટેડ, જમણે સંરેખિત બ્લોકક્વોટ માટે ઉપયોગ કરો .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક પોઝ્યુર એ પહેલાથી શરૂ થાય છે.

સ્ત્રોત શીર્ષકમાં પ્રખ્યાત વ્યક્તિ 
  1. <blockquote class = "પુલ-જમણે" > 
  2.   ...
  3. </blockquote>

યાદીઓ

અવ્યવસ્થિત

આઇટમ્સની સૂચિ જેમાં ઓર્ડર સ્પષ્ટપણે વાંધો નથી .

  • 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
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

આદેશ આપ્યો

આઇટમ્સની સૂચિ કે જેમાં ઓર્ડર સ્પષ્ટપણે મહત્વપૂર્ણ છે .

  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
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

અનસ્ટાઇલ

list-styleકોઈ અથવા વધારાના ડાબા પેડિંગ વિનાની વસ્તુઓની સૂચિ .

  • 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
  1. <ul class = "unstyled" > 
  2.   <li> ... </li>
  3. </ul>

વર્ણન

તેમના સંબંધિત વર્ણનો સાથેના શબ્દોની સૂચિ.

વર્ણન યાદીઓ
વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
Euismod
વેસ્ટિબુલમ આઈડી લિગુલા પોર્ટા ફેલિસ યુઈસ્મોડ સેમ્પર એગેટ લેસીનિયા ઓડિયો સેમ એનઈસી એલિટ.
Donec id elit non mi porta gravida at eget metus.
માલેસુડા પોર્ટા
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

આડું વર્ણન

<dl>સાથે -સાથે લાઇનમાં શરતો અને વર્ણનો બનાવો .

વર્ણન યાદીઓ
વર્ણન સૂચિ શબ્દોને વ્યાખ્યાયિત કરવા માટે યોગ્ય છે.
Euismod
વેસ્ટિબુલમ આઈડી લિગુલા પોર્ટા ફેલિસ યુઈસ્મોડ સેમ્પર એગેટ લેસીનિયા ઓડિયો સેમ એનઈસી એલિટ.
Donec id elit non mi porta gravida at eget metus.
માલેસુડા પોર્ટા
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
ફ્યુસે ડેપિબસ, ટેલસ એસી કર્સસ કોમોડો, ટોર્ટર મૌરીસ કન્ડીમેન્ટમ નિભ, યુટ ફર્મેન્ટમ મસા જસ્ટો સીટ એમેટ રિસસ. 
  1. <dl વર્ગ = "dl-આડું" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

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

કોડ

ઇનલાઇન

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

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

મૂળભૂત બ્લોક

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

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

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

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

કોષ્ટકો

ડિફૉલ્ટ શૈલીઓ

.tableમૂળભૂત સ્ટાઇલ માટે—લાઇટ પેડિંગ અને માત્ર આડા ડિવાઇડર— કોઈપણમાં બેઝ ક્લાસ ઉમેરો <table>.

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

વૈકલ્પિક વર્ગો

.tableબેઝ ક્લાસમાં કોઈપણ ફોલો ક્લાસ ઉમેરો .

.table-striped

CSS પસંદગીકાર (IE7-IE8 માં ઉપલબ્ધ નથી) <tbody>દ્વારા કોઈપણ કોષ્ટક પંક્તિમાં ઝેબ્રા-સ્ટ્રાઇપિંગ ઉમેરે છે .:nth-child

# પ્રથમ નામ છેલ્લું નામ વપરાશકર્તા નામ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી પક્ષી @Twitter 
  1. <ટેબલ વર્ગ = "ટેબલ ટેબલ-પટ્ટાવાળી" > 
  2.   …
  3. </ ટેબલ>

.table-bordered

ટેબલ પર કિનારીઓ અને ગોળાકાર ખૂણાઓ ઉમેરો.

# પ્રથમ નામ છેલ્લું નામ વપરાશકર્તા નામ
1 ચિહ્ન ઓટ્ટો @mdo
ચિહ્ન ઓટ્ટો @getbootstrap
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter 
  1. <ટેબલ વર્ગ = "ટેબલ ટેબલ-બોર્ડર્ડ" > 
  2.   …
  3. </ ટેબલ>

.table-hover

કોષ્ટકની પંક્તિઓ પર એક ની અંદર હોવર સ્થિતિને સક્ષમ કરો <tbody>.

# પ્રથમ નામ છેલ્લું નામ વપરાશકર્તા નામ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter 
  1. <ટેબલ વર્ગ = "ટેબલ ટેબલ-હોવર" > 
  2.   …
  3. </ ટેબલ>

.table-condensed

સેલ પેડિંગને અડધા ભાગમાં કાપીને કોષ્ટકોને વધુ કોમ્પેક્ટ બનાવે છે.

# પ્રથમ નામ છેલ્લું નામ વપરાશકર્તા નામ
1 ચિહ્ન ઓટ્ટો @mdo
2 જેકબ થોર્ન્ટન @ચરબી
3 લેરી ધ બર્ડ @Twitter 
  1. <ટેબલ વર્ગ = "ટેબલ ટેબલ-કન્ડેન્સ્ડ" > 
  2.   …
  3. </ ટેબલ>

વૈકલ્પિક પંક્તિ વર્ગો

કોષ્ટક પંક્તિઓને રંગવા માટે સંદર્ભિત વર્ગોનો ઉપયોગ કરો.

વર્ગ વર્ણન
.success સફળ અથવા સકારાત્મક ક્રિયા સૂચવે છે.
.error ખતરનાક અથવા સંભવિત નકારાત્મક ક્રિયા સૂચવે છે.
.warning એક ચેતવણી સૂચવે છે કે જેના પર ધ્યાન આપવાની જરૂર પડી શકે છે.
.info ડિફૉલ્ટ શૈલીઓના વિકલ્પ તરીકે ઉપયોગ થાય છે.
# ઉત્પાદન ચુકવણી લેવામાં આવી છે સ્થિતિ
1 ટીબી - માસિક 01/04/2012 મંજૂર
2 ટીબી - માસિક 02/04/2012 નકારવું
3 ટીબી - માસિક 03/04/2012 બાકી છે
4 ટીબી - માસિક 04/04/2012 પુષ્ટિ કરવા માટે કૉલ કરો 
  1. ...
  2.   < tr વર્ગ = "સફળતા" >
  3.     <td> 1 < /td>
  4.     <td>ટીબી - માસિક</ td >
  5.     < td > 01/04/2012 < / td >
  6.     <td>મંજૂર</ td >
  7.   </ tr >
  8. ...

સપોર્ટેડ ટેબલ માર્કઅપ

સમર્થિત કોષ્ટક HTML ઘટકોની સૂચિ અને તેનો ઉપયોગ કેવી રીતે કરવો જોઈએ.

ટેગ વર્ણન
<table> ટેબ્યુલર ફોર્મેટમાં ડેટા પ્રદર્શિત કરવા માટે રેપિંગ એલિમેન્ટ
<thead> <tr>ટેબલ કૉલમ્સને લેબલ કરવા માટે કોષ્ટક હેડર પંક્તિઓ ( ) માટે કન્ટેનર ઘટક
<tbody> <tr>કોષ્ટકની પંક્તિઓ ( ) માટે ટેબલના મુખ્ય ભાગમાં કન્ટેનર તત્વ
<tr> એક પંક્તિ પર દેખાતા ટેબલ કોષો ( <td>અથવા ) ના સમૂહ માટે કન્ટેનર તત્વ<th>
<td> ડિફૉલ્ટ ટેબલ સેલ
<th> કૉલમ (અથવા પંક્તિ, અવકાશ અને પ્લેસમેન્ટના આધારે) લેબલ્સ માટે ખાસ ટેબલ સેલનો
ઉપયોગ એમાં થવો જોઈએ<thead>
<caption> કોષ્ટકમાં શું છે તેનું વર્ણન અથવા સારાંશ, ખાસ કરીને સ્ક્રીન રીડર્સ માટે ઉપયોગી 
  1. <ટેબલ>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </ ટેબલ>

સ્વરૂપો

ડિફૉલ્ટ શૈલીઓ

વ્યક્તિગત ફોર્મ નિયંત્રણો સ્ટાઇલ મેળવે છે, પરંતુ <form>માર્કઅપમાં અથવા મોટા ફેરફારો પર કોઈપણ આવશ્યક આધાર વર્ગ વિના. ફોર્મ નિયંત્રણોની ટોચ પર સ્ટેક કરેલા, ડાબે સંરેખિત લેબલ્સમાં પરિણામો.

દંતકથા ઉદાહરણ બ્લોક-લેવલ સહાય ટેક્સ્ટ અહીં. 
  1. <ફોર્મ>
  2.   <દંતકથા> દંતકથા </ લિજેન્ડ>
  3.   <label> લેબલ નામ </label>
  4.   <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = "કંઈક લખો..." >  
  5.   <span class = "help-block" > ઉદાહરણ બ્લોક-લેવલ હેલ્પ ટેક્સ્ટ અહીં. </span> 
  6.   <લેબલ વર્ગ = "ચેકબોક્સ" > 
  7.     <ઇનપુટ પ્રકાર = "ચેકબોક્સ" > મને તપાસો 
  8.   </ label>
  9.   <button type = "submit" class = "btn" > સબમિટ કરો </button>  
  10. </form>

વૈકલ્પિક લેઆઉટ

બુટસ્ટ્રેપ સાથે સમાવિષ્ટ સામાન્ય ઉપયોગના કેસ માટે ત્રણ વૈકલ્પિક ફોર્મ લેઆઉટ છે.

શોધ ફોર્મ

વધારાના ગોળાકાર ટેક્સ્ટ ઇનપુટ માટે .form-searchફોર્મમાં અને તેમાં .search-queryઉમેરો .<input>

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

ઇનલાઇન ફોર્મ

.form-inlineકોમ્પેક્ટ લેઆઉટ માટે ડાબે સંરેખિત લેબલ્સ અને ઇનલાઇન-બ્લોક નિયંત્રણો માટે ઉમેરો .

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

આડું સ્વરૂપ

લેબલોને જમણે સંરેખિત કરો અને તેમને નિયંત્રણો જેવી જ લાઇન પર દેખાડવા માટે તેમને ડાબી બાજુએ ફ્લોટ કરો. ડિફૉલ્ટ ફોર્મમાંથી સૌથી વધુ માર્કઅપ ફેરફારોની જરૂર છે:

  • .form-horizontalફોર્મમાં ઉમેરો
  • લેબલ્સ અને નિયંત્રણો અંદર લપેટી.control-group
  • .control-labelલેબલમાં ઉમેરો
  • .controlsયોગ્ય સંરેખણ માટે કોઈપણ સંકળાયેલ નિયંત્રણોને લપેટી લો
દંતકથા 
  1. <ફોર્મ વર્ગ = "ફોર્મ-હોરીઝોન્ટલ" > 
  2.   <div class = "control-group" > 
  3.     <label class = "control-label" for = "inputEmail" > ઇમેઇલ </label>  
  4.     <div વર્ગ = "નિયંત્રણો" > 
  5.       <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" id = "inputEmail" પ્લેસહોલ્ડર = "ઇમેઇલ" >   
  6.     </div>
  7.   </div>
  8.   <div class = "control-group" > 
  9.     <label class = "control-label" for = "inputPassword" > પાસવર્ડ </label>  
  10.     <div વર્ગ = "નિયંત્રણો" > 
  11.       <ઇનપુટ પ્રકાર = "પાસવર્ડ" id = "ઇનપુટ પાસવર્ડ" પ્લેસહોલ્ડર = "પાસવર્ડ" >   
  12.     </div>
  13.   </div>
  14.   <div class = "control-group" > 
  15.     <div વર્ગ = "નિયંત્રણો" > 
  16.       <લેબલ વર્ગ = "ચેકબોક્સ" > 
  17.         <ઇનપુટ પ્રકાર = "ચેકબોક્સ" > મને યાદ રાખો 
  18.       </ label>
  19.       <button type = "submit" class = "btn" > સાઇન ઇન કરો </button>  
  20.     </div>
  21.   </div>
  22. </form>

સપોર્ટેડ ફોર્મ નિયંત્રણો

ઉદાહરણ ફોર્મ લેઆઉટમાં સપોર્ટેડ પ્રમાણભૂત ફોર્મ નિયંત્રણોના ઉદાહરણો.

ઇનપુટ્સ

સૌથી સામાન્ય ફોર્મ નિયંત્રણ, ટેક્સ્ટ-આધારિત ઇનપુટ ફીલ્ડ. તમામ HTML5 પ્રકારો માટે સપોર્ટનો સમાવેશ કરે છે: ટેક્સ્ટ, પાસવર્ડ, તારીખનો સમય, તારીખનો સમય-સ્થાનિક, તારીખ, મહિનો, સમય, સપ્તાહ, નંબર, ઇમેઇલ, url, શોધ, ટેલ અને રંગ.

typeદરેક સમયે ઉલ્લેખિતનો ઉપયોગ જરૂરી છે .

  1. <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = "ટેક્સ્ટ ઇનપુટ" >

ટેક્સટેરિયા

ફોર્મ નિયંત્રણ જે ટેક્સ્ટની બહુવિધ લાઇનને સપોર્ટ કરે છે. rowsઆવશ્યકતા મુજબ વિશેષતા બદલો .

  1. <textarea પંક્તિઓ = "3" ></textarea>

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

ચેકબોક્સ સૂચિમાં એક અથવા અનેક વિકલ્પો પસંદ કરવા માટે છે જ્યારે રેડિયો ઘણામાંથી એક વિકલ્પ પસંદ કરવા માટે છે.

ડિફૉલ્ટ (સ્ટૅક્ડ)


  1. <લેબલ વર્ગ = "ચેકબોક્સ" > 
  2.   <ઇનપુટ પ્રકાર = "ચેકબોક્સ" મૂલ્ય = "" >  
  3.   વિકલ્પ એક છે આ અને તે—તે શા માટે શા માટે સરસ છે તેનો સમાવેશ કરવાની ખાતરી કરો
  4. </ label>
  5.  
  6. <લેબલ વર્ગ = "રેડિયો" > 
  7.   <ઇનપુટ પ્રકાર = "રેડિયો" નામ = "optionsRadios" id = "optionsRadios1 " મૂલ્ય = "option1" ચેક કરેલ >     
  8.   વિકલ્પ એક છે આ અને તે—તે શા માટે શા માટે સરસ છે તેનો સમાવેશ કરવાની ખાતરી કરો
  9. </ label>
  10. <લેબલ વર્ગ = "રેડિયો" > 
  11.   <ઇનપુટ પ્રકાર = "રેડિયો" નામ = "optionsRadios" id = "optionsRadios2" મૂલ્ય = "option2" >    
  12.   વિકલ્પ બે કંઈક બીજું હોઈ શકે છે અને તેને પસંદ કરવાથી વિકલ્પ એક નાપસંદ થશે
  13. </ label>

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

.inlineએક જ લાઇન પર દેખાતા નિયંત્રણો માટે ચેકબોક્સ અથવા રેડિયોની શ્રેણીમાં વર્ગ ઉમેરો .

  1. <લેબલ વર્ગ = "ચેકબોક્સ ઇનલાઇન" > 
  2.   <ઇનપુટ પ્રકાર = "ચેકબોક્સ" id = "ઇનલાઇનચેકબોક્સ1" મૂલ્ય = "વિકલ્પ1 " > 1   
  3. </ label>
  4. <લેબલ વર્ગ = "ચેકબોક્સ ઇનલાઇન" > 
  5.   <ઇનપુટ પ્રકાર = "ચેકબોક્સ" id = "ઇનલાઇનચેકબોક્સ2" મૂલ્ય = "વિકલ્પ2 " > 2   
  6. </ label>
  7. <લેબલ વર્ગ = "ચેકબોક્સ ઇનલાઇન" > 
  8.   <ઇનપુટ પ્રકાર = "ચેકબોક્સ" આઇડી = "ઇનલાઇનચેકબોક્સ3" મૂલ્ય = "વિકલ્પ3 " > 3   
  9. </ label>

પસંદ કરે છે

multiple="multiple"ડિફૉલ્ટ વિકલ્પનો ઉપયોગ કરો અથવા એક સાથે બહુવિધ વિકલ્પો બતાવવા માટે a નો ઉલ્લેખ કરો .


  1. <પસંદ કરો>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </પસંદ કરો>
  8.  
  9. < મલ્ટીપલ પસંદ કરો = "મલ્ટીપલ" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </પસંદ કરો>

ફોર્મ નિયંત્રણોનું વિસ્તરણ

હાલના બ્રાઉઝર નિયંત્રણોની ટોચ પર ઉમેરીને, બુટસ્ટ્રેપમાં અન્ય ઉપયોગી ફોર્મ ઘટકોનો સમાવેશ થાય છે.

પ્રીપેન્ડેડ અને એપેન્ડેડ ઇનપુટ્સ

કોઈપણ ટેક્સ્ટ-આધારિત ઇનપુટ પહેલાં અથવા પછી ટેક્સ્ટ અથવા બટનો ઉમેરો. નોંધ કરો કે selectતત્વો અહીં સમર્થિત નથી.

ડિફૉલ્ટ વિકલ્પો

ઇનપુટમાં ટેક્સ્ટને આગળ વધારવા અથવા જોડવા માટે .add-onએક અને એકને બેમાંથી એક વર્ગ સાથે લપેટી .input

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span><input class = "span2" id = "prependedInput" size = "16" type = "text" પ્લેસહોલ્ડર = "વપરાશકર્તા નામ" >      
  3. </div>
  4. <div class = "input-append" > 
  5.   <input class = "span2" id = "appendedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>     
  6. </div>

સંયુક્ત

.add-onઇનપુટને આગળ વધારવા અને જોડવા માટે બંને વર્ગો અને બે ઉદાહરણોનો ઉપયોગ કરો.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span><input class = "span2" id = "appendedPrependedInput " size = "16" type = "text" ><span class = "add-on" > .00 </span>      
  3. </div>

ટેક્સ્ટને બદલે બટનો

<span>ટેક્સ્ટ સાથેના બદલે, .btnઇનપુટ સાથે બટન (અથવા બે) જોડવા માટે a નો ઉપયોગ કરો.


  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedInputButton " size = "16" type = "text" ><button class = "btn" type = "button" > જાઓ! </ બટન>      
  3. </div>
  4.  
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInputButtons " size = "16" type = "text" ><button class = "btn" type = "button" > શોધ </button><button class = "btn" type = "button" > વિકલ્પો </button>        
  7. </div>

શોધ ફોર્મ

  1. <ફોર્મ વર્ગ = "ફોર્મ-શોધ" > 
  2.   <div class = "input-append" > 
  3.     <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "span2 શોધ-ક્વેરી" >  
  4.     <button type = "submit" class = "btn" > શોધો </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > શોધો </button>  
  8.     <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" વર્ગ = "span2 શોધ-ક્વેરી" >  
  9.   </div>
  10. </form>

માપ બદલવાનું નિયંત્રણ કરો

.input-largeવર્ગોનો ઉપયોગ કરીને ગ્રીડ કૉલમના કદ સાથે તમારા ઇનપુટ્સને મેળ ખાઓ જેવા સંબંધિત કદના વર્ગોનો ઉપયોગ કરો .span*.

સંબંધિત કદ

  1. <input class = "input-mini" type = "text" પ્લેસહોલ્ડર = ".input-mini" >   
  2. <input class = "input-small" type = "text" પ્લેસહોલ્ડર = ".input-small" >   
  3. <ઇનપુટ વર્ગ = "ઇનપુટ-માધ્યમ" પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = ".ઇનપુટ-માધ્યમ" >   
  4. <input class = "input-large" type = "text" પ્લેસહોલ્ડર = ".input-large" >   
  5. <input class = "input-xlarge" type = "text" પ્લેસહોલ્ડર = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" પ્લેસહોલ્ડર = ".input-xxlarge" >

હેડ અપ! ભવિષ્યના સંસ્કરણોમાં, અમે અમારા બટનના કદને મેચ કરવા માટે આ સંબંધિત ઇનપુટ વર્ગોના ઉપયોગને બદલીશું. ઉદાહરણ તરીકે, .input-largeઇનપુટનું પેડિંગ અને ફોન્ટ-સાઇઝ વધારશે.

ગ્રીડ કદ બદલવાનું

ગ્રીડ કૉલમના સમાન કદ સાથે મેળ ખાતા ઇનપુટ્સ માટે .span1to નો ઉપયોગ કરો..span12

  1. <ઇનપુટ વર્ગ = "span1" પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = ".span1" >   
  2. <ઇનપુટ વર્ગ = "span2" પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = ".span2" >   
  3. <ઇનપુટ વર્ગ = "span3" પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = ".span3" >   
  4. <પસંદ વર્ગ = "span1" > 
  5.   ...
  6. </પસંદ કરો>
  7. <પસંદ વર્ગ = "span2" > 
  8.   ...
  9. </પસંદ કરો>
  10. <પસંદ વર્ગ = "span3" > 
  11.   ...
  12. </પસંદ કરો>

લાઇન દીઠ બહુવિધ ગ્રીડ ઇનપુટ્સ માટે, યોગ્ય અંતર માટે મોડિફાયર ક્લાસનો ઉપયોગ કરો.controls-row . તે વ્હાઇટ-સ્પેસને પતન કરવા માટે ઇનપુટ્સને ફ્લોટ કરે છે, યોગ્ય માર્જિન સેટ કરે છે અને ફ્લોટને સાફ કરે છે.

  1. <div વર્ગ = "નિયંત્રણો" > 
  2.   <ઇનપુટ વર્ગ = "span5" પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = ".span5" >   
  3. </div>
  4. <div class = "controls controls-row" > 
  5.   <ઇનપુટ વર્ગ = "span4" પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = ".span4" >   
  6.   <ઇનપુટ વર્ગ = "span1" પ્રકાર = "ટેક્સ્ટ" પ્લેસહોલ્ડર = ".span1" >   
  7. </div>
  8. ...

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

વાસ્તવિક ફોર્મ માર્કઅપનો ઉપયોગ કર્યા વિના સંપાદનયોગ્ય ન હોય તેવા ફોર્મમાં ડેટા પ્રસ્તુત કરો.

અહીં કેટલાક મૂલ્ય 
  1. <span class = "input-xlarge uneditable-input" > અહીં કેટલાક મૂલ્ય </span>

ફોર્મ ક્રિયાઓ

ક્રિયાઓના જૂથ (બટનો) સાથે ફોર્મ સમાપ્ત કરો. જ્યારે ની અંદર મૂકવામાં આવે છે .form-horizontal, ત્યારે બટનો ફોર્મ નિયંત્રણો સાથે લાઇન અપ કરવા માટે આપમેળે ઇન્ડેન્ટ કરશે.

  1. <div વર્ગ = "ફોર્મ-ક્રિયાઓ" > 
  2.   <button type = "submit" class = "btn btn-primary" > ફેરફારો સાચવો </button>  
  3.   <button type = "button" class = "btn" > રદ કરો </button>  
  4. </div>

મદદ ટેક્સ્ટ

ફોર્મ નિયંત્રણોની આસપાસ દેખાતા હેલ્પ ટેક્સ્ટ માટે ઇનલાઇન અને બ્લોક લેવલ સપોર્ટ.

ઇનલાઇન મદદ

ઇનલાઇન મદદ ટેક્સ્ટ 
  1. <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" ><span વર્ગ = "help-inline" > ઇનલાઇન મદદ ટેક્સ્ટ </span>

બ્લોક મદદ

હેલ્પ ટેક્સ્ટનો લાંબો બ્લોક જે નવી લાઇન પર તૂટી જાય છે અને એક લીટીથી આગળ વધી શકે છે. 
  1. <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" ><span વર્ગ = "હેલ્પ-બ્લોક" > મદદ ટેક્સ્ટનો લાંબો બ્લોક જે નવી લાઇન પર તૂટી જાય છે અને એક લીટીથી આગળ વધી શકે છે. </span>

ફોર્મ નિયંત્રણ રાજ્યો

ફોર્મ નિયંત્રણો અને લેબલ્સ પર મૂળભૂત પ્રતિસાદ સ્ટેટ્સ સાથે વપરાશકર્તાઓ અથવા મુલાકાતીઓને પ્રતિસાદ પ્રદાન કરો.

ઇનપુટ ફોકસ

અમે કેટલાક ફોર્મ નિયંત્રણો પર ડિફોલ્ટ outlineશૈલીઓ દૂર કરીએ છીએ અને box-shadowતેના સ્થાને એક લાગુ કરીએ છીએ :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "આ ફોકસ્ડ છે..." >

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

disabledવપરાશકર્તાના ઇનપુટને રોકવા અને થોડો અલગ દેખાવ ટ્રિગર કરવા માટે ઇનપુટ પર વિશેષતા ઉમેરો .

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" પ્લેસહોલ્ડર = "અહીં ઇનપુટ અક્ષમ કરેલું..." અક્ષમ >

માન્યતા જણાવે છે

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

કંઈક ખોટું થયું હશે
કૃપા કરીને ભૂલ સુધારો
વપરાશકર્તા નામ લેવામાં આવ્યું છે
વહુ! 
  1. <div વર્ગ = "નિયંત્રણ-જૂથ ચેતવણી" > 
  2.   <label class = "control-label" for = "inputWarning" > ચેતવણી સાથે ઇનપુટ </label>  
  3.   <div વર્ગ = "નિયંત્રણો" > 
  4.     <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" id = "inputWarning" >  
  5.     <span class = "help-inline" > કંઈક ખોટું થયું હશે </span> 
  6.   </div>
  7. </div>
  8. <div class = "control-group error" > 
  9.   <label class = "control-label" for = "inputError" > ભૂલ સાથે ઇનપુટ </label>  
  10.   <div વર્ગ = "નિયંત્રણો" > 
  11.     <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" id = "ઇનપુટ એરર" >  
  12.     <span class = "help-inline" > કૃપા કરીને ભૂલ સુધારો </span> 
  13.   </div>
  14. </div>
  15. <div વર્ગ = "નિયંત્રણ-જૂથ સફળતા" > 
  16.   <label class = "control-label" for = "inputSuccess" > સફળતા સાથે ઇનપુટ </label>  
  17.   <div વર્ગ = "નિયંત્રણો" > 
  18.     <ઇનપુટ પ્રકાર = "ટેક્સ્ટ" id = "inputSuccess" >  
  19.     <span class = "help-inline" > વાહ! </span> 
  20.   </div>
  21. </div>

બટનો

ડિફૉલ્ટ બટનો

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

બટન વર્ગ="" વર્ણન
btn ગ્રેડિયન્ટ સાથે સ્ટાન્ડર્ડ ગ્રે બટન
btn btn-primary વધારાનું દ્રશ્ય વજન પ્રદાન કરે છે અને બટનોના સમૂહમાં પ્રાથમિક ક્રિયાને ઓળખે છે
btn btn-info ડિફૉલ્ટ શૈલીઓના વિકલ્પ તરીકે ઉપયોગ થાય છે
btn btn-success સફળ અથવા સકારાત્મક ક્રિયા સૂચવે છે
btn btn-warning આ ક્રિયા સાથે સાવધાની રાખવી જોઈએ તે સૂચવે છે
btn btn-danger ખતરનાક અથવા સંભવિત નકારાત્મક ક્રિયા સૂચવે છે
btn btn-inverse વૈકલ્પિક ડાર્ક ગ્રે બટન, સિમેન્ટીક ક્રિયા અથવા ઉપયોગ સાથે બંધાયેલ નથી
btn btn-link બટનની વર્તણૂક જાળવી રાખતી વખતે તેને લિંક જેવો બનાવીને બટનને ડિમ્ફાઇઝ કરો

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

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

બટન માપો

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

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > મોટું બટન </button>  
  3.   <button class = "btn btn-large" type = "button" > મોટું બટન </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > ડિફોલ્ટ બટન </button>  
  7.   <button class = "btn" type = "button" > ડિફોલ્ટ બટન </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > નાનું બટન </button>  
  11.   <button class = "btn btn-small" type = "button" > નાનું બટન </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > મીની બટન </button>  
  15.   <button class = "btn btn-mini" type = "button" > મીની બટન </button>  
  16. </p>

બ્લોક લેવલ બટનો બનાવો—જે પેરેન્ટની સંપૂર્ણ પહોળાઈ સુધી ફેલાયેલા હોય— ઉમેરીને .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > બ્લોક લેવલ બટન </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > બ્લોક લેવલ બટન </button>

અપંગ રાજ્ય

બટનોને 50% પાછા ઝાંખા કરીને તેને ક્લિક ન કરી શકાય તેવું બનાવો.

એન્કર તત્વ

.disabledવર્ગને <a>બટનોમાં ઉમેરો .

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

  1. <a href = "#" વર્ગ = "btn btn-large btn-primary disabled" > પ્રાથમિક લિંક </a>  
  2. <a href="#" class="btn btn-large disabled" > લિંક </a> _ _

હેડ અપ! અમે .disabledઅહીં ઉપયોગિતા વર્ગ તરીકે ઉપયોગ કરીએ છીએ, સામાન્ય .activeવર્ગની જેમ, તેથી કોઈ ઉપસર્ગની જરૂર નથી. ઉપરાંત, આ વર્ગ માત્ર સૌંદર્યલક્ષી માટે છે; તમારે અહીં લિંક્સને અક્ષમ કરવા માટે કસ્ટમ JavaScript નો ઉપયોગ કરવો આવશ્યક છે.

બટન તત્વ

બટનોમાં disabledવિશેષતા ઉમેરો .<button>

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > પ્રાથમિક બટન </button>   
  2. <button type = "button" class = "btn btn-large" અક્ષમ > બટન </button>

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

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

લિંક 
  1. <a class="btn" href=""> લિંક </a> _ _ _ _ _  
  2. <button class = "btn" type = "submit" > બટન </button>  
  3. <ઇનપુટ વર્ગ = "btn" પ્રકાર = "બટન" મૂલ્ય = "ઇનપુટ" >   
  4. <ઇનપુટ વર્ગ = "btn" પ્રકાર = "સબમિટ" મૂલ્ય = "સબમિટ કરો" >

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

છબીઓ

<img>કોઈપણ પ્રોજેક્ટમાં ઈમેજીસને સરળતાથી સ્ટાઇલ કરવા માટે એલિમેન્ટમાં વર્ગો ઉમેરો .

  1. <img src = "..." વર્ગ = "img-rounded" >  
  2. <img src = "..." વર્ગ = "img-સર્કલ" >  
  3. <img src = "..." વર્ગ = "img-polaroid" >

હેડ અપ! .img-roundedઅને સપોર્ટના .img-circleઅભાવે IE7-8 માં કામ કરતા નથી .border-radius

Glyphicons દ્વારા ચિહ્નો

ચિહ્ન ગ્લિફ્સ

સ્પ્રાઈટ સ્વરૂપમાં 140 ચિહ્નો, ઘાટા રાખોડી (ડિફૉલ્ટ) અને સફેદ રંગમાં ઉપલબ્ધ છે, જે Glyphicons દ્વારા પ્રદાન કરવામાં આવે છે .

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

Glyphicons એટ્રિબ્યુશન

Glyphicons Halflings સામાન્ય રીતે મફતમાં ઉપલબ્ધ હોતા નથી, પરંતુ બુટસ્ટ્રેપ અને Glyphicons સર્જકો વચ્ચેની વ્યવસ્થાએ વિકાસકર્તાઓ તરીકે તમારા માટે કોઈપણ ખર્ચ વિના આ શક્ય બનાવ્યું છે. આભાર તરીકે, અમે તમને જ્યારે પણ વ્યવહારુ હોય ત્યારે Glyphicons પર પાછા વૈકલ્પિક લિંક શામેલ કરવા માટે કહીએ છીએ.

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

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

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

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

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

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

ચિહ્ન ઉદાહરણો

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

બટનો

બટન ટૂલબારમાં બટન જૂથ
  1. <div class = "btn-ટૂલબાર" > 
  2.   <div class = "btn-group" > 
  3.  
  4.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  7.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  8.   </div>
  9. </div>
બટન જૂથમાં ડ્રોપડાઉન
વપરાશકર્તા 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> વપરાશકર્તા </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "ડ્રોપડાઉન-મેનુ" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> સંપાદિત કરો </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> કાઢી નાખો </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> પ્રતિબંધ </a></li>  
  8.     <li class = "વિભાજક" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> એડમિન બનાવો </a></li>  
  10.   </ul>
  11. </div>
નાનું બટન
  1. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i></a>

સંશોધક

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> હોમ </a></li>   
  3.   <li><a href="#"><i class="icon-book"></i> Library</a></li>
  4.   <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5.   <li><a href="#"><i class="i"></i> Misc</a></li>
  6. </ul>

Form fields

  1. <div class="control-group">
  2.   <label class="control-label" for="inputIcon">Email address</label>
  3.   <div class="controls">
  4.     <div class="input-prepend">
  5.       <span class="add-on"><i class="icon-envelope"></i></span>
  6.       <input class="span2" id="inputIcon" type="text">
  7.     </div>
  8.   </div>
  9. </div>