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

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

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

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

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

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

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

GitHub પર ફોર્ક

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

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

ઇતિહાસ

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

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

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

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

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

નવીનતમ સફારી
નવીનતમ Google Chrome
ફાયરફોક્સ 4+
ઇન્ટરનેટ એક્સપ્લોરર 7+

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

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

બધી મૂળ .less ફાઇલો
સંપૂર્ણપણે કમ્પાઇલ અને મિનિફાઇડ CSS
પૂર્ણ શૈલી માર્ગદર્શિકા દસ્તાવેજીકરણ
ઉદાહરણ પૃષ્ઠ નમૂના (વધુ ટૂંક સમયમાં આવશે)

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

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

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

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

<div class="row"> વર્ગ = "પંક્તિ" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

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

8 ઓફસેટ 4

4 ઓફસેટ 4

5 ઓફસેટ 3

10 ઓફસેટ 6

સ્થિર લેઆઉટ

લગભગ કોઈપણ સાઇટ અથવા પૃષ્ઠ માટે મૂળભૂત 940px પહોળું, કેન્દ્રિત કન્ટેનર લેઆઉટ.

<body>
  <div વર્ગ = "કન્ટેનર" > 
    ...
  </div>
</body>

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

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

<body>
  <div class = "container-fluid" > 
    <div વર્ગ = "સાઇડબાર" > 
      ...
    </div>
    <div વર્ગ = "સામગ્રી" > 
      ...
    </div>
  </div>
</body>

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

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

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

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

સંક્ષેપ

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

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

<blockquote> <p> <small>

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. પૂર્ણાંક posuere erat a ante venenatis dapibus posuere velit aliquet.
ડૉ. જુલિયસ હિબર્ટ

યાદીઓ

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
માસામાં પૂર્ણાંક મોલેસ્ટી લોરેમ
પ્રિટિયમ નિસ્લ એલિકેટમાં ફેસિલિસીસ
નુલ્લા વોલ્યુટપેટ એલીકમ વેલીટ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nc
Eget porttitor lorem

વર્ણન`dl`

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

મકાન કોષ્ટકો

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

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

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

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

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

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

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

<table class="common-table"> વર્ગ = "સામાન્ય-ટેબલ" >
  ...
</ ટેબલ>

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

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

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

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

<table class="common-table zebra-striped"> વર્ગ = "સામાન્ય-ટેબલ ઝેબ્રા-પટ્ટાવાળી" >
...
</ ટેબલ>

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

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

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

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<સ્ક્રીપ્ટ > 
  $ ( કાર્ય () { 
    $ ( "table#sortTableExample" ). ટેબલસોર્ટર ({ સૉર્ટલિસ્ટ : [[ 1 , 0 ]] });  
  });
</script>
<ટેબલ વર્ગ = "સામાન્ય-ટેબલ ઝેબ્રા-પટ્ટાવાળી" > 
  ...
</ ટેબલ>

સ્થિર ટોપબાર

આ શુ છે

અમારો ટોપબાર એક નિશ્ચિત બાર છે જેમાં વેબસાઇટનો લોગો અથવા નામ, પ્રાથમિક નેવિગેશન અને શોધ ફોર્મ હોય છે.

વૈવિધ્યપૂર્ણ

અંદરના તમામ ઘટકો અને સમગ્ર ટોપબાર પણ વૈકલ્પિક છે. તમે લોગો/નામ, એનએવી, શોધ અને સેકન્ડરી એનએવી-અથવા તેના કોઈપણ સંયોજનને શામેલ કરવાનું પસંદ કરી શકો છો.

ડ્રોપડાઉન સમાવેશ થાય છે

મુખ્ય નેવિગેશનના ભાગ રૂપે, અમે તમારા નેવિગેશનમાં ડ્રોપડાઉન ઉમેરવાની ક્ષમતાનો સમાવેશ કર્યો છે. તે કેવી રીતે થાય છે તે જોવા માટે ઉપર (જમણે સંરેખિત) ગૌણ નેવી તપાસો.

ટૅબ્સ અને ગોળીઓ

એક સાથે સરળ ગૌણ નેવિગેશન બનાવો <ul>. યોગ્ય વર્ગ ઉમેરીને ટેબ અથવા ગોળીઓ વચ્ચે સ્વેપ કરો.

અમારા એકાઉન્ટ સેટિંગ્સ પૃષ્ઠો અને સમાન સામગ્રીના પૃષ્ઠો વચ્ચે ટૉગલ કરવા માટે વપરાશકર્તા સમયરેખા જેવી સામગ્રીના પેટા-વિભાગો માટે સરસ. ટેબ્ડ અથવા પીલ શૈલીમાં ઉપલબ્ધ છે.

<ul class = "ટેબ્સ" > 
  <li class = "active" ><a href = "#" > હોમ </a></li>  
  <li><a href = "#" > પ્રોફાઇલ </a></li> 
  <li><a href = "#" > સંદેશાઓ </a></li> 
  <li><a href = "#" > સેટિંગ્સ </a></li> 
  <li><a href = "#" > સંપર્ક </a></li> 
</ul>

<ul class = "ગોળીઓ" > 
  <li class = "active" ><a href = "#" > હોમ </a></li>  
  <li><a href = "#" > પ્રોફાઇલ </a></li> 
  <li><a href = "#" > સંદેશાઓ </a></li> 
  <li><a href = "#" > સેટિંગ્સ </a></li> 
  <li><a href = "#" > સંપર્ક </a></li> 
</ul>

પૃષ્ઠ ક્રમાંકન

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

<div વર્ગ = "પેજીકરણ" > 
  <ul>
    <li class = "અગાઉ અક્ષમ કરેલ" ><a href = "#" > ← પાછલું </a></li>  
    <li વર્ગ = "સક્રિય" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > આગળ → </a></li>  
  </ul>
</div>

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

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

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

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

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

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

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

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

ઓહ ત્વરિત! તમને ભૂલ મળી છે!આ અને તે બદલો અને ફરી પ્રયાસ કરો. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

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

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

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

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

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

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

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

મોડલ્સ

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

ટૂલ ટીપ્સ

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

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

નીચે!

ખરું!

બાકી!

ઉપર!

પોપોવર્સ

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

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

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

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

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

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

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

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

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

રંગ ચલો

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

// લિંક્સ
@linkColor : #8b59c2;         
@linkColorHover : ઘાટો (     @linkColor , 10 ); 
 
// ગ્રે
@બ્લેક : #000;             
@ગ્રેડાર્ક :           આછું ( @બ્લેક , 25 %); 
@ગ્રે :               આછું ( @કાળો , 50 %); 
@ગ્રેલાઇટ :          આછું ( @બ્લેક , 70 %); 
@ગ્રેલાઈટર :        આછું ( @બ્લેક , 90 %); 
@સફેદ : #ffff ;             
 
// ઉચ્ચાર રંગો
@blue : #08b5fb;              
@ગ્રીન : #46a546 ;             
@લાલ : #9d261d ;               
@પીળો : #ffc40d ;            
@ઓરેન્જ : #f89406 ;            
@pink : #c3325f;              
@જાંબલી : #7a43b6 ;            
 
// બેઝલાઇન
@baseline : 20px ;

ટિપ્પણી

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

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

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

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

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

#ફોન્ટ {
  . લઘુલિપિ ( @વજન : સામાન્ય , @ કદ : 14px ,    @લાઇન ઊંચાઈ : 20px ) {  
    ફોન્ટ માપ : @size ; _ 
    ફોન્ટ - વજન : @weight ; 
    રેખા - ઊંચાઈ : @lineHeight ; 
  }
  . સેન્સ - સેરીફ ( @વજન : સામાન્ય , @ કદ : 14 પીએક્સ , @ લાઇન ઊંચાઈ    : 20px ) {  
    ફોન્ટ - કુટુંબ : "હેલ્વેટિકા ન્યુ" , હેલ્વેટિકા ,    એરિયલ , સેન્સ - સેરીફ ;
    ફોન્ટમાપ : @size ; _ 
    ફોન્ટ - વજન : @weight ; 
    રેખા -ઊંચાઈ : @lineHeight ; 
  }
  . સેરિફ ( @વજન : સામાન્ય , @સાઇઝ : 14px , @લાઇન ઊંચાઈ    : 20px ) {  
    ફોન્ટ - કુટુંબ : "જ્યોર્જિયા" , ટાઇમ્સ ન્યૂ રોમન , ટાઇમ્સ      , સેન્સ - સેરીફ ;
    ફોન્ટ -માપ : @size ;  
    ફોન્ટ -વજન : @weight ; 
    રેખા - ઊંચાઈ: @lineHeight ; 
  }
  . મોનોસ્પેસ ( @વજન : સામાન્ય , @ કદ : 12px , @ લાઇન ઊંચાઈ : 20px ) {     
    ફોન્ટ - કુટુંબ : "મોનાકો" , કુરિયર ન્યૂ , મોનોસ્પેસ ;   
    ફોન્ટ માપ : @size ; _ 
    ફોન્ટ - વજન : @weight ; 
    રેખા - ઊંચાઈ : @lineHeight ; 
  }
}

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

#ગ્રેડિયન્ટ {
  . આડું ( @startColor : #555, @endColor: #333) { 
    પૃષ્ઠભૂમિ - રંગ :  @endColor ;
    પૃષ્ઠભૂમિ - પુનરાવર્તન : પુનરાવર્તન - x ;
    પૃષ્ઠભૂમિ - છબી : - khtml - ઢાળ ( રેખીય , ડાબી ટોચ , જમણી ટોચ , ( @startColor ) થી ( @endColor ) સુધી ); // કોન્કરર   
    પૃષ્ઠભૂમિ - છબી : - moz - રેખીય - ઢાળ ( ડાબે , @startColor , @endColor ); // FF 3.6+    
    પૃષ્ઠભૂમિ - છબી : - ms - રેખીય - ઢાળ ( ડાબે , @startColor , @endColor ); // IE10    
    પૃષ્ઠભૂમિ - છબી : - વેબકિટ - ઢાળ ( રેખીય , ડાબું ટોચ , જમણું ટોચ , રંગ - સ્ટોપ ( 0 % , @startColor ), રંગ - સ્ટોપ ( 100 %, @endColor ));    // Safari 4+, Chrome 2+
    પૃષ્ઠભૂમિ - છબી : - વેબકિટ - રેખીય - ઢાળ ( ડાબે , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    પૃષ્ઠભૂમિ - છબી : - o - રેખીય - ઢાળ ( ડાબે , @startColor , @endColor );    // ઓપેરા 11.10
    - ms - ફિલ્ટર : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor );  // IE8+
    ફિલ્ટર : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 અને IE7 
    પૃષ્ઠભૂમિ - છબી : રેખીય - ઢાળ ( ડાબે , @startColor , @endColor ); // લે ધોરણ   
  }
  . વર્ટિકલ ( @startColor : #555, @endColor: #333) { 
    પૃષ્ઠભૂમિ - રંગ : @endColor ; 
    પૃષ્ઠભૂમિ - પુનરાવર્તન : પુનરાવર્તન - x ;
    પૃષ્ઠભૂમિ - છબી : - khtml - ઢાળ ( રેખીય , ડાબી ટોચ , ડાબી નીચે , ( @startColor ) થી ( @endColor ) સુધી ); // કોન્કરર   
    પૃષ્ઠભૂમિ - છબી : - moz - રેખીય - ઢાળ ( @startColor , @endColor );   // FF 3.6+
    પૃષ્ઠભૂમિ - છબી : - ms - રેખીય - ઢાળ ( @startColor , @endColor );   // IE10
    પૃષ્ઠભૂમિ - છબી : - વેબકિટ - ઢાળ ( રેખીય , ડાબી ટોચ , ડાબી નીચે , રંગ - સ્ટોપ ( 0 % , @startColor ), રંગ - સ્ટોપ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    પૃષ્ઠભૂમિ - છબી : - વેબકિટ - રેખીય - ઢાળ ( @startColor , @endColor );   // Safari 5.1+, Chrome 10+
    પૃષ્ઠભૂમિ - છબી : - o - રેખીય - ઢાળ ( @startColor , @endColor ); // ઓપેરા 11.10   
    - ms - ફિલ્ટર : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    ફિલ્ટર : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 અને IE7
    પૃષ્ઠભૂમિ - છબી : રેખીય - ઢાળ ( @startColor , @endColor ); // ધોરણ  
  }
  . દિશાસૂચક ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . વર્ટિકલ - ત્રણ - રંગો ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

કામગીરી અને ગ્રીડ સિસ્ટમ

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

// ગ્રિડ્યુડ
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// ગ્રીડ સિસ્ટમ
. કન્ટેનર {
  પહોળાઈ : @siteWidth ; 
  માર્જિન : 0 ઓટો ;  
  . clearfix ();
}
. કૉલમ ( @columnSpan : 1 )   {
  પ્રદર્શન : ઇનલાઇન ; 
  ફ્લોટ : ડાબે ;
  પહોળાઈ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  હાંસિયો - ડાબે : @gridGutterWidth ; 
  &: પ્રથમ - બાળક {
    હાંસિયો - ડાબે : 0 ; 
  }
}
. ઑફસેટ ( @columnOffset : 1 )   {
  હાંસિયો - ડાબે : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! મહત્વપૂર્ણ ;          
}