बुटस्ट्र्याप, ट्विटरबाट

बुटस्ट्र्याप ट्विटरबाट वेब एप्स र साइटहरूको विकास किकस्टार्ट गर्न डिजाइन गरिएको टुलकिट हो।
यसले टाइपोग्राफी, फारमहरू, बटनहरू, तालिकाहरू, ग्रिडहरू, नेभिगेसन, र थपका लागि आधार CSS र HTML समावेश गर्दछ।

बेवकूफ चेतावनी: बुटस्ट्र्याप लेससँग बनाइएको छ र आधुनिक ब्राउजरहरूलाई दिमागमा राखेर गेट बाहिर काम गर्न डिजाइन गरिएको थियो।

CSS हटलिङ्क गर्नुहोस्

छिटो र सजिलो सुरुवातको लागि, यो स्निपेटलाई आफ्नो वेबपेजमा प्रतिलिपि गर्नुहोस्।

यसलाई कम प्रयोग गर्नुहोस्

कम प्रयोग गर्ने प्रशंसक? कुनै समस्या छैन, केवल रेपो क्लोन गर्नुहोस् र यी लाइनहरू थप्नुहोस्:

GitHub मा फोर्क

Github मा आधिकारिक बुटस्ट्र्याप रेपोको साथ डाउनलोड, फोर्क, पुल, फाइल मुद्दाहरू, र थप।

GitHub मा बुटस्ट्र्याप »

इतिहास

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

Twitter मा धेरै ईन्जिनियरहरूको सहयोग र प्रतिक्रियाको साथ, बुटस्ट्र्यापले आधारभूत शैलीहरू मात्र होइन, तर थप सुरुचिपूर्ण र टिकाऊ फ्रन्ट-एन्ड डिजाइन ढाँचाहरू समावेश गर्नको लागि महत्त्वपूर्ण रूपमा बढेको छ।

dev.twitter.com मा थप पढ्नुहोस् ›

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

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

पछिल्लो सफारी
पछिल्लो Google Chrome
फायरफक्स ४+
इन्टरनेट एक्सप्लोरर 7+
ओपेरा 11

के समावेश छ

बुटस्ट्र्याप कम्पाइल गरिएको CSS, uncompiled, र उदाहरण टेम्प्लेटहरूको साथ पूरा हुन्छ।

सबै मौलिक .less फाइलहरू
पूर्णतया कम्पाइल गरिएको र मिनिफाइड CSS
स्टाइल गाइड कागजात पूरा गर्नुहोस्
उदाहरण पृष्ठ टेम्प्लेट (छिट्टै आउन थप)

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

Bootstrap को भागको रूपमा प्रदान गरिएको पूर्वनिर्धारित ग्रिड प्रणाली 940px चौडा 16-स्तम्भ ग्रिड हो। यो लोकप्रिय 960 ग्रिड प्रणालीको स्वाद हो, तर बायाँ र दायाँ छेउमा अतिरिक्त मार्जिन/प्याडिङ बिना।

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

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

<div वर्ग = "पङ्क्ति" > 
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

१

२

३

१

४

१/३

२/३

४

६

८

५

११

१६

अफसेटिङ स्तम्भहरू

४

८ अफसेट ४

१/३ अफसेट २/३ सेकेन्ड

४ अफसेट ४

५ अफसेट ३

१० अफसेट ६

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

पूर्वनिर्धारित र सरल 940px-चौडा, एकल द्वारा प्रदान गरिएको कुनै पनि वेबसाइट वा पृष्ठको लागि केन्द्रित लेआउट <div.container>।

<body>
  <div वर्ग = "कन्टेनर" > 
    ...
  </div>
</body>

तरल लेआउट

न्यूनतम र अधिकतम चौडाइ र बायाँ-हात साइडबारको साथ वैकल्पिक, लचिलो तरल पृष्ठ संरचना। अनुप्रयोगहरू र कागजातहरूको लागि उत्कृष्ट।

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

शीर्षक र प्रतिलिपि

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

सम्पूर्ण टाइपोग्राफिक ग्रिड हाम्रो preboot.less फाइलमा दुई कम चरहरूमा आधारित छ: @basefontर @baseline। पहिलो आधार फन्ट-साइज भर प्रयोग गरिन्छ र दोस्रो आधार रेखा-उचाइ हो।

हामी ती चरहरू, र केही गणितहरू प्रयोग गर्छौं, हाम्रा सबै प्रकारका मार्जिन, प्याडिङहरू, र रेखा-उचाइहरू सिर्जना गर्न।

h1। शीर्षक १

h2। शीर्षक २

h3। शीर्षक ३

h4। हेडिङ ४

h5। हेडिङ ५

h6। हेडिङ ६

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

Nullam quis risus eget urna mollis ornare vel eu leo। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit।

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

विविध। तत्वहरू

जोड, ठेगाना, र संक्षिप्त रूपहरू प्रयोग गर्दै

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

कहिले प्रयोग गर्ने

एम्पेसिस ट्यागहरू ( <strong>र <em>) यसको वरपरको प्रतिलिपिसँग सम्बन्धित शब्द वा वाक्यांशको थप महत्त्व वा जोड संकेत गर्न प्रयोग गरिनुपर्छ। <strong>महत्त्व र तनाव जोडको <em>लागि प्रयोग गर्नुहोस् ।

एक अनुच्छेद मा जोड

Fusce dapibus , Tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus। Maecenas faucibus mollis interdum। Nulla vitae elit libero, a pharetra augue.

नोट:<b> HTML5 मा प्रयोग गर्न र ट्यागहरू गर्न अझै पनि ठीक छ <i>र तिनीहरूलाई क्रमशः बोल्ड र इटालिक स्टाइल गर्न आवश्यक छैन (यद्यपि यदि त्यहाँ अधिक अर्थपूर्ण तत्व छ भने, यसलाई प्रयोग गर्नुहोस्)। <b>शब्दहरू वा वाक्यांशहरूलाई थप महत्त्व नदिई हाइलाइट गर्नको लागि <i>हो, जबकि प्रायः आवाज, प्राविधिक शब्दहरू, इत्यादिका लागि हो।

ठेगानाहरू

<address>तत्व यसको निकटतम पुर्खा, वा काम को सम्पूर्ण शरीर को लागी सम्पर्क जानकारी को लागी प्रयोग गरिन्छ । यो कस्तो देखिन्छ यहाँ छ:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

नोट: सामग्रीको ठीकसँग संरचना गर्नका लागि प्रत्येक रेखा <address>रेखा-ब्रेक ( <br />) वा ब्लक-लेभल ट्याग (जस्तै, ) मा बेरिएको हुनुपर्छ ।<p>

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

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

ब्लककोटहरू

<blockquote> <p> <small>

कसरी उद्धरण गर्ने

ब्लककोट समावेश गर्न, <blockquote>वरिपरि लपेट्नुहोस् <p>र <small>ट्याग गर्नुहोस्। तपाइँको स्रोत उद्धृत गर्न तत्व प्रयोग गर्नुहोस् <small>र तपाइँ —यसको अघि एक em ड्यास प्राप्त गर्नुहुनेछ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante venenatis dapibus posuere velit aliquet।
डा. जुलियस हिबर्ट

सूचीहरू

क्रमरहित`<ul>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat मा
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat मा
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

आदेश`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

विवरण`dl`

विवरण सूचीहरू: वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus।
Malesuada Porta: Etiam porta sem malesuada magna mollis euismod।

भवन तालिकाहरू

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

तालिकाहरू उत्कृष्ट छन् - धेरै चीजहरूको लागि। उत्कृष्ट तालिकाहरू, तथापि, उपयोगी, स्केलेबल, र पढ्न योग्य (कोड स्तरमा) हुन अलिकति मार्कअप प्रेम चाहिन्छ। यहाँ मद्दत गर्न केही सुझावहरू छन्।

सधैं आफ्नो स्तम्भ हेडरहरू यसरी बेर्नुहोस् <thead>कि पदानुक्रम <thead>> <tr>> हो <th>।

स्तम्भ हेडरहरू जस्तै, तपाईंको तालिकाको मुख्य सामग्रीहरू एकमा बेरिएको हुनुपर्छ <tbody>ताकि तपाईंको पदानुक्रम <tbody>> <tr>> हो <td>।

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

सबै तालिकाहरू पढ्न योग्यता सुनिश्चित गर्न र संरचना कायम राख्नको लागि केवल आवश्यक किनाराहरूसँग स्वचालित रूपमा स्टाइल गरिनेछ। अतिरिक्त वर्ग वा विशेषताहरू थप्न आवश्यक छैन।

#	पहिलो नाम	थर	भाषा
१	केही	एक	अंग्रेजी
२	जो	छ प्याक	अंग्रेजी
३	स्टु	दाँत	कोड

<table>
  ...
</table>

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

जेब्रा-स्ट्रिपिङ थपेर आफ्नो टेबुलहरूसँग थोरै फेन्सी प्राप्त गर्नुहोस्—केवल .zebra-stripedकक्षा थप्नुहोस्।

#	पहिलो नाम	थर	भाषा
१	केही	एक	अंग्रेजी
२	जो	छ प्याक	अंग्रेजी
३	स्टु	दाँत	कोड

नोट: Zebra-striping एक प्रगतिशील वृद्धि हो जुन पुराना ब्राउजरहरू जस्तै IE8 र तलका लागि उपलब्ध छैन।

<टेबल वर्ग = "जेब्रा-धारीदार" > 
...
</table>

उदाहरण: Zebra-striped w/ TableSorter.js

अघिल्लो उदाहरण लिँदै, हामी jQuery र Tablesorter प्लगइन मार्फत क्रमबद्ध कार्यक्षमता प्रदान गरेर हाम्रो तालिकाहरूको उपयोगिता सुधार गर्छौं । क्रम परिवर्तन गर्न कुनै पनि स्तम्भको हेडरमा क्लिक गर्नुहोस्।

#	पहिलो नाम	थर	भाषा
१	तपाईको	एक	अंग्रेजी
२	जो	छ प्याक	अंग्रेजी
३	स्टु	दाँत	कोड

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

फिक्स्ड शीर्षपट्टी

यो के हो

हाम्रो टपबार एक निश्चित पट्टी हो जुन वेबसाइटको लोगो वा नाम, प्राथमिक नेभिगेसन, र खोज फारम राख्छ।

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

भित्रका सबै तत्वहरू, र सम्पूर्ण टपबार पनि वैकल्पिक छन्। तपाईं लोगो/नाम, एनएभ, खोज, र माध्यमिक एनएभ वा त्यसको कुनै पनि संयोजन समावेश गर्न छनौट गर्न सक्नुहुन्छ।

ड्रपडाउनहरू समावेश छन्

मुख्य नेभिगेसनको भागको रूपमा, हामीले तपाईंको नेभिगेसनमा ड्रपडाउनहरू थप्ने क्षमता समावेश गरेका छौं। यो कसरी भयो भनेर हेर्नको लागि माथिको (दायाँ पङ्क्तिबद्ध) माध्यमिक एनएभि जाँच गर्नुहोस्।

नोट: कुनै पनि पृष्ठमा टपबार प्रयोग गर्दा, padding-top: 40px;तपाईंको body.

ट्याबहरू र गोलीहरू

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

हाम्रो खाता सेटिङ पृष्ठहरू र जस्तै सामग्रीको पृष्ठहरू बीच टगल गर्नका लागि प्रयोगकर्ता टाइमलाइनहरू जस्ता सामग्रीको उप-खण्डहरूको लागि उत्कृष्ट। ट्याब वा गोली शैलीहरूमा उपलब्ध छ।

<ul class = "ट्याबहरू" > 
  <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>

<ul class = "गोलीहरू" > 
  <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 वर्ग = "पृष्ठांकन" > 
  <ul>
    <li वर्ग = "पूर्व असक्षम" ><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><a href = "#" > ५ </a></li> 
    <li class = "next" ><a href = "#" > अर्को → </a></li>  
  </ul>
</div>

आधारभूत अलर्टहरू

div.alert-message

असफलता, सम्भावित असफलता, वा कार्यको सफलता हाइलाइट गर्नका लागि एक-लाइन सन्देशहरू। फारमहरूको लागि विशेष रूपमा उपयोगी।

पवित्र guacamole! उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनु भएको छैन।

ओह स्न्याप! यो र त्यो परिवर्तन गर्नुहोस् र फेरि प्रयास गर्नुहोस्।

राम्रो काम! तपाईंले यो चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो।

हेड अप! यो एक सतर्कता हो जसलाई तपाइँको ध्यान चाहिन्छ, तर यो अहिले सम्म ठूलो प्राथमिकता होइन।

सन्देशहरू रोक्नुहोस्

div.alert-message.block-message

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

पवित्र guacamole! यो एक चेतावनी हो! उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनु भएको छैन। Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्

ओह स्न्याप! तपाईंले त्रुटि पाउनुभयो! यो र त्यो परिवर्तन गर्नुहोस् र फेरि प्रयास गर्नुहोस्। Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit। Cras Mattis consectetur purus sit amet fermentum।

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्

राम्रो काम! तपाईंले यो चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum।

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्

मोडलहरू

मोडलहरू—संवाद वा लाइटबक्सहरू—पृष्ठभूमिको सन्दर्भ कायम राख्नु महत्त्वपूर्ण हुने परिस्थितिहरूमा प्रासंगिक कार्यहरूका लागि उत्कृष्ट हुन्छन्।

उपकरण सुझावहरू

भ्रमित प्रयोगकर्तालाई सहयोग गर्न र सही दिशामा देखाउनको लागि Twipsies धेरै उपयोगी छन्।

Lorem ipsum Dolar sit amet illo त्रुटि ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas। Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architectto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fuget quaevoltum voluptum quagetum

तल!

सही!

बायाँ!

माथि!

Popovers

लेआउटलाई असर नगरी पृष्ठमा सबटेक्स्टुअल जानकारी प्रदान गर्न popovers प्रयोग गर्नुहोस्।

बुटस्ट्र्याप प्रीबुटसँग बनाइएको थियो , मिक्सिन र भेरिएबलहरूको खुला स्रोत प्याक Less , छिटो र सजिलो वेब विकासको लागि CSS प्रिप्रोसेसरसँग संयोजनमा प्रयोग गर्न सकिन्छ ।

हामीले बुटस्ट्र्यापमा प्रीबुट कसरी प्रयोग गर्‍यौं भनेर जाँच गर्नुहोस् र तपाईंले आफ्नो अर्को प्रोजेक्टमा कम चलाउन रोज्नु पर्छ भने तपाईंले यसलाई कसरी प्रयोग गर्न सक्नुहुन्छ।

यसलाई कसरी प्रयोग गर्ने

तपाईको ब्राउजरमा जाभास्क्रिप्ट मार्फत बुटस्ट्र्यापको कम चर, मिक्सिन, र CSS मा नेस्टिङको पूर्ण प्रयोग गर्न यो विकल्प प्रयोग गर्नुहोस्।

<link rel = "stylesheet/less" href = "less/bootstrap.less" मिडिया = "सबै" />    
<script src = "js/less-1.1.3.min.js" ></script>

.js समाधान महसुस गर्नुहुन्न? लेस म्याक एप चलाएर हेर्नुहोस् वा कम्पाइल गर्न Node.js प्रयोग गर्नुहोस् जब तपाइँ आफ्नो कोड प्रयोग गर्नुहुन्छ।

के समावेश छ

यहाँ बुटस्ट्र्याप को भाग को रूप मा ट्विटर बुटस्ट्र्याप मा के शामिल छ को केहि हाइलाइटहरु छन्। डाउनलोड गर्न र थप जान्नको लागि बुटस्ट्र्याप वेबसाइट वा गिथब प्रोजेक्ट पृष्ठमा जानुहोस्।

चरहरू

कम मा चरहरू तपाईंको CSS टाउको दुखाइ मुक्त राख्न र अद्यावधिक गर्नका लागि उपयुक्त छन्। जब तपाइँ रङ मान वा बारम्बार प्रयोग हुने मान परिवर्तन गर्न चाहानुहुन्छ, यसलाई एक स्थानमा अपडेट गर्नुहोस् र तपाइँ सेट हुनुहुन्छ।

// लिङ्कहरू
@linkColor : #8b59c2;         
@linkColorHover :     गाढा ( @linkColor , 10 ); 
 
// ग्रे
@कालो : #000;             
@grayDark :           हल्का ( @black , 25 %); 
@ग्रे :               हल्का ( @कालो , 50 %); 
@grayLight :          हल्का ( @black , 70 %); 
@grayLighter :        हल्का ( @black , 90 %); 
@सेतो : #ffff ;             
 
// एक्सेन्ट रङहरू
@blue : #08b5fb;              
@हरियो : #46a546 ;             
@रातो : #9d261d ;               
@yellow : #ffc40d;            
@सुन्तला : #f89406 ;            
@गुलाबी : #c3325f ;              
@बैजनी : #7a43b6 ;            
 
// बेसलाइन ग्रिड
@basefont : 13px ;          
@baseline : 18px ;

टिप्पणी गर्दै

/* ... */कमले CSS को सामान्य वाक्य रचनाको अतिरिक्त टिप्पणी गर्ने अर्को शैली पनि प्रदान गर्दछ ।

// यो एक टिप्पणी हो
/* यो पनि कमेन्ट हो*/

वाजुलाई मिसाउँछ

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

फन्ट स्ट्याकहरू

#फन्ट {
  । लघुलेख ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    फन्ट साइज : @size ; _ 
    फन्ट - वजन : @weight ; 
    रेखा - उचाइ : @lineHeight ; 
  }
  । sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    फन्ट - परिवार : "हेल्भेटिका न्यु" , हेल्भेटिका , एरियल , सेन्स - सेरिफ ;   
    फन्ट साइज : @size ; _ 
    फन्ट - वजन : @weight ; 
    रेखा - उचाइ : @lineHeight ; 
  }
  । सेरिफ ( @weight : सामान्य , @size : 14px , @lineHeight : 20px ) {     
    फन्ट - परिवार : "जर्जिया" , टाइम्स न्यू रोमन , टाइम्स , सेन्स - सेरिफ ;     
    फन्ट साइज : @size ; _ 
    फन्ट - वजन : @weight ; 
    रेखा - उचाइ : @lineHeight ; 
  }
  । मोनोस्पेस ( @weight : सामान्य , @size : 12px , @lineHeight : 20px ) {     
    फन्ट - परिवार : "मोनाको" , कुरियर नयाँ , मोनोस्पेस ;   
    फन्ट साइज : @size ; _ 
    फन्ट - वजन : @weight ; 
    रेखा - उचाइ : @lineHeight ; 
  }
}

ग्रेडियन्टहरू

# ग्रेडियन्ट {
  । तेर्सो ( @startColor : #555, @endColor: #333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    पृष्ठभूमि - दोहोर्याउनुहोस् : दोहोर्याउनुहोस् - x ;
    पृष्ठभूमि - छवि : - khtml - ग्रेडियन्ट ( रैखिक , बायाँ शीर्ष , दायाँ शीर्ष , ( @startColor ) देखि ( @endColor ) सम्म ; // कन्क्वेरर   
    पृष्ठभूमि - छवि : - moz - रेखीय - ढाँचा ( बायाँ , @startColor , @endColor ); // FF ३.६+    
    पृष्ठभूमि - छवि : - एमएस - रेखीय - ढाँचा ( बायाँ , @startColor , @endColor ); // IE10    
    पृष्ठभूमि - छवि : - वेबकिट - ढाँचा ( रैखिक , बायाँ शीर्ष , दायाँ शीर्ष , रंग - रोक ( 0 %, @startColor ), रंग - रोक ( 100 %, @endColor )); // सफारी ४+, क्रोम २+    
    पृष्ठभूमि - छवि : - वेबकिट - रेखीय - ढाँचा ( बायाँ , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    पृष्ठभूमि - छवि : - ओ - रेखीय - ढाँचा ( बायाँ , @startColor , @endColor ); // ओपेरा 11.10    
    पृष्ठभूमि - छवि : रेखीय - ढाँचा ( बायाँ , @startColor , @endColor ); // ले मानक   
  }
  । ठाडो ( @startColor : #555, @endColor: #333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    पृष्ठभूमि - दोहोर्याउनुहोस् : दोहोर्याउनुहोस् - x ;
    पृष्ठभूमि - छवि : - khtml - ढाँचा ( रैखिक , बायाँ माथि , बायाँ तल , ( @startColor ) देखि ( @endColor ) सम्म ; // कन्क्वेरर   
    पृष्ठभूमि - छवि : - moz - रेखीय - ग्रेडियन्ट ( @startColor , @endColor ); // FF ३.६+   
    पृष्ठभूमि - छवि : - एमएस - रेखीय - ढाँचा ( @startColor , @endColor ); // IE10   
    पृष्ठभूमि - छवि : - वेबकिट - ढाँचा ( रैखिक , बायाँ माथि , बायाँ तल , रंग - रोक्नुहोस् ( 0 %, @startColor ), रंग - रोक्नुहोस् ( 100 %, @endColor )); // सफारी ४+, क्रोम २+    
    पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाँचा ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    पृष्ठभूमि - छवि : - ओ - रेखीय - ढाँचा ( @startColor , @endColor ); // ओपेरा 11.10   
    पृष्ठभूमि - छवि : रेखीय - ढाँचा ( @startColor , @endColor ); // मानक  
  }
  । दिशात्मक ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  । ठाडो - तीन - रंग ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

सञ्चालन र ग्रिड प्रणाली

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

// ग्रिडिट्युड
@gridColumns : १६ ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// ग्रिड प्रणाली
। कन्टेनर {
  चौडाई : @siteWidth ; 
  मार्जिन : ० स्वतः ;  
  । clearfix ();
}
। स्तम्भहरू ( @columnSpan : 1 ) {  
  चौडाइ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
। अफसेट ( @columnOffset : 1 ) {  
  मार्जिन - बायाँ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}