इतिहास

ट्विटर के शुरुआती दिनों में, इंजीनियरों ने फ्रंट-एंड आवश्यकताओं को पूरा करने के लिए लगभग किसी भी पुस्तकालय का उपयोग किया जिससे वे परिचित थे। बूटस्ट्रैप की शुरुआत उन चुनौतियों के जवाब के रूप में हुई, जिन्होंने ट्विटर के पहले हैकवीक के दौरान प्रस्तुत की और विकास में तेजी आई।

ट्विटर पर कई इंजीनियरों की मदद और प्रतिक्रिया के साथ, बूटस्ट्रैप न केवल बुनियादी शैलियों, बल्कि अधिक सुरुचिपूर्ण और टिकाऊ फ्रंट-एंड डिज़ाइन पैटर्न को शामिल करने के लिए महत्वपूर्ण रूप से विकसित हुआ है।

Dev.twitter.com पर और पढ़ें ›

ब्राउज़र समर्थन

बूटस्ट्रैप का परीक्षण और समर्थन क्रोम, सफारी, इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स जैसे प्रमुख आधुनिक ब्राउज़रों में किया जाता है।

• नवीनतम सफारी
• नवीनतम गूगल क्रोम
• फायरफॉक्स 4+
• इंटरनेट एक्सप्लोरर 7+

क्या शामिल है

बूटस्ट्रैप संकलित सीएसएस, असम्पीडित और उदाहरण टेम्पलेट्स के साथ पूरा होता है।

• सभी मूल .less फ़ाइलें
• पूरी तरह से संकलित और छोटा सीएसएस
• पूर्ण स्टाइलगाइड प्रलेखन
• उदाहरण पृष्ठ टेम्पलेट (जल्द ही आने के लिए और अधिक)

डिफ़ॉल्ट ग्रिड

बूटस्ट्रैप के हिस्से के रूप में प्रदान किया गया डिफ़ॉल्ट ग्रिड सिस्टम एक 940px चौड़ा 16-कॉलम ग्रिड है। यह लोकप्रिय 960 ग्रिड सिस्टम का स्वाद है, लेकिन बाईं और दाईं ओर अतिरिक्त मार्जिन/पैडिंग के बिना।

उदाहरण ग्रिड मार्कअप

जैसा कि यहां दिखाया गया है, एक बुनियादी लेआउट दो "कॉलम" के साथ बनाया जा सकता है, जिनमें से प्रत्येक में हमारे ग्रिड सिस्टम के हिस्से के रूप में परिभाषित 16 मूलभूत स्तंभों की संख्या होती है। अधिक विविधताओं के लिए नीचे दिए गए उदाहरण देखें।

<div class="row"> वर्ग = "पंक्ति" >
  <div class = "span6 कॉलम" > 
    ...
  </div>
  <div class = "span10 column" > 
    ...
  </div>
</div>

निश्चित लेआउट

लगभग किसी भी साइट या पेज के लिए एक मूल 940px चौड़ा, केंद्रित कंटेनर लेआउट।

<शरीर>
  <div क्लास = "कंटेनर" > 
    ...
  </div>
</body>

द्रव लेआउट

न्यूनतम और अधिकतम-चौड़ाई और बाएं हाथ के साइडबार के साथ एक लचीली द्रव या तरल पृष्ठ संरचना। ऐप्स के लिए बढ़िया।

<शरीर>
  <div class = "कंटेनर-तरल पदार्थ" > 
    <div क्लास = "साइडबार" > 
      ...
    </div>
    <div वर्ग = "सामग्री" > 
      ...
    </div>
  </div>
</body>

शीर्षक और कॉपी

आपके वेबपृष्ठों की संरचना के लिए एक मानक टाइपोग्राफ़िक पदानुक्रम।

एच1. शीर्षक 1

एच2. शीर्षक 2

एच3. शीर्षक 3

एच4. शीर्षक 4

एच5. शीर्षक 5

एच6. शीर्षक 6

उदाहरण पैराग्राफ

नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula ut id elit.

उदाहरण शीर्षक में उप-शीर्षक है…

विविध तत्वों

जोर, पते और संक्षिप्ताक्षरों का उपयोग करना

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

कब इस्तेमाल करें

जोर टैग ( <strong>और <em>) का उपयोग किसी शब्द या वाक्यांश के आस-पास की प्रतिलिपि के सापेक्ष अतिरिक्त महत्व या जोर देने के लिए किया जाना चाहिए। <strong>महत्व के <em>लिए और तनाव पर जोर देने के लिए उपयोग करें ।

एक पैराग्राफ में जोर

फ्यूस डेपिबस, टेलस एसी कर्सस कमोडो , टॉरटोर मौरिस कंडिमेंटम निभ, यूट फेरमेंटम मासा जस्ट एमेट रिसस । मेकेनास फॉसीबस मोलिस इंटरडम। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग।

नोट:<b> HTML5 में उपयोग और टैग करना अभी भी ठीक है <i>, लेकिन वे अब अंतर्निहित शैलियों के साथ नहीं आते हैं। <b>अतिरिक्त महत्व बताए बिना शब्दों या वाक्यांशों को उजागर करने के लिए है, जबकि <i>ज्यादातर आवाज, तकनीकी शब्दों आदि के लिए है।

पतों

तत्व का <address>उपयोग उसके निकटतम पूर्वज, या कार्य के पूरे निकाय के लिए संपर्क जानकारी के लिए किया जाता है। यहां बताया गया है कि यह कैसा दिखता है:

ट्विटर, इंक.
795 फोल्सम एवेन्यू, सुइट 600
सैन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890

नोट: सामग्री को ठीक से संरचित करने के लिए प्रत्येक पंक्ति को <address>लाइन-ब्रेक ( ) के साथ समाप्त होना चाहिए <br />या ब्लॉक-स्तरीय टैग (उदाहरण के लिए, ) में लपेटा जाना चाहिए ।<p>

लघुरूप

संक्षिप्ताक्षरों और परिवर्णी शब्दों के लिए, <abbr>टैग का उपयोग करें ( HTML5<acronym> में बहिष्कृत है )। शॉर्टहैंड फॉर्म को टैग के अंदर रखें और पूरे नाम के लिए एक टाइटल सेट करें।

ब्लॉक उद्धरण

<blockquote> <p> <small>

कैसे उद्धृत करें

एक ब्लॉककोट शामिल करने के लिए, <blockquote>चारों ओर लपेटें <p>और <small>टैग करें। अपने स्रोत को उद्धृत करने के लिए तत्व का उपयोग करें <small>और आपको इससे पहले एक एम डैश मिलेगा —।

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। इंटीजर पोसुरे इरेट ए एंटे वेनेटिस डापिबस पॉसुरे वेलिट एलिकेट।

डॉ. जूलियस हिबर्टी

अक्रमित<ul>

• लोरेन इपसाम डलार सिट आमेट
• Consectetur adipiscing अभिजात वर्ग
• मासा में पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल एलिकेट में सुविधा
• नुल्ला वोलुटपाट अलिकम वेलिटा
  • फेसेलस इयाकुलिस नेक
  • पुरुस सोडालेस अल्ट्रीसीज
  • वेस्टिबुलम लौरीट पोर्टिटर सेमी
  • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
• फौसीबस पोर्टा लैकस फ्रिंजिला वेला
• ऐनियन सिट आमेट इरेट नन
• एगेट पोर्टिटर लोरेम

अनस्टाइल्ड<ul.unstyled>

• लोरेन इपसाम डलार सिट आमेट
• Consectetur adipiscing अभिजात वर्ग
• मासा में पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल एलिकेट में सुविधा
• नुल्ला वोलुटपाट अलिकम वेलिटा
  • फेसेलस इयाकुलिस नेक
  • पुरुस सोडालेस अल्ट्रीसीज
  • वेस्टिबुलम लौरीट पोर्टिटर सेमी
  • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
• फौसीबस पोर्टा लैकस फ्रिंजिला वेला
• ऐनियन सिट आमेट इरेट नन
• एगेट पोर्टिटर लोरेम

आदेश दिया<ol>

1. लोरेन इपसाम डलार सिट आमेट
2. Consectetur adipiscing अभिजात वर्ग
3. मासा में पूर्णांक मोलेस्टी लोरेम
4. प्रीटियम निस्ल एलिकेट में सुविधा
5. नुल्ला वोलुटपाट अलिकम वेलिटा
6. फौसीबस पोर्टा लैकस फ्रिंजिला वेला
7. ऐनियन सिट आमेट इरेट नन
8. एगेट पोर्टिटर लोरेम

विवरणdl

विवरण सूचियाँ

एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।

यूइसमोड

वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया ओडियो सेम नेक एलीट।

Donec id elit non mi porta gravida और eget metus.

मालेसुदा पोर्टा

इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।

बिल्डिंग टेबल

<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 और उससे नीचे के पुराने ब्राउज़रों के लिए उपलब्ध नहीं है।

<टेबल क्लास = "कॉमन-टेबल ज़ेबरा-स्ट्राइप्ड" > 
...
</तालिका>

उदाहरण: ज़ेबरा-धारीदार w/ TableSorter.js

पिछले उदाहरण को लेते हुए, हम jQuery और Tablesorter प्लगइन के माध्यम से सॉर्टिंग कार्यक्षमता प्रदान करके अपनी तालिकाओं की उपयोगिता में सुधार करते हैं। क्रम बदलने के लिए किसी भी स्तंभ के शीर्षलेख पर क्लिक करें.

#	पहला नाम	उपनाम	भाषा
1	तुम्हारी	एक	अंग्रेज़ी
2	जो	छह पैक	अंग्रेज़ी
3	स्टू	काटने का निशान	कोड

<स्क्रिप्ट src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<स्क्रिप्ट > 
  $ ( फ़ंक्शन () { 
    $ ( "टेबल # सॉर्टटेबल उदाहरण" )। टेबललेटर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });  
  });
</स्क्रिप्ट>
<टेबल क्लास = "कॉमन-टेबल ज़ेबरा-स्ट्राइप्ड" > 
  ...
</तालिका>

डिफ़ॉल्ट शैलियाँ

सभी रूपों को पठनीय और मापनीय तरीके से प्रस्तुत करने के लिए डिफ़ॉल्ट शैलियाँ दी गई हैं। टेक्स्ट इनपुट, चुनिंदा सूचियां, टेक्स्ट क्षेत्र, रेडियो बटन और चेकबॉक्स, और बटन के लिए शैलियाँ प्रदान की जाती हैं।

उदाहरण प्रपत्र किंवदंती

एक्स-लार्ज इनपुट

चुनना

1 2 3 4 5

चुनना

1 2 3 4 5

संपादन योग्य इनपुट

यहाँ कुछ मूल्य

अक्षम इनपुट

एक्स-लार्ज इनपुट

सहायता पाठ का छोटा अंश

उदाहरण प्रपत्र किंवदंती

तैयार पाठ

@

प्रीपेड चेकबॉक्स

संलग्न चेकबॉक्स

फ़ाइल इनपुट

उदाहरण प्रपत्र किंवदंती

विकल्पों की सूची

• विकल्प एक यह है और वह है - यह शामिल करना सुनिश्चित करें कि यह बहुत अच्छा क्यों है
• विकल्प दो को भी चेक किया जा सकता है और फॉर्म परिणामों में शामिल किया जा सकता है
• विकल्प तीन—हां, आपने अनुमान लगाया—भी जांचा जा सकता है और फ़ॉर्म परिणामों में शामिल किया जा सकता है
• विकल्प चार की जाँच नहीं की जा सकती क्योंकि यह अक्षम है।

नोट: अधिक बड़े क्लिक क्षेत्रों और अधिक उपयोगी फॉर्म के लिए लेबल सभी विकल्पों को घेर लेते हैं।

तिथि सीमा

प्रति सभी समय प्रशांत मानक समय (जीएमटी -08: 00) के रूप में दिखाए जाते हैं।

पाठ क्षेत्र

यदि आवश्यक हो तो उपरोक्त क्षेत्र का वर्णन करने के लिए सहायता टेक्स्ट का ब्लॉक करें।

विकल्पों की सूची

• विकल्प एक यह है और वह है - यह शामिल करना सुनिश्चित करें कि यह बहुत अच्छा क्यों है
• विकल्प दो को भी चेक किया जा सकता है और फॉर्म परिणामों में शामिल किया जा सकता है

परिवर्तनों को सुरक्षित करें  रद्द करना

स्टैक्ड फॉर्म

अपने फ़ॉर्म के HTML में जोड़ें .form-stackedऔर आपके पास उनके बाईं ओर के बजाय उनके फ़ील्ड के ऊपर लेबल होंगे। यह बहुत अच्छा काम करता है यदि आपके फॉर्म छोटे हैं या आपके पास भारी रूपों के लिए इनपुट के दो कॉलम हैं।

उदाहरण प्रपत्र किंवदंती

एक्स-लार्ज इनपुट

चुनना

1 2 3 4 5

उदाहरण प्रपत्र किंवदंती

एक्स-लार्ज इनपुट

सहायता पाठ का छोटा अंश

विकल्पों की सूची

• विकल्प एक यह है और वह है - यह शामिल करना सुनिश्चित करें कि यह बहुत अच्छा क्यों है
• विकल्प दो को भी चेक किया जा सकता है और फॉर्म परिणामों में शामिल किया जा सकता है

नोट: अधिक बड़े क्लिक क्षेत्रों और अधिक उपयोगी फॉर्म के लिए लेबल सभी विकल्पों को घेर लेते हैं।

परिवर्तनों को सुरक्षित करें  रद्द करना

बटन

एक सम्मेलन के रूप में, बटन का उपयोग क्रियाओं के लिए किया जाता है जबकि लिंक का उपयोग वस्तुओं के लिए किया जाता है। उदाहरण के लिए, "डाउनलोड" एक बटन हो सकता है और "हाल की गतिविधि" एक लिंक हो सकता है।

सभी बटन डिफ़ॉल्ट रूप से हल्के भूरे रंग के होते हैं, लेकिन एक नीला .primaryवर्ग उपलब्ध होता है। इसके अलावा, अपनी खुद की शैलियों को रोल करना आसान आसान है।

उदाहरण बटन

बटन शैलियों को लागू के साथ किसी भी चीज़ पर लागू किया जा सकता है .btn। आम तौर पर आप इन्हें केवल <a>, <button>, और चुनिंदा <input>तत्वों पर लागू करना चाहेंगे। यहां बताया गया है कि यह कैसा दिखता है:

वैकल्पिक आकार

फैंसी बड़े या छोटे बटन? कोशिश करो!

अक्षम अवस्था

उन बटनों के लिए जो सक्रिय नहीं हैं या किसी कारण या किसी अन्य कारण से ऐप द्वारा अक्षम हैं, अक्षम स्थिति का उपयोग करें। वह .disabledलिंक के लिए और :disabledतत्वों के लिए <button>है।

लिंक

बटन

यह क्या है

हमारा टॉपबार एक निश्चित बार है जिसमें वेबसाइट का लोगो या नाम, प्राथमिक नेविगेशन और खोज फ़ॉर्म होता है।

अनुकूलन

भीतर के सभी तत्व, और संपूर्ण टॉपबार भी वैकल्पिक हैं। आप एक लोगो/नाम, एनएवी, खोज, और एक सेकेंडरी नेवी—या उसके किसी भी संयोजन को शामिल करना चुन सकते हैं।

ड्रॉपडाउन शामिल

मुख्य नेविगेशन के हिस्से के रूप में, हमने आपके लिए अपनी नेविगेशन में ड्रॉपडाउन जोड़ने की क्षमता शामिल की है। यह कैसे किया जाता है यह देखने के लिए ऊपर (दाएं संरेखित) द्वितीयक एनएवी देखें।

टैब और गोलियां

एक के साथ सरल माध्यमिक नेविगेशन बनाएं <ul>। उपयुक्त वर्ग जोड़कर टैब या गोलियों के बीच स्वैप करें।

सामग्री के उप-अनुभागों जैसे हमारे खाता सेटिंग पृष्ठों और समान सामग्री वाले पृष्ठों के बीच टॉगल करने के लिए उपयोगकर्ता समय-सारिणी के लिए बढ़िया। टैब्ड या गोली शैलियों में उपलब्ध है।

• घर
• प्रोफ़ाइल
• संदेशों
• समायोजन
• संपर्क करना

<उल वर्ग = "टैब" > 
  <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>

• घर
• प्रोफ़ाइल
• संदेशों
• समायोजन
• संपर्क करना

<उल वर्ग = "गोलियाँ" > 
  <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 क्लास = "पेजिनेशन" > 
  <उल>
    <li वर्ग = "पिछला अक्षम" ><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 वर्ग = "अगला" ><a href = "#" > अगला → </a></li>  
  </ul>
</div>

बुनियादी अलर्ट

विफलता, संभावित विफलता, या किसी कार्रवाई की सफलता को उजागर करने के लिए एक-पंक्ति संदेश। रूपों के लिए विशेष रूप से उपयोगी है।

संदेशों को ब्लॉक करें

उन संदेशों के लिए जिनके लिए कुछ स्पष्टीकरण की आवश्यकता होती है, हमारे पास अनुच्छेद शैली अलर्ट हैं। ये लंबे समय तक त्रुटि संदेशों को बुदबुदाते हुए, किसी लंबित कार्रवाई के लिए उपयोगकर्ता को चेतावनी देने, या पृष्ठ पर अधिक जोर देने के लिए जानकारी प्रस्तुत करने के लिए एकदम सही हैं।

क्रियार्थ द्योतक

मोडल—संवाद या लाइटबॉक्स—ऐसी स्थितियों में प्रासंगिक कार्रवाइयों के लिए बढ़िया हैं जहां यह महत्वपूर्ण है कि पृष्ठभूमि संदर्भ को बनाए रखा जाए।

टूल टिप्स

भ्रमित उपयोगकर्ता की सहायता करने और उन्हें सही दिशा में इंगित करने के लिए Twipsies सुपर उपयोगी हैं।

पोपोवेर्स

लेआउट को प्रभावित किए बिना किसी पृष्ठ पर सबटेक्स्टुअल जानकारी प्रदान करने के लिए पॉपओवर का उपयोग करें।

बूटस्ट्रैप को प्रीबूट के साथ बनाया गया था , जो मिक्सिन और वेरिएबल्स का एक ओपन-सोर्स पैक है, जिसका उपयोग कम के साथ संयोजन में किया जाना है , जो तेज और आसान वेब विकास के लिए एक सीएसएस प्रीप्रोसेसर है।

देखें कि हमने बूटस्ट्रैप में प्रीबूट का उपयोग कैसे किया और आप इसका उपयोग कैसे कर सकते हैं यदि आप अपने अगले प्रोजेक्ट पर कम चलाना चुनते हैं।

इसका उपयोग कैसे करना है

अपने ब्राउज़र में जावास्क्रिप्ट के माध्यम से CSS में बूटस्ट्रैप के कम चर, मिक्सिन और नेस्टिंग का पूरा उपयोग करने के लिए इस विकल्प का उपयोग करें।

<लिंक रिले = "स्टाइलशीट/कम" href = "कम/बूटस्ट्रैप.लेस" मीडिया = "सभी" />    
<script src = "js/less-1.0.41.min.js" ></script> 

.js समाधान महसूस नहीं कर रहा है? जब आप अपना कोड परिनियोजित करते हैं तो कम मैक ऐप आज़माएं या संकलन करने के लिए Node.js का उपयोग करें।

क्या शामिल है

बूटस्ट्रैप के हिस्से के रूप में ट्विटर बूटस्ट्रैप में क्या शामिल है, इसके कुछ मुख्य अंश यहां दिए गए हैं। डाउनलोड करने और अधिक जानने के लिए बूटस्ट्रैप वेबसाइट या जीथब प्रोजेक्ट पेज पर जाएं।

रंग चर

कम में वेरिएबल आपके सीएसएस सिरदर्द मुक्त को बनाए रखने और अपडेट करने के लिए एकदम सही हैं। जब आप रंग मान या अक्सर उपयोग किए जाने वाले मान को बदलना चाहते हैं, तो इसे एक स्थान पर अपडेट करें और आप सेट हो गए हैं।

// लिंक
@linkColor : #8b59c2;         
@linkColorHover :     गहरा करें ( @linkColor , 10 ); 
 
// ग्रे
@ब्लैक : #000;             
@ ग्रेडार्क :           हल्का करें ( @ब्लैक , 25 %); 
@ ग्रे :               हल्का करें ( @ब्लैक , 50 %); 
@ ग्रेलाइट :          हल्का करें ( @ब्लैक , 70 %); 
@grayLighter :        हल्का करें ( @ब्लैक , 90 %); 
@ सफेद : #fff ;             
 
// एक्सेंट रंग
@नीला : #08b5fb ;              
@हरा : #46a546 ;             
@ लाल : #9d261d ;               
@पीला : #ffc40d ;            
@नारंगी : #f89406 ;            
@गुलाबी : #c3325f ;              
@ पर्पल : #7a43b6 ;            
 
// बेसलाइन
@बेसलाइन : 20px ;          

टिप्पणी करते हुए

/* ... */कम सीएसएस के सामान्य सिंटैक्स के अलावा टिप्पणी करने की एक और शैली भी प्रदान करता है ।

// यह एक टिप्पणी है
/* यह भी एक टिप्पणी है */

वज़ू को मिलाता है

मिक्सिन मूल रूप से सीएसएस के लिए शामिल या आंशिक होते हैं, जिससे आप कोड के एक ब्लॉक को एक में जोड़ सकते हैं। वे वेंडर प्रीफ़िक्स्ड प्रॉपर्टीज़ जैसे box-shadow, क्रॉस-ब्राउज़र ग्रेडिएंट्स, फॉन्ट स्टैक्स, और बहुत कुछ के लिए बहुत अच्छे हैं। बूटस्ट्रैप के साथ शामिल किए गए मिश्रणों का एक नमूना नीचे दिया गया है।

फ़ॉन्ट ढेर

#फ़ॉन्ट {
  . शॉर्टहैंड ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    फ़ॉन्ट - आकार : @ आकार ; 
    फ़ॉन्ट - वजन : @ वजन ; 
    रेखा - ऊँचाई : @lineHeight ; 
  }
  . सेन्स - सेरिफ़ ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    फ़ॉन्ट - परिवार : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सेन्स - सेरिफ़ ;   
    फ़ॉन्ट - आकार : @ आकार ; 
    फ़ॉन्ट - वजन : @ वजन ; 
    रेखा - ऊँचाई : @lineHeight ; 
  }
  . सेरिफ़ ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    फ़ॉन्ट - परिवार : "जॉर्जिया " , टाइम्स न्यू रोमन , टाइम्स , बिना सेरिफ़ ;     
    फ़ॉन्ट - आकार : @ आकार ; 
    फ़ॉन्ट - वजन : @ वजन ; 
    रेखा - ऊँचाई : @lineHeight ; 
  }
  . मोनोस्पेस ( @ वजन : सामान्य , @ आकार : 12px , @lineHeight : 20px ) {     
    फ़ॉन्ट - परिवार : "मोनाको" , कूरियर न्यू , मोनोस्पेस ;   
    फ़ॉन्ट - आकार : @ आकार ; 
    फ़ॉन्ट - वजन : @ वजन ; 
    रेखा - ऊँचाई : @lineHeight ; 
  }
}

ढ़ाल

#ढाल {
  . क्षैतिज ( @startColor : #555, @endColor: #333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    पृष्ठभूमि - दोहराना : दोहराना - x ;
    बैकग्राउंड - इमेज : - khtml - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , राइट टॉप , से ( @startColor ), से ( @endColor )); // कॉन्करर   
    पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // एफएफ 3.6+    
    पृष्ठभूमि - छवि : - एमएस - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // IE10    
    बैकग्राउंड - इमेज : - वेबकिट - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , राइट टॉप , कलर - स्टॉप ( 0 %, @startColor ), कलर - स्टॉप ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+    
    पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+    
    पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( बाएं , @startColor , @endColor ); // ओपेरा 11.10    
    - एमएस - फ़िल्टर : % ( "progid: DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    फ़िल्टर : ई (% ( "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 ); // एफएफ 3.6+   
    पृष्ठभूमि - छवि : - एमएस - रैखिक - ढाल ( @startColor , @endColor ); // IE10   
    बैकग्राउंड - इमेज : - वेबकिट - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , लेफ्ट बॉटम , कलर - स्टॉप ( 0 %, @startColor ), कलर - स्टॉप ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+    
    पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+   
    पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( @startColor , @endColor ); // ओपेरा 11.10   
    - एमएस - फ़िल्टर : % ( "progid: DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    फ़िल्टर : ई (%( "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 ऑटो ;  
  . क्लियरफिक्स ();
}
. कॉलम ( @columnSpan : 1 ) {  
  प्रदर्शन : इनलाइन ; 
  फ्लोट : बाएं ;
  चौड़ाई : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  मार्जिन - लेफ्ट : @gridGutterWidth ; 
  &: पहला - बच्चा {
    मार्जिन - बाएं : 0 ; 
  }
}
. ऑफ़सेट ( @columnOffset : 1 ) {  
  मार्जिन - लेफ्ट : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! महत्वपूर्ण ;          
}