एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड। मेसेनास फौसिबस मोलिस इंटरडम। मोरबी लियो रिसस, पोर्टा एसी consectetur एसी, इरोस पर वेस्टिबुलम।
बूटस्ट्रैप ट्विटर केरऽ एगो टूलकिट छै जेकरा वेबएप आरू साइट केरऽ विकास क॑ किकस्टार्ट करै लेली डिजाइन करलऽ गेलऽ छै ।
एकरा म॑ टाइपोग्राफी, फॉर्म, बटन, टेबल, ग्रिड, नेविगेशन, आरू बहुत कुछ लेली बेस सीएसएस आरू एचटीएमएल शामिल छै.
Nerd alert: बूटस्ट्रैप क॑ लेस स॑ बनलऽ छै आरू आधुनिक ब्राउज़र क॑ ध्यान म॑ रखतें हुअ॑ गेट स॑ बाहर काम करै लेली डिजाइन करलऽ गेलऽ छेलै ।
जल्दी आ आसान शुरुआत के लेल बस एहि स्निपेट के अपन वेबपेज मे कॉपी करू.
कम के प्रयोग के एक प्रशंसक? कोनो दिक्कत नहि, बस रेपो क्लोन करू आ ई लाइन सभ जोड़ू:
Github पर आधिकारिक बूटस्ट्रैप रेपो के साथ डाउनलोड, कांटा, पुल, फाइल मुद्दा, आओर बहुत किछु.
ट्विटर केरऽ शुरूआती दौर म॑ इंजीनियर लगभग कोनो भी पुस्तकालय के इस्तेमाल करलकै जेकरा स॑ वू परिचित छेलै, फ्रंट-एंड केरऽ आवश्यकता क॑ पूरा करै लेली । बूटस्ट्रैप केरऽ शुरुआत ट्विटर केरऽ पहलऽ हैकवीक के दौरान पेश करलऽ गेलऽ चुनौती के जवाब के रूप म॑ करलऽ गेलै आरू विकास म॑ तेजी स॑ तेजी आबी गेलै ।
ट्विटर केरऽ बहुत सारा इंजीनियरऽ के मदद आरू प्रतिक्रिया स॑ बूटस्ट्रैप न॑ न सिर्फ बेसिक स्टाइल, बल्कि अधिक सुरुचिपूर्ण आरू टिकाऊ फ्रंट-एंड डिजाइन पैटर्न क॑ समेटै लेली काफी बढ़ी गेलऽ छै ।
dev.twitter.com पर आओर पढ़ू ›
बूटस्ट्रैप क॑ क्रोम, सफारी, इंटरनेट एक्सप्लोरर, आरू फायरफॉक्स जैसनऽ प्रमुख आधुनिक ब्राउज़र म॑ परीक्षण आरू समर्थन करलऽ जाय छै ।
बूटस्ट्रैप संकलित सीएसएस, असंकलित, आरू उदाहरण टेम्पलेट के साथ पूरा आबै छै.
बूटस्ट्रैप कें हिस्सा कें रूप मे उपलब्ध करायल गेल डिफ़ॉल्ट ग्रिड सिस्टम 940px चौड़ा 16-स्तंभ ग्रिड छै. ई लोकप्रिय 960 ग्रिड सिस्टम केरऽ स्वाद छै, लेकिन बायां आरू दायां तरफ अतिरिक्त मार्जिन/पैडिंग के बिना ।
जैना की यहाँ दिखायल गेलय छै, दू "स्तंभ" कें साथ एक बुनियादी लेआउट बनायल जा सकय छै, प्रत्येक 16 आधारभूत स्तंभक कें एक नंबर कें फैलल छै जे हम अपनय ग्रिड प्रणाली कें हिस्सा कें रूप मे परिभाषित करलकय छै. अधिक भिन्नताक लेल नीचाँ देल गेल उदाहरण देखू।
- <div वर्ग = "पंक्ति" >
- <div वर्ग = "span6 कॉलम" >
- ...
- </div>
- <div वर्ग = "span10 कॉलम" >
- ...
- </div>
- </div>
डिफ़ॉल्ट आ सरल 940px-व्यापी, केंद्रित लेआउट बस लगभग कोनो वेबसाइट या पृष्ठ के लेल जे एकटा द्वारा उपलब्ध कराओल गेल अछि <div.container>
.
- <शरीर>
- <div वर्ग = "कंटेनर" >
- ...
- </div>
- </शरीर>
न्यूनतम- आरू अधिकतम-चौड़ाई आरू एक बायां-हाथ साइडबार के साथ एक वैकल्पिक, लचीला द्रव पृष्ठ संरचना | ऐप्स आ डॉक्स के लेल बढ़िया।
- <शरीर>
- <div वर्ग = "कंटेनर-द्रव" >
- <div वर्ग = "साइडबार" >
- ...
- </div>
- <div वर्ग = "सामग्री" >
- ...
- </div>
- </div>
- </शरीर>
अपन वेबपृष्ठ के संरचना के लेल एकटा मानक मुद्रण पदानुक्रम.
पूरा टाइपोग्राफिक ग्रिड हमर preboot.less फाइल मे दू टा Less चर पर आधारित अछि: @basefont
आओर @baseline
. पहिल बेस फॉन्ट-साइज पूरा मे प्रयोग कएल गेल अछि आ दोसर बेस लाइन-हाइट ।
हम ओहि चर के उपयोग करैत छी, आ किछु गणित, अपन सब प्रकार आओर बहुत किछु के मार्जिन, पैडिंग, आ लाइन-हाइट्स बनेबाक लेल |
Nullam quis risus eget उर्ना मोलिस ornare वेल ईउ लियो | सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।
जोर, संबोधन, एवं संक्षिप्त नाम का प्रयोग
<strong>
<em>
<address>
<abbr>
जोर टैग ( <strong>
आ <em>
) कें उपयोग कोनों शब्द या वाक्यांश कें ओकर आसपास कें प्रति कें सापेक्ष अतिरिक्त महत्व या जोर कें संकेत करय कें लेल करबाक चाहि. <strong>
महत्व के <em>
लेल आ तनाव पर जोर देबय लेल प्रयोग करू ।
Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेन्टम मासा जस्टो बैठो अमेट रिसुस | मेसेनास फौसिबस मोलिस इंटरडम। नुल्ला विटाए एलिट लिबेरो, एक फारेत्रा औग।
नोट:<b>
HTML5 म॑ आरू टैग के प्रयोग करना अखनी भी ठीक छै <i>
आरू ओकरा क्रमशः बोल्ड आरू इटैलिक स्टाइल नै करै के जरूरत छै (हालांकि अगर अधिक शब्दार्थ तत्व छै त॑ एकरऽ प्रयोग करलऽ जाय) । <b>
शब्द या वाक्यांश के बिना अतिरिक्त महत्व के उजागर करय के मतलब छै, जखन <i>
कि बेसीतर आवाज, तकनीकी शब्द आदि के लेल छै.
तत्व कें <address>
उपयोग ओकर निकटतम पूर्वज, या काज कें पूरा निकाय कें लेल संपर्क जानकारी कें लेल कैल जायत छै. ई केहन लगैत अछि से देखू:
नोट: एक म॑ हर पंक्ति क॑ <address>
एक लाइन-ब्रेक ( ) स॑ समाप्त होना चाहियऽ या सामग्री क॑ सही ढंग स॑ संरचित करै लेली <br />
ब्लॉक-स्तरीय टैग (जैसे, ) म॑ लपेटलऽ जाय ।<p>
संक्षिप्त नाम आरू संक्षिप्त नाम के लेलऽ, <abbr>
टैग के प्रयोग करलऽ जाय ( HTML5<acronym>
म॑ अप्रचलित छै ) । टैग के भीतर आशुलिपि फॉर्म राखू आ पूरा नाम के लेल एकटा शीर्षक सेट करू।
<blockquote>
<p>
<small>
ब्लॉककोट शामिल करबाक लेल, <blockquote>
चारू कात लपेटू <p>
आ <small>
टैग करू. अपन स्रोत के उद्धरण देबय लेल तत्व के प्रयोग करू आ एकरा सं पहिने <small>
अहाँ के एकटा एम डैश भेटत .—
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक पोसुएरे एरेट एक एंटी वेनेनेटिस डापिबस पोसुएरे वेलिट एलिकेट।
डॉ जूलियस हिबर्ट
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
टेबुल बढ़िया अछि-बहुत रास काज लेल। महान तालिकाक कें, तथापि, उपयोगी, स्केल करय योग्य, आ पठनीय (कोड स्तर पर) होएय कें लेल मार्कअप प्रेम कें बिट कें जरूरत छै. मदद करय लेल किछ टिप्स देल गेल अछि.
अपन कॉलम हेडर केँ सदिखन <thead>
एहन मे लपेटू जे पदानुक्रम <thead>
> <tr>
> हो <th>
.
कॉलम हेडर के समान, अहाँक टेबल के सब बॉडी कंटेंट एकटा में लपेटल जेबाक चाही <tbody>
ताकि अहाँक पदानुक्रम <tbody>
> <tr>
> अछि <td>
|
सबटा तालिकाक कें स्वचालित रूप सं स्टाइल कैल जेतय जइ मे केवल आवश्यक सीमाक कें साथ पठनीयता सुनिश्चित कैल जेतय आ संरचना कें बनाए रखल जा सकय. अतिरिक्त वर्ग वा विशेषता जोड़बाक आवश्यकता नहि.
# 2019। | पहिल नाम | उपनाम | भाषा |
---|---|---|---|
१ | किछु | एकटा | अंग्रेजी |
२ | जो | सिक्सपैक | अंग्रेजी |
३ | स्टू | डेंट | संहिता |
- <तालिका>
- ...
- </table>क अनुसार
ज़ेबरा-स्ट्राइपिंग जोड़ि कए अपन टेबल क संग कनि फैंसी करू-बस .zebra-striped
क्लास जोड़ू।
# 2019। | पहिल नाम | उपनाम | भाषा |
---|---|---|---|
१ | किछु | एकटा | अंग्रेजी |
२ | जो | सिक्सपैक | अंग्रेजी |
३ | स्टू | डेंट | संहिता |
नोट: ज़ेबरा-स्ट्राइपिंग एकटा प्रगतिशील संवर्धन छै जे IE8 आ नीचा जैना पुरान ब्राउज़र कें लेल उपलब्ध नै छै.
- <table class = "ज़ेबरा-धारीदार" >
- ...
- </table>क अनुसार
पिछला उदाहरण लैत, हम jQuery आरू Tablesorter प्लगइन के माध्यम स॑ सॉर्टिंग कार्यक्षमता प्रदान करी क॑ अपनऽ टेबल के उपयोगिता म॑ सुधार करै छियै । सॉर्ट बदलबाक लेल कोनो कॉलम क हेडर पर क्लिक करू.
# 2019। | पहिल नाम | उपनाम | भाषा |
---|---|---|---|
१ | अहांक | एकटा | अंग्रेजी |
२ | जो | सिक्सपैक | अंग्रेजी |
३ | स्टू | डेंट | संहिता |
- <script src = "जेएस/जेक्वेरी/जेक्वेरी.टेबलसॉर्टर.मिनट.जेएस" ></script>
- <लिपि >
- $ ( फंक्शन () { 1।
- $ ( "सारणी # क्रमबद्ध तालिकाउदाहरण" ). tablesorter ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });
- });
- </स्क्रिप्ट>
- <table class = "ज़ेबरा-धारीदार" >
- ...
- </table>क अनुसार
सब फॉर्म कें पठनीय आ स्केल करय योग्य तरीका सं प्रस्तुत करय कें लेल डिफ़ॉल्ट शैली देल गेल छै. पाठ इनपुट, चयन सूची, पाठ क्षेत्र, रेडियो बटन आरू चेकबॉक्स, आरू बटन के लेलऽ शैली उपलब्ध कराय देलऽ गेलऽ छै.
अपन फॉर्म के एचटीएमएल मे जोड़ू .form-stacked
आओर अहां के ओकर बामा तरफ के बजाय ओकर फील्ड के ऊपर लेबल रहत. अगर अहां के फॉर्म छोट अछि या अहां के पास भारी फॉर्म के लेल इनपुट के दू कॉलम अछि त ई बहुत नीक काज करैत अछि.
एक रूढ़ि के रूप में, बटन के उपयोग क्रिया के लेलऽ करलऽ जाय छै जबकि लिंक के उपयोग वस्तु के लेलऽ करलऽ जाय छै । जेना, "डाउनलोड" एकटा बटन भ' सकैत अछि आ "हालक गतिविधि" एकटा लिंक भ' सकैत अछि.
सब बटन डिफ़ॉल्ट रूप स॑ हल्का ग्रे शैली प॑ छै, लेकिन अलग-अलग रंग शैली लेली कई तरह के कार्यात्मक वर्ग लागू करलऽ जाब॑ सकै छै । एहि वर्ग मे नील रंगक .primary
वर्ग, हल्का नील रंगक .info
वर्ग, हरियर रंगक .success
वर्ग आ लाल रंगक .danger
वर्ग शामिल अछि । प्लस, अपन स्टाइल रोल करब आसान पीसी अछि।
बटन शैली लागू के साथ कोनो भी चीज़ पर लागू करलऽ जाब॑ सकै छै .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 बैठें अर्ध फ्यूजिट फ्यूजिट, टोटम डोलोरेमके उन्दे सुंट सेड डिक्टा क्वे एक्यूसेंटियम फ्यूजिट वोलुप्टास निमो वोलुप्टास वोलुप्टेटेम रेम क्वाए ऑटो वेरिटाटिस क्वासि क्वासी।
लेआउट के प्रभावित केने बिना कोनो पृष्ठ के उपपाठ जानकारी प्रदान करय लेल पॉपओवर के प्रयोग करू.
एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड। मेसेनास फौसिबस मोलिस इंटरडम। मोरबी लियो रिसस, पोर्टा एसी consectetur एसी, इरोस पर वेस्टिबुलम।
बूटस्ट्रैप क॑ Preboot , मिक्सिन आरू चर केरऽ एगो ओपन-सोर्स पैक के साथ बनालऽ गेलऽ छेलै जेकरऽ उपयोग Less के साथ संयोजन म॑ करलऽ जैतै , जे तेज आरू आसान वेब विकास लेली एगो CSS प्रीप्रोसेसर छै ।
देखू जे हम बूटस्ट्रैप मे Preboot के कोना उपयोग केलहुं आओर अगर अहां अपन अगिला प्रोजेक्ट पर Less चलाबय के विकल्प चुनब त अहां एकर उपयोग कोना क सकय छी.
अपनऽ ब्राउज़र म॑ जावास्क्रिप्ट के माध्यम स॑ सीएसएस म॑ बूटस्ट्रैप केरऽ लेस वैरिएबल, मिक्सिन, आरू नेस्टिंग केरऽ पूरा उपयोग करै लेली ई विकल्प के उपयोग करऽ ।
- <link rel = "स्टाइलशीट/कम" href = "कम/बूटस्ट्रैप.कम" मीडिया = "सब" />
- <script src = "जेएस/कम-1.1.3.मिनट.जेएस" ></script>
.js समाधान महसूस नहि क रहल छी? कम मैक ऐप कें कोशिश करूं या संकलित करय कें लेल Node.js कें उपयोग करूं जखन अहां अपन कोड कें तैनात करय छी.
बूटस्ट्रैप के हिस्सा के रूप में ट्विटर बूटस्ट्रैप में जे किछु शामिल अछि ओकर किछ हाइलाइट एतय देल गेल अछि. डाउनलोड करय लेल आओर बेसी जानय लेल बूटस्ट्रैप वेबसाइट या गिथब प्रोजेक्ट पेज पर जाउ.
कम म॑ चर अपनऽ CSS सिरदर्द मुक्त बनाए रखै आरू अपडेट करै लेली एकदम सही छै । जखन अहाँ कोनो रंग मान वा कोनो बेर प्रयोग कएल मान बदलए चाहैत छी तँ ओकरा एक ठाम अपडेट करू आ अहाँ सेट भ' गेल छी.
- // लिंक
- @ लिंकरंग : # 8b59c2;
- @linkColorHover : अंधेरा ( @linkColor , 10 );
- // ग्रेज
- @ काला : # 000;
- @ grayDark : हल्का ( @ काला , 25 %);
- @ ग्रे : हल्का ( @ काला , 50 %);
- @ grayLight : हल्का ( @ काला , 70 %);
- @ grayLighter : हल्का ( @ काला , 90 %);
- @ गोरा : # fff ;
- // उच्चारण रंग
- @ नीला : # 08b5fb ;
- @ हरे रंग : # 46a546 ;
- @ लाल : # 9d261d ;
- @ पीला : # ffc40d ;
- @ नारंगी : # f89406 ;
- @ गुलाबी : # c3325f ;
- @ बैंगनी : # 7a43b6 ;
- // आधार रेखा ग्रिड
- @ आधारफॉन्ट : 13px ;
- @ आधार रेखा : 18px ;
कम सीएसएस केरऽ सामान्य /* ... */
सिंटैक्स के अलावा टिप्पणी केरऽ एगो आरू शैली भी उपलब्ध करै छै ।
- // ई एकटा टिप्पणी अछि
- /* ईहो एकटा टिप्पणी अछि */
मिक्सिन मूल रूप सं सीएसएस कें लेल शामिल या आंशिक छै, जे अहां कें कोड कें एकटा ब्लॉक कें एकटा मे संयोजित करय कें अनुमति देयत छै. ई विक्रेता उपसर्ग गुण जेना box-shadow
, क्रॉस-ब्राउजर ढाल, फॉन्ट स्टैक, आओर बहुत किछु के लेल बढ़िया अछि. नीचाँ ओहि मिक्सिन के नमूना देल गेल अछि जे बूटस्ट्रैप के संग शामिल अछि |
- # फॉन्ट { 1।
- . आशुलिपि ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - ऊंचाई : @ रेखा ऊंचाई ;
- } .
- . sans - serif ( @वजन : सामान्य , @आकार : 14px , @lineHeight : 20px ) {
- font - family : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , sans - serif ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - ऊंचाई : @ रेखा ऊंचाई ;
- } .
- . serif ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {
- font - family : "जॉर्जिया" , टाइम्स न्यू रोमन , टाइम्स , sans - serif ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - ऊंचाई : @ रेखा ऊंचाई ;
- } .
- . मोनोस्पेस ( @ वजन : सामान्य , @ आकार : 12px , @lineHeight : 20px ) {
- font - family : "मोनाको" , कूरियर नया , मोनोस्पेस ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - ऊंचाई : @ रेखा ऊंचाई ;
- } .
- } .
- # ढाल { 1।
- . क्षैतिज ( @ शुरू रंग : # 555, @ अंत रंग: # 333) {
- पृष्ठभूमि - रंग : @endColor ;
- पृष्ठभूमि - दोहराएँ : दोहराएँ - x ;
- पृष्ठभूमि - छवि : - khtml - ढाल ( रैखिक , बाएं ऊपर , दाएं ऊपर , से ( @startColor ), से ( @endColor )); // कंक्वेरर
- पृष्ठभूमि - छवि : - moz- रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // एफएफ 3.6+
- पृष्ठभूमि - छवि : -एमएस - रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // आईई10
- पृष्ठभूमि - छवि : - वेबकिट - ढाल ( रैखिक , बाएं ऊपर , दाएं ऊपर , रंग - बंद ( 0 % , @ startColor ), रंग - बंद ( 100 % , @ endColor )); // सफारी 4+, क्रोम 2+
- पृष्ठभूमि - छवि : -वेबकिट - रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // सफारी 5.1+, क्रोम 10+
- पृष्ठभूमि - छवि : -ओ - रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // ओपेरा 11.10
- पृष्ठभूमि - छवि : रैखिक - ढाल ( बाम , @startColor , @endColor ); // ले मानक
- } .
- . ऊर्ध्वाधर ( @ startColor : # 555, @ अंत रंग: # 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+
- पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( @ startColor , @endColor ); // ओपेरा 11.10
- पृष्ठभूमि - छवि : रैखिक - ढाल ( @ startColor , @endColor ); // मानक के
- } .
- . दिशात्मक ( @ startColor : # 555, @ अंत रंग: # 333, @ deg: 45deg) {
- ...
- } .
- . ऊर्ध्वाधर - तीन - रंग ( @ startColor : # 00b3ee, @ midColor: # 7a43b6, @ colorStop: 50%, @ endColor: # c3325f) {
- ...
- } .
- } .
फैंसी करू आ किछु गणित करू जाहि सं नीचा देल गेल तरहक लचीला आ शक्तिशाली मिक्सिन उत्पन्न भ सकय.
- // ग्रिडिट्यूड
- @ ग्रिडस्तंभ : 16 ;
- @ ग्रिडस्तंभ चौड़ाई : 40px ;
- @ ग्रिडगटरचौड़ाई : 20px ;
- @ siteWidth : ( @ ग्रिडस्तंभ * @ ग्रिडस्तंभ चौड़ाई ) + ( @ ग्रिडगटर चौड़ाई * ( @ ग्रिडस्तंभ - 1 ));
- // ग्रिड सिस्टम
- . पात्र { 1 ।
- चौड़ाई : @ साइट चौड़ाई ;
- मार्जिन : 0 ऑटो ;
- . क्लियरफिक्स ();
- } .
- . कॉलम ( @columnSpan : 1 ) { 1।
- width : ( @ gridColumnWidth * @ कॉलमस्पैन ) + ( @ ग्रिडगटरविड्थ * ( @ कॉलमस्पैन - 1 ));
- } .
- . ऑफसेट ( @ स्तम्भऑफसेट : 1 ) { .
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- } .