पूर्वनिर्धारितं जालम्

Bootstrap इत्यस्य भागरूपेण प्रदत्तं पूर्वनिर्धारितं जालप्रणाली 940px विस्तृतं 16-स्तम्भजालम् अस्ति । इदं लोकप्रियस्य ९६० जालप्रणाल्याः स्वादः अस्ति, परन्तु वामभागे दक्षिणपार्श्वे च अतिरिक्तमार्जिन/पैडिंगं विना।

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

यथा अत्र दर्शितं, एकं मूलभूतं विन्यासं द्वयोः "स्तम्भयोः" सह निर्मातुं शक्यते, प्रत्येकं अस्माकं जालप्रणाल्याः भागत्वेन अस्माभिः परिभाषितानां १६ मूलस्तम्भानां संख्यां व्याप्नोति । अधिकविविधतायै अधोलिखितानि उदाहरणानि पश्यन्तु ।

<दिव वर्ग="पङ्क्ति"> class = "पङ्क्तिः" >
  <div वर्ग = "span6 स्तम्भ" > 
    ...
  </div> इति
  <div वर्ग = "span10 स्तम्भ" > 
    ...
  </div> इति
</div> इति

स्थिर विन्यास

प्रायः कस्यापि साइट् अथवा पृष्ठस्य कृते मूलभूतं 940px विस्तृतं, केन्द्रितं पात्रविन्यासम् ।

<शरीरं> इति
  <div वर्ग = "पात्र" > 
    ...
  </div> इति
</body> इति

द्रव विन्यास

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

<शरीरं> इति
  <div class = "पात्र-द्रव" > 
    <div वर्ग = "साइडबार" > 
      ...
    </div> इति
    <div class = "सामग्री" > 
      ...
    </div> इति
  </div> इति
</body> इति

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

भवतः जालपुटानां संरचनायै मानकमुद्रणपदानुक्रमणिका ।

ह1. शीर्षक 1

ह२. शीर्षक 2

ह३. शीर्षक 3

ह४ । शीर्षक 4

ह५ । शीर्षक 5

ह६ । शीर्षक 6

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

Nullam quis risus eget उर्ना mollis ornare वेल ईउ लियो. सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur हास्यास्पद mus. Nullam id dolor id nibh ultrices vehicula उत id elit.

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

<strong>and इत्यनेन सह उपशीर्षकाणि अपि योजयितुं शक्नुवन्ति<em>

विविध । तत्त्वानि

बल, सम्बोधन, & संक्षिप्त नाम का प्रयोग करते हुए

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

कदा प्रयोगः कर्तव्यः

शब्दस्य वा वाक्यस्य वा तस्य परितः प्रतिलिपिः च दृश्यभेदं योजयितुं बोधटैग् ( <strong>and <em>) इत्यस्य उपयोगः करणीयः । <strong>साधारण पुरातन ध्यान के <em>लिए तथा स्लिक ध्यान एवं शीर्षक के लिए प्रयोग करें ।

एकस्मिन् अनुच्छेदे बोधः

Fusce dapibus , tellus ac cursus commodo , tortor मौरिस condimentum निभ , उत fermentum massa justo बैठो amet risus. Maecenas faucibus मोलिस इंटरडम। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए।

सम्बोधयति

तत्त्वं प्रयुज्यते address—भवता अनुमानितम्!—संबोधनानां कृते। अत्र कथं दृश्यते :

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

नोटः- एकस्मिन् मस्ट् इत्यस्मिन् प्रत्येकं पङ्क्तिः addressरेखा-विच्छेदेन ( <br />) इत्यनेन समाप्तं भवति यत् सामग्रीं सम्यक् संरचयितुं यथा वास्तविकजीवने पठ्यते तथा विना किमपि शैलीं प्रयुक्तम्।

संक्षेपाः

संक्षिप्तशब्दानां संक्षिप्तनामानां च कृते ( HTML5 मध्ये अप्रचलितः अस्ति ) इति abbrटैग् इत्यस्य उपयोगं कुर्वन्तु । आशुलिपिरूपं टैग् अन्तः स्थापयित्वा सम्पूर्णनामस्य शीर्षकं सेट् कुर्वन्तु ।acronym

ब्लॉककोट्स्

<blockquote> <p> <cite>

अवश्यं स्वस्य blockquoteपरितः टैगं paragraphच लपेटयन्तु। citeस्रोतः उद्धृत्य citeतत्त्वस्य उपयोगं कुर्वन्तु । CSS स्वयमेव नामस्य पूर्वं em डैश (—) इत्यनेन सह करिष्यति ।

Lorem ipsum dolor बैठो 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 अभिजात वर्ग.

Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस.

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

Etiam porta सेम malesuada मैग्ना मोलिस euismod.

मेजस्य निर्माणम्

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

मेजः महान् भवन्ति—बहुवस्तूनाम् कृते। महान् सारणीः, तथापि, उपयोगी, स्केल-योग्यः, पठनीयः च (कोड्-स्तरस्य) भवितुं किञ्चित् मार्कअप-प्रेमस्य आवश्यकता वर्तते । अत्र साहाय्यं कर्तुं कतिचन युक्तयः सन्ति।

सर्वदा स्वस्य स्तम्भशीर्षकाणि theadएतादृशेन वेष्टयन्तु यत् श्रेणीक्रमः thead> tr> भवति th|

स्तम्भशीर्षकाणां सदृशं, भवतः सर्वाणि सारणीयाः शरीरसामग्री a इत्यनेन वेष्टितव्या tbodyअतः भवतः श्रेणीक्रमः tbody> tr> अस्ति td।

उदाहरणम् : पूर्वनिर्धारितसारणीशैल्याः

पठनीयतां सुनिश्चित्य संरचनां निर्वाहयितुम् सर्वाणि सारणीनि स्वयमेव केवलं आवश्यकसीमाभिः सह शैलीकृतानि भविष्यन्ति। अतिरिक्तवर्गान् विशेषतान् वा योजयितुं आवश्यकता नास्ति।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
१	केचन	एकम्‌	आंग्ल
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता

<table class="सामान्य-सारणी"> class = "सामान्य-सारणी" >
  ...
</table> इति

उदाहरण : ज़ेबरा-पट्टीदार

ज़ेबरा-पट्टिकां योजयित्वा स्वसारणीभिः सह किञ्चित् आडम्बरं प्राप्नुवन्तु-मात्रं .zebra-stripedवर्गं योजयन्तु।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
१	केचन	एकम्‌	आंग्ल
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता

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

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

पूर्वम् उदाहरणं गृहीत्वा वयं jQuery तथा Tablesorter प्लगिन् मार्गेण क्रमाङ्कनकार्यक्षमतां प्रदातुं अस्माकं सारणीनां उपयोगितायां सुधारं कुर्मः । क्रमणं परिवर्तयितुं कस्यापि स्तम्भस्य शीर्षकं नुदन्तु ।

# .	प्रथम नाम्ना	अंतिम नाम्ना	भाषा
१	भवतः	एकम्‌	आंग्ल
२	जो	सिक्सपैक्	आंग्ल
३	स्तु	दन्त इति	संहिता

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

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

सर्वेभ्यः रूपेभ्यः पठनीयेन स्केल-योग्यतया च प्रस्तुतुं पूर्वनिर्धारितशैल्याः दत्ताः सन्ति । पाठनिवेशानां, चयनसूचीनां, पाठक्षेत्राणां, रेडियो बटन्स् तथा चेकबॉक्स्, बटन् च कृते शैल्याः प्रदत्ताः सन्ति ।

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

X-बृहत् इनपुट

विचि

१ २ ३ ४ ५

विचि

१ २ ३ ४ ५

असंपादनीय इनपुट

केचन मूल्यम् अत्र

अक्षम इनपुट

X-बृहत् इनपुट

सहायतापाठस्य लघुः स्निपेट्

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

पूर्वनिर्धारित पाठ

@ .

पूर्वनिर्धारित चेकबॉक्स

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

सञ्चिका इनपुट्

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

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

• विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
• विकल्पद्वयं अपि परीक्ष्य प्रपत्रपरिणामेषु समाविष्टं कर्तुं शक्यते
• विकल्पः तृतीयः अपि शक्यते—आम्, भवान् अनुमानितवान्—इदमपि परीक्ष्य प्रपत्रपरिणामेषु समाविष्टः भवितुं शक्नोति
• विकल्पः चतुर्थः अक्षमत्वात् परीक्षितुं न शक्यते ।

नोट्: लेबल् बहु बृहत्तरस्य क्लिक् क्षेत्राणां कृते सर्वान् विकल्पान् परितः भवति तथा च अधिकप्रयोज्यरूपस्य ।

तिथि सीमा

इत्यस्मै सर्वे समयाः प्रशान्तमानकसमयः (GMT -08:00) इति दर्शिताः सन्ति ।

पाठक्षेत्रम्

आवश्यकतानुसारं उपरि क्षेत्रस्य वर्णनार्थं सहायतापाठस्य अवरोधः।

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

• विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
• विकल्पद्वयं अपि परीक्ष्य प्रपत्रपरिणामेषु समाविष्टं कर्तुं शक्यते

परिवर्तनं रक्षतु निरसयतु

स्तम्भित रूप

स्वस्य प्रपत्रस्य HTML मध्ये योजयन्तु .form-stackedततः तेषां वामभागे न अपितु तेषां क्षेत्राणां उपरि लेबल् भवन्ति । यदि भवतः रूपाणि लघु भवन्ति अथवा भवतः समीपे गुरुतररूपाणां कृते निवेशस्तम्भद्वयं भवति तर्हि एतत् महत् कार्यं करोति ।

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

X-बृहत् इनपुट

विचि

१ २ ३ ४ ५

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

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

• विकल्पः एकः एषः सः च—अवश्यं समावेशयन्तु यत् एतत् किमर्थं महान् अस्ति
• विकल्पद्वयं अपि परीक्ष्य प्रपत्रपरिणामेषु समाविष्टं कर्तुं शक्यते

नोट्: लेबल् बहु बृहत्तरस्य क्लिक् क्षेत्राणां कृते सर्वान् विकल्पान् परितः भवति तथा च अधिकप्रयोज्यरूपस्य ।

परिवर्तनं रक्षतु निरसयतु

बटन्स्

रूढिरूपेण बटन्-इत्यस्य उपयोगः क्रियाणां कृते भवति यदा तु लिङ्क्-इत्यस्य उपयोगः वस्तुनां कृते भवति । यथा, "Download" इति बटनं भवितुम् अर्हति तथा च "recent activity" इति लिङ्क् भवितुम् अर्हति ।

सर्वे बटन्स् पूर्वनिर्धारितरूपेण हल्के धूसरशैल्याः भवन्ति, परन्तु नीलवर्णीयः .primaryवर्गः उपलभ्यते । प्लस्, स्वकीयानि शैल्यानि रोलिंग् करणं सुलभं peasy अस्ति।

उदाहरण बटन

बटनशैल्याः प्रयुक्तेन सह किमपि प्रयोक्तुं .btnशक्यन्ते । सामान्यतया भवान् एतानि केवलं a, button, चयनं च inputतत्त्वेषु प्रयोक्तुं इच्छति । अत्र कथं दृश्यते :

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

आडम्बरपूर्णानि बृहत्तराणि वा लघुतराणि वा बटनानि? तत्र अस्ति !

अक्षम अवस्था

ये बटन्स् सक्रियाः न सन्ति अथवा एकेन वा अन्येन कारणेन एप्-द्वारा अक्षमम् अस्ति, तेषां कृते अक्षम-स्थितिं उपयुज्यताम् । तत् .disabledलिङ्कानां :disabledकृते buttonतत्त्वानां कृते च।

लिङ्कानि

बटन्स्

किम् इति

अस्माकं शीर्षपट्टिका एकः नियतपट्टिका अस्ति यस्मिन् वेबसाइट् इत्यस्य लोगो अथवा नाम, प्राथमिकं नेविगेशनं, अन्वेषणप्रपत्रं च भवति ।

अनुकूलनीयम्

अन्तः सर्वे तत्त्वा:, सम्पूर्णं च शीर्षपट्टिका अपि, वैकल्पिकम् अस्ति । भवान् एकं लोगो/नाम, nav, अन्वेषणं, गौणं च nav—अथवा तस्य कोऽपि संयोजनं समावेशयितुं चयनं कर्तुं शक्नोति।

ड्रॉपडाउन्स शामिल हैं

मुख्यमार्गदर्शनस्य भागत्वेन वयं भवतः कृते भवतः nav मध्ये dropdowns योजयितुं क्षमताम् अन्तर्भूतवन्तः। उपरि (दक्षिण-संरेखितम्) द्वितीयकं nav पश्यन्तु यत् एतत् कथं कृतम् इति ज्ञातुं शक्नुवन्ति ।

टैब एवं गोलियाँ

एकं सरलं माध्यमिकं नेविगेशनं रचयन्तु 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> इति

• गृहम्‌
• रूपरेखा
• सन्देशाः
• सेटिंग्स्
• संपर्कः

<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 द्वारा प्रेरित अल्ट्रा सरल एवं न्यूनतम शैली पृष्ठांकन। विशालः खण्डः कठिनः त्यक्तुं शक्यते, सुलभतया स्केल-करणीयः, बृहत् क्लिक्-क्षेत्राणि च प्रदाति ।

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

मूलभूतसचेतनाः

क्रियायाः विफलतां, सम्भाव्यविफलतां, सफलतां वा प्रकाशयितुं एकपङ्क्तिसन्देशाः । विशेषतः रूपाणां कृते उपयोगी भवति।

सन्देशान् अवरुद्धं कुर्वन्तु

किञ्चित् व्याख्यानस्य आवश्यकतां विद्यमानानाम् सन्देशानां कृते अस्माकं कृते अनुच्छेदशैलीसचेतनाः सन्ति । एते दीर्घतरदोषसन्देशान् बुदबुदातुं, लम्बितक्रियायाः विषये उपयोक्तारं चेतयितुं, अथवा केवलं पृष्ठे अधिकबोधार्थं सूचनां प्रस्तुतुं परिपूर्णाः सन्ति ।

मोडल्स्

मोडल्स्—संवादाः अथवा प्रकाशपेटिकाः—तेषु परिस्थितिषु सन्दर्भक्रियाणां कृते महान् भवन्ति यत्र पृष्ठभूमिसन्दर्भस्य निर्वाहः महत्त्वपूर्णः भवति ।

पोपोवर्स इति

विन्यासं प्रभावितं विना पृष्ठाय उपपाठसूचनाः प्रदातुं popovers इत्यस्य उपयोगं कुर्वन्तु ।

Bootstrap Preboot इत्यनेन सह निर्मितम् आसीत् , यत् Less इत्यनेन सह उपयोगाय मिक्सिन्-चरानाम् एकः मुक्त-स्रोत-पैकः अस्ति , यत् द्रुततर-सुलभ-जाल-विकासाय CSS-प्रीप्रोसेसरः अस्ति

Bootstrap मध्ये वयं Preboot इत्यस्य उपयोगं कथं कृतवन्तः तथा च यदि भवान् स्वस्य अग्रिमे परियोजनायां Less चालयितुं चयनं करोति तर्हि भवान् कथं तस्य उपयोगं कर्तुं शक्नोति इति पश्यन्तु ।

तस्य उपयोगः कथं करणीयः

Bootstrap इत्यस्य Less चरस्य, mixins इत्यस्य, CSS मध्ये nesting इत्यस्य च पूर्णतया उपयोगं कर्तुं स्वस्य ब्राउजर् मध्ये javascript मार्गेण एतस्य विकल्पस्य उपयोगं कुर्वन्तु ।

<link rel="शैलीपत्रिका/कम" प्रकार="पाठ/css" href="कम/बूटस्ट्रैप.कम" मीडिया="सर्व" /> rel = "शैलीपत्रक/कम" प्रकार = "पाठ/css" href = "कम/बूटस्ट्रैप.कम" मीडिया = "सर्व" />    
<script type = "पाठ/जावास्क्रिप्ट" src = "js/less-1.0.41.min.js" ></script>  

.js समाधानं न अनुभूयते वा? Less Mac app इत्यस्य प्रयोगं कुर्वन्तु अथवा यदा भवान् स्वस्य कोडं परिनियोजयति तदा संकलनार्थं Node.js इत्यस्य उपयोगं कुर्वन्तु।

किं समाविष्टम् अस्ति

अत्र Bootstrap इत्यस्य भागत्वेन Twitter Bootstrap इत्यस्मिन् किं किं समाविष्टम् अस्ति तस्य केचन मुख्यविषयाणि सन्ति। डाउनलोड् कर्तुं अधिकं ज्ञातुं च Bootstrap वेबसाइट् अथवा Github परियोजनापृष्ठं प्रति गच्छन्तु ।

वर्ण चर

Less इत्यस्मिन् चराः भवतः CSS शिरोवेदनामुक्तस्य परिपालनाय अद्यतनीकरणाय च परिपूर्णाः सन्ति । यदा भवान् वर्णमूल्यं वा बहुधा उपयुज्यमानं मूल्यं वा परिवर्तयितुम् इच्छति तदा एकस्मिन् स्थाने अद्यतनं कुर्वन्तु ततः भवान् सेट् भवति ।

// लिङ्कानि
@ लिंकरंग : # 8b59c2;         
@ linkColorHover : अंधेरा ( @ linkColor     , 10 ) ; 
// ग्रेज
@ काला : # 000;             
@ grayDark :           हल्के ( @ काला , 25 %); 
@ धूसर :               हल्के ( @ काला , 50 %); 
@ grayLight :          हल्के ( @ काला , 70 %); 
@ grayLighter :        हल्के ( @ काला , 90 %); 
@ श्वेत : # fff;             
// उच्चारण रंग
@ नीला : # 08b5fb ;              
@ हरे : # 46a546 ;             
@ लाल : # 9d261d ;               
@ पीला : # ffc40d ;            
@ नारंगी : # f89406 ;            
@ गुलाबी : # c3325f ;              
@ बैंगनी : # 7a43b6 ;            
// आधाररेखा
@ आधाररेखा : 20px ;          

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

Less इत्यनेन CSS इत्यस्य सामान्यवाक्यविन्यासस्य अतिरिक्तं अन्यां टिप्पणीशैली अपि प्रदत्ता अस्ति /* ... */।

// एषा टिप्पणी अस्ति
/* एषा अपि टिप्पणी */

वाज़ू को मिश्रित करता है

Mixins मूलतः CSS कृते includes अथवा partials भवन्ति, येन भवन्तः कोडस्य एकं खण्डं एकस्मिन् संयोजयितुं शक्नुवन्ति । ते विक्रेता उपसर्गयुक्तगुणानां कृते महान् सन्ति यथा box-shadow, पार-ब्राउजर-ढालः, फन्ट्-स्तम्भः, इत्यादीनां कृते । अधः Bootstrap इत्यनेन सह समाविष्टानां mixins इत्यस्य नमूना अस्ति ।

फॉन्ट स्टैक

# फॉन्ट { .
  . आशुलिपि ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) { .     
    font - आकार : @ आकार ; 
    font - वजन : @ भार ; 
    रेखा - ऊर्ध्वता : @lineHeight ; 
  } .
  . sans - serif ( @भार : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    font - family : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , sans - serif ;   
    font - आकार : @ आकार ; 
    font - वजन : @ भार ; 
    रेखा - ऊर्ध्वता : @lineHeight ; 
  } .
  . serif ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) { .     
    font - family : "जॉर्जिया" , टाइम्स न्यू रोमन , टाइम्स , sans - serif ;     
    font - आकार : @ आकार ; 
    font - वजन : @ भार ; 
    रेखा - ऊर्ध्वता : @lineHeight ; 
  } .
  . monospace ( @ भार : सामान्य , @ आकार : 12px , @ lineHeight : 20px ) { .     
    font - family : "मोनाको" , कूरियर नया , एकस्थान ;   
    font - आकार : @ आकार ; 
    font - वजन : @ भार ; 
    रेखा - ऊर्ध्वता : @lineHeight ; 
  } .
} .

ढालः

# ढाल { .
  . क्षैतिज ( @ startColor : # 555, @ अंत रंग: # 333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    background - repeat : पुनरावृत्ति - x ;
    पृष्ठभूमि - छवि : - khtml - ढाल ( रैखिक , बाएं शीर्ष , दाएं शीर्ष , से ( @startColor ), to ( @endColor )); // कोंक्वेरो   
    पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( बाएं , @ startColor , @endColor ); // FF 3.6+ इति    
    पृष्ठभूमि - छवि : - ms - रैखिक - ढाल ( बाएं , @ startColor , @endColor ); // आईई१०    
    पृष्ठभूमि - छवि : - वेबकिट - ढाल ( रैखिक , बाएं शीर्ष , दाएं शीर्ष , रंग - रोक ( 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 ); // IE8+ इति  
    फ़िल्टर : ई (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', ढाल प्रकार = 1)" , @ startColor , @endColor )); // IE6 एवं IE7 
    पृष्ठभूमि - छवि : रैखिक - ढाल ( बाएं , @ startColor , @endColor ); // ले मानक   
  } .
  . ऊर्ध्वाधर ( @ startColor : # 555, @ endColor: # 333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    background - repeat : पुनरावृत्ति - x ;
    पृष्ठभूमि - छवि : - khtml - ढाल ( रैखिक , बाएं ऊपर , बाएं नीचे , से ( @startColor ), to ( @endColor )); // कोंक्वेरो   
    पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( @ startColor , @endColor ); // FF 3.6+ इति   
    पृष्ठभूमि - छवि : - ms - रैखिक - ढाल ( @ startColor , @endColor ); // आईई१०   
    पृष्ठभूमि - छवि : - वेबकिट - ढाल ( रैखिक , बाएं ऊपर , बाएं नीचे , रंग - रोक ( 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 ); // IE8+ इति  
    फ़िल्टर : ई (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', ढाल प्रकार = 0)" , @ startColor , @ endColor )); // IE6 एवं IE7 
    पृष्ठभूमि - छवि : रैखिक - ढाल ( @ startColor , @endColor ); // मानकम्  
  } .
  . दिशात्मक ( @ startColor : # 555, @ endColor: # 333, @ deg: 45deg) { 
    ...
  } .
  . ऊर्ध्वाधर - तीन - रंग ( @ startColor : # 00b3ee, @ midColor: # 7a43b6, @ colorStop: 0.5, @ endColor: # c3325f) { 
    ...
  } .
} .

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

आडम्बरं प्राप्नुवन्तु तथा च अधोलिखितवत् लचीलानि शक्तिशालिनः च मिक्सिन् जनयितुं किञ्चित् गणितं कुर्वन्तु।

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