बूटस्ट्रॅप

बूटस्ट्रॅप, Twitter वरून

बूटस्ट्रॅप हे Twitter वरील टूलकिट आहे जे वेब अॅप्स आणि साइट्सच्या विकासासाठी किकस्टार्ट करण्यासाठी डिझाइन केलेले आहे.
यात टायपोग्राफी, फॉर्म, बटणे, टेबल्स, ग्रिड, नेव्हिगेशन आणि अधिकसाठी बेस CSS आणि HTML समाविष्ट आहे.

नर्ड अलर्ट: बूटस्ट्रॅप लेससह तयार केला आहे आणि आधुनिक ब्राउझर लक्षात घेऊन गेटच्या बाहेर काम करण्यासाठी डिझाइन केले आहे.

CSS ला हॉटलिंक करा

जलद आणि सर्वात सोपी सुरुवात करण्यासाठी, फक्त हे स्निपेट तुमच्या वेबपेजमध्ये कॉपी करा.

कमी सह वापरा

कमी वापरण्याचे चाहते? काही हरकत नाही, फक्त रेपो क्लोन करा आणि या ओळी जोडा:

GitHub वर काटा

Github वर अधिकृत बूटस्ट्रॅप रेपोसह डाउनलोड करा, काटा काढा, खेचा, फाइल समस्या आणि बरेच काही.

GitHub वर बूटस्ट्रॅप »

बूटस्ट्रॅप संक्षिप्त इतिहास, ब्राउझर समर्थन आणि बरेच काही बद्दल

इतिहास

Twitter च्या आधीच्या दिवसांमध्ये, अभियंते फ्रंट-एंड आवश्यकता पूर्ण करण्यासाठी त्यांना परिचित असलेल्या जवळजवळ कोणतीही लायब्ररी वापरत असत. ट्विटरच्या पहिल्या हॅकवीक दरम्यान सादर केलेल्या आव्हानांना उत्तर म्हणून बूटस्ट्रॅपची सुरुवात झाली आणि विकासाला वेग आला.

Twitter वरील अनेक अभियंत्यांच्या मदतीने आणि अभिप्रायाने, बूटस्ट्रॅपने केवळ मूलभूत शैलीच नव्हे तर अधिक मोहक आणि टिकाऊ फ्रंट-एंड डिझाइन पॅटर्नचा समावेश करण्यासाठी लक्षणीय वाढ केली आहे.

dev.twitter.com वर अधिक वाचा ›

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

क्रोम, सफारी, इंटरनेट एक्सप्लोरर आणि फायरफॉक्स सारख्या प्रमुख आधुनिक ब्राउझरमध्ये बूटस्ट्रॅपची चाचणी केली जाते आणि समर्थित आहे.

Chrome, Safari, Internet Explorer आणि Firefox मध्ये चाचणी आणि समर्थित
  • नवीनतम सफारी
  • नवीनतम Google Chrome
  • फायरफॉक्स 4+
  • इंटरनेट एक्सप्लोरर 7+

काय समाविष्ट आहे

बूटस्ट्रॅप संकलित CSS, uncompiled, आणि उदाहरण टेम्पलेट्ससह पूर्ण येतो.

  • सर्व मूळ .less फाइल्स
  • पूर्णपणे संकलित आणि लहान CSS
  • पूर्ण शैली मार्गदर्शक दस्तऐवजीकरण
  • उदाहरण पृष्ठ टेम्पलेट (अधिक लवकरच येणार आहे)

ग्रिड सिस्टम मानक 940px रॉक करा किंवा स्वतःचे रोल करा

डीफॉल्ट ग्रिड

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

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

येथे दर्शविल्याप्रमाणे, एक मूलभूत मांडणी दोन "स्तंभांसह" तयार केली जाऊ शकते, प्रत्येक 16 मूलभूत स्तंभांची संख्या व्यापून आम्ही आमच्या ग्रिड प्रणालीचा भाग म्हणून परिभाषित केले आहे. अधिक भिन्नतेसाठी खालील उदाहरणे पहा.

  1. <div class="row"> वर्ग = "पंक्ती" >
  2.   <div class = "span6 columns" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10 columns" > 
  6.     ...
  7.   </div>
  8. </div>
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
१
2
2
2
2
2
2
2
2
3
3
3
3
3
१
4
4
4
4
4
6
6
8
8
५
11
16

ऑफसेटिंग स्तंभ

4
8 ऑफसेट 4
4 ऑफसेट 4
4 ऑफसेट 4
5 ऑफसेट 3
5 ऑफसेट 3
10 ऑफसेट 6

वेबपृष्ठे तयार करण्यासाठी लेआउट मूलभूत टेम्पलेट्स

निश्चित मांडणी

साधारण 940px रुंद, कोणत्याही साइट किंवा पृष्ठासाठी केंद्रीत कंटेनर लेआउट.

  1. <body>
  2.   <div वर्ग = "कंटेनर" > 
  3.     ...
  4.   </div>
  5. </body>

द्रव लेआउट

किमान- आणि कमाल-रुंदी आणि डावीकडील साइडबार असलेली लवचिक द्रव किंवा द्रव पृष्ठ रचना. अॅप्ससाठी उत्तम.

  1. <body>
  2.   <div वर्ग = "कंटेनर-फ्लुइड" > 
  3.     <div वर्ग = "साइडबार" > 
  4.       ...
  5.     </div>
  6.     <div वर्ग = "सामग्री" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

टायपोग्राफी मथळे, परिच्छेद, सूची आणि इतर इनलाइन प्रकार घटक

मथळे आणि प्रत

तुमच्या वेबपृष्ठांची रचना करण्यासाठी एक मानक टायपोग्राफिक पदानुक्रम.

h1. मथळा १

h2. मथळा 2

h3. मथळा 3

h4. मथळा 4

h5. मथळा 5
h6. मथळा 6

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

नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

उदाहरण शीर्षकामध्ये उप-शीर्षक आहे…

विविध घटक

भर, पत्ते आणि संक्षेप वापरणे

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

कधी वापरायचे

एम्फॅसिस टॅग्ज ( <strong>आणि <em>) शब्द किंवा वाक्प्रचार त्याच्या सभोवतालच्या प्रतीशी संबंधित अतिरिक्त महत्त्व किंवा जोर दर्शविण्यासाठी वापरला जावा. <strong>महत्त्व आणि ताण भर <em>देण्यासाठी वापरा .

परिच्छेद मध्ये जोर

Fusce dapibus , टेलस 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>आणि तुम्हाला &mdash;त्यापूर्वी एक em डॅश मिळेल.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis dapibus posuere velit aliquet.

डॉ ज्युलियस हिबर्ट

याद्या

क्रमरहित<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
  • प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
  • नुल्ला volutpat aliquam velit
    • फॅसेलस आयकुलिस नेक
    • पुरूस सोडलेस ultricies
    • वेस्टिबुलम लाओरेट पोर्टिटर सेम
    • Ac tristique libero volutpat येथे
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • porttitor lorem Eget

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
  • प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
  • नुल्ला volutpat aliquam velit
    • फॅसेलस आयकुलिस नेक
    • पुरूस सोडलेस ultricies
    • वेस्टिबुलम लाओरेट पोर्टिटर सेम
    • Ac tristique libero volutpat येथे
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • porttitor lorem Eget

आज्ञा केली<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
  4. प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
  5. नुल्ला volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. porttitor lorem Eget

वर्णनdl

वर्णन याद्या
अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
Euismod
Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
मालेसुडा पोर्टा
Etiam porta sem malesuada magna mollis euismod.

टेबल्ससाठी , तुम्ही अंदाज लावला, सारणीबद्ध डेटा

बिल्डिंग टेबल

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

अनेक गोष्टींसाठी टेबल उत्तम आहेत. तथापि, उत्कृष्ट सारण्यांना उपयुक्त, स्केलेबल आणि वाचनीय (कोड स्तरावर) होण्यासाठी थोडे मार्कअप प्रेम आवश्यक आहे. मदत करण्यासाठी येथे काही टिपा आहेत.

तुमचे स्तंभ शीर्षलेख नेहमी <thead>अशा प्रकारे गुंडाळा की पदानुक्रम <thead>> <tr>> असेल <th>.

स्तंभ शीर्षलेखांप्रमाणेच, तुमच्या सारणीच्या मुख्य भागाची सामग्री एका मध्ये गुंडाळलेली असावी <tbody>जेणेकरून तुमची पदानुक्रम <tbody>> <tr>> असेल <td>.

उदाहरण: डीफॉल्ट सारणी शैली

वाचनीयता सुनिश्चित करण्यासाठी आणि संरचनेची देखभाल करण्यासाठी सर्व सारण्या आपोआप केवळ आवश्यक किनार्यांसह शैलीबद्ध केल्या जातील. अतिरिक्त वर्ग किंवा विशेषता जोडण्याची आवश्यकता नाही.

# पहिले नाव आडनाव इंग्रजी
१ काही एक इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड 
  1. <table class = "common-table" > 
  2.   ...
  3. </ टेबल>

उदाहरण: झेब्रा-पट्टेदार

झेब्रा-स्ट्रीपिंग जोडून आपल्या सारण्यांसह थोडे फॅन्सी मिळवा—फक्त .zebra-stripedवर्ग जोडा.

# पहिले नाव आडनाव इंग्रजी
१ काही एक इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड

टीप: झेब्रा-स्ट्रीपिंग ही एक प्रगतीशील सुधारणा आहे जी IE8 आणि त्याखालील जुन्या ब्राउझरसाठी उपलब्ध नाही.

  1. <टेबल वर्ग = "सामान्य-टेबल झेब्रा-स्ट्रीप" > 
  2. ...
  3. </ टेबल>

उदाहरण: झेब्रा-स्ट्रीप w/ TableSorter.js

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

# पहिले नाव आडनाव इंग्रजी
१ आपले एक इंग्रजी
2 जो सहा पॅक इंग्रजी
3 स्टु डेंट कोड 
  1. <script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <script > 
  3.   $ ( कार्य () { 
  4.     $ ( "टेबल#sortTableExample" ). टेबल्सॉर्टर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <टेबल वर्ग = "सामान्य-टेबल झेब्रा-स्ट्रीप" > 
  8.   ...
  9. </ टेबल>

फॉर्म

डीफॉल्ट शैली

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

उदाहरण फॉर्म आख्यायिका
येथे काही मूल्य
मदत मजकुराचा छोटा झलक
उदाहरण फॉर्म आख्यायिका
@
उदाहरण फॉर्म आख्यायिका
टीप: मोठ्या क्लिक क्षेत्रासाठी आणि अधिक वापरण्यायोग्य फॉर्मसाठी लेबले सर्व पर्यायांना घेरतात.
करण्यासाठी सर्व वेळा पॅसिफिक मानक वेळ (GMT -08:00) म्हणून दर्शविल्या जातात.
गरज असल्यास वरील फील्डचे वर्णन करण्यासाठी मदत मजकूराचा ब्लॉक.
 

स्टॅक केलेले फॉर्म

तुमच्या फॉर्मच्या HTML मध्ये जोडा .form-stackedआणि तुम्हाला त्यांच्या फील्डच्या डावीकडे ऐवजी शीर्षस्थानी लेबले असतील. जर तुमचे फॉर्म लहान असतील किंवा तुमच्याकडे जड फॉर्मसाठी इनपुटचे दोन कॉलम असतील तर हे उत्तम काम करते.

उदाहरण फॉर्म आख्यायिका
उदाहरण फॉर्म आख्यायिका
मदत मजकुराचा छोटा झलक
टीप: मोठ्या क्लिक क्षेत्रासाठी आणि अधिक वापरण्यायोग्य फॉर्मसाठी लेबले सर्व पर्यायांना घेरतात.
 

बटणे

एक नियम म्हणून, बटणे क्रियांसाठी वापरली जातात तर लिंक्स ऑब्जेक्टसाठी वापरली जातात. उदाहरणार्थ, "डाउनलोड" एक बटण असू शकते आणि "अलीकडील क्रियाकलाप" एक दुवा असू शकतो.

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

उदाहरणे बटणे

बटणाच्या शैली लागू केलेल्या कोणत्याही गोष्टीवर लागू केल्या जाऊ शकतात .btn. सामान्यत: तुम्हाला हे फक्त <a>, <button>, आणि निवडक <input>घटकांवर लागू करायचे आहे. ते कसे दिसते ते येथे आहे:

 

पर्यायी आकार

फॅन्सी मोठी किंवा लहान बटणे? त्यावर आहे!

प्राथमिक कृती कृती
प्राथमिक कृती कृती

अपंग राज्य

सक्रिय नसलेल्या किंवा एका कारणाने अॅपद्वारे अक्षम केलेल्या बटणांसाठी, अक्षम स्थिती वापरा. ते .disabledदुव्यांसाठी आणि :disabledघटकांसाठी आहे <button>.

दुवे

प्राथमिक कृती कृती

बटणे

 

यश, चेतावणी आणि त्रुटी संदेश किंवा सूचनांसाठी सूचना आणि त्रुटी शैली

मूलभूत सूचना

अपयश, संभाव्य अपयश किंवा कृतीचे यश हायलाइट करण्यासाठी एक-लाइन संदेश. फॉर्मसाठी विशेषतः उपयुक्त.

×

अरे स्नॅप! हे आणि ते बदला आणि पुन्हा प्रयत्न करा.

×

पवित्र गौकमोल! स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही.

×

शाब्बास! तुम्ही हा इशारा संदेश यशस्वीरीत्या वाचला.

×

सावधान! ही एक सूचना आहे ज्याकडे तुमचे लक्ष देणे आवश्यक आहे, परंतु हे अद्याप फार मोठे प्राधान्य नाही.

संदेश ब्लॉक करा

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

×

अरे स्नॅप! तुम्हाला एक त्रुटी आली!हे आणि ते बदला आणि पुन्हा प्रयत्न करा. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

ही कारवाई करा किंवा हे करा

×

पवित्र गौकमोल! ही एक चेतावणी आहे!स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

ही कारवाई करा किंवा हे करा

×

शाब्बास!तुम्ही हा इशारा संदेश यशस्वीरीत्या वाचला. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. Maecenas faucibus mollis interdum.

ही कारवाई करा किंवा हे करा

×

सावधान!ही एक सूचना आहे ज्याकडे तुमचे लक्ष देणे आवश्यक आहे, परंतु हे अद्याप फार मोठे प्राधान्य नाही.

ही कारवाई करा किंवा हे करा

मॉडेल्स, टूलटिप्स आणि पॉपओव्हर्समध्ये सामग्री प्रदर्शित करण्यासाठी पॉपओव्हर्स घटक

मॉडेल्स

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

मॉडेल शीर्षक

×

एक उत्तम शरीर…

प्राथमिक दुय्यम

साधन टिपा

गोंधळलेल्या वापरकर्त्याला मदत करण्यासाठी आणि त्यांना योग्य दिशेने निर्देशित करण्यासाठी ट्विप्सी खूप उपयुक्त आहेत.

Lorem ipsum Dolar sit amet illo error 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 fugit quae voluptum voluptum voluptum aquantium

खाली!
बरोबर
बाकी!
वर!

Popovers

लेआउट प्रभावित न करता पृष्ठास सबटेक्स्टुअल माहिती प्रदान करण्यासाठी पॉपओव्हर्स वापरा.

पॉपओव्हर शीर्षक

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

कमी सुपरचार्जसह बूटस्ट्रॅप वापरणे व्हेरिएबल्स, मिक्सिन आणि फंक्शन्ससह तुमचे CSS

बूटस्ट्रॅप प्रीबूटसह तयार केला गेला होता , जो वेगवान आणि सुलभ वेब डेव्हलपमेंटसाठी एक CSS प्रीप्रोसेसर, Less च्या संयोगाने वापरला जाणारा मिक्सिन्स आणि व्हेरिएबल्सचा ओपन-सोर्स पॅक आहे .

आम्ही बूटस्ट्रॅपमध्ये प्रीबूट कसे वापरले आणि तुम्ही तुमच्या पुढील प्रोजेक्टवर कमी चालवणे निवडल्यास तुम्ही त्याचा वापर कसा करू शकता ते पहा.

हे कसे वापरावे

तुमच्या ब्राउझरमध्ये जावास्क्रिप्टद्वारे बूटस्ट्रॅपच्या लेस व्हेरिएबल्स, मिक्सिन्स आणि सीएसएसमध्ये नेस्टिंगचा पूर्ण वापर करण्यासाठी हा पर्याय वापरा.

  1. <link rel = "stylesheet/less" href = "less/bootstrap.less" मीडिया = "सर्व" />    
  2. <script src = "js/less-1.0.41.min.js" ></script>

.js समाधान वाटत नाही? Less Mac अॅप वापरून पहा किंवा जेव्हा तुम्ही तुमचा कोड उपयोजित करता तेव्हा संकलित करण्यासाठी Node.js वापरा .

काय समाविष्ट आहे

बूटस्ट्रॅपचा भाग म्हणून Twitter बूटस्ट्रॅपमध्ये काय समाविष्ट केले आहे याचे काही ठळक मुद्दे येथे आहेत. डाउनलोड करण्यासाठी आणि अधिक जाणून घेण्यासाठी बूटस्ट्रॅप वेबसाइट किंवा गिथब प्रकल्प पृष्ठावर जा.

रंग चल

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

  1. // दुवे
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     गडद करा ( @linkColor , 10 ); 
  4.  
  5. // ग्रे
  6. @ब्लॅक : #000;             
  7. @grayDark :           हलका ( @black , 25 %); 
  8. @ग्रे :               हलका ( @काळा , 50 %); 
  9. @ग्रे लाईट :          हलका ( @ब्लॅक , 70 %); 
  10. @ग्रे लाइटर :        हलका ( @ब्लॅक , 90 %); 
  11. @व्हाइट : #ffff ;             
  12.  
  13. // उच्चारण रंग
  14. @blue : #08b5fb;              
  15. @हिरवा : #46a546 ;             
  16. @लाल : #9d261d ;               
  17. @पिवळा : #ffc40d ;            
  18. @संत्रा : #f89406 ;            
  19. @गुलाबी : #c3325f ;              
  20. @जांभळा : #7a43b6 ;            
  21.  
  22. // बेसलाइन
  23. @baseline : 20px ;

टिप्पणी करत आहे

/* ... */कमी CSS च्या सामान्य वाक्यरचना व्यतिरिक्त टिप्पणी करण्याची दुसरी शैली देखील प्रदान करते .

  1. // ही एक टिप्पणी आहे
  2. /* ही देखील एक टिप्पणी आहे */

वाळुला मिसळते

मिक्सिन्स हे मुळात CSS साठी अंत��्भूत किंवा आंशिक असतात, ज्यामुळे तुम्हाला कोडचा ब्लॉक एकामध्ये एकत्र करता येतो. ते box-shadow, क्रॉस-ब्राउझर ग्रेडियंट्स, फॉन्ट स्टॅक आणि अधिक सारख्या विक्रेत्याच्या प्रीफिक्स केलेल्या गुणधर्मांसाठी उत्तम आहेत. खाली बूटस्ट्रॅपसह समाविष्ट केलेल्या मिक्सिन्सचा नमुना आहे.

फॉन्ट स्टॅक

  1. #फॉन्ट {
  2.   . लघुलेख ( @weight : सामान्य , @size : 14px , @lineHeight : 20px ) {     
  3.     फॉन्ट आकार : @size ; _ 
  4.     फॉन्ट - वजन : @weight ; 
  5.     रेषा - उंची : @lineHeight ; 
  6.   }
  7.   . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  8.     फॉन्ट - फॅमिली : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सॅन्स - सेरिफ ;   
  9.     फॉन्ट आकार : @size ; _ 
  10.     फॉन्ट - वजन : @weight ; 
  11.     रेषा - उंची : @lineHeight ; 
  12.   }
  13.   . सेरिफ ( @वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {     
  14.     फॉन्ट - फॅमिली : "जॉर्जिया" , टाईम्स न्यू रोमन , टाईम्स , सॅन्स - सेरिफ ;     
  15.     फॉन्ट आकार : @size ; _ 
  16.     फॉन्ट - वजन : @weight ; 
  17.     रेषा - उंची : @lineHeight ; 
  18.   }
  19.   . मोनोस्पेस ( @weight : सामान्य , @ आकार : 12px , @lineHeight : 20px ) {     
  20.     फॉन्ट - फॅमिली : "मोनाको" , कुरियर न्यू , मोनोस्पेस ;   
  21.     फॉन्ट आकार : @size ; _ 
  22.     फॉन्ट - वजन : @weight ; 
  23.     रेषा - उंची : @lineHeight ; 
  24.   }
  25. }

ग्रेडियंट

  1. #प्रवण {
  2.   . क्षैतिज ( @startColor : #555, @endColor: #333) { 
  3.     पार्श्वभूमी - रंग : @endColor ; 
  4.     पार्श्वभूमी - पुनरावृत्ती : पुनरावृत्ती - x ;
  5.     पार्श्वभूमी - प्रतिमा : - khtml - ग्रेडियंट ( रेखीय , डावे शीर्ष , उजवे शीर्ष , ( @startColor ) पासून ( @endColor ) पर्यंत ); // कॉन्करर   
  6.     पार्श्वभूमी - प्रतिमा : - moz - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // FF 3.6+    
  7.     पार्श्वभूमी - प्रतिमा : - ms - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // IE10    
  8.     पार्श्वभूमी - प्रतिमा : - वेबकिट - ग्रेडियंट ( रेखीय , डावे शीर्ष , उजवे शीर्ष , रंग - थांबा ( 0 %, @startColor ), रंग - थांबा ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  9.     पार्श्वभूमी - प्रतिमा : - वेबकिट - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
  10.     पार्श्वभूमी - प्रतिमा : - ओ - रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // ऑपेरा 11.10    
  11.     - ms - फिल्टर : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
  12.     फिल्टर : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 आणि IE7 
  13.     पार्श्वभूमी - प्रतिमा : रेखीय - ग्रेडियंट ( डावीकडे , @startColor , @endColor ); // ले मानक   
  14.   }
  15.   . अनुलंब ( @startColor : #555, @endColor: #333) { 
  16.     पार्श्वभूमी - रंग : @endColor ; 
  17.     पार्श्वभूमी - पुनरावृत्ती : पुनरावृत्ती - x ;
  18.     पार्श्वभूमी - प्रतिमा : - khtml - ग्रेडियंट ( रेखीय , डावीकडे वर , डावीकडे तळाशी , ( @startColor ), पासून ( @endColor ) पर्यंत ); // कॉन्करर   
  19.     पार्श्वभूमी - प्रतिमा : - moz - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // FF 3.6+   
  20.     पार्श्वभूमी - प्रतिमा : - एमएस - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // IE10   
  21.     पार्श्वभूमी - प्रतिमा : - वेबकिट - ग्रेडियंट ( रेखीय , डावे शीर्ष , डावे तळ , रंग - थांबा ( 0 %, @startColor ), रंग - थांबा ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  22.     पार्श्वभूमी - प्रतिमा : - वेबकिट - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  23.     पार्श्वभूमी - प्रतिमा : - ओ - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // ऑपेरा 11.10   
  24.     - ms - फिल्टर : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
  25.     फिल्टर : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 आणि IE7 
  26.     पार्श्वभूमी - प्रतिमा : रेखीय - ग्रेडियंट ( @startColor , @endColor ); // मानक  
  27.   }
  28.   . दिशात्मक ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
  29.     ...
  30.   }
  31.   . अनुलंब - तीन - रंग ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
  32.     ...
  33.   }
  34. }

ऑपरेशन्स आणि ग्रिड सिस्टम

फॅन्सी मिळवा आणि खालीलप्रमाणे लवचिक आणि शक्तिशाली मिश्रण तयार करण्यासाठी काही गणित करा.

  1. // ग्रिडट्यूड
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5.  
  6. // ग्रिड सिस्टम
  7. . कंटेनर {
  8.   रुंदी : @siteWidth ; 
  9.   मार्जिन : 0 ऑटो ;  
  10.   . clearfix ();
  11. }
  12. . स्तंभ ( @columnSpan : 1 ) {  
  13.   प्रदर्शन : इनलाइन ; 
  14.   फ्लोट : डावीकडे ;
  15.   रुंदी : ( @gridColumnWidth * @columnSpan    ) + ( @gridGutterWidth * ( @columnSpan - 1 ));      
  16.   समास - डावीकडे : @gridGutterWidth ; 
  17.   &: प्रथम - मूल {
  18.     समास - डावीकडे : 0 ; 
  19.   }
  20. }
  21. . ऑफसेट ( @columnOffset : 1 ) {  
  22.   समास - डावीकडे : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! महत्वाचे _          
  23. }