एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड. मेसेनास फॉसिबस मॉलिस इंटरडम. मोर्बी लियो रिसस, पोर्टा एसी कॉन्सेक्टेतुर एसी, इरोस हांगाच्या वेस्टिबुलम.
बूटस्ट्रॅप ही ट्विटराची एक साधनपुस्तिका आसा जी वेबऍप्लिकेशनां आनी सायटींच्या विकासाक किकस्टार्ट करपाक तयार केल्ली आसा.
तातूंत टायपोग्राफी, फॉर्म, बटण, कोश्टकां, ग्रिड, नेव्हिगेशन, आनी हेर खातीर बेस CSS आनी HTML आसपावीत केला.
Nerd सावधानताय: बूटस्ट्रॅप Less कडेन तयार केला आनी आधुनीक ब्राउझर मतींत घेवन गेटी भायर काम करपाक तयार केल्लो.
सगळ्यांत बेगीन आनी सोप्या सुरवाती खातीर, फकत हो स्निपेट तुमच्या वॅबपानांत कॉपी करात.
लेस वापरपाचो एक फॅन? कसलोच प्रॉब्लेम ना, फकत रेपो क्लोन करात आनी ह्यो ओळी जोडात:
Github चेर अधिकृत Bootstrap रेपो वांगडा डावनलोड, फोर्क, पुल, फायल प्रस्न, आनी हेर.
ट्विटराच्या आदल्या काळांत अभियंते फ्रंट-एंड गरजां पुराय करपा खातीर तांकां वळख आशिल्ली चड करून खंयच्याय लायब्ररीचो वापर करताले. ट्विटराच्या पयल्या हॅकवीकांत सादर केल्ल्या आव्हानांक जाप म्हणून बूटस्ट्रॅप सुरू जालो आनी विकास बेगीन वेगवान जालो.
ट्विटरांतल्या जायत्या अभियंत्यांच्या आदारान आनी प्रतिसादान, बूटस्ट्रॅप फकत मुळाव्यो शैली न्हय, तर चड सुंदर आनी टिकाऊ फ्रंट-एंड डिझायन नमुन्यांचो आस्पाव करपाक म्हत्वाची वाडल्या.
dev.twitter.com ह्या संकेतथळार चड वाचात ›
Chrome, Safari, Internet Explorer, आनी Firefox सारकिल्या मुखेल आधुनीक ब्राउझरांनी बूटस्ट्रॅपाची चांचणी आनी समर्थन आसा.
बूटस्ट्रॅप संकलित CSS, संकलित नाशिल्ले, आनी उदाहरण साच्यां वांगडा पुराय येता.
बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आसा. तो लोकप्रिय 960 ग्रिड प्रणालीची एक रूच, पूण डाव्या आनी उजव्या बाजूक अतिरिक्त मार्जिन/पॅडींग नासतना.
हांगा दाखयल्ले प्रमाणें, दोन "स्तंभ" आशिल्ली मुळावी मांडावळ तयार करूंक शकता, दरेक स्तंभ आमी आमच्या ग्रिड प्रणालीचो भाग म्हूण व्याख्या केल्ल्या 16 मुळाव्या स्तंभांच्या संख्येंत पातळटात. चड बदलां खातीर सकयल दिल्ल्यो उदाहरणां पळयात.
- <div वर्ग = "ओळ" >
- <div वर्ग = "span6 स्तंभ" >
- ...
- </div> हें नांव
- <div वर्ग = "span10 स्तंभ" >
- ...
- </div> हें नांव
- </div> हें नांव
मुलभूत आनी सादी 940px-रुंद, केंद्रीत मांडावळ फकत जवळजवळ खंयच्याय संकेतथळा खातीर वा पान एकेच पुरवण केल्या <div.container>
.
- <शरीर> हें नांव
- <div वर्ग = "कंटेनर" >
- ...
- </div> हें नांव
- </body> हें नांव
किमान- आनी चडांत चड-रुंदी आनी डाव्या हाताची बाजू आशिल्ली एक पर्यायी, लवचीक द्रव पान रचणूक. ऍप्लिकेशनां आनी डॉक्स खातीर ग्रेट.
- <शरीर> हें नांव
- <div class = "कंटेनर-द्रव" >
- <div वर्ग = "साइडबार" >
- ...
- </div> हें नांव
- <div वर्ग = "सामग्री" >
- ...
- </div> हें नांव
- </div> हें नांव
- </body> हें नांव
तुमच्या वॅबपानांची रचना करपाखातीर एक मानक मुद्रण क्रमवारी.
पुराय मुद्रण ग्रिड आमच्या preboot.less फायलीन दोन Less चडांत चड आदारीत आसा: @basefont
आनी @baseline
. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस लायन-उंचाय.
आमी त्या व्हेरिएबल्स, आनी कांय गणित, आमच्या सगळ्या प्रकाराचे आनी हेर मार्जिन, पॅडिंग, आनी लायन-हायट्स तयार करपाक वापरतात.
नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.
भर, पत्ते, & संक्षेप वापरप
<strong>
<em>
<address>
<abbr>
भर दिवपी टॅग ( <strong>
आनी <em>
) वापरपाक जाय, शब्द वा वाक्यांश ताचे भोंवतणच्या प्रतीच्या सापेक्ष अतिरिक्त म्हत्व वा भर दाखोवपाक. <strong>
म्हत्वाखातीर आनी ताण भर <em>
दिवपाखातीर वापरात .
Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कॉन्डिमेंटम निभ , उत फर्मेन्टम मासा जुस्टो बस अमेट रिसुस. मेसेनास फॉसिबस मॉलिस इंटरडम. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग.
टिप: HTML5 त वापरप <b>
आनी <i>
टॅग करप अजूनय बरोबर आसा आनी तांकां अनुक्रमान बोल्ड आनी इटालिक स्टायल करपाची गरज ना (जरी चड अर्थपूर्ण घटक आसल्यार, तो वापरात). <b>
अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता, जाल्यार <i>
चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.
ह्या <address>
घटकाचो उपेग ताच्या लागींच्या पूर्वजा खातीर, वा पुराय कामाच्या आंगा खातीर संपर्क म्हायती खातीर करतात. कशें दिसता तें पळयात:
टिप: एकांतली दरेक ओळ <address>
ओळी-विराम ( ) च्या आदारान सोंपपाक जाय वा आशयाची योग्य रचणूक करपाखातीर <br />
ब्लॉक-पातळेच्या टॅगांत गुठलावंक जाय (देखीक, ).<p>
संक्षेप आनी संक्षिप्त नांवांखातीर, <abbr>
टॅग वापरात ( HTML5<acronym>
त नाका आसा ). टॅगा भितर आशुलिपी फॉर्म घालचो आनी पुराय नांवाखातीर शीर्षक सेट करचो.
<blockquote>
<p>
<small>
ब्लॉककोट समाविष्ट करपाक, वॅप <blockquote>
अराउंड <p>
आनी <small>
टॅग करात. तुमचो स्रोत उल्लेख करपाक घटक वापरात आनी ताचे आदीं <small>
तुमकां एम डॅश मेळटलो .—
लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट अॅलिकेट.
ज्युलियस हिबर्ट हांणी डॉ
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
मेज म्हान-बऱ्याच गजालीं खातीर. ग्रेट कोश्टकां, मात, उपेगी, मापनीय, आनी वाचपाक योग्य (कोड पातळेचेर) जावपाक थोडो मार्कअप मोगाची गरज आसा. मदत करपाक हांगा कांय टिपां दिल्यांत.
तुमचे स्तंभ शीर्षक सदांच <thead>
अशे तरेन गुठलायात की श्रेणीबध्दता <thead>
> <tr>
> आसतली <th>
.
स्तंभ शीर्षकां प्रमाणें, तुमच्या कोश्टकाची सगळी कूड आशय एकांत गुठलायपाक जाय <tbody>
म्हणून तुमची श्रेणीबध्दता <tbody>
> <tr>
> आसा <td>
.
वाचपाक योग्यताय सुनिश्चीत करपाक आनी रचणूक सांबाळपाक सगळ्या कोश्टकांक फकत गरजेच्यो शिमो आपोआप शैली दितले. अतिरिक्त वर्ग वा गुणधर्म जोडपाची गरज ना.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | कांय | एक | इंग्लीश |
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
- <कोश्टक> हें नांव
- ...
- </कोश्टक>
झेब्रा-स्ट्राइपिंग जोडून तुमच्या कोश्टकां कडेन मात्शी फॅन्सी मेळोवची-फक्त .zebra-striped
वर्ग जोडचो.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | कांय | एक | इंग्लीश |
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
टिप: Zebra-striping हें एक प्रगतीशील सुदारणा आसा जी IE8 आनी सकयल सारकिल्या पोरन्या ब्राउझरां खातीर उपलब्ध ना.
- <कोष्टक वर्ग = "झेब्रा-पट्टीदार" >
- ...
- </कोश्टक>
आदलें उदाहरण घेवन, आमी jQuery आनी Tablesorter प्लगइन वरवीं क्रमवारी कार्यक्षमताय पुरवण करून आमच्या कोश्टकांची उपयुक्तताय सुदारतात . क्रमवारी बदलपाखातीर खंयच्याय स्तंभाच्या शीर्षकाचेर क्लिक करात.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | तुमचें | एक | इंग्लीश |
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></स्क्रिप्ट>
- <लिपी > हें नांव
- $ ( फंक्शन () { 1 .
- $ ( "कोश्टक # क्रमवारी कोश्टक उदाहरण" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script> हें नांव
- <कोष्टक वर्ग = "झेब्रा-पट्टीदार" >
- ...
- </कोश्टक>
सगळ्या फॉर्मांक वाचपाक येवपी आनी मापनीय पद्दतीन सादर करपाक मुलभूत शैली दिल्या. मजकूर इनपुट, निवड यादी, मजकूरक्षेत्रां, रेडिओ बटणां आनी चेकबॉक्स, आनी बटणां खातीर शैली दिल्या.
तुमच्या फॉर्माच्या एचटीएमएलांत जोडात .form-stacked
आनी तुमकां तांच्या शेतांचेर लेबलां तांच्या उजव्या वटेन न्हय तर तांच्या शेतां वयल्यान आसतलीं. तुमचे फॉर्म ल्हान आसल्यार वा तुमचे कडेन जड फॉर्मां खातीर इनपुटांचे दोन स्तंभ आसल्यार हें बरेंच काम करता.
एक रूढिवाद म्हूण, बटणां कृतींखातीर वापरतात जाल्यार दुवे वस्तूंखातीर वापरतात. देखीक, "डावनलोड" हें बटण आसूं येता आनी "हालीची क्रिया" दुवो आसूं येता.
सगळे बटण पूर्वनिर्धारीतपणान उजवाड राशीचे शैलीचेर, पूण वेगवेगळ्या रंग शैलींखातीर जायते कार्यात्मक वर्ग लागू करूं येतात. ह्या वर्गांत निळो .primary
वर्ग, हळदुवो .info
वर्ग, पाचवो .success
वर्ग, तांबडो .danger
वर्ग हांचो आस्पाव जाता. प्लस, स्वताच्यो शैली रोल करप सोंपें peasy.
बटण शैली लागू केल्ल्यान खंयच्याय गजालीक लागू करूं येतात .btn
. सादारणपणान तुमकां हीं फकत <a>
, <button>
, आनी निवड <input>
घटकांक लागू करपाची इत्सा जातली. कशें दिसता तें पळयात:
फॅन्सी व्हडले वा ल्हान बटण? ताचेर आसचें!
सक्रिय नाशिल्ल्या बटणां खातीर वा ऍप्लिकेशनान एका वा दुसऱ्या कारणाक लागून अक्षम केल्ल्या बटणां खातीर, अक्षम स्थिती वापरात. तें .disabled
दुव्यां खातीर आनी घटकां :disabled
खातीर .<button>
div.alert-message
कृतीचें अपयश, संभाव्य अपयश वा यश उजवाडावपाखातीर एक ओळीचे संदेश. खास करून रूपांखातीर उपेगी पडटा.
div.alert-message.block-message
थोडें स्पश्टीकरणाची गरज आशिल्ल्या संदेशां खातीर, आमचे कडेन परिच्छेद शैलीचे अलर्ट आसात. लांब चुकीचे संदेश बुडबुडें मारपाक, वापरप्याक प्रलंबीत कृतीची शिटकावणी दिवपाक, वा फकत पानाचेर चड भर दिवपा खातीर म्हायती सादर करपाक हे परिपूर्ण आसात.
मोडल-संवाद वा लायटबॉक्स-जंय पार्श्वभूंय संदर्भ सांबाळप म्हत्वाचें आसता अशा परिस्थितींत संदर्भ कृतीं खातीर बरे आसात.
एक बारीक आंग...
गोंदळिल्ल्या वापरप्याक मदत करपाक आनी तांकां योग्य दिशेन दाखोवपाक ट्विप्सी सुपर उपेगी आसात.
लोरेम इप्सम डॉलर सिट अमेट इलो त्रुटी इप्सम व्हेरिटाटीस ऑट इस्टे परस्पिसिएटिस इस्टे व्होलुप्टास नॅटस इलो क्वासी ओडिट ऑट नेटस कॉन्सेक्युन्तुर कॉन्सेक्युन्तुर, ऑट नाटस इलो वोलुप्टॅटेम ओडिट पर्सपिसियाटीस लॉडांटियम रेम डोलोरेमके टोटम वोलुप्टास. 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 accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
मांडावळीचेर परिणाम करिनासतना पानाक उपमजकूर म्हायती दिवपाक पॉपओव्हर वापरात.
एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड. मेसेनास फॉसिबस मॉलिस इंटरडम. मोर्बी लियो रिसस, पोर्टा एसी कॉन्सेक्टेतुर एसी, इरोस हांगाच्या वेस्टिबुलम.
बूटस्ट्रॅप Preboot , एक मुक्त-स्त्रोत पॅक मिक्सिन आनी चड- उणें Less च्या संयोजनांत वापरपाक तयार केल्लें , एक CSS प्रीप्रोसेसर जलद आनी सोप्या वेब विकासा खातीर.
आमी Bootstrap त Preboot कसो वापरला तें पळयात आनी तुमच्या फुडल्या प्रकल्पाचेर Less चालीक लावपाचें निवडल्यार तुमी ताचो वापर कसो करूंक शकतात तें पळयात.
तुमच्या ब्राउझरांत जावास्क्रिप्ट वरवीं Bootstrap च्या Less चड-उणें, मिक्सिन, आनी CSS त नेस्टिंग हांचो पुराय वापर करपाक हो पर्याय वापरात.
- <link rel = "स्टाइलशीट/उणें" href = "उणें/बूटस्ट्रॅप.उणें" माध्यम = "सगलें" />
- <script src = "जेएस / कमी-1.1.3.मिनिट.जेएस" ></script>
.js उपाय जाणवना? तुमी तुमचो कोड उपयोजीत करतना संकलित करपाक Less Mac ऍप्लिकेशन वापरून पळयात वा Node.js वापरात .
बूटस्ट्रॅपाचो भाग म्हूण ट्विटर बूटस्ट्रॅपांत कितें आस्पावलां ताचीं कांय खाशेलपणां हांगा दिल्यांत. डाउनलोड करपाक आनी चड जाणून घेवपाक Bootstrap संकेतथळार वा Github प्रकल्प पानाचेर वचचें.
तुमच्या CSS तकली दुखप मुक्त सांबाळपाक आनी अद्ययावत करपाक कमींतले चड-उणें परिपूर्ण आसात. जेन्ना तुमकां रंग मोल वा वारंवार वापरिल्लें मोल बदलपाचें आसा, तेन्ना तें एकाच सुवातेर अद्ययावत करात आनी तुमी सेट जाल्यात.
- // दुवे आसात
- @ लिंकरंग : # 8b59c2;
- @linkColorHover : काळोख ( @linkColor , 10 );
- // ग्रेज हें नांव
- @ काळो : # 000;
- @grayDark : हळदुवें करचें ( @काळो , 25 %);
- @gray : हळदुवें करचें ( @काळो , 50 %);
- @grayLight : हळदुवें करचें ( @काळो , 70 %);
- @grayLighter : हळुवार करप ( @काळो , 90 %);
- @ गोरो : # fff ;
- // उच्चार रंग
- @ निळें : # 08b5fb ;
- @ पाचवी : # 46a546 ;
- @ तांबडो : # 9d261d ;
- @ हळडुवें : # ffc40d ;
- @ संत्रे : # f89406 ;
- @ गुलाबी : # c3325f आनी ;
- @ जांभळा : # 7a43b6;
- // बेसलाइन ग्रिड
- @बेसफॉन्ट : 13px आनी ;
- @मूळ रेखा : 18px ;
/* ... */
CSS च्या सामान्य वाक्यरचनावांगडाच Less टिप्पणी करपाची आनीक एक शैलीय दिता .
- // ही एक टिप्पणी आसा
- /* हीय एक टिप्पणी */
मिक्सिन मुळाव्यान CSS खातीर समाविष्ट वा आंशिक आसात, जे तुमकां कोडाच्या ब्लॉकाक एकांत एकठांय करपाक परवानगी दितात. ते विक्रेत्या उपसर्ग गुणधर्मां खातीर बरे आसात जशे की box-shadow
, क्रॉस-ब्राउझर ग्रेडियेंट, फॉन्ट स्टॅक, आनी हेर. Bootstrap कडेन आशिल्ल्या मिक्सिनांचो नमुनो सकयल दिला.
- # फॉन्ट { 1 .
- हें . आशुलिपि ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - उंचाय : @lineHeight ;
- } हें .
- हें . sans - serif ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- font - family : "हेल्व्हेटिका न्यू" , हेल्व्हेटिका , एरियल , sans - serif ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - उंचाय : @lineHeight ;
- } हें .
- हें . serif ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- font - family : "जॉर्जिया" , टाइम्स न्यू रोमन , टाइम्स , sans - serif ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - उंचाय : @lineHeight ;
- } हें .
- हें . मोनोस्पेस ( @वजन : सामान्य , @आकार : 12px , @lineHeight : 20px ) {
- font - family : "मोनाको" , कुरियर नवीन , मोनोस्पेस ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - उंचाय : @lineHeight ;
- } हें .
- } हें .
- # ग्रेडियेंट { 1 .
- हें . आडव्या ( @startColor : # 555, @endColor: # 333) {
- पार्श्वभूंय - रंग : @endColor ;
- पार्श्वभूंय - पुनरावृत्ती : पुनरावृत्ती - x ;
- पार्श्वभूंय - प्रतिमा : - khtml - ग्रेडिएंट ( रेखीव , डावें वयर , उजवें वयर , पासून ( @startColor ), ते ( @endColor )); // कोंकणी करपी
- पार्श्वभूंय - प्रतिमा : - moz - रेखीव - ग्रेडिएंट ( डावें , @startColor , @endColor ); // एफएफ 3.6+ आसा
- पार्श्वभूंय - प्रतिमा : - ms - रेखीव - ग्रेडिएंट ( डावें , @startColor , @endColor ); // आयई10 हें
- पार्श्वभूंय - प्रतिमा : - वेबकिट - ग्रेडिएंट ( रेखीव , डावें वयर , उजवें वयर , रंग - थांब ( 0 %, @startColor ), रंग - थांब ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+
- पार्श्वभूंय - प्रतिमा : - वेबकिट - रेखीव - ग्रेडिएंट ( डावें , @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+
- पार्श्वभूंय - प्रतिमा : - o - रेखीव - ग्रेडिएंट ( डावें , @startColor , @endColor ); // ओपेरा 11.10
- पार्श्वभूंय - प्रतिमा : रेखीव - प्रवणताय ( डावें , @startColor , @endColor ); // ले मानक
- } हें .
- हें . उभ्या ( @startColor : # 555, @endColor: # 333) {
- पार्श्वभूंय - रंग : @endColor ;
- पार्श्वभूंय - पुनरावृत्ती : पुनरावृत्ती - x ;
- पार्श्वभूंय - प्रतिमा : - khtml - ग्रेडिएंट ( रेखीव , डावें वयर , डावें सकयल , पासून ( @startColor ), ते ( @endColor )); // कोंकणी करपी
- पार्श्वभूंय - प्रतिमा : - moz - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // एफएफ 3.6+ आसा
- पार्श्वभूंय - प्रतिमा : - ms - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // आयई10 हें
- पार्श्वभूंय - प्रतिमा : - वेबकिट - ग्रेडिएंट ( रेखीव , डावें वयर , डावें सकयल , रंग - थांब ( 0 %, @startColor ), रंग - थांब ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+
- पार्श्वभूंय - प्रतिमा : - वेबकिट - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+
- पार्श्वभूंय - प्रतिमा : - o - रेखीव - ग्रेडियेंट ( @startColor , @endColor ); // ओपेरा 11.10
- पार्श्वभूंय - प्रतिमा : रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // मानक हें
- } हें .
- हें . दिशात्मक ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- } हें .
- हें . उबे - तीन - रंग ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- } हें .
- } हें .
फॅन्सी घेयात आनी सकयल दिल्ल्या प्रमाणें लवचीक आनी बळिश्ट मिक्सिन तयार करपाक कांय गणित करात.
- // जाळीदारी
- @gridस्तंभ : 16 ;
- @gridस्तंभरुंदी : 40px ;
- @gridगटररुंदी : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @ग्रिडस्तंभ - 1 ));
- // जाळी प्रणाली
- हें . पात्र { 1 .
- width : @साइटरुंदी ;
- मार्जिन : 0 ऑटो ;
- हें . स्पश्ट करप ();
- } हें .
- हें . स्तंभ ( @columnSpan : 1 ) { 1 .
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @स्तंभविस्तार - 1 ));
- } हें .
- हें . ऑफसेट ( @column ऑफसेट : 1 ) { 1 .
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @स्तंभऑफसेट - 1 )) + @extraSpace ;
- } हें .