ઉપર
બાકી
અધિકાર
નીચે
બુટસ્ટ્રેપ

બુટસ્ટ્રેપ, Twitter પરથી

બુટસ્ટ્રેપ એ ટ્વિટરની એક ટૂલકીટ છે જે વેબએપ્સ અને સાઇટ્સના વિકાસને કિકસ્ટાર્ટ કરવા માટે રચાયેલ છે.
તેમાં ટાઇપોગ્રાફી, ફોર્મ્સ, બટન્સ, કોષ્ટકો, ગ્રીડ, નેવિગેશન અને વધુ માટે આધાર CSS અને HTML શામેલ છે.

Nerd ચેતવણી: બુટસ્ટ્રેપ લેસ સાથે બનેલ છે અને આધુનિક બ્રાઉઝર્સને ધ્યાનમાં રાખીને ગેટની બહાર કામ કરવા માટે ડિઝાઇન કરવામાં આવ્યું હતું.

CSS ને હોટલિંક કરો

સૌથી ઝડપી અને સરળ શરૂઆત માટે, ફક્ત આ સ્નિપેટને તમારા વેબપેજમાં કૉપિ કરો.

ઓછા સાથે તેનો ઉપયોગ કરો

ઓછા ઉપયોગના ચાહક છો? કોઈ વાંધો નથી, ફક્ત રેપોને ક્લોન કરો અને આ રેખાઓ ઉમેરો:

GitHub પર ફોર્ક

ગીથબ પર સત્તાવાર બુટસ્ટ્રેપ રેપો સાથે ડાઉનલોડ કરો, ફોર્ક કરો, ખેંચો, ફાઇલ સમસ્યાઓ અને વધુ.

GitHub પર બુટસ્ટ્રેપ »

હાલમાં v1.3.0

બુટસ્ટ્રેપ સંક્ષિપ્ત ઇતિહાસ, બ્રાઉઝર સપોર્ટ અને વધુ વિશે

ઇતિહાસ

Twitter પરના એન્જિનિયરોએ ઐતિહાસિક રીતે ફ્રન્ટ-એન્ડ આવશ્યકતાઓને પહોંચી વળવા માટે તેઓ પરિચિત હોય તેવી લગભગ કોઈપણ લાઇબ્રેરીનો ઉપયોગ કર્યો છે. બુટસ્ટ્રેપ રજૂ કરાયેલા પડકારોના જવાબ તરીકે શરૂ થયું. ઘણા અદ્ભુત લોકોની મદદથી, બુટસ્ટ્રેપ નોંધપાત્ર રીતે વધ્યો છે.

dev.twitter.com પર વધુ વાંચો ›

બ્રાઉઝર સપોર્ટ

ક્રોમ, સફારી, ઈન્ટરનેટ એક્સપ્લોરર અને ફાયરફોક્સ જેવા મુખ્ય આધુનિક બ્રાઉઝર્સમાં બુટસ્ટ્રેપનું પરીક્ષણ અને સમર્થન કરવામાં આવે છે.

Chrome, Safari, Internet Explorer અને Firefox માં પરીક્ષણ અને સપોર્ટેડ
  • નવીનતમ સફારી
  • નવીનતમ Google Chrome
  • ફાયરફોક્સ 4+
  • ઇન્ટરનેટ એક્સપ્લોરર 7+
  • ઓપેરા 11

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

બુટસ્ટ્રેપ સંકલિત CSS, અનકમ્પાઇલ્ડ અને ઉદાહરણ નમૂનાઓ સાથે પૂર્ણ થાય છે.

ઝડપી-પ્રારંભ ઉદાહરણો

કેટલાક ઝડપી નમૂનાઓની જરૂર છે? અમે એકસાથે મૂકેલા આ મૂળભૂત ઉદાહરણો તપાસો:

  • હીરો એકમ સાથે સરળ ત્રણ કૉલમ લેઆઉટ
  • સ્થિર સાઇડબાર સાથે પ્રવાહી લેઆઉટ
  • એપ્લિકેશન્સ માટે સરળ અટકી કન્ટેનર

ગ્રીડ સિસ્ટમ સ્ટાન્ડર્ડ 940px રોકો અથવા તમારી પોતાની રોલ કરો

ડિફૉલ્ટ ગ્રીડ

બુટસ્ટ્રેપના ભાગ રૂપે પૂરી પાડવામાં આવેલ ડિફોલ્ટ ગ્રીડ સિસ્ટમ 940px પહોળી 16-કૉલમ ગ્રીડ છે. તે લોકપ્રિય 960 ગ્રીડ સિસ્ટમનો સ્વાદ છે, પરંતુ ડાબી અને જમણી બાજુએ વધારાના માર્જિન/પેડિંગ વિના.

ગ્રીડ માર્કઅપનું ઉદાહરણ

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

  1. <div વર્ગ = "પંક્તિ" > 
  2.   <div class = "span6" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16

કૉલમ ઑફસેટિંગ

4
8 ઓફસેટ 4
1/3 ઓફસેટ 2/3s
4 ઓફસેટ 4
4 ઓફસેટ 4
5 ઓફસેટ 3
5 ઓફસેટ 3
10 ઓફસેટ 6

નેસ્ટિંગ કૉલમ

જો તમારે .rowઅસ્તિત્વમાંની કૉલમમાં એક બનાવીને તમારી સામગ્રીને નેસ્ટ કરો.

નેસ્ટેડ કૉલમનું ઉદાહરણ

કૉલમનું સ્તર 1
સ્તર 2
સ્તર 2 
  1. <div વર્ગ = "પંક્તિ" > 
  2.   <div class = "span12" > 
  3.     કૉલમનું સ્તર 1
  4.     <div વર્ગ = "પંક્તિ" > 
  5.       <div class = "span6" > 
  6.         સ્તર 2
  7.       </div>
  8.       <div class = "span6" > 
  9.         સ્તર 2
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

તમારી પોતાની ગ્રીડને રોલ કરો

ડિફોલ્ટ 940px ગ્રીડ સિસ્ટમને કસ્ટમાઇઝ કરવા માટે બુટસ્ટ્રેપમાં બિલ્ટ-ફુલ ચલો છે. થોડીક કસ્ટમાઇઝેશન સાથે, તમે કૉલમનું કદ, તેમના ગટર અને તેઓ જે કન્ટેનરમાં રહે છે તેમાં ફેરફાર કરી શકો છો.

ગ્રીડની અંદર

ગ્રીડ સિસ્ટમને સંશોધિત કરવા માટે જરૂરી ચલો હાલમાં બધામાં રહે છે preboot.less.

ચલ ડિફૉલ્ટ મૂલ્ય વર્ણન
@gridColumns 16 ગ્રીડની અંદર કૉલમની સંખ્યા
@gridColumnWidth 40px ગ્રીડની અંદર દરેક કૉલમની પહોળાઈ
@gridGutterWidth 20px દરેક કૉલમ વચ્ચેની નકારાત્મક જગ્યા
@siteWidth તમામ કૉલમ અને ગટરનો ગણતરી કરેલ સરવાળો અમે કૉલમ અને ગટરની સંખ્યા ગણવા અને .fixed-container()મિક્સિનની પહોળાઈ સેટ કરવા માટે કેટલીક મૂળભૂત મેચનો ઉપયોગ કરીએ છીએ.

હવે કસ્ટમાઇઝ કરવા માટે

ગ્રીડમાં ફેરફાર કરવાનો અર્થ એ છે કે ત્રણ @grid-*ચલોને બદલવું અને ઓછી ફાઇલોને ફરીથી કમ્પાઇલ કરવી.

બુટસ્ટ્રેપ 24 કૉલમ સુધીની ગ્રીડ સિસ્ટમને હેન્ડલ કરવા માટે સજ્જ છે; ડિફૉલ્ટ માત્ર 16 છે. તમારા ગ્રીડ વેરીએબલ્સ 24-કૉલમ ગ્રીડમાં કસ્ટમાઇઝ્ડ કેવી રીતે દેખાશે તે અહીં છે.

  1. @gridColumns : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

એકવાર ફરીથી કમ્પાઇલ થઈ ગયા પછી, તમે સેટ થઈ જશો!

વેબપૃષ્ઠો બનાવવા માટે લેઆઉટ મૂળભૂત નમૂનાઓ

સ્થિર લેઆઉટ

ડિફૉલ્ટ અને સરળ 940px-વાઇડ, એકલ દ્વારા પૂરી પાડવામાં આવેલ લગભગ કોઈપણ વેબસાઇટ અથવા પૃષ્ઠ માટે કેન્દ્રિત લેઆઉટ <div.container>.

  1. <body>
  2.   <div વર્ગ = "કન્ટેનર" > 
  3.     ...
  4.   </div>
  5. </body>

પ્રવાહી લેઆઉટ

ન્યૂનતમ અને મહત્તમ-પહોળાઈ અને ડાબી બાજુની સાઇડબાર સાથે વૈકલ્પિક, લવચીક પ્રવાહી પૃષ્ઠ માળખું. એપ્લિકેશન્સ અને દસ્તાવેજો માટે સરસ.

  1. <body>
  2.   <div class = "container-fluid" > 
  3.     <div વર્ગ = "સાઇડબાર" > 
  4.       ...
  5.     </div>
  6.     <div વર્ગ = "સામગ્રી" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

ટાઇપોગ્રાફી હેડિંગ, ફકરા, યાદીઓ અને અન્ય ઇનલાઇન પ્રકારના તત્વો

શીર્ષકો અને નકલ

તમારા વેબપૃષ્ઠોને સંરચિત કરવા માટે માનક ટાઇપોગ્રાફિક વંશવેલો.

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

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

h1. મથાળું 1

h2. મથાળું 2

h3. મથાળું 3

h4. મથાળું 4

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

ઉદાહરણ ફકરો

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

ઉદાહરણ મથાળામાં પેટા-શીર્ષક છે...

વિવિધ તત્વો

ભાર, સરનામાં અને સંક્ષિપ્ત શબ્દોનો ઉપયોગ કરીને

<strong> <em> <address> <abbr>

ક્યારે વાપરવું

એમ્ફેસિસ ટૅગ્સ ( <strong>અને <em>) નો ઉપયોગ શબ્દ અથવા શબ્દસમૂહની તેની આસપાસની નકલને સંબંધિત વધારાના મહત્વ અથવા ભાર દર્શાવવા માટે થવો જોઈએ. <strong>મહત્વ <em>માટે અને તાણના ભાર માટે ઉપયોગ કરો .

ફકરામાં ભાર

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

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

સરનામાં

તત્વનો ઉપયોગ તેના નજીકના <address>પૂર્વજ અથવા કાર્યના સમગ્ર ભાગ માટે સંપર્ક માહિતી માટે થાય છે. તેનો ઉપયોગ કેવી રીતે થઈ શકે તેના બે ઉદાહરણો અહીં છે:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
પૂરું નામ
[email protected]

નોંધ: સામગ્રીને યોગ્ય રીતે સંરચિત કરવા માટે દરેક લાઇન <address>લાઇન-બ્રેક ( ) સાથે સમાપ્ત થવી જોઈએ <br />અથવા બ્લોક-લેવલ ટેગ (દા.ત., ) માં લપેટી હોવી જોઈએ .<p>

સંક્ષેપ

સંક્ષિપ્ત શબ્દો અને સંક્ષિપ્ત શબ્દો માટે, <abbr>ટેગનો ઉપયોગ કરો ( HTML5<acronym> માં નાપસંદ કરેલ છે ). ટૅગની અંદર શોર્ટહેન્ડ ફોર્મ મૂકો અને સંપૂર્ણ નામ માટે શીર્ષક સેટ કરો.

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

<blockquote> <p> <small>

કેવી રીતે અવતરણ કરવું

બ્લોકક્વોટ સમાવવા માટે, <blockquote>આસપાસ લપેટી <p>અને <small>ટૅગ્સ. તમારા સ્રોતને ટાંકવા માટે તત્વનો ઉપયોગ કરો અને તમને તે પહેલાં <small>એક em ડેશ મળશે .&mdash;

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

ડૉ. જુલિયસ હિબર્ટ 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  3.   <small> ડૉ. જુલિયસ હિબર્ટ </small>
  4. </blockquote>

યાદીઓ

અવ્યવસ્થિત<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.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> <pre>

બે સરળ ટૅગ્સ વડે તમારા કોડને સ્ટાઇલમાં બનાવો. જાવાસ્ક્રિપ્ટ દ્વારા હજી વધુ અદ્ભુતતા માટે, Google ની કોડ પ્રીટિફાઈ લાઇબ્રેરીમાં મૂકો અને તમે સેટ થઈ ગયા છો.

પ્રસ્તુત કોડ

કોડ, બ્લોક્સ અથવા ફક્ત સ્નિપેટ્સ ઇનલાઇન, ફક્ત યોગ્ય ટેગમાં લપેટીને શૈલી સાથે પ્રદર્શિત કરી શકાય છે. બહુવિધ રેખાઓ સુધી ફેલાયેલા કોડના બ્લોક્સ માટે, <pre>તત્વનો ઉપયોગ કરો. ઇનલાઇન કોડ માટે, <code>તત્વનો ઉપયોગ કરો.

તત્વ પરિણામ
<code> >html<આના જેવા ટેક્સ્ટની લાઇનમાં, તમારો આવરિત કોડ આ તત્વ જેવો દેખાશે .
<pre> 
<div>
  <h1>મથાળું</h1>
  <p>અહીં જ કંઈક...</p>
</div>

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

google-code-prettify લાઇબ્રેરીનો ઉપયોગ કરીને, તમે કોડના બ્લોક્સને થોડી અલગ વિઝ્યુઅલ શૈલી અને સ્વચાલિત સિન્ટેક્સ હાઇલાઇટિંગ મેળવો છો.

<div> <h1> મથાળું </h1> <p> અહીં કંઈક... </p> </div>

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

ઇનલાઇન લેબલ્સ

<span class="label">

તમારા બોડી ટેક્સ્ટમાં કોઈપણ શબ્દસમૂહ પર ધ્યાન આપો અથવા ફ્લેગ કરો.

કંઈપણ લેબલ

ક્યારેય તે ફેન્સી નવામાંથી એકની જરૂર છે ! કોડ લખતી વખતે અથવા મહત્વપૂર્ણ ફ્લેગ્સ? સારું, હવે તમારી પાસે તે છે. ડિફૉલ્ટ રૂપે શું શામેલ છે તે અહીં છે:

લેબલ પરિણામ
<span class="label">Default</span> ડિફૉલ્ટ
<span class="label success">New</span> નવી
<span class="label warning">Warning</span> ચેતવણી
<span class="label important">Important</span> મહત્વપૂર્ણ
<span class="label notice">Notice</span> નોટિસ

મીડિયા છબીઓ અને વિડિયો પ્રદર્શિત કરે છે

મીડિયા ગ્રીડ

ઓછી HTML ફૂટપ્રિન્ટ અને ન્યૂનતમ શૈલીઓવાળા પૃષ્ઠો પર વિવિધ કદના થંબનેલ્સ પ્રદર્શિત કરો.

ઉદાહરણ થંબનેલ્સ

માંના થંબનેલ્સ .media-gridકોઈપણ કદના હોઈ શકે છે, પરંતુ જ્યારે બિલ્ટ-ઇન બુટસ્ટ્રેપ ગ્રીડ સિસ્ટમમાં સીધા જ મેપ કરવામાં આવે ત્યારે તે શ્રેષ્ઠ કાર્ય કરે છે. .span290, 210 અને 330 જેવી છબીની પહોળાઈ , .span4, અને .span6કૉલમના કદને સમાન કરવા માટે પેડિંગના થોડા પિક્સેલ સાથે જોડાય છે .

વિશાળ

મધ્યમ

નાના

તેમને કોડિંગ

મીડિયા ગ્રીડ વાપરવા માટે સરળ છે અને માર્કઅપ બાજુએ એકદમ સરળ છે. તેમના પરિમાણો સંપૂર્ણપણે સમાવિષ્ટ છબીઓના કદ પર આધારિત છે.

  1. <ul class = "મીડિયા-ગ્રીડ" > 
  2.   <li>
  3.     <a href = "#" > 
  4.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a href = "#" > 
  9.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

કોષ્ટકો માટે, તમે અનુમાન લગાવ્યું છે, ટેબ્યુલર ડેટા

મકાન કોષ્ટકો

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

કોષ્ટકો મહાન છે - ઘણી બધી વસ્તુઓ માટે. મહાન કોષ્ટકો, જોકે, ઉપયોગી, માપી શકાય તેવા અને વાંચી શકાય તેવા (કોડ સ્તરે) બનવા માટે થોડો માર્કઅપ પ્રેમની જરૂર છે. મદદ કરવા માટે અહીં કેટલીક ટીપ્સ આપી છે.

હંમેશા તમારા કૉલમ હેડરને <thead>એવી રીતે લપેટીએ કે વંશવેલો <thead>> <tr>> હોય <th>.

કૉલમ હેડરોની જેમ જ, તમારા કોષ્ટકની બધી મુખ્ય સામગ્રી એકમાં આવરિત હોવી જોઈએ <tbody>જેથી તમારું વંશવેલો <tbody>> <tr>> હોય <td>.

ઉદાહરણ: ડિફૉલ્ટ કોષ્ટક શૈલીઓ

વાંચનક્ષમતા સુનિશ્ચિત કરવા અને માળખું જાળવવા માટે તમામ કોષ્ટકો ફક્ત આવશ્યક કિનારીઓ સાથે આપમેળે સ્ટાઇલ કરવામાં આવશે. વધારાના વર્ગો અથવા વિશેષતાઓ ઉમેરવાની જરૂર નથી.

# પ્રથમ નામ છેલ્લું નામ ભાષા
1 કેટલાક એક અંગ્રેજી
2 જૉ છ પેક અંગ્રેજી
3 સ્ટુ ડેન્ટ કોડ 
  1. <ટેબલ>
  2.   ...
  3. </ ટેબલ>

ઉદાહરણ: ઝેબ્રા-પટ્ટાવાળી

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

# પ્રથમ નામ છેલ્લું નામ ભાષા
1 કેટલાક એક અંગ્રેજી
2 જૉ છ પેક અંગ્રેજી
3 સ્ટુ ડેન્ટ કોડ

નોંધ: ઝેબ્રા-સ્ટ્રાઇપિંગ એ પ્રગતિશીલ ઉન્નતીકરણ છે જે IE8 અને નીચેના જૂના બ્રાઉઝર માટે ઉપલબ્ધ નથી.

  1. <ટેબલ વર્ગ = "ઝેબ્રા-પટ્ટાવાળી" > 
  2. ...
  3. </ ટેબલ>

ઉદાહરણ: ઝેબ્રા-પટ્ટાવાળી w/ TableSorter.js

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

# પ્રથમ નામ છેલ્લું નામ ભાષા
2 જૉ છ પેક અંગ્રેજી
3 સ્ટુ ડેન્ટ કોડ
1 તમારા એક અંગ્રેજી 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <સ્ક્રીપ્ટ > 
  3.   $ ( કાર્ય () { 
  4.     $ ( "table#sortTableExample" ). ટેબલસોર્ટર ({ સૉર્ટલિસ્ટ : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <ટેબલ વર્ગ = "ઝેબ્રા-પટ્ટાવાળી" > 
  8.   ...
  9. </ ટેબલ>

સ્વરૂપો

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

બધા સ્વરૂપોને વાંચી શકાય તેવી અને માપી શકાય તેવી રીતે પ્રસ્તુત કરવા માટે ડિફૉલ્ટ શૈલીઓ આપવામાં આવી છે. ટેક્સ્ટ ઇનપુટ્સ, સિલેક્ટ લિસ્ટ્સ, ટેક્સટેરિયા, રેડિયો બટન્સ અને ચેકબોક્સ અને બટન્સ માટે સ્ટાઇલ આપવામાં આવે છે.

દંતકથા ફોર્મનું ઉદાહરણ
અહીં કેટલાક મૂલ્ય
મદદ ટેક્સ્ટનો નાનો સ્નિપેટ
દંતકથા ફોર્મનું ઉદાહરણ
@
દંતકથા ફોર્મનું ઉદાહરણ
નોંધ: લેબલ્સ ઘણા મોટા ક્લિક વિસ્તારો અને વધુ ઉપયોગી ફોર્મ માટે તમામ વિકલ્પોને ઘેરી લે છે.
પ્રતિ બધા સમય પેસિફિક માનક સમય (GMT -08:00) તરીકે બતાવવામાં આવે છે.
જો જરૂર હોય તો ઉપરોક્ત ફીલ્ડનું વર્ણન કરવા માટે મદદ ટેક્સ્ટનો બ્લોક.
 

સ્ટૅક્ડ સ્વરૂપો

તમારા ફોર્મના HTML માં ઉમેરો .form-stackedઅને તમારી પાસે તેમની ડાબી બાજુને બદલે તેમના ફીલ્ડ્સની ટોચ પર લેબલ્સ હશે. જો તમારા ફોર્મ ટૂંકા હોય અથવા તમારી પાસે ભારે સ્વરૂપો માટે ઇનપુટની બે કૉલમ હોય તો આ સારું કામ કરે છે.

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

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

તમારા માર્કઅપમાં માત્ર થોડા વર્ગો ઉમેરીને કોઈપણ ફોર્મ input, selectઅથવા પહોળાઈને કસ્ટમાઇઝ કરો.textarea

v1.3.0 મુજબ, અમે ફોર્મ તત્વો માટે ગ્રીડ-આધારિત કદ બદલવાના વર્ગો ઉમેર્યા છે. કૃપા કરીને હાલના , વગેરે વર્ગો પર આનો ઉપયોગ .miniકરો .small.

બટનો

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

બધા બટનો આછા ગ્રે શૈલીમાં ડિફોલ્ટ છે, પરંતુ વિવિધ રંગ શૈલીઓ માટે સંખ્યાબંધ કાર્યાત્મક વર્ગો લાગુ કરી શકાય છે. આ વર્ગોમાં વાદળી .primaryવર્ગ, આછો-વાદળી .infoવર્ગ, લીલો .successવર્ગ અને લાલ .dangerવર્ગનો સમાવેશ થાય છે.

ઉદાહરણ બટનો

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

       

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

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

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

અપંગ રાજ્ય

એક અથવા બીજા કારણસર એપ દ્વારા સક્રિય ન હોય અથવા અક્ષમ કરેલ હોય તેવા બટનો માટે, અક્ષમ સ્થિતિનો ઉપયોગ કરો. તે .disabledલિંક્સ અને તત્વો :disabledમાટે છે.<button>

લિંક્સ

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

બટનો

 

સફળતા, ચેતવણી અને ભૂલ સંદેશાઓ અથવા ચેતવણીઓ માટે ચેતવણીઓ અને ભૂલોની શૈલીઓ

મૂળભૂત ચેતવણીઓ

.alert-message

નિષ્ફળતા, સંભવિત નિષ્ફળતા અથવા ક્રિયાની સફળતાને પ્રકાશિત કરવા માટે એક-લાઇન સંદેશાઓ. ફોર્મ માટે ખાસ કરીને ઉપયોગી.

જાવાસ્ક્રિપ્ટ મેળવો »

×

પવિત્ર guacamole! તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે ખૂબ સારા દેખાતા નથી.

×

ઓહ ત્વરિત! આ અને તે બદલો અને ફરી પ્રયાસ કરો.

×

શાબ્બાશ! તમે આ ચેતવણી સંદેશ સફળતાપૂર્વક વાંચ્યો.

×

હેડ અપ! આ એક ચેતવણી છે જેના પર તમારા ધ્યાનની જરૂર છે, પરંતુ તે હજી સુધી મોટી પ્રાથમિકતા નથી.

ઉદાહરણ કોડ

  1. <div class = "ચેતવણી-સંદેશ ચેતવણી" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> પવિત્ર ગુઆકામોલ! </strong> તમે તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે વધુ સારા દેખાતા ન��ી. </p>
  4. </div>

સંદેશાઓને અવરોધિત કરો

.alert-message.block-message

સંદેશાઓ માટે કે જેને થોડી સમજૂતીની જરૂર હોય, અમારી પાસે ફકરા શૈલી ચેતવણીઓ છે. આ લાંબા સમય સુધી ભૂલ સંદેશાઓને બબલિંગ કરવા માટે, વપરાશકર્તાને બાકી ક્રિયા વિશે ચેતવણી આપવા માટે અથવા ફક્ત પૃષ્ઠ પર વધુ ભાર આપવા માટે માહિતી પ્રસ્તુત કરવા માટે યોગ્ય છે.

જાવાસ્ક્રિપ્ટ મેળવો »

×

પવિત્ર guacamole! આ એક ચેતવણી છે! તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે ખૂબ સારા દેખાતા નથી. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

આ પગલાં લો અથવા આ કરો
×

ઓહ ત્વરિત! તમને ભૂલ મળી છે! આ અને તે બદલો અને ફરી પ્રયાસ કરો.

  • ડ્યુસ મોલીસ એ બિન કોમોડો લેક્ટસ છે
  • Nisi erat porttitor ligula
  • Eget lacinia odio sem nec elit
આ પગલાં લો અથવા આ કરો
×

શાબ્બાશ! તમે આ ચેતવણી સંદેશ સફળતાપૂર્વક વાંચ્યો. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

આ પગલાં લો અથવા આ કરો
×

હેડ અપ! આ એક ચેતવણી છે જેના પર તમારા ધ્યાનની જરૂર છે, પરંતુ તે હજી સુધી મોટી પ્રાથમિકતા નથી.

આ પગલાં લો અથવા આ કરો

ઉદાહરણ કોડ

  1. <div class = "alert-message block-message warning" > 
  2.   <a class = "close" href = "#" > × </a>  
  3.   <p><strong> પવિત્ર ગુઆકામોલ! આ એક ચેતવણી છે! </strong> તમે તમારી જાતને શ્રેષ્ઠ રીતે તપાસો, તમે વધુ સારા દેખાતા નથી. નુલ્લા વિટાએ એલિટ લિબેરો, એ ફેરેટ્રા ઓગ્યુ. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  4.   <div class = "ચેતવણી-ક્રિયાઓ" > 
  5.     <a class = "btn small" href = "#" > આ પગલાં લો </a> <a class = "btn small" href = "#" > અથવા આ કરો </a>     
  6.   </div>
  7. </div>

મોડલ , ટૂલટિપ્સ અને પોપોવર્સમાં સામગ્રી પ્રદર્શિત કરવા માટેના પોપોવર્સ ઘટકો

મોડલ્સ

મોડલ્સ—સંવાદો અથવા લાઇટબૉક્સ—પશ્ચાદભૂનો સંદર્ભ જાળવવો મહત્વપૂર્ણ હોય તેવી પરિસ્થિતિઓમાં સંદર્ભાત્મક ક્રિયાઓ માટે ઉત્તમ છે.

જાવાસ્ક્રિપ્ટ મેળવો »

×

મોડલ મથાળું

એક સુંદર શરીર…

પ્રાથમિક ગૌણ

ટૂલટિપ્સ

મૂંઝવણમાં મૂકાયેલા વપરાશકર્તાને મદદ કરવા અને તેમને યોગ્ય દિશામાં નિર્દેશ કરવા માટે ટ્વિપ્સી ખૂબ જ ઉપયોગી છે.

જાવાસ્ક્રિપ્ટ મેળવો »

Lorem ipsum dolar sit amet illo error ipsum veritatis ut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit fugit accusantium totam totam acusantium

પોપોવર્સ

લેઆઉટને અસર કર્યા વિના પૃષ્ઠને સબટેક્સ્ટ્યુઅલ માહિતી પ્રદાન કરવા માટે પોપોવર્સનો ઉપયોગ કરો.

જાવાસ્ક્રિપ્ટ મેળવો »

પોપઓવર શીર્ષક

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. મોરબી લીઓ રીસસ, પોર્ટા એસી કોન્સેકટુર એસી, વેસ્ટીબુલમ એટ ઇરોસ.

બુટસ્ટ્રેપ સાથે જાવાસ્ક્રિપ્ટનો ઉપયોગ કરીને તમને પ્રારંભ કરવા માટે પ્લગિન્સની અનુક્રમણિકા

શરૂ કરી રહ્યા છીએ

બુટસ્ટ્રેપ લાઇબ્રેરી સાથે જાવાસ્ક્રિપ્ટને એકીકૃત કરવું ખૂબ સરળ છે. નીચે અમે મૂળભૂત બાબતો પર જઈએ છીએ અને તમને પ્રારંભ કરવા માટે કેટલાક અદ્ભુત પ્લગિન્સ પ્રદાન કરીએ છીએ!

જાવાસ્ક્રિપ્ટ દસ્તાવેજો જુઓ »

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

jQuery અને Ender સાથે કામ કરતા નવા કસ્ટમ પ્લગઈનો સાથે બુટસ્ટ્રેપના કેટલાક પ્રાથમિક ઘટકોને જીવંત બનાવો . અમે તમને તમારી ચોક્કસ વિકાસ જરૂરિયાતોને અનુરૂપ થવા માટે તેમને વિસ્તારવા અને સંશોધિત કરવા પ્રોત્સાહિત કરીએ છીએ.

ફાઈલ વર્ણન
bootstrap-modal.js અમારું મોડલ પ્લગઇન પરંપરાગત મોડલ જેએસ પ્લગઇન પર એક સુપર સ્લિમ ટેક છે! અમે twitter પર જોઈતી માત્ર એકદમ કાર્યક્ષમતા સમાવવા માટે ખાસ કાળજી લીધી.
bootstrap-alerts.js ચેતવણી પ્લગઇન એ ચેતવણીઓમાં નજીકની કાર્યક્ષમતા ઉમેરવા માટે એક સુપર નાનો વર્ગ છે.
bootstrap-dropdown.js આ પ્લગઇન બુટસ્ટ્રેપ ટોપબાર અથવા ટેબ કરેલ નેવિગેશનમાં ડ્રોપડાઉન ક્રિયાપ્રતિક્રિયા ઉમેરવા માટે છે.
bootstrap-scrollspy.js સ્ક્રોલસ્પાય પ્લગઇન બુટસ્ટ્રેપ ટોપબારમાં સ્ક્રોલ સ્થિતિના આધારે ઓટો અપડેટિંગ એનએવી ઉમેરવા માટે છે.
bootstrap-tabs.js આ પ્લગઇન સ્થાનિક સામગ્રી દ્વારા સાયકલ ચલાવવા માટે ઝડપી, ગતિશીલ ટેબ અને ગોળી કાર્યક્ષમતા ઉમેરે છે.
bootstrap-twipsy.js જેસન ફ્રેમ દ્વારા લખાયેલ ઉત્તમ jQuery.tipsy પ્લગઇન પર આધારિત; twipsy એ અપડેટેડ વર્ઝન છે, જે ઈમેજીસ પર આધાર રાખતું નથી, એનિમેશન માટે css3 અને લોકલ શીર્ષક સ્ટોરેજ માટે ડેટા-એટ્રીબ્યુટનો ઉપયોગ કરે છે!
bootstrap-popover.js પોપઓવર પ્લગઈન તમારી એપ્લિકેશનમાં પોપઓવર ઉમેરવા માટે એક સરળ ઈન્ટરફેસ પૂરું પાડે છે. તે boostrap-twipsy.js પ્લગઇનને વિસ્તૃત કરે છે, તેથી તમારા પ્રોજેક્ટમાં પોપોવર્સનો સમાવેશ કરતી વખતે તે ફાઇલને પણ પડાવી લેવાની ખાતરી કરો!

શું જાવાસ્ક્રિપ્ટ જરૂરી છે?

ના! બુટસ્ટ્રેપને CSS લાઇબ્રેરી બનાવવા માટે સૌથી પહેલા અને અગ્રણી ડિઝાઇન કરવામાં આવી છે. આ જાવાસ્ક્રિપ્ટ શામેલ શૈલીઓની ટોચ પર મૂળભૂત ઇન્ટરેક્ટિવ સ્તર પ્રદાન કરે છે.

જો કે, જેમને જાવાસ્ક્રિપ્ટની જરૂર છે તેમના માટે, અમે તમને જાવાસ્ક્રિપ્ટ સાથે બુટસ્ટ્રેપને કેવી રીતે એકીકૃત કરવું તે સમજવામાં મદદ કરવા અને તમને મૂળભૂત કાર્યક્ષમતા માટે તરત જ ઝડપી, હળવા વિકલ્પ આપવા માટે ઉપરના પ્લગઇન્સ પ્રદાન કર્યા છે.

વધુ માહિતી માટે અને કેટલાક લાઇવ ડેમો જોવા માટે, કૃપા કરીને અમારા પ્લગઇન દસ્તાવેજીકરણ પૃષ્ઠનો સંદર્ભ લો .

ઓછા સુપરચાર્જ સાથે બુટસ્ટ્રેપનો ઉપયોગ કરીને તમારા CSSને વેરીએબલ, મિક્સિન્સ અને ફંક્શન્સ સાથે લો

બુટસ્ટ્રેપ પ્રીબૂટ સાથે બનાવવામાં આવ્યું હતું, જે ઝડપી અને સરળ વેબ ડેવલપમેન્ટ માટે સીએસએસ પ્રીપ્રોસેસર, Less સાથે જોડાણમાં ઉપયોગમાં લેવા માટે મિક્સિન્સ અને ચલોનો ઓપન-સોર્સ પેક છે .

અમે બુટસ્ટ્રેપમાં પ્રીબૂટનો ઉપયોગ કેવી રીતે કર્યો તે તપાસો અને જો તમે તમારા આગલા પ્રોજેક્ટ પર ઓછું ચલાવવાનું પસંદ કરો તો તમે તેનો ઉપયોગ કેવી રીતે કરી શકો છો.

તેનો ઉપયોગ કેવી રીતે કરવો

તમારા બ્રાઉઝરમાં જાવાસ્ક્રિપ્ટ દ્વારા બુટસ્ટ્રેપના ઓછા વેરિયેબલ્સ, મિક્સિન્સ અને CSSમાં નેસ્ટિંગનો સંપૂર્ણ ઉપયોગ કરવા માટે આ વિકલ્પનો ઉપયોગ કરો.

  1. <link rel = "stylesheet/less" href = "less/bootstrap.less" મીડિયા = "બધા" />    
  2. <script src = "js/less-1.1.3.min.js" ></script>

.js ઉકેલ નથી લાગતું? લેસ મેક એપ્લિકેશન અજમાવો અથવા જ્યારે તમે તમારો કોડ જમાવશો ત્યારે કમ્પાઇલ કરવા માટે Node.js નો ઉપયોગ કરો.

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

બુટસ્ટ્રેપના ભાગ રૂપે Twitter બુટસ્ટ્રેપમાં શું સમાવવામાં આવ્યું છે તેની કેટલીક હાઇલાઇટ્સ અહીં છે. ડાઉનલોડ કરવા અને વધુ જાણવા માટે બુટસ્ટ્રેપ વેબસાઇટ અથવા ગીથબ પ્રોજેક્ટ પૃષ્ઠ પર જાઓ.

ચલો

ઓછા માં વેરિયેબલ્સ તમારા CSS માથાનો દુખાવો મુક્ત જાળવવા અને અપડેટ કરવા માટે યોગ્ય છે. જ્યારે તમે રંગ મૂલ્ય અથવા વારંવાર ઉપયોગમાં લેવાતા મૂલ્યને બદલવા માંગતા હો, ત્યારે તેને એક જગ્યાએ અપડેટ કરો અને તમે સેટ થઈ ગયા છો.

  1. // લિંક્સ
  2. @linkColor : #8b59c2;         
  3. @linkColorHover : ઘાટો (     @linkColor , 10 ); 
  4.  
  5. // ગ્રે
  6. @બ્લેક : #000;             
  7. @ગ્રેડાર્ક :           આછું ( @બ્લેક , 25 %); 
  8. @ગ્રે :               આછું ( @કાળો , 50 %); 
  9. @ગ્રેલાઇટ :          આછું ( @બ્લેક , 70 %); 
  10. @ગ્રેલાઈટર :        આછું ( @બ્લેક , 90 %); 
  11. @સફેદ : #ffff ;             
  12.  
  13. // ઉચ્ચાર રંગો
  14. @blue : #08b5fb;              
  15. @ગ્રીન : #46a546 ;             
  16. @લાલ : #9d261d ;               
  17. @પીળો : #ffc40d ;            
  18. @ઓરેન્જ : #f89406 ;            
  19. @pink : #c3325f;              
  20. @જાંબલી : #7a43b6 ;            
  21.  
  22. // બેઝલાઇન ગ્રીડ
  23. @basefont : 13px ;          
  24. @બેઝલાઇન : 18px ;

ટિપ્પણી

/* ... */સીએસએસના સામાન્ય વાક્યરચના ઉપરાંત ઓછી ટિપ્પણી કરવાની બીજી શૈલી પણ પ્રદાન કરે છે .

  1. // આ એક ટિપ્પણી છે
  2. /* આ પણ એક ટિપ્પણી છે */

વાઝુને મિક્સ કરે છે

મિક્સિન્સ મૂળભૂત રીતે CSS માટે સમાવિષ્ટ અથવા આંશિક છે, જે તમને કોડના બ્લોકને એકમાં જોડવાની મંજૂરી આપે છે. તેઓ વિક્રેતા પ્રીફિક્સ પ્રોપર્ટીઝ જેમ કે box-shadow, ક્રોસ-બ્રાઉઝર ગ્રેડિએન્ટ્સ, ફોન્ટ સ્ટેક્સ અને વધુ માટે ઉત્તમ છે. નીચે બૂટસ્ટ્રેપ સાથે સમાવિષ્ટ મિક્સિન્સનો નમૂનો છે.

ફોન્ટ સ્ટેક્સ

  1. #ફોન્ટ {
  2.   . લઘુલિપિ ( @વજન : સામાન્ય , @ કદ : 14px , @લાઇન ઊંચાઈ : 20px ) {     
  3.     ફોન્ટ માપ : @size ; _ 
  4.     ફોન્ટ - વજન : @weight ; 
  5.     રેખા - ઊંચાઈ : @lineHeight ; 
  6.   }
  7.   . સાન્સ - સેરીફ ( @વજન : સામાન્ય , @ કદ : 14px , @લાઇન ઊંચાઈ : 20px ) {     
  8.     ફોન્ટ - કુટુંબ : "હેલ્વેટિકા ન્યુ" , હેલ્વેટિકા , એરિયલ , સેન્સ - સેરીફ ;   
  9.     ફોન્ટ માપ : @size ; _ 
  10.     ફોન્ટ - વજન : @weight ; 
  11.     રેખા - ઊંચાઈ : @lineHeight ; 
  12.   }
  13.   ...
  14. }

ગ્રેડિયન્ટ્સ

  1. #ગ્રેડિયન્ટ {
  2.   ...
  3.   . વર્ટિકલ ( @startColor : #555, @endColor: #333) { 
  4.     પૃષ્ઠભૂમિ - રંગ : @endColor ; 
  5.     પૃષ્ઠભૂમિ - પુનરાવર્તન : પુનરાવર્તન - x ;
  6.     પૃષ્ઠભૂમિ - છબી : - khtml - ઢાળ ( રેખીય , ડાબી ટોચ , ડાબી નીચે , ( @startColor ) થી ( @endColor ) સુધી ); // કોન્કરર   
  7.     પૃષ્ઠભૂમિ - છબી : - moz - રેખીય - ઢાળ ( @startColor , @endColor ); // FF 3.6+   
  8.     પૃષ્ઠભૂમિ - છબી : - ms - રેખીય - ઢાળ ( @startColor , @endColor ); // IE10   
  9.     પૃષ્ઠભૂમિ - છબી : - વેબકિટ - ઢાળ ( રેખીય , ડાબી ટોચ , ડાબી નીચે , રંગ - સ્ટોપ ( 0 % , @startColor ), રંગ - સ્ટોપ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  10.     પૃષ્ઠભૂમિ - છબી : - વેબકિટ - રેખીય - ઢાળ ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  11.     પૃષ્ઠભૂમિ - છબી : - o - રેખીય - ઢાળ ( @startColor , @endColor ); // ઓપેરા 11.10   
  12.     પૃષ્ઠભૂમિ - છબી : રેખીય - ઢાળ ( @startColor , @endColor ); // ધોરણ  
  13.   }
  14.   ...
  15. }

કામગીરી

ફેન્સી મેળવો અને નીચેની જેમ લવચીક અને શક્તિશાળી મિશ્રણ જનરેટ કરવા માટે થોડું ગણિત કરો.

  1. // ગ્રિડ્યુડ
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // કેટલીક કૉલમ બનાવો
  8. . કૉલમ ( @columnSpan : 1 ) {  
  9.   પહોળાઈ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

કમ્પાઇલિંગ ઓછું

/lib/ માં ફાઈલોને સંશોધિત કર્યા પછી .less, તમારે તેમને ફરીથી કમ્પાઈલ કરવાની જરૂર પડશે જેથી bootstrap-*xx.css અને bootstrap-*xx.min.css ફાઈલો પુનઃજીવિત થઈ શકે. જો તમે GitHub પર પુલ વિનંતી સબમિટ કરી રહ્યાં છો, તો તમારે હંમેશા ફરીથી કમ્પાઇલ કરવું આવશ્યક છે.

કમ્પાઇલ કરવાની રીતો

પદ્ધતિ પગલાં
મેકફાઇલ સાથે નોડ

નીચેનો આદેશ ચલાવીને npm સાથે ઓછી કમાન્ડ લાઇન કમ્પાઇલર ઇન્સ્ટોલ કરો:

$ npm install lessc

એકવાર ઇન્સ્ટોલ થઈ ગયા પછી ફક્ત makeતમારી બુટસ્ટ્રેપ ડિરેક્ટરીના રુટમાંથી ચલાવો અને તમે તૈયાર છો.

વધારામાં, જો તમારી પાસે વોચર ઇન્સ્ટોલ કરેલ હોય, તો તમે make watchજ્યારે પણ બુટસ્ટ્રેપ લિબમાં ફાઇલને સંપાદિત કરો છો ત્યારે તમે બુટસ્ટ્રેપ આપોઆપ પુનઃબીલ્ડ કરવા માટે દોડી શકો છો (આ જરૂરી નથી, માત્ર એક સુવિધા પદ્ધતિ).
જાવાસ્ક્રિપ્ટ

નવીનતમ Less.js ડાઉનલોડ કરો અને તેમાં તેનો પાથ (અને બુટસ્ટ્રેપ) શામેલ કરો head.

  1. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" >  
  2. <script src = "/path/to/less.js" ></script>

.less ફાઇલોને ફરીથી કમ્પાઇલ કરવા માટે, ફક્ત તેમને સાચવો અને તમારું પૃષ્ઠ ફરીથી લોડ કરો. Less.js તેમને કમ્પાઇલ કરે છે અને સ્થાનિક સ્ટોરેજમાં સ્ટોર કરે છે.
આદેશ વાક્ય

જો તમારી પાસે પહેલેથી જ ઓછું કમાન્ડ લાઇન ટૂલ ઇન્સ્ટોલ કરેલું છે, તો ફક્ત નીચેનો આદેશ ચલાવો:

$lessc ./lib/bootstrap.less > bootstrap.css

--compressજો તમે કેટલાક બાઇટ્સ સાચવવાનો પ્રયાસ કરી રહ્યાં હોવ તો તે આદેશમાં શામેલ કરવાની ખાતરી કરો !
ઓછી મેક એપ્લિકેશન

બિનસત્તાવાર Mac એપ્લિકેશન .less ફાઇલોની ડિરેક્ટરીઓ જુએ છે અને જોયેલી .less ફાઇલના દરેક સેવ પછી કોડને સ્થાનિક ફાઇલોમાં કમ્પાઇલ કરે છે.

જો તમે ઇચ્છો, તો તમે એપમાં ઓટોમેટિક મિનિફાઇંગ માટે પસંદગીઓને ટૉગલ કરી શકો છો અને કમ્પાઇલ કરેલી ફાઇલો કઈ ડિરેક્ટરીમાં સમાપ્ત થાય છે.