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

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

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

जि’यां इत्थै दिक्खेआ गेआ ऐ, इक बुनियादी लेआउट दो "स्तंभें" कन्नै बनाया जाई सकदा ऐ, हर इक 16 बुनियादी स्तंभें दी इक नंबर गी फैले दा ऐ जिनेंगी अस अपने ग्रिड प्रणाली दे हिस्से दे रूप च परिभाशत कीता ऐ। होर बदलावें लेई हेठ दित्ते गेदे उदाहरनें गी दिक्खो।

<div वर्ग="पंक्ति"> वर्ग = "पंक्ति" > ऐ
  <div वर्ग = "span6 स्तंभ" > 
    ...
  </div> दा
  <div वर्ग = "span10 स्तंभ" > 
    ...
  </div> दा
</div> दा

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

बस लगभग कुसै बी साइट जां पृष्ठ आस्तै इक बुनियादी 940px चौड़ा, केंद्रित कंटेनर लेआउट।

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

तरल पदार्थ लेआउट

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

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

हेडिंग ते कॉपी

अपने वेबपेजें गी संरचित करने आस्तै इक मानक मुद्रण पदानुक्रम।

एच१ ऐ। शीर्षक 1 दा

ज २। हेडिंग 2 दा

ज ३। हेडिंग 3 दा

ह4 ऐ। हेडिंग 4 दा

ज ५। हेडिंग 5 दा

एच6 ऐ। हेडिंग 6 दा

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

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ओरनारे वेल ईउ लियो। सह सोसियस नटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्सेटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

उदाहरण शीर्षक उप-शीर्षक ऐ...

तुस <strong>ते कन्नै उपशीर्षक बी जोड़ी सकदे ओ<em>

विविध। तत्वां दा

जोर, पते, & संक्षिप्त नाम दा इस्तेमाल करना

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

कदूं इस्तेमाल करना

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

इक पैराग्राफ च जोर देना

फुस्से दापिबस , टेलस एसी कर्सस कोमोडो , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेंटम मासा जस्टो बैठो अमेट रिसुस। मेसेनास फौसिबस मोलिस इंटरडम। नुल्ला विटाए एलिट लिबेरो, इक फारेत्रा औग।

संबोधन करदा ऐ

तत्व दा addressइस्तेमाल—तुसें अनुमान लाया ऐ!—पते आस्तै कीता जंदा ऐ। इत्थें एह् केह् दिखदा ऐ:

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

नोट: इक मस्ट च हर इक पंक्ति दा addressअंत इक लाइन-ब्रेक ( <br />) कन्नै होंदा ऐ तां जे सामग्री गी ठीक ढंगै कन्नै संरचित कीता जाई सकै जि'यां एह् असल जिंदगी च बिना कुसै शैली दे लागू कीते पढ़ेआ जंदा ऐ।

संक्षिप्त रूप

संक्षिप्त ते संक्षिप्त नामें आस्तै, abbrटैग दा इस्तेमाल करो ( HTML5acronym च गैर-प्रचलित ऐ ) । टैग दे अंदर आशुलिपि फार्म रक्खो ते पूरे नांऽ आस्तै इक टाइटल सेट करो।

ब्लॉककोट्स

<blockquote> <p> <cite>

blockquoteअपने चारों ओर paragraphऔर citeटैग ज़रूर लपेटना । स्रोत दा हवाला दिंदे बेल्लै citeतत्व दा इस्तेमाल करो। सीएसएस स्वतः इक नांऽ दा प्रस्तावना इक एम डैश (—) कन्नै करग.

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

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

अनऑर्डर<ul>

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

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

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

आर्डर दे दी<ol>

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

ब्यौराdl

विवरण सूची दी

शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।

यूइसमोद ने दी

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

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

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

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

मेज बनाना

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

टेबल शानदार होंदे न—बहुत सारी चीजें लेई। महान तालिकाएं गी, हालांकि, उपयोगी, स्केल करने योग्य, ते पठनीय (कोड स्तर पर) होने आस्तै मार्कअप प्यार दी थोह् ड़ी-मती लोड़ ऐ। मदद करने आस्तै किश सुझाऽ दित्ते गेदे न।

अपने स्तंभ हेडरें गी हमेशा theadइस चाल्ली लपेटो जे पदानुक्रम thead> tr> होऐ th.

स्तंभ हेडरें दे समान, तुंदी सारी तालिका दी शरीर सामग्री गी इक च लपेटेआ जाना चाहिदा tbodyतां जे तुंदी पदानुक्रम tbody> tr> ऐ td.

उदाहरण: डिफ़ॉल्ट तालिका शैलियां

पठनीयता गी सुनिश्चित करने ते संरचना गी बनाए रखने लेई सब्भै तालिकाएं गी स्वतः सिर्फ जरूरी सीमाएं कन्नै स्टाइल कीता जाग। अतिरिक्त वर्गें जां विशेषताएं गी जोड़ने दी लोड़ नेईं ऐ।

# ऐ	पैहला नां	अखीरी नां	भाशा
१	चंद	इक	अंगरेजी
२	जो	सिक्सपैक	अंगरेजी
३	स्टू	डेंट	कोड

<table class="सामान्य-सारणी"> वर्ग = "सामान्य-सारणी" >
  ...
</table> दा

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

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

# ऐ	पैहला नां	अखीरी नां	भाशा
१	चंद	इक	अंगरेजी
२	जो	सिक्सपैक	अंगरेजी
३	स्टू	ड��ंट	कोड

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

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

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

# ऐ	पैहला नां	अखीरी नां	भाशा
१	थुआढ़ा	इक	अंगरेजी
२	जो	सिक्सपैक	अंगरेजी
३	स्टू	डेंट	कोड

<स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट" src = "जे एस / जे क्वेरी / जे क्वेरी.टेबलसोर्टर.मिन. जे एस" ></स्क्रिप्ट>  
<स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट" > 
  $ ( दस्तावेज ) ऐ । तैयार ( फंक्शन () { ऐ। 
    $ ( "सारणी # क्रमबद्ध तालिकाउदाहरण" ). tablesorter ( { सॉर्टलिस्ट : [[ 1 , 0 ]]} );   
  });
</script> दा
<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> दा

• घर
• प्रोफाइल
• संदेश
• सेटिंग्स
• राबता

<उल वर्ग = "गोलियां" > 
  <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> दा

पृष्ठांकन करना

आरडीओ द्वारा प्रेरित अल्ट्रा सरल ते न्यूनतम शैली पृष्ठांकन। बड्डा ब्लॉक छूटना मुश्कल ऐ, आसानी कन्नै स्केल कीता जाई सकदा ऐ, ते बड्डे क्लिक क्षेत्र उपलब्ध करोआंदा ऐ।

<div वर्ग = "पृष्ठांकन" > ऐ 
  <उल> दा
    <li class = "पिछला अक्षम" ><a href = "" > ← पिछला </a></li> दा  
    <li class = "सक्रिय" ><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 class = "अगला" ><a href = "" > अगला → </a></li> दा  
  </ul> दा
</div> दा

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

कुसै कार्रवाई दी असफलता, संभावित असफलता, जां सफलता गी उजागर करने आस्तै इक लाइन दे संदेश। खास तौर उप्पर रूपें आस्तै उपयोगी ऐ ।

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

उनें संदेशें लेई जेह् ड़े थोह् ड़ी-मती समझाने दी लोड़ होंदी ऐ, साढ़े कोल पैराग्राफ शैली दे अलर्ट न। एह् लम्मी त्रुटि संदेशें गी बबल करने, इक बरतूनी गी लंबित कार्रवाई दी चेतावनी देने, जां सिर्फ पृष्ठ पर होर जोर देने आस्तै जानकारी पेश करने आस्तै बिल्कुल सही न।

मोडल ने दी

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

पोपोवर्स

लेआउट गी प्रभावित कीते बगैर कुसै पृष्ठ गी उप-पाठ्य जानकारी देने आस्तै पोपोवर दा इस्तेमाल करो.

बूटस्ट्रैप गी प्रीबूट कन्नै बनाया गेआ हा , जेह् ड़ा मिक्सिन ते चर दा इक ओपन-सोर्स पैक ऐ जेह् ड़ा लेस कन्नै संयोजन च बरतेआ जाह् ग , जेह् ड़ा तेज़ ते आसान वेब विकास आस्तै इक सीएसएस प्रीप्रोसेसर ऐ ।

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

इसदा इस्तेमाल किस चाल्ली करना ऐ

अपने ब्राउज़र च जावास्क्रिप्ट दे राहें सीएसएस च बूटस्ट्रैप दे कम चर, मिक्सिन, ते नेस्टिंग दा पूरा इस्तेमाल करने आस्तै इस विकल्प दा इस्तेमाल करो.

<link rel = "स्टाइलशीट / कम" प्रकार = "पाठ / सीएसएस" href = "कम / बूटस्ट्रैप.कम" मीडिया = "सभी" />     
<स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट" src = "जेएस / कम-1.0.41.मिनट.जेएस" ></स्क्रिप्ट>  

.js समाधान महसूस नेईं करदे? कम मैक ऐप दी कोशश करो जां संकलित करने आस्तै Node.js दा इस्तेमाल करो जिसलै तुस अपने कोड गी तैनात करदे ओ.

क्या शामिल ऐ

बूटस्ट्रैप दे हिस्से दे तौर पर ट्विटर बूटस्ट्रैप च शामल कीते गेदे किश खास गल्लें दी जानकारी दित्ती गेदी ऐ। डाउनलोड करने ते होर जानने लेई बूटस्ट्रैप वेबसाइट जां गिथब प्रोजेक्ट पेज पर जाओ।

रंग चर

कम च चर तुंदे CSS सिर दर्द मुक्त बनाए रखने ते अपडेट करने लेई बिल्कुल सही न। जदूं तुस इक रंग मूल्य जां बार-बार इस्तेमाल कीते जाने आह् ले मूल्य गी बदलना चांह् दे ओ तां उसी इक थाह् र पर अपडेट करो ते तुस सेट होई गेदे ओ.

// लिंक
@ लिंकरंग : # 8 बी 59 सी 2 ऐ;         
@linkColorHover : अंधेरा करो (     @linkColor , 10 ); 
 
// ग्रेज़ दा
@ काला : # 000 ऐ;             
@ grayDark :           हल्का करो ( @ काला , 25 %); 
@ ग्रे :               हल्का करो ( @ काला , 50 %); 
@ grayLight :          हल्का करो ( @ काला , 70 %); 
@ grayLighter :        हल्का करो ( @ काला , 90 %); 
@ गोरे : # एफएफएफ ;             
 
// लहजे दे रंग
@ नीले रंग दा : # 08 बी 5 एफ बी;              
@ हरे रंग दा : # 46 ए 546;             
@ लाल : # 9 डी 261 डी;               
@ पीला : # एफएफसी 40 डी;            
@ नारंगी : # एफ 89406 ऐ;            
@ गुलाबी : # c3325f ऐ;              
@ बैंगनी : # 7 ए 43 बी 6;            
 
// बेसलाइन दा
@ आधार रेखा : 20px ऐ ;          

टिप्पणी करदे होई

कम सीएसएस दे सामान्य /* ... */सिंटैक्स दे अलावा टिप्पणी करने दी इक होर शैली बी उपलब्ध करोआंदा ऐ।

// एह् इक टिप्पणी ऐ
/* एह् बी इक टिप्पणी ऐ */

मिक्सिन अप वज़ू

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

फॉन्ट ढेर

# फॉन्ट दा {
  ऐ . आशुलिपि ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {     
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    लाइन - ऊंचाई : @ लाइन ऊंचाई ; 
  } ऐ।
  ऐ . sans - serif ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {     
    font - family : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सैंस - सेरिफ ;   
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    लाइन - ऊंचाई : @ लाइन ऊंचाई ; 
  } ऐ।
  ऐ . serif ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {     
    font - family : "जॉर्जिया" , टाइम्स न्यू रोमन , टाइम्स , sans - serif ;     
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    लाइन - ऊंचाई : @ लाइन ऊंचाई ; 
  } ऐ।
  ऐ . मोनोस्पेस ( @ वजन : सामान्य , @ आकार : 12px , @ lineHeight : 20px ) {     
    font - family : "मोनाको" , कूरियर नई , मोनोस्पेस ;   
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    लाइन - ऊंचाई : @ लाइन ऊंचाई ; 
  } ऐ।
} ऐ।

ढाल दा

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

संचालन ते ग्रिड प्रणाली

फैंसी हो जाओ ते निचले स्तर दे समान लचीले ते शक्तिशाली मिक्सिन पैदा करने आस्तै किश गणित करो।

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