Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. મોરબી લીઓ રીસસ, પોર્ટા એસી કોન્સેકટુર એસી, વેસ્ટીબુલમ એટ ઇરોસ.
બુટસ્ટ્રેપ એ ટ્વિટરની એક ટૂલકીટ છે જે વેબએપ્સ અને સાઇટ્સના વિકાસને કિકસ્ટાર્ટ કરવા માટે રચાયેલ છે.
તેમાં ટાઇપોગ્રાફી, ફોર્મ્સ, બટન્સ, કોષ્ટકો, ગ્રીડ, નેવિગેશન અને વધુ માટે આધાર CSS અને HTML શામેલ છે.
Nerd ચેતવણી: બુટસ્ટ્રેપ લેસ સાથે બનેલ છે અને આધુનિક બ્રાઉઝર્સને ધ્યાનમાં રાખીને ગેટની બહાર કામ કરવા માટે ડિઝાઇન કરવામાં આવ્યું હતું.
સૌથી ઝડપી અને સરળ શરૂઆત માટે, ફક્ત આ સ્નિપેટને તમારા વેબપેજમાં કૉપિ કરો.
ઓછા ઉપયોગના ચાહક છો? કોઈ વાંધો નથી, ફક્ત રેપોને ક્લોન કરો અને આ રેખાઓ ઉમેરો:
ગીથબ પર સત્તાવાર બુટસ્ટ્રેપ રેપો સાથે ડાઉનલોડ કરો, ફોર્ક કરો, ખેંચો, ફાઇલ સમસ્યાઓ અને વધુ.
ટ્વિટરના પહેલાના દિવસોમાં, એન્જીનિયરો ફ્રન્ટ-એન્ડ જરૂરિયાતોને પહોંચી વળવા માટે તેઓ પરિચિત હોય તેવી લગભગ કોઈપણ લાઇબ્રેરીનો ઉપયોગ કરતા હતા. બુટસ્ટ્રેપની શરૂઆત ટ્વિટરના પ્રથમ હેકવીક દરમિયાન રજૂ કરવામાં આવેલા પડકારોના જવાબ તરીકે અને વિકાસને ઝડપથી વેગ મળ્યો.
Twitter પર ઘણા એન્જિનિયરોની મદદ અને પ્રતિસાદ સાથે, બુટસ્ટ્રેપ માત્ર મૂળભૂત શૈલીઓ જ નહીં, પરંતુ વધુ ભવ્ય અને ટકાઉ ફ્રન્ટ-એન્ડ ડિઝાઇન પેટર્નને સમાવવા માટે નોંધપાત્ર રીતે વિકસ્યું છે.
dev.twitter.com પર વધુ વાંચો ›
ક્રોમ, સફારી, ઈન્ટરનેટ એક્સપ્લોરર અને ફાયરફોક્સ જેવા મુખ્ય આધુનિક બ્રાઉઝર્સમાં બુટસ્ટ્રેપનું પરીક્ષણ અને સમર્થન કરવામાં આવે છે.
બુટસ્ટ્રેપ સંકલિત CSS, અનકમ્પાઇલ અને ઉદાહરણ નમૂનાઓ સાથે પૂર્ણ થાય છે.
બુટસ્ટ્રેપના ભાગ રૂપે પૂરી પાડવામાં આવેલ ડિફોલ્ટ ગ્રીડ સિસ્ટમ 940px પહોળી 16-કૉલમ ગ્રીડ છે. તે લોકપ્રિય 960 ગ્રીડ સિસ્ટમનો સ્વાદ છે, પરંતુ ડાબી અને જમણી બાજુએ વધારાના માર્જિન/પેડિંગ વિના.
અહીં બતાવ્યા પ્રમાણે, બે "કૉલમ્સ" સાથે એક મૂળભૂત લેઆઉટ બનાવી શકાય છે, જે દરેક 16 પાયાના કૉલમ્સની સંખ્યાને ફેલાવે છે જે અમે અમારી ગ્રીડ સિસ્ટમના ભાગ તરીકે વ્યાખ્યાયિત કરી છે. વધુ ભિન્નતા માટે નીચેના ઉદાહરણો જુઓ.
- <div વર્ગ = "પંક્તિ" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
ડિફૉલ્ટ અને સરળ 940px-વાઇડ, એકલ દ્વારા પૂરી પાડવામાં આવેલ લગભગ કોઈપણ વેબસાઇટ અથવા પૃષ્ઠ માટે કેન્દ્રિત લેઆઉટ <div.container>
.
- <body>
- <div વર્ગ = "કન્ટેનર" >
- ...
- </div>
- </body>
ન્યૂનતમ અને મહત્તમ-પહોળાઈ અને ડાબી બાજુની સાઇડબાર સાથે વૈકલ્પિક, લવચીક પ્રવાહી પૃષ્ઠ માળખું. એપ્લિકેશન્સ અને દસ્તાવેજો માટે સરસ.
- <body>
- <div class = "container-fluid" >
- <div વર્ગ = "સાઇડબાર" >
- ...
- </div>
- <div વર્ગ = "સામગ્રી" >
- ...
- </div>
- </div>
- </body>
તમારા વેબપૃષ્ઠોને સંરચિત કરવા માટે માનક ટાઇપોગ્રાફિક વંશવેલો.
સમગ્ર ટાઈપોગ્રાફિક ગ્રીડ અમારી preboot.less ફાઈલમાં બે ઓછા વેરીએબલ પર આધારિત છે: @basefont
અને @baseline
. પ્રથમ સમગ્ર ઉપયોગમાં લેવાતો આધાર ફોન્ટ-કદ છે અને બીજો આધાર રેખા-ઊંચાઈ છે.
અમે તે ચલો અને કેટલાક ગણિતનો ઉપયોગ અમારા તમામ પ્રકારના અને વધુના માર્જિન, પેડિંગ્સ અને લાઇન-હાઈટ્સ બનાવવા માટે કરીએ છીએ.
નુલ્લમ ક્વિસ રિસસ એગેટ ઉર્ના મોલીસ ઓર્નારે વેલ ઇયુ લીઓ. 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>
પૂર્વજ અથવા સમગ્ર કાર્ય માટે સંપર્ક માહિતી માટે થાય છે. તે કેવી રીતે દેખાય છે તે અહીં છે:
નોંધ: સામગ્રીને યોગ્ય રીતે સંરચિત કરવા માટે દરેક લાઇન <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>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
કોષ્ટકો મહાન છે - ઘણી બધી વસ્તુઓ માટે. મહાન કોષ્ટકો, જોકે, ઉપયોગી, માપી શકાય તેવા અને વાંચી શકાય તેવા (કોડ સ્તરે) બનવા માટે થોડો માર્કઅપ પ્રેમની જરૂર છે. મદદ કરવા માટે અહીં કેટલીક ટીપ્સ આપી છે.
હંમેશા તમારા કૉલમ હેડરને <thead>
એવી રીતે લપેટીએ કે વંશવેલો <thead>
> <tr>
> હોય <th>
.
કૉલમ હેડરોની જેમ જ, તમારા કોષ્ટકની બધી મુખ્ય સામગ્રી એકમાં આવરિત હોવી જોઈએ <tbody>
જેથી તમારું વંશવેલો <tbody>
> <tr>
> હોય <td>
.
વાંચનક્ષમતા સુનિશ્ચિત કરવા અને માળખું જાળવવા માટે તમામ કોષ્ટકો ફક્ત આવશ્યક કિનારીઓ સાથે આપમેળે સ્ટાઇલ કરવામાં આવશે. વધારાના વર્ગો અથવા વિશેષતાઓ ઉમેરવાની જરૂર નથી.
# | પ્રથમ નામ | છેલ્લું નામ | ભાષા |
---|---|---|---|
1 | કેટલાક | એક | અંગ્રેજી |
2 | જૉ | છ પેક | અંગ્રેજી |
3 | સ્ટુ | ડેન્ટ | કોડ |
- <ટેબલ>
- ...
- </ ટેબલ>
ઝેબ્રા-સ્ટ્રાઇપિંગ ઉમેરીને તમારા કોષ્ટકો સાથે થોડી ફેન્સી મેળવો—ફક્ત .zebra-striped
વર્ગ ઉમેરો.
# | પ્રથમ નામ | છેલ્લું નામ | ભાષા |
---|---|---|---|
1 | કેટલાક | એક | અંગ્રેજી |
2 | જૉ | છ પેક | અંગ્રેજી |
3 | સ્ટુ | ડેન્ટ | કોડ |
નોંધ: ઝેબ્રા-સ્ટ્રાઇપિંગ એ પ્રગતિશીલ ઉન્નતીકરણ છે જે IE8 અને નીચેના જૂના બ્રાઉઝર માટે ઉપલબ્ધ નથી.
- <ટેબલ વર્ગ = "ઝેબ્રા-પટ્ટાવાળી" >
- ...
- </ ટેબલ>
અગાઉનું ઉદાહરણ લેતા, અમે jQuery અને ટેબલસોર્ટર પ્લગઇન દ્વારા સૉર્ટિંગ કાર્યક્ષમતા પ્રદાન કરીને અમારા કોષ્ટકોની ઉપયોગિતામાં સુધારો કરીએ છીએ. સૉર્ટ બદલવા માટે કોઈપણ કૉલમના હેડરને ક્લિક કરો.
# | પ્રથમ નામ | છેલ્લું નામ | ભાષા |
---|---|---|---|
1 | તમારા | એક | અંગ્રેજી |
2 | જૉ | છ પેક | અંગ્રેજી |
3 | સ્ટુ | ડેન્ટ | કોડ |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <સ્ક્રીપ્ટ >
- $ ( કાર્ય () {
- $ ( "table#sortTableExample" ). ટેબલસોર્ટર ({ સૉર્ટલિસ્ટ : [[ 1 , 0 ]] });
- });
- </script>
- <ટેબલ વર્ગ = "ઝેબ્રા-પટ્ટાવાળી" >
- ...
- </ ટેબલ>
બધા સ્વરૂપોને વાંચી શકાય તેવી અને માપી શકાય તેવી રીતે પ્રસ્તુત કરવા માટે ડિફોલ્ટ શૈલીઓ આપવામાં આવી છે. ટેક્સ્ટ ઇનપુટ્સ, સિલેક્ટ લિસ્ટ્સ, ટેક્સટેરિયા, રેડિયો બટન્સ અને ચેકબોક્સ અને બટન્સ માટે સ્ટાઇલ આપવામાં આવે છે.
તમારા ફોર્મના HTML માં ઉમેરો .form-stacked
અને તમારી પાસે તેમની ડાબી બાજુને બદલે તેમના ફીલ્ડ્સની ટોચ પર લેબલ્સ હશે. જો તમારા ફોર્મ ટૂંકા હોય અથવા તમારી પાસે ભારે સ્વરૂપો માટે ઇનપુટની બે કૉલમ હોય તો આ સારું કામ કરે છે.
સંમેલન તરીકે, બટનોનો ઉપયોગ ક્રિયાઓ માટે થાય છે જ્યારે લિંક્સનો ઉપયોગ વસ્તુઓ માટે થાય છે. દાખલા તરીકે, "ડાઉનલોડ" એ એક બટન હોઈ શકે છે અને "તાજેતરની પ્રવૃત્તિ" એક લિંક હોઈ શકે છે.
બધા બટનો આછા ગ્રે શૈલીમાં ડિફોલ્ટ છે, પરંતુ વિવિધ રંગ શૈલીઓ માટે સંખ્યાબંધ કાર્યાત્મક વર્ગો લાગુ કરી શકાય છે. આ વર્ગોમાં વાદળી .primary
વર્ગ, આછો-વાદળી .info
વર્ગ, લીલો .success
વર્ગ અને લાલ .danger
વર્ગનો સમાવેશ થાય છે. ઉપરાંત, તમારી પોતાની શૈલીઓ રોલ કરવી સરળ છે.
બટન શૈલીઓ લાગુ સાથે કોઈપણ વસ્તુ પર લાગુ કરી શકાય છે .btn
. સામાન્ય રીતે તમે આને ફક્ત <a>
, <button>
, અને પસંદ કરો <input>
ઘટકો પર લાગુ કરવા માંગો છો. તે કેવી રીતે દેખાય છે તે અહીં છે:
ફેન્સી મોટા કે નાના બટનો? તે છે!
એક અથવા બીજા કારણસર એપ દ્વારા સક્રિય ન હોય અથવા અક્ષમ કરેલ હોય તેવા બટનો માટે, અક્ષમ સ્થિતિનો ઉપયોગ કરો. તે .disabled
લિંક્સ અને તત્વો :disabled
માટે છે.<button>
div.alert-message
નિષ્ફળતા, સંભવિત નિષ્ફળતા અથવા ક્રિયાની સફળતાને પ્રકાશિત કરવા માટે એક-લાઇન સંદેશાઓ. ફોર્મ માટે ખાસ કરીને ઉપયોગી.
div.alert-message.block-message
સંદેશાઓ માટે કે જેને થોડી સમજૂતીની જરૂર હોય, અમારી પાસે ફકરા શૈલી ચેતવણીઓ છે. આ લાંબા સમય સુધી ભૂલ સંદેશાઓને બબલિંગ કરવા માટે, વપરાશકર્તાને બાકી ક્રિયા વિશે ચેતવણી આપવા માટે અથવા ફક્ત પૃષ્ઠ પર વધુ ભાર આપવા માટે માહિતી પ્રસ્તુત કરવા માટે યોગ્ય છે.
મોડલ્સ—સંવાદો અથવા લાઇટબૉક્સ—પશ્ચાદભૂનો સંદર્ભ જાળવવો મહત્વપૂર્ણ હોય તેવી પરિસ્થિતિઓમાં સંદર્ભાત્મક ક્રિયાઓ માટે ઉત્તમ છે.
એક સુંદર શરીર…
મૂંઝવણમાં મૂકાયેલા વપરાશકર્તાને મદદ કરવા અને તેમને યોગ્ય દિશામાં નિર્દેશ કરવા માટે ટ્વિપ્સી ખૂબ જ ઉપયોગી છે.
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. મોરબી લીઓ રીસસ, પોર્ટા એસી કોન્સેકટુર એસી, વેસ્ટીબુલમ એટ ઇરોસ.
બુટસ્ટ્રેપ પ્રીબૂટ સાથે બનાવવામાં આવ્યું હતું, જે ઝડપી અને સરળ વેબ ડેવલપમેન્ટ માટે સીએસએસ પ્રીપ્રોસેસર, Less સાથે જોડાણમાં ઉપયોગમાં લેવા માટે મિક્સિન્સ અને ચલોનો ઓપન-સોર્સ પેક છે .
અમે બુટસ્ટ્રેપમાં પ્રીબૂટનો ઉપયોગ કેવી રીતે કર્યો તે તપાસો અને જો તમે તમારા આગલા પ્રોજેક્ટ પર ઓછું ચલાવવાનું પસંદ કરો તો તમે તેનો ઉપયોગ કેવી રીતે કરી શકો છો.
તમારા બ્રાઉઝરમાં જાવાસ્ક્રિપ્ટ દ્વારા બુટસ્ટ્રેપના ઓછા વેરિયેબલ્સ, મિક્સિન્સ અને CSSમાં નેસ્ટિંગનો સંપૂર્ણ ઉપયોગ કરવા માટે આ વિકલ્પનો ઉપયોગ કરો.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" મીડિયા = "બધા" />
- <script src = "js/less-1.1.3.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 ;
- // બેઝલાઇન ગ્રીડ
- @basefont : 13px ;
- @બેઝલાઇન : 18px ;
/* ... */
સીએસએસના સામાન્ય વાક્યરચના ઉપરાંત ઓછી ટિપ્પણી કરવાની બીજી શૈલી પણ પ્રદાન કરે છે .
- // આ એક ટિપ્પણી છે
- /* આ પણ એક ટિપ્પણી છે */
મિક્સિન્સ મૂળભૂત રીતે 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
- પૃષ્ઠભૂમિ - છબી : રેખીય - ઢાળ ( ડાબે , @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
- પૃષ્ઠભૂમિ - છબી : રેખીય - ઢાળ ( @startColor , @endColor ); // ધોરણ
- }
- . દિશાસૂચક ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . વર્ટિકલ - ત્રણ - રંગો ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
ફેન્સી મેળવો અને નીચેની જેમ લવચીક અને શક્તિશાળી મિશ્રણ જનરેટ કરવા માટે થોડું ગણિત કરો.
- // ગ્રિડ્યુડ
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // ગ્રીડ સિસ્ટમ
- . કન્ટેનર {
- પહોળાઈ : @siteWidth ;
- માર્જિન : 0 ઓટો ;
- . clearfix ();
- }
- . કૉલમ ( @columnSpan : 1 ) {
- પહોળાઈ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . ઑફસેટ ( @columnOffset : 1 ) {
- હાંસિયો - ડાબે : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }