ટ્વિટર બુટસ્ટ્રેપ

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

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

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

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

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

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

GitHub પર ફોર્ક

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

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

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

બુટસ્ટ્રેપના ભાગ રૂપે પૂરી પાડવામાં આવેલ ડિફોલ્ટ ગ્રીડ સિસ્ટમ 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>

વિવિધ તત્વો

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

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

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

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

ફકરામાં ભાર

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

સરનામાં

addressતત્વનો ઉપયોગ—તમે અનુમાન લગાવ્યું!—સંબોધનો માટે થાય છે . તે કેવી રીતે દેખાય છે તે અહીં છે:

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

નોંધ: સામગ્રીને યોગ્ય રીતે સંરચિત કરવા માટે દરેક લાઇન addressલાઇન-બ્રેક ( ) સાથે સમાપ્ત થવી આવશ્યક <br />છે કારણ કે તે કોઈપણ શૈલીઓ લાગુ કર્યા વિના વાસ્તવિક જીવનમાં વાંચવામાં આવે છે.

સંક્ષેપ

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

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

<blockquote> <p> <cite>

blockquoteતમારા આસપાસ paragraphઅને citeટૅગ્સ લપેટી ખાતરી કરો . સ્ત્રોત ટાંકતી વખતે, citeતત્વનો ઉપયોગ કરો. CSS એ એમ ડેશ (—) સાથે આપમેળે નામનો પ્રસ્તાવ મૂકશે.

Lorem ipsum dolor sit amet, consectetur adipisising elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
ડૉ. જુલિયસ હિબર્ટ

યાદીઓ

અવ્યવસ્થિત`<ul>`

જેરેમી બિક્સબી
રોબર્ટ ડિઝુર
જોશ વોશિંગ્ટન
એન્ટોન કેપ્રેસી
મારી ટીમ મેટ્સ
- જ્યોર્જ કાસ્ટાન્ઝા
- જેરી સીનફેલ્ડ
- કોસ્મો ક્રેમર
- ઈલેન બેનિસ
- નવો માણસ
જ્હોન જેકબ
પોલ પિયર્સ
કેવિન ગાર્નેટ

અનસ્ટાઇલ`<ul.unstyled>`

જેરેમી બિક્સબી
રોબર્ટ ડિઝુર
જોશ વોશિંગ્ટન
એન્ટોન કેપ્રેસી
મારી ટીમ મેટ્સ
- જ્યોર્જ કાસ્ટાન્ઝા
- જેરી સીનફેલ્ડ
- કોસ્મો ક્રેમર
- ઈલેન બેનિસ
- નવો માણસ
જ્હોન જેકબ
પોલ પિયર્સ
કેવિન ગાર્નેટ

આદેશ આપ્યો`<ol>`

જેરેમી બિક્સબી
રોબર્ટ ડિઝુર
જોશ વોશિંગ્ટન
એન્ટોન કેપ્રેસી
મારી ટીમ મેટ્સ
1. જ્યોર્જ કાસ્ટાન્ઝા
2. જેરી સીનફેલ્ડ
3. કોસ્મો ક્રેમર
4. ઈલેન બેનિસ
5. નવો માણસ
જ્હોન જેકબ
પોલ પિયર્સ
કેવિન ગાર્નેટ

વર્ણન`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	સ્ટુ	ડેન્ટ	કોડ

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

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

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

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

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

સ્થિર ટોપબાર

આ શુ છે

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

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

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

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

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

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

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

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

<ul class="tabs"> વર્ગ = "ટેબ્સ" >
  <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="pills"> વર્ગ = "ગોળીઓ" >
  <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 class="પાનું"> વર્ગ = "પૃષ્ઠ ક્રમાંક" >
  <ul>
    <li class = "અગાઉ અક્ષમ કરેલ" ><a href = "" > ← પાછલું </a></li>  
    <li class = "active" ><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" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" મીડિયા = "બધા" />    
<script type = "text/javascript" 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 ; 
  }
  . સાન્સ - સેરીફ ( @વજન : સામાન્ય , @ કદ : 14px , @લાઇન ઊંચાઈ : 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 )) ! મહત્વપૂર્ણ ;          
}

બુટસ્ટ્રેપ

ટ્વિટર બુટસ્ટ્રેપ

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

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

GitHub પર ફોર્ક

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

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

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

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

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

સ્થિર લેઆઉટ

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

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

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

h1. મથાળું 1

h2. મથાળું 2

h3. મથાળું 3

h4. મથાળું 4

h5. મથાળું 5

h6. મથાળું 6

ઉદાહરણ ફકરો

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

વિવિધ તત્વો

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

ફકરામાં ભાર

સરનામાં

સંક્ષેપ

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

યાદીઓ

અવ્યવસ્થિત<ul>

અનસ્ટાઇલ<ul.unstyled>

આદેશ આપ્યો<ol>

વર્ણનdl

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

મકાન કોષ્ટકો

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

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

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

સ્વરૂપો

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

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

બટનો

ઉદાહરણ બટનો

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

અપંગ રાજ્ય

લિંક્સ

બટનો

સંશોધક

સ્થિર ટોપબાર

પ્રોજેક્ટનું નામ

આ શુ છે

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

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

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

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

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

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

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

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

મોડલ્સ

મોડલ મથાળું

ટૂલ ટીપ્સ

પોપોવર્સ

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

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

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

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

રંગ ચલો

ટિપ્પણી

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

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

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

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

અવ્યવસ્થિત`<ul>`

અનસ્ટાઇલ`<ul.unstyled>`

આદેશ આપ્યો`<ol>`

વર્ણન`dl`