मुलभूत जाळी

बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आसा. तो लोकप्रिय 960 ग्रिड प्रणालीची एक रूच, पूण डाव्या आनी उजव्या बाजूक अतिरिक्त मार्जिन/पॅडींग नासतना.

उदाहरण जाळी मार्कअप

हांगा दाखयल्ले प्रमाणें, दोन "स्तंभ" आशिल्ली मुळावी मांडावळ तयार करूंक शकता, दरेक स्तंभ आमी आमच्या ग्रिड प्रणालीचो भाग म्हूण व्याख्या केल्ल्या 16 मुळाव्या स्तंभांच्या संख्येंत पातळटात. चड बदलां खातीर सकयल दिल्ल्यो उदाहरणां पळयात.

<div class="row"> हें नांव वर्ग = "ओळ" >
  <div वर्ग = "span6 स्तंभ" > 
    ...
  </div> हें नांव
  <div वर्ग = "span10 स्तंभ" > 
    ...
  </div> हें नांव
</div> हें नांव

स्थिर मांडावळ

फकत खंयच्याय साइट वा पानाक मुळावी 940px रुंद, केंद्रीत कंटेनर मांडावळ.

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

द्रव मांडावळ

किमान- आनी चडांत चड रुंदाय आशिल्ली लवचीक द्रव वा द्रव पान रचणूक आनी डाव्या हाताची बाजूची पट्टी. ऍप्लिकेशनां खातीर ग्रेट.

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

शीर्षकां आनी प्रत

तुमच्या वॅबपानांची रचना करपाखातीर एक मानक मुद्रण क्रमवारी.

h1. शीर्षक 1

h2. शीर्षक 2

h3 हें नांव. शीर्षक 3

h4 हें नांव. शीर्षक 4

h5. शीर्षक 5

h6 हें नांव. शीर्षक 6

उदाहरण परिच्छेद

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

उदाहरण शीर्षक उपशीर्षक आसा...

<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 डॅश (—) दितले.

लोरेम इप्सम डोलोर बस अमेत, कॉन्सेक्टेटर एडिपिसिसिंग एलिट, सेड दो eiusmod टेम्पोर इन्सिडिडंट उट लाबोरे एट डोलोर मॅग्ना एलिक्वा...

ज्युलियस हिबर्ट हांणी डॉ

अनऑर्डर केल्लें<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.

देखीक: मुलभूत कोश्टक शैली

वाचपाची तांक सुनिश्चीत करपाक आनी रचणूक सांबाळपाक सगळ्या कोश्टकांक फकत गरजेच्यो शिमो आपोआप शैली दितले. अतिरिक्त वर्ग वा गुणधर्म जोडपाची गरज ना.

# 1 .	पयलें नांव	निमाणें नांव	भास
१	कांय	एक	इंग्लीश
२	जोय हांणी केला	सिक्सपॅक हें नांव	इंग्लीश
३	स्टु	डेंट हें नांव	संहिता

<table class="सामान्य-कोश्टक"> class = "सामान्य-कोश्टक" >
  ...
</कोश्टक>

देखीक: झेब्रा-पट्टीदार

झेब्रा-स्ट्राइपिंग जोडून तुमच्या कोश्टकां कडेन मात्शी फॅन्सी मेळोवची-फक्त .zebra-stripedवर्ग जोडचो.

# 1 .	पयलें नांव	निमाणें नांव	भास
१	कांय	एक	इंग्लीश
२	जोय हांणी केला	सिक्सपॅक हें नांव	इंग्लीश
३	स्टु	डेंट हें नांव	संहिता

<table class="सामान्य-कोश्टक झेब्रा-पट्टीदार"> class = "सामान्य-कोष्टक झेब्रा-पट्टीदार" >
...
</कोश्टक>

देखीक: झेब्रा-पट्टीदार w / TableSorter.js

आदलें उदाहरण घेवन, आमी jQuery आनी Tablesorter प्लगइन वरवीं क्रमवारी कार्यक्षमताय पुरवण करून आमच्या कोश्टकांची उपयुक्तताय सुदारतात . क्रमवारी बदलपाखातीर खंयच्याय स्तंभाच्या शीर्षकाचेर क्लिक करात.

# 1 .	पयलें नांव	निमाणें नांव	भास
१	तुमचें	एक	इंग्लीश
२	जोय हांणी केला	सिक्सपॅक हें नांव	इंग्लीश
३	स्टु	डेंट हें नांव	संहिता

<स्क्रिप्ट प्रकार="मजकूर/जावास्क्रिप्ट" src="js/jquery/jquery.tablesorter.min.js"></स्क्रिप्ट> type = "मजकूर/जावास्क्रिप्ट" src = "js/jquery/jquery.tablesorter.min.js" ></स्क्रिप्ट> 
<स्क्रिप्ट प्रकार = "मजकूर/जावास्क्रिप्ट" > 
  $ ( दस्तावेज ). तयार ( कार्य () { . 
    $ ( "कोष्टक # क्रमवारी कोश्टक उदाहरण" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script> हें नांव
<table class = "सामान्य-कोश्टक झेब्रा-पट्टीदार" > 
  ...
</कोश्टक>

मुलभूत शैली

सगळ्या फॉर्मांक वाचपाक येवपी आनी मापनीय पद्दतीन सादर करपाक मुलभूत शैली दिल्या. मजकूर इनपुट, निवड यादी, मजकूरक्षेत्रां, रेडिओ बटणां आनी चेकबॉक्स, आनी बटणां खातीर शैली दिल्या.

उदाहरण रूप आख्यायिका

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

वेंचचें

१ २ ३ ४ ५

वेंचचें

१ २ ३ ४ ५

संपादन करपाक शकना अशें इनपुट

कांय मोल हांगा

अक्षम केल्लें इनपुट

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

मदत मजकूराचे ल्हान स्निपेट

उदाहरण रूप आख्यायिका

पूर्वप्रलंबित मजकूर

@ हांणी केला.

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

जोडला चेकबॉक्स

फायल इनपुट

उदाहरण रूप आख्यायिका

पर्यायांची वळेरी

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

टिप: लेबलां खूब व्हडल्या क्लिक क्षेत्रां खातीर आनी चड वापरपाक येवपी फॉर्मा खातीर सगळ्या पर्यायांक भोंवतणीं आसतात.

तारीख श्रेणी

प्रती सगळे वेळ पॅसिफीक मानक वेळ (GMT -08:00) म्हणून दाखयल्यात.

पाठक्षेत्र

गरज पडल्यार वयर दिल्ल्या क्षेत्राचें वर्णन करपाक मदत मजकूर ब्लॉक.

पर्यायांची वळेरी

• पर्याय एक हो आनी तो-तो कित्याक म्हान आसा हाची खात्रीन आस्पाव करात
• पर्याय दोनय तपासून फॉर्म रिजल्टांत आस्पाव करूं येता

बदल जतनाय घेयात रद्द

रचून दवरिल्लीं फॉर्मां

तुमच्या फॉर्माच्या एचटीएमएलांत जोडात .form-stackedआनी तुमकां तांच्या शेतांचेर लेबलां तांच्या उजव्या वटेन न्हय तर तांच्या शेतां वयल्यान आसतलीं. तुमचे फॉर्म ल्हान आसल्यार वा तुमचे कडेन जड फॉर्मां खातीर इनपुटांचे दोन स्तंभ आसल्यार हें बरेंच काम करता.

उदाहरण रूप आख्यायिका

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

वेंचचें

१ २ ३ ४ ५

उदाहरण रूप आख्यायिका

पर्यायांची वळेरी

• पर्याय एक हो आनी तो-तो कित्याक म्हान आसा हाची खात्रीन आस्पाव करात
• पर्याय दोनय तपासून फॉर्म रिजल्टांत आस्पाव करूं येता

टिप: लेबलां खूब व्हडल्या क्लिक क्षेत्रां खातीर आनी चड वापरपाक येवपी फॉर्मा खातीर सगळ्या पर्यायांक भोंवतणीं आसतात.

बदल जतनाय घेयात रद्द

बटणां घालतात

एक रूढिवाद म्हूण, बटणां कृतींखातीर वापरतात जाल्यार दुवे वस्तूंखातीर वापरतात. देखीक, "डावनलोड" हें बटण आसूं येता आनी "हालीची क्रिया" दुवो आसूं येता.

सगळे बटण पूर्वनिर्धारीतपणान उजवाड राशीचे शैलीचेर, पूण निळो .primaryवर्ग उपलब्ध आसा. प्लस, स्वताच्यो शैली रोल करप सोंपें peasy.

उदाहरण बटण

बटण शैली लागू केल्ल्यान खंयच्याय गजालीक लागू करूं येतात .btn. सादारणपणान तुमकां हीं फकत a, button, आनी निवड inputघटकांक लागू करपाची इत्सा जातली. कशें दिसता तें पळयात:

पर्यायी आकार दिवप

फॅन्सी व्हडले वा ल्हान बटण? ताचेर आसचें!

अक्षम स्थिती

सक्रिय नाशिल्ल्या बटणां खातीर वा ऍप्लिकेशनान एका वा दुसऱ्या कारणाक लागून अक्षम केल्ल्या बटणां खातीर, अक्षम स्थिती वापरात. तें .disabledदुव्यां खातीर आनी घटकां :disabledखातीर .button

दुवे आसात

बटणां घालतात

काय तें

आमची टॉपबार ही एक स्थिर बार आसा जी वेबसायटीचो लोगो वा नांव, प्राथमीक नेव्हिगेशन, आनी सोद फॉर्म दवरता.

अनुकूल करपाक येता

भितरले सगळे घटक, आनी पुराय टॉपबार तशेंच, पर्यायी आसात. तुमी लोगो/नांव, नाव, सोद, आनी दुय्यम नाव-वा ताचें खंयचेंय संयोजन समाविष्ट करपाक निवडूंक शकतात.

ड्रॉपडावन हांचो आस्पाव आसा

मुखेल नेव्हिगेशनचो एक भाग म्हूण, तुमच्या नेव्हांत ड्रॉपडावन जोडपाची तुमकां क्षमता आमी समाविष्ट केल्या. तें कशें जाता तें पळोवपा खातीर वयर दिल्लें दुय्यम nav (उजवें संरेखित) पळयात.

टॅब आनी गोळ्या

एक 1 च्या आदारान सादें दुय्यम नेव्हिगेशन तयार करचें 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> हें नांव

• घर
• प्रोफायल
• संदेश
• मांडावळी
• संपर्क

<ul class="गोळयो"> 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 वर्ग="पृष्ठांकन"> class = "पृष्ठांकन" >
  <उल> हें नांव
    <li class = "आदीं अक्षम" ><a href = "" > ← आदलें </a></li>  
    <li वर्ग = "सक्रीय" ><a href = "" > 1 </a></li>  
    <li><a href = "" > २ </a></li> हें नांव 
    <li><a href = "" > ३ </a></li> हें नांव 
    <li><a href = "" > ४ </a></li> हें नांव 
    <li><a href = "" > ५ </a></li> हें नांव 
    <li class = "फुडें" ><a href = "" > फुडें → </a></li> हें नांव  
  </ul> हें नांव
</div> हें नांव

मुळाव्यो सावधानताय

कृतीचें अपयश, संभाव्य अपयश वा यश उजवाडावपाखातीर एक ओळीचे संदेश. खास करून रूपांखातीर उपेगी पडटा.

संदेश आडावप

थोडें स्पश्टीकरणाची गरज आशिल्ल्या संदेशां खातीर, आमचे कडेन परिच्छेद शैलीचे अलर्ट आसात. लांब चुकीचे संदेश बुडबुडें मारपाक, वापरप्याक प्रलंबीत कृतीची शिटकावणी दिवपाक, वा फकत पानाचेर चड भर दिवपा खातीर म्हायती सादर करपाक हे परिपूर्ण आसात.

मोडल हांचो आस्पाव जाता

मोडल-संवाद वा लायटबॉक्स-जंय पार्श्वभूंय संदर्भ सांबाळप म्हत्वाचें आसता अशा परिस्थितींत संदर्भ कृतीं खातीर बरे आसात.

पोपोव्हर्स हें नांव

मांडावळीचेर परिणाम करिनासतना पानाक उपमजकूर म्हायती दिवपाक पॉपओव्हर वापरात.

बूटस्ट्रॅप Preboot , एक मुक्त-स्त्रोत पॅक मिक्सिन आनी चड- उणें Less च्या संयोजनांत वापरपाक तयार केल्लें , एक CSS प्रीप्रोसेसर जलद आनी सोप्या वेब विकासा खातीर.

आमी Bootstrap त Preboot कसो वापरला तें पळयात आनी तुमच्या फुडल्या प्रकल्पाचेर Less चालीक लावपाचें निवडल्यार तुमी ताचो वापर कसो करूंक शकतात तें पळयात.

ताचो वापर कसो करचो

तुमच्या ब्राउझरांत जावास्क्रिप्ट वरवीं Bootstrap च्या Less चड-उणें, मिक्सिन, आनी CSS त नेस्टिंग हांचो पुराय वापर करपाक हो पर्याय वापरात.

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

टिप्पणी करप

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

कार्यावळी आनी जाळी पद्दत

फॅन्सी घेयात आनी सकयल दिल्ल्या प्रमाणें लवचीक आनी बळिश्ट मिक्सिन तयार करपाक कांय गणित करात.

// जाळीदारी
@gridस्तंभ : 16 ;       
@gridस्तंभरुंदी : 40px ;   
@gridगटररुंदी : 20px ;   
// जाळी प्रणाली
हें . पात्र { 1 .
  width : @साइटरुंदी ; 
  मार्जिन : 0 ऑटो ;  
  हें . स्पश्ट करप ();
} हें .
हें . स्तंभ ( @columnSpan : 1 ) { 1 .  
  प्रदर्शन : इनलायन ; 
  float : उजवें ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @स्तंभविस्तार - 1 ));         
  मार्जिन - डावें : @gridGutterWidth ; 
  &: पयलें - भुरगें { .
    मार्जिन - डावें : ० ; 
  } हें .
} हें .
हें . ऑफसेट ( @column ऑफसेट : 1 ) { 1 .  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! म्हत्वाचें ;          
} हें .