Etiam porta sem malesuada magna mollis euismod। Maecenas faucibus mollis interdum। Morbi leo risus, porta ac consectetur ac, vestibulum at eros।
ग्रिड प्रणाली मानक 940px रक वा आफ्नो रोल
पूर्वनिर्धारित ग्रिड
Bootstrap को भागको रूपमा प्रदान गरिएको पूर्वनिर्धारित ग्रिड प्रणाली 940px चौडा 16-स्तम्भ ग्रिड हो। यो लोकप्रिय 960 ग्रिड प्रणालीको स्वाद हो, तर बायाँ र दायाँ छेउमा अतिरिक्त मार्जिन/प्याडिङ बिना।
उदाहरण ग्रिड मार्कअप
यहाँ देखाइए अनुसार, आधारभूत लेआउट दुई "स्तम्भहरू" सँग सिर्जना गर्न सकिन्छ, प्रत्येकले हाम्रो ग्रिड प्रणालीको भागको रूपमा परिभाषित गरेका 16 आधारभूत स्तम्भहरूको संख्यामा फैलिएको छ। थप विविधताहरूको लागि तलका उदाहरणहरू हेर्नुहोस्।
- <div class="row"> वर्ग = "पङ्क्ति" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
२
२
२
२
२
२
२
२
३
३
३
३
३
१
४
४
४
४
४
६
६
८
८
५
११
१६
अफसेटिङ स्तम्भहरू
४
८ अफसेट ४
४ अफसेट ४
४ अफसेट ४
५ अफसेट ३
५ अफसेट ३
१० अफसेट ६
लेआउट आधारभूत टेम्प्लेटहरू वेबपृष्ठहरू सिर्जना गर्न
निश्चित लेआउट
कुनै पनि साइट वा पृष्ठको लागि आधारभूत 940px चौडा, केन्द्रित कन्टेनर लेआउट।
- <body>
- <div वर्ग = "कन्टेनर" >
- ...
- </div>
- </body>
तरल लेआउट
न्यूनतम र अधिकतम चौडाइ र बायाँ-हात साइडबार भएको लचिलो तरल वा तरल पृष्ठ संरचना। अनुप्रयोगहरूको लागि उत्कृष्ट।
- <body>
- <div वर्ग = "कन्टेनर-तरल पदार्थ" >
- <div वर्ग = "साइडबार" >
- ...
- </div>
- <div वर्ग = "सामग्री" >
- ...
- </div>
- </div>
- </body>
टाइपोग्राफी शीर्षकहरू, अनुच्छेदहरू, सूचीहरू, र अन्य इनलाइन प्रकार तत्वहरू
शीर्षक र प्रतिलिपि
तपाइँको वेबपृष्ठहरु को संरचना को लागी एक मानक टाइपोग्राफिक पदानुक्रम।
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>
विविध। तत्वहरू
जोड, ठेगाना, र संक्षिप्त रूपहरू प्रयोग गर्दै
<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.
ठेगानाहरू
तत्व को addressलागि प्रयोग गरिएको छ — तपाईंले अनुमान गर्नुभयो! — ठेगानाहरू। यो कस्तो देखिन्छ यहाँ छ:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
नोट: कुनै पनि शैलीहरू लागू नगरी वास्तविक जीवनमा पढिएको सामग्रीलाई ठीकसँग संरचना गर्नका लागि प्रत्येक रेखा addressरेखा-ब्रेक ( ) सँग अन्त्य हुनुपर्छ ।<br />
संक्षिप्त रूपहरू
संक्षिप्त रूप र परिवर्णी शब्दहरूको लागि, abbrट्याग प्रयोग गर्नुहोस् ( HTML5acronym मा बहिष्कृत गरिएको छ )। ट्याग भित्र शर्टह्यान्ड फारम राख्नुहोस् र पूरा नामको लागि शीर्षक सेट गर्नुहोस्।
ब्लककोटहरू
<blockquote> <p> <cite>
blockquoteआफ्नो वरपर paragraphर citeट्यागहरू लपेट्न निश्चित हुनुहोस् । स्रोत उद्धृत गर्दा, citeतत्व प्रयोग गर्नुहोस्। CSS ले स्वचालित रूपमा em ड्यास (—) को साथ नामको प्रस्तावना गर्नेछ।
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
डा. जुलियस हिबर्ट
सूचीहरू
क्रमरहित<ul>
- जेरेमी बिक्सबी
- रोबर्ट डेजर
- जोस वाशिंगटन
- एन्टोन क्याप्रेसी
- मेरो टोली साथीहरू
- जर्ज कास्टान्जा
- जेरी सेनफिल्ड
- Cosmo Kramer
- इलेन बेनिस
- नया मान्छे
- जोन जेकब
- पल पियर्स
- केभिन गार्नेट
अनस्टाइल<ul.unstyled>
- जेरेमी बिक्सबी
- रोबर्ट डेजर
- जोस वाशिंगटन
- एन्टोन क्याप्रेसी
- मेरो टोली साथीहरू
- जर्ज कास्टान्जा
- जेरी सेनफिल्ड
- Cosmo Kramer
- इलेन बेनिस
- नया मान्छे
- जोन जेकब
- पल पियर्स
- केभिन गार्नेट
आदेश<ol>
- जेरेमी बिक्सबी
- रोबर्ट डेजर
- जोस वाशिंगटन
- एन्टोन क्याप्रेसी
- मेरो टोली साथीहरू
- जर्ज कास्टान्जा
- जेरी सेनफिल्ड
- Cosmo Kramer
- इलेन बेनिस
- नया मान्छे
- जोन जेकब
- पल पियर्स
- केभिन गार्नेट
विवरण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 class="common-table"> वर्ग = "सामान्य तालिका" >
- ...
- </table>
उदाहरण: जेब्रा-धारीदार
जेब्रा-स्ट्रिपिङ थपेर आफ्नो टेबुलहरूसँग थोरै फेन्सी प्राप्त गर्नुहोस्—केवल .zebra-stripedकक्षा थप्नुहोस्।
| # | पहिलो नाम | थर | भाषा |
|---|---|---|---|
| १ | केही | एक | अंग्रेजी |
| २ | जो | छ प्याक | अंग्रेजी |
| ३ | स्टु | दाँत | कोड |
- <table class="common-table zebra-striped"> वर्ग = "सामान्य-टेबल जेब्रा-धारीदार" >
- ...
- </table>
उदाहरण: Zebra-striped w/ TableSorter.js
अघिल्लो उदाहरण लिँदै, हामी jQuery र Tablesorter प्लगइन मार्फत क्रमबद्ध कार्यक्षमता प्रदान गरेर हाम्रो तालिकाहरूको उपयोगिता सुधार गर्छौं । क्रम परिवर्तन गर्न कुनै पनि स्तम्भको हेडरमा क्लिक गर्नुहोस्।
| # | पहिलो नाम | थर | भाषा |
|---|---|---|---|
| १ | तपाईको | एक | अंग्रेजी |
| २ | जो | छ प्याक | अंग्रेजी |
| ३ | स्टु | दाँत | कोड |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <स्क्रिप्ट प्रकार = "टेक्स्ट/जाभास्क्रिप्ट" >
- $ ( कागजात )। तयार ( प्रकार्य () {
- $ ( "तालिका # क्रम तालिका उदाहरण" )। टेबलसोर्टर ( { क्रमबद्ध सूची : [[ 1 , 0 ]]} );
- });
- </script>
- <तालिका वर्ग = "सामान्य-टेबल जेब्रा-धारीदार" >
- ...
- </table>
फारमहरू
पूर्वनिर्धारित शैलीहरू
सबै फारमहरूलाई पढ्न योग्य र मापनयोग्य तरिकामा प्रस्तुत गर्न पूर्वनिर्धारित शैलीहरू दिइन्छ। शैलीहरू पाठ इनपुटहरू, चयन सूचीहरू, पाठ क्षेत्रहरू, रेडियो बटनहरू र चेकबक्सहरू, र बटनहरूका लागि प्रदान गरिएका छन्।
स्ट्याक्ड फारमहरू
तपाईंको फारमको HTML मा थप्नुहोस् .form-stackedर तपाईंसँग तिनीहरूको बायाँको सट्टा तिनीहरूको फिल्डको शीर्षमा लेबलहरू हुनेछन्। यदि तपाईंको फारमहरू छोटो छन् वा तपाईंसँग भारी फारमहरूको लागि इनपुटहरूको दुई स्तम्भहरू छन् भने यसले राम्रो काम गर्दछ।
बटनहरू
कन्वेंशनको रूपमा, बटनहरू कार्यहरूको लागि प्रयोग गरिन्छ जबकि लिङ्कहरू वस्तुहरूको लागि प्रयोग गरिन्छ। उदाहरण को लागी, "डाउनलोड" एक बटन हुन सक्छ र "हालको गतिविधि" एक लिङ्क हुन सक्छ।
सबै बटनहरू हल्का खैरो शैलीमा पूर्वनिर्धारित छन्, तर नीलो .primaryवर्ग उपलब्ध छ। साथै, तपाईंको आफ्नै शैलीहरू घुमाउन सजिलो छ।
उदाहरण बटनहरू
बटन शैलीहरू लागू गरिएको कुनै पनि कुरामा लागू गर्न सकिन्छ .btn। सामान्यतया तपाइँ यसलाई मात्र a, button, र चयन inputतत्वहरूमा लागू गर्न चाहानुहुन्छ। यो कस्तो देखिन्छ यहाँ छ:
वैकल्पिक आकारहरू
फ्यान्सी ठूला वा सानो बटनहरू? यसमा छ!
असक्षम राज्य
एक वा अर्को कारणले एपद्वारा सक्रिय नभएका वा असक्षम गरिएका बटनहरूका लागि असक्षम अवस्था प्रयोग गर्नुहोस्। त्यो .disabledलिङ्कहरू र तत्वहरूको :disabledलागि हो ।button
लिङ्कहरू
बटनहरू
सफलता, चेतावनी, र त्रुटि सन्देश वा अलर्टहरूको लागि अलर्ट र त्रुटि शैलीहरू
आधारभूत अलर्टहरू
असफलता, सम्भावित असफलता, वा कार्यको सफलता हाइलाइट गर्नका लागि एक-लाइन सन्देशहरू। फारमहरूको लागि विशेष रूपमा उपयोगी।
सन्देशहरू रोक्नुहोस्
केही स्पष्टीकरण चाहिने सन्देशहरूको लागि, हामीसँग अनुच्छेद शैली अलर्टहरू छन्। यी लामो त्रुटि सन्देशहरू बबल गर्न, पेन्डिङ कार्यको प्रयोगकर्तालाई चेतावनी दिन, वा पृष्ठमा थप जोडको लागि जानकारी प्रस्तुत गर्नका लागि उपयुक्त छन्।
मोडल , टुलटिप्स, र पोपोभरहरूमा सामग्री प्रदर्शन गर्नका लागि Popovers कम्पोनेन्टहरू
मोडलहरू
मोडलहरू—संवाद वा लाइटबक्सहरू—पृष्ठभूमिको सन्दर्भ कायम राख्नु महत्त्वपूर्ण हुने परिस्थितिहरूमा प्रासंगिक कार्यहरूका लागि उत्कृष्ट हुन्छन्।
मोडल शीर्षक
×एउटा राम्रो शरीर...
उपकरण सुझावहरू
भ्रमित प्रयोगकर्तालाई सहयोग गर्न र सही दिशामा देखाउनको लागि 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 प्रयोग गर्नुहोस्।
Popover शीर्षक
कम सुपरचार्जको साथ बुटस्ट्र्याप प्रयोग गरेर तपाईंको CSS चरहरू, मिक्सिनहरू र प्रकार्यहरूसँग
बुटस्ट्र्याप प्रीबुटसँग बनाइएको थियो , मिक्सिन र भेरिएबलहरूको खुला स्रोत प्याक Less , छिटो र सजिलो वेब विकासको लागि CSS प्रिप्रोसेसरसँग संयोजनमा प्रयोग गर्न सकिन्छ ।
हामीले बुटस्ट्र्यापमा प्रीबुट कसरी प्रयोग गर्यौं भनेर जाँच गर्नुहोस् र तपाईंले आफ्नो अर्को प्रोजेक्टमा कम चलाउन रोज्नु पर्छ भने तपाईंले यसलाई कसरी प्रयोग गर्न सक्नुहुन्छ।
यसलाई कसरी प्रयोग गर्ने
तपाईको ब्राउजरमा जाभास्क्रिप्ट मार्फत बुटस्ट्र्यापको कम चर, मिक्सिन, र CSS मा नेस्टिङको पूर्ण प्रयोग गर्न यो विकल्प प्रयोग गर्नुहोस्।
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "सबै" />
- <स्क्रिप्ट प्रकार = "text/javascript" src = "js/less-1.0.41.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 ;
- // बेसलाइन
- @baseline : 20px ;
टिप्पणी गर्दै
/* ... */कमले 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
- - ms - फिल्टर : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- फिल्टर : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 र IE7
- पृष्ठभूमि - छवि : रेखीय - ढाँचा ( बायाँ , @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
- - ms - फिल्टर : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- फिल्टर : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 र IE7
- पृष्ठभूमि - छवि : रेखीय - ढाँचा ( @startColor , @endColor ); // मानक
- }
- । दिशात्मक ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- । ठाडो - तीन - रंग ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
सञ्चालन र ग्रिड प्रणाली
फेन्सी प्राप्त गर्नुहोस् र तलको जस्तै लचिलो र शक्तिशाली मिश्रणहरू उत्पन्न गर्न केही गणित प्रदर्शन गर्नुहोस्।
- // ग्रिडिट्युड
- @gridColumns : १६ ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // ग्रिड प्रणाली
- । कन्टेनर {
- चौडाई : @siteWidth ;
- मार्जिन : ० स्वतः ;
- । clearfix ();
- }
- । स्तम्भहरू ( @columnSpan : 1 ) {
- प्रदर्शन : इनलाइन ;
- फ्लोट : बायाँ ;
- चौडाइ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- मार्जिन - बायाँ : @gridGutterWidth ;
- &: पहिलो - बच्चा {
- मार्जिन - बायाँ : 0 ;
- }
- }
- । अफसेट ( @columnOffset : 1 ) {
- मार्जिन - बायाँ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! महत्त्वपूर्ण ;
- }