पूर्वनिर्धारित ग्रिड

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

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

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

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

फिक्स्ड लेआउट

बस लगभग कोनो साइट या पृष्ठ के लेल एकटा बेसिक 940px चौड़ा, केंद्रित कंटेनर लेआउट.

<शरीर>
  <div वर्ग = "कंटेनर" > 
    ...
  </div>
</शरीर>

द्रव लेआउट

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

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

शीर्षक एवं प्रतिलिपि

अपन वेबपृष्ठ के संरचना के लेल एकटा मानक मुद्रण पदानुक्रम.

ज1। शीर्षक 1

ज2। शीर्षक 2

ज3। शीर्षक 3

ज ४। शीर्षक 4

ज5। शीर्षक 5

ज6। शीर्षक 6

उदाहरण अनुच्छेद

Nullam quis risus eget उर्ना मोलिस ornare वेल ईउ लियो | सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

उदाहरण शीर्षक उपशीर्षक अछि...

<strong>आ के संग उपशीर्षक सेहो जोड़ि सकय छी<em>

विविध। तत्व

जोर, संबोधन, एवं संक्षिप्त नाम का प्रयोग

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

कब प्रयोग करब

कोनो शब्द या वाक्यांश आ ओकर आसपास के प्रति के बीच दृश्य भेद जोड़य लेल जोर टैग ( <strong>आ <em>) के प्रयोग करबाक चाही | <strong>सादा पुरान ध्यान के <em>लेल आ चिकना ध्यान आ शीर्षक के लेल प्रयोग करू ।

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

Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेन्टम मासा जस्टो बैठो अमेट रिसुस | मेसेनास फौसिबस मोलिस इंटरडम। नुल्ला विटाए एलिट लिबेरो, एक फारेत्रा औग।

पता

तत्वक addressप्रयोग—अहाँ अनुमान लगा लेलहुँ!—पतेक लेल होइत अछि । ई केहन लगैत अछि से देखू:

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

नोट: एकटा मस्ट मे प्रत्येक पाँतिक addressअंत एकटा लाइन-ब्रेक ( <br />) सँ होइत अछि जाहि सँ सामग्री केँ सही ढंग सँ संरचित कयल जा सकय जेना कि वास्तविक जीवन मे बिना कोनो शैली लागू केने पढ़ल जाइत अछि |

संक्षिप्त नाम

संक्षिप्त नाम आरू संक्षिप्त नाम के लेलऽ, abbrटैग के प्रयोग करलऽ जाय ( HTML5acronym म॑ अप्रचलित छै ) । टैग के भीतर आशुलिपि फॉर्म राखू आ पूरा नाम के लेल एकटा शीर्षक सेट करू।

ब्लॉककोट्स

<blockquote> <p> <cite>

blockquoteअपन चारू कात paragraphआ citeटैग अवश्य लपेटू । कोनो स्रोत के उद्धरण दैत काल citeतत्व के प्रयोग करू। CSS स्वचालित रूप सँ एकटा नाम क' पूर्वाभ्यास एकटा em डैश (—) सँ करत.

लोरेम इप्सम डोलोर बैठो amet, consectetur adipisicing अभिजात वर्ग, सेड कर eiusmod अस्थायी incididunt उत labore एट डोलोरे मैग्ना aliqua ...

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

अक्रमित<ul>

• जेरेमी बिक्सबी
• रॉबर्ट डेजुरे
• जोश वाशिंगटन
• एंटोन कैप्रेसी
• हमर टीम मेट्स
  • जॉर्ज कास्तान्जा
  • जेरी सीनफेल्ड
  • कॉस्मो क्रामर
  • इलेन बेनिस
  • न्यूमैन
• यूहन्ना याकूब
• पॉल पियर्स
• केविन गार्नेट

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

• जेरेमी बिक्सबी
• रॉबर्ट डेजुरे
• जोश वाशिंगटन
• एंटोन कैप्रेसी
• हमर टीम मेट्स
  • जॉर्ज कास्तान्जा
  • जेरी सीनफेल्ड
  • कॉस्मो क्रामर
  • इलेन बेनिस
  • न्यूमैन
• यूहन्ना याकूब
• पॉल पियर्स
• केविन गार्नेट

आदेश देल गेल<ol>

1. जेरेमी बिक्सबी
2. रॉबर्ट डेजुरे
3. जोश वाशिंगटन
4. एंटोन कैप्रेसी
5. हमर टीम मेट्स
   1. जॉर्ज कास्तान्जा
   2. जेरी सीनफेल्ड
   3. कॉस्मो क्रामर
   4. इलेन बेनिस
   5. न्यूमैन
6. यूहन्ना याकूब
7. पॉल पियर्स
8. केविन गार्नेट

वर्णनdl

विवरण सूची

शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।

यूइसमोद

वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग |

डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।

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

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

टेबल बनाना

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

टेबुल बढ़िया अछि-बहुत रास काज लेल। महान तालिकाक कें, तथापि, उपयोगी, स्केल करय योग्य, आ पठनीय (कोड स्तर पर) होएय कें लेल मार्कअप प्रेम कें बिट कें जरूरत छै. मदद करय लेल किछ टिप्स देल गेल अछि.

अपन कॉलम हेडर केँ सदिखन theadएहन मे लपेटू जे पदानुक्रम thead> tr> हो th.

कॉलम हेडर के समान, अहाँक टेबल के सब बॉडी कंटेंट एकटा में लपेटल जेबाक चाही tbodyताकि अहाँक पदानुक्रम tbody> tr> अछि td|

उदाहरण: पूर्वनिर्धारित तालिका शैलियाँ

सबटा तालिकाक कें स्वचालित रूप सं स्टाइल कैल जेतय जइ मे केवल आवश्यक सीमाक कें साथ पठनीयता सुनिश्चित कैल जेतय आ संरचना कें बनाए रखल जा सकय. अतिरिक्त वर्ग वा विशेषता जोड़बाक आवश्यकता नहि.

# 2019।	पहिल नाम	उपनाम	भाषा
१	किछु	एकटा	अंग्रेजी
२	जो	सिक्सपैक	अंग्रेजी
३	स्टू	डेंट	संहिता

<table class="सामान्य-सारणी"> class = "सामान्य-सारणी" >
  ...
</table>क अनुसार

उदाहरण : ज़ेबरा-धारी

ज़ेबरा-स्ट्राइपिंग जोड़ि कए अपन टेबल क संग कनि फैंसी करू-बस .zebra-stripedक्लास जोड़ू।

# 2019।	पहिल नाम	उपनाम	भाषा
१	किछु	एकटा	अंग्रेजी
२	जो	सिक्सपैक	अंग्रेजी
३	स्टू	डेंट	संहिता

<table class="सामान्य-तालिका ज़ेबरा-धारीदार"> class = "सामान्य-तालिका ज़ेबरा-धारीदार" >
...
</table>क अनुसार

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

पिछला उदाहरण लैत, हम jQuery आरू Tablesorter प्लगइन के माध्यम स॑ सॉर्टिंग कार्यक्षमता प्रदान करी क॑ अपनऽ टेबल के उपयोगिता म॑ सुधार करै छियै । सॉर्ट बदलबाक लेल कोनो कॉलम क हेडर पर क्लिक करू.

# 2019।	पहिल नाम	उपनाम	भाषा
१	अहांक	एकटा	अंग्रेजी
२	जो	सिक्सपैक	अंग्रेजी
३	स्टू	डेंट	संहिता

<स्क्रिप्ट प्रकार="पाठ/जावास्क्रिप्ट" src="js/jquery/jquery.tablesorter.min.js"></स्क्रिप्ट> type = "पाठ/जावास्क्रिप्ट" src = "जेएस/जेक्वेरी/जेक्वेरी.टेबलसॉर्टर.मिनट.जेएस" ></स्क्रिप्ट> 
<स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट" > 
  $ ( दस्तावेज )। तैयार ( फंक्शन () { . 
    $ ( "सारणी # क्रमबद्ध तालिकाउदाहरण" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</स्क्रिप्ट>
<table class = "सामान्य-तालिका ज़ेबरा-धारीदार" > 
  ...
</table>क अनुसार

पूर्वनिर्धारित शैलियाँ

सब फॉर्म कें पठनीय आ स्केल करय योग्य तरीका सं प्रस्तुत करय कें लेल डिफ़ॉल्ट शैली देल गेल छै. पाठ इनपुट, चयन सूची, पाठ क्षेत्र, रेडियो बटन आरू चेकबॉक्स, आरू बटन के लेलऽ शैली उपलब्ध कराय देलऽ गेलऽ छै.

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

एक्स-बड़े इनपुट

चुननाइ

१ २ ३ ४ ५

चुननाइ

१ २ ३ ४ ५

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

किछु मूल्य एतय

अक्षम इनपुट

एक्स-बड़े इनपुट

मदद पाठ के छोटा स्निपेट

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

पूर्व-लंबित पाठ

@ .

पूर्व-लंबित चेकबॉक्स

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

फाइल इनपुट

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

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

• विकल्प एक ई आ ओ अछि-ई बहुत नीक किएक अछि से अवश्य शामिल करू
• विकल्प दू कें सेहो जांच कैल जा सकय छै आ फॉर्म रिजल्ट मे शामिल कैल जा सकय छै
• विकल्प तीन के सेहो जांच कएल जा सकैत अछि-हँ, अहाँ अंदाज लगा लेलहुँ-ओहो जाँचल जा सकैत अछि आ फॉर्म रिजल्ट मे शामिल कएल जा सकैत अछि
• विकल्प चारि केँ अक्षम हेबाक कारणेँ जाँच नहि कएल जा सकैत अछि.

नोट: लेबल बहुत पैघ क्लिक क्षेत्र आओर एकटा बेसी उपयोगी फॉर्म के लेल सभ विकल्प के घेरैत अछि.

तिथि सीमा

होए सब समय प्रशांत मानक समय (GMT -08:00) के रूप में देखाओल गेल अछि |

पाठ क्षेत्र

जरूरत पड़ला पर उपरोक्त क्षेत्र कें वर्णन करय कें लेल मदद पाठ कें ब्लॉक.

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

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

परिवर्तन सहेजें रद्द

ढेर हुए रूप

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

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

एक्स-बड़े इनपुट

चुननाइ

१ २ ३ ४ ५

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

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

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

नोट: लेबल बहुत पैघ क्लिक क्षेत्र आओर एकटा बेसी उपयोगी फॉर्म के लेल सभ विकल्प के घेरैत अछि.

परिवर्तन सहेजें रद्द

बटन के

एक रूढ़ि के रूप में, बटन के उपयोग क्रिया के लेलऽ करलऽ जाय छै जबकि लिंक के उपयोग वस्तु के लेलऽ करलऽ जाय छै । जेना, "डाउनलोड" एकटा बटन भ' सकैत अछि आ "हालक गतिविधि" एकटा लिंक भ' सकैत अछि.

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

उदाहरण बटन

बटन शैली लागू के साथ कोनो भी चीज़ पर लागू करलऽ जाब॑ सकै छै .btn। aआम तौर पर अहाँ ई सब केवल , button, आओर चयन inputतत्व पर लागू करय चाहब . ई केहन लगैत अछि से देखू:

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

फैंसी पैघ या छोट बटन? एहि पर अछि!

अक्षम अवस्था

जे बटन सक्रिय नै छै या ऐप द्वारा कोनों या दोसर कारण स अक्षम छै, ओकरा लेल अक्षम स्थिति के उपयोग करू. जे .disabledलिंक के लेल आ :disabledतत्व buttonके लेल अछि.

लिंक

बटन के

की अछि

हमरऽ टॉपबार एगो फिक्स्ड बार छै जेकरा म॑ कोनो वेबसाइट केरऽ लोगो या नाम, प्राथमिक नेविगेशन, आरू सर्च फॉर्म रखलऽ जाय छै ।

अनुकूलन योग्य

भीतरक सभ तत्व, आओर पूरा टॉपबार सेहो, वैकल्पिक अछि. अहां एकटा लोगो/नाम, नव, खोज, आओर एकटा माध्यमिक नव-अथवा ओकर कोनो संयोजन शामिल करय कें लेल चुन सकय छी.

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

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

टैब आ गोली

एक के साथ सरल माध्यमिक नेविगेशन बनाएँ ul| उचित वर्ग जोड़ क टैब या गोली कें बीच स्वैप करूं.

हमरऽ खाता सेटिंग्स पन्ना जैसनऽ सामग्री केरऽ उप-खंडऽ लेली बढ़िया आरू जैसनऽ सामग्री केरऽ पन्ना के बीच टॉगल करै लेली उपयोगकर्ता समय रेखा । टैब या गोली शैली में उपलब्ध।

• घर
• रूपरेखा
• संदेश
• सेटिंग्स
• संपर्क करनाइ

<ul वर्ग = "टैब" > 
  <li class = "सक्रिय" ><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 = "गोलियाँ" > 
  <li class = "सक्रिय" ><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 class = "पिछला अक्षम" ><a href = "" > ← पिछला </a></li>  
    <li class = "सक्रिय" ><a href = "" > 1 </a></li>  
    <li><a href = "" > २ </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > ४ </a></li> 
    <li><a href = "" > ५ </a></li> 
    <li class = "अगला" ><a href = "" > अगला → </a></li> के अनुसार  
  </ul>
</div>

बेसिक अलर्ट

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

संदेश अवरुद्ध करू

जे संदेश के लेल कनि स्पष्टीकरण के जरूरत होएत अछि, ओकरा लेल हमरा सभ लग पैराग्राफ स्टाइल अलर्ट अछि. ई सब लम्बा त्रुटि संदेशऽ क॑ बुदबुदाबै लेली, कोनो उपयोगकर्ता क॑ लंबित कार्रवाई के बारे म॑ चेतावनी दै लेली, या बस पन्ना प॑ अधिक जोर दै लेली जानकारी प्रस्तुत करै लेली एकदम सही छै ।

मोडल

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

पोपोवर्स

लेआउट के प्रभावित केने बिना कोनो पृष्ठ के उपपाठ्य जानकारी प्रदान करय लेल पॉपओवर के प्रयोग करू.

बूटस्ट्रैप क॑ Preboot , मिक्सिन आरू चर केरऽ एगो ओपन-सोर्स पैक के साथ बनालऽ गेलऽ छेलै जेकरऽ उपयोग Less के साथ संयोजन म॑ करलऽ जैतै , जे तेज आरू आसान वेब विकास लेली एगो CSS प्रीप्रोसेसर छै ।

देखू जे हम बूटस्ट्रैप मे Preboot के कोना उपयोग केलहुं आओर अगर अहां अपन अगिला प्रोजेक्ट पर Less चलाबय के विकल्प चुनब त अहां एकर उपयोग कोना क सकय छी.

एकर प्रयोग कोना करब

अपनऽ ब्राउज़र म॑ जावास्क्रिप्ट के माध्यम स॑ सीएसएस म॑ बूटस्ट्रैप केरऽ लेस वैरिएबल, मिक्सिन, आरू नेस्टिंग केरऽ पूरा उपयोग करै लेली ई विकल्प के उपयोग करऽ ।

<link rel = "स्टाइलशीट/कम" प्रकार = "पाठ/css" href = "कम/बूटस्ट्रैप.कम" मीडिया = "सब" />     
<स्क्रिप्ट प्रकार = "पाठ/जावास्क्रिप्ट" src = "जेएस/कम-1.0.41.मिनट.जेएस" ></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 ;            
 
// आधार रेखा
@ आधार रेखा : 20px ;          

टिप्पणी करैत

कम सीएसएस केरऽ सामान्य /* ... */सिंटैक्स के अलावा टिप्पणी केरऽ एगो आरू शैली भी उपलब्ध करै छै ।

// ई एकटा टिप्पणी अछि
/* ईहो एकटा टिप्पणी अछि */

वज़ू के ऊपर मिक्सिन

मिक्सिन मूल रूप सं सीएसएस कें लेल शामिल या आंशिक छै, जे अहां कें कोड कें एकटा ब्लॉक कें एकटा मे संयोजित करय कें अनुमति देयत छै. ई विक्रेता उपसर्ग गुण जेना 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    
    - ms - filter : %( "progid: DXImageTransform.Microsoft.gradient (startColorstr='%d', endColorstr='%d', ढालप्रकार=1)" , @startColor , @endColor ); // आईई 8 +  
    फ़िल्टर : ई (% ( "progid: DXImageTransform.Microsoft.gradient (शुरुआत रंग = '% d', अंत रंग = '% d', ढाल प्रकार = 1)" , @ शुरू रंग , @ अंत रंग )); // आईई 6 एवं आईई 7 
    पृष्ठभूमि - छवि : रैखिक - ढाल ( बाम , @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   
    - ms - filter : %( "progid: DXImageTransform.Microsoft.gradient (startColorstr='%d', endColorstr='%d', ढालप्रकार=0)" , @startColor , @endColor ); // आईई 8 +  
    फ़िल्टर : ई (% ( "progid: DXImageTransform.Microsoft.gradient (शुरुआत रंग = '% d', अंत रंग = '% d', ढाल प्रकार = 0)" , @ प्रारंभ रंग , @ अंत रंग )); // आईई 6 एवं आईई 7 
    पृष्ठभूमि - छवि : रैखिक - ढाल ( @ startColor , @endColor ); // मानक के  
  } .
  . दिशात्मक ( @ startColor : # 555, @ अंत रंग: # 333, @ deg: 45deg) { 
    ...
  } .
  . ऊर्ध्वाधर - तीन - रंग ( @ startColor : # 00b3ee, @ midColor: # 7a43b6, @ colorStop: 0.5, @ endColor: # c3325f) { 
    ...
  } .
} .

संचालन एवं ग्रिड प्रणाली

फैंसी करू आ किछु गणित करू जाहि सं नीचा देल गेल तरहक लचीला आ शक्तिशाली मिक्सिन उत्पन्न भ सकय.

// ग्रिडिट्यूड
@ ग्रिडस्तंभ : 16 ;       
@ ग्रिडस्तंभ चौड़ाई : 40px ;   
@ ग्रिडगटरचौड़ाई : 20px ;   
 
// ग्रिड सिस्टम
. पात्र { 1 ।
  चौड़ाई : @ साइट चौड़ाई ; 
  मार्जिन : 0 ऑटो ;  
  . क्लियरफिक्स ();
} .
. कॉलम ( @columnSpan : 1 ) { 1।  
  प्रदर्शन : इनलाइन ; 
  float : बामा ;
  width : ( @ gridColumnWidth * @ कॉलमस्पैन ) + ( @ ग्रिडगटरविड्थ * ( @ कॉलमस्पैन - 1 ));         
  margin - left : @ ग्रिडगटरविड्थ ; 
  &: प्रथम - बच्चा { .
    मार्जिन - बाम : 0 ; 
  } .
} .
. ऑफसेट ( @ स्तम्भऑफसेट : 1 ) { .  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! महत्वपूर्ण ;          
} .