इतिहास

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

ट्विटर केरऽ बहुत सारा इंजीनियरऽ के मदद आरू प्रतिक्रिया स॑ बूटस्ट्रैप न॑ न सिर्फ बेसिक स्टाइल, बल्कि अधिक सुरुचिपूर्ण आरू टिकाऊ फ्रंट-एंड डिजाइन पैटर्न क॑ समेटै लेली काफी बढ़ी गेलऽ छै ।

dev.twitter.com पर आओर पढ़ू ›

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

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

• नवीनतम सफारी
• नवीनतम गूगल क्रोम
• फायरफॉक्स 4+
• इंटरनेट एक्सप्लोरर 7+
• ओपेरा 11

की शामिल अछि

बूटस्ट्रैप संकलित सीएसएस, असंकलित, आरू उदाहरण टेम्पलेट के साथ पूरा आबै छै.

• सब मूल .less फाइल
• पूर्ण रूप स संकलित आ लघुकृत सीएसएस
• स्टाइलगाइड दस्तावेजीकरण पूरा करू
• उदाहरण पृष्ठ टेम्पलेट (अधिक जल्द आने वाला)

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

बूटस्ट्रैप कें हिस्सा कें रूप मे उपलब्ध करायल गेल डिफ़ॉल्ट ग्रिड सिस्टम 940px चौड़ा 16-स्तंभ ग्रिड छै. ई लोकप्रिय 960 ग्रिड सिस्टम केरऽ स्वाद छै, लेकिन बायां आरू दायां तरफ अतिरिक्त मार्जिन/पैडिंग के बिना ।

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

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

<div वर्ग = "पंक्ति" > 
  <div वर्ग = "span6 कॉलम" > 
    ...
  </div>
  <div वर्ग = "span10 कॉलम" > 
    ...
  </div>
</div>

फिक्स्ड लेआउट

डिफ़ॉल्ट आ सरल 940px-व्यापी, केंद्रित लेआउट बस लगभग कोनो वेबसाइट या पृष्ठ के लेल जे एकटा द्वारा उपलब्ध कराओल गेल अछि <div.container>.

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

द्रव लेआउट

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

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

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

अपन वेबपृष्ठ के संरचना के लेल एकटा मानक मुद्रण पदानुक्रम.

पूरा टाइपोग्राफिक ग्रिड हमर preboot.less फाइल मे दू टा Less चर पर आधारित अछि: @basefontआओर @baseline. पहिल बेस फॉन्ट-साइज पूरा मे प्रयोग कएल गेल अछि आ दोसर बेस लाइन-हाइट ।

हम ओहि चर के उपयोग करैत छी, आ किछु गणित, अपन सब प्रकार आओर बहुत किछु के मार्जिन, पैडिंग, आ लाइन-हाइट्स बनेबाक लेल |

ज1। शीर्षक 1

ज2। शीर्षक 2

ज3। शीर्षक 3

ज ४। शीर्षक 4

ज5। शीर्षक 5

ज6। शीर्षक 6

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

Nullam quis risus eget उर्ना मोलिस ornare वेल ईउ लियो | सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

उदाहरण शीर्षक उपशीर्षक अछि...

विविध। तत्व

जोर, संबोधन, एवं संक्षिप्त नाम का प्रयोग

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

कब प्रयोग करब

जोर टैग ( <strong>आ <em>) कें उपयोग कोनों शब्द या वाक्यांश कें ओकर आसपास कें प्रति कें सापेक्ष अतिरिक्त महत्व या जोर कें संकेत करय कें लेल करबाक चाहि. <strong>महत्व के <em>लेल आ तनाव पर जोर देबय लेल प्रयोग करू ।

एक पैराग्राफ में जोर

Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेन्टम मासा जस्टो बैठो अमेट रिसुस | मेसेनास फौसिबस मोलिस इंटरडम। नुल्ला विटाए एलिट लिबेरो, एक फारेत्रा औग।

नोट:<b> HTML5 म॑ आरू टैग के प्रयोग करना अखनी भी ठीक छै <i>आरू ओकरा क्रमशः बोल्ड आरू इटैलिक स्टाइल नै करै के जरूरत छै (हालांकि अगर अधिक शब्दार्थ तत्व छै त॑ एकरऽ प्रयोग करलऽ जाय) । <b>शब्द या वाक्यांश के बिना अतिरिक्त महत्व के उजागर करय के मतलब छै, जखन <i>कि बेसीतर आवाज, तकनीकी शब्द आदि के लेल छै.

पता

तत्व कें <address>उपयोग ओकर निकटतम पूर्वज, या काज कें पूरा निकाय कें लेल संपर्क जानकारी कें लेल कैल जायत छै. ई केहन लगैत अछि से देखू:

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

नोट: एक म॑ हर पंक्ति क॑ <address>एक लाइन-ब्रेक ( ) स॑ समाप्त होना चाहियऽ या सामग्री क॑ सही ढंग स॑ संरचित करै लेली <br />ब्लॉक-स्तरीय टैग (जैसे, ) म॑ लपेटलऽ जाय ।<p>

संक्षिप्त नाम

संक्षिप्त नाम आरू संक्षिप्त नाम के लेलऽ, <abbr>टैग के प्रयोग करलऽ जाय ( HTML5<acronym> म॑ अप्रचलित छै ) । टैग के भीतर आशुलिपि फॉर्म राखू आ पूरा नाम के लेल एकटा शीर्षक सेट करू।

ब्लॉककोट्स

<blockquote> <p> <small>

उद्धरण केना करब

ब्लॉककोट शामिल करबाक लेल, <blockquote>चारू कात लपेटू <p>आ <small>टैग करू. अपन स्रोत के उद्धरण देबय लेल तत्व के प्रयोग करू आ एकरा सं पहिने <small>अहाँ के एकटा एम डैश भेटत .—

लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक पोसुएरे एरेट एक एंटी वेनेनेटिस डापिबस पोसुएरे वेलिट एलिकेट।

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

अक्रमित<ul>

• लोरेम इप्सम डोलोर बैठा अमेत
• Consectetur एडिपिसिंग अभिजात वर्ग
• पूर्णांक molestie lorem पर massa
• प्रीटियम निस्ल एलिकेट में फैसिलिसिस
• नुल्ला वोलुतपत अलिक्वाम वेलित
  • फेसेलस इअकुलिस नेक्वे
  • पुरुष सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • Ac tristique लिबेरो volutpat पर
• फौसिबस पोर्टा लेकस फ्रिंगिला वेल
• एनियन बैस अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

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

• लोरेम इप्सम डोलोर बैठा अमेत
• Consectetur एडिपिसिंग अभिजात वर्ग
• पूर्णांक molestie lorem पर massa
• प्रीटियम निस्ल एलिकेट में फैसिलिसिस
• नुल्ला वोलुतपत अलिक्वाम वेलित
  • फेसेलस इअकुलिस नेक्वे
  • पुरुष सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • Ac tristique लिबेरो volutpat पर
• फौसिबस पोर्टा लेकस फ्रिंगिला वेल
• एनियन बैस अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

आदेश देल गेल<ol>

1. लोरेम इप्सम डोलोर बैठा अमेत
2. Consectetur एडिपिसिंग अभिजात वर्ग
3. पूर्णांक molestie lorem पर massa
4. प्रीटियम निस्ल एलिकेट में फैसिलिसिस
5. नुल्ला वोलुतपत अलिक्वाम वेलित
6. फौसिबस पोर्टा लेकस फ्रिंगिला वेल
7. एनियन बैस अमेत एरात नुंक
8. एगेट पोर्टिटोर लोरेम

वर्णनdl

विवरण सूची

शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।

यूइसमोद

वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग |

डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।

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

एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड।

टेबल बनाना

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

टेबुल बढ़िया अछि-बहुत रास काज लेल। महान तालिकाक कें, तथापि, उपयोगी, स्केल करय योग्य, आ पठनीय (कोड स्तर पर) होएय कें लेल मार्कअप प्रेम कें बिट कें जरूरत छै. मदद करय लेल किछ टिप्स देल गेल अछि.

अपन कॉलम हेडर केँ सदिखन <thead>एहन मे लपेटू जे पदानुक्रम <thead>> <tr>> हो <th>.

कॉलम हेडर के समान, अहाँक टेबल के सब बॉडी कंटेंट एकटा में लपेटल जेबाक चाही <tbody>ताकि अहाँक पदानुक्रम <tbody>> <tr>> अछि <td>|

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

सबटा तालिकाक कें स्वचालित रूप सं स्टाइल कैल जेतय जइ मे केवल आवश्यक सीमाक कें साथ पठनीयता सुनिश्चित कैल जेतय आ संरचना कें बनाए रखल जा सकय. अतिरिक्त वर्ग वा विशेषता जोड़बाक आवश्यकता नहि.

# 2019।	पहिल नाम	उपनाम	भाषा
१	किछु	एकटा	अंग्रेजी
२	जो	सिक्सपैक	अंग्रेजी
३	स्टू	डेंट	संहिता

<तालिका>
  ...
</table>क अनुसार

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

ज़ेबरा-स्ट्राइपिंग जोड़ि कए अपन टेबल क संग कनि फैंसी करू-बस .zebra-stripedक्लास जोड़ू।

# 2019।	पहिल नाम	उपनाम	भाषा
१	किछु	एकटा	अंग्रेजी
२	जो	सिक्सपैक	अंग्रेजी
३	स्टू	डेंट	संहिता

नोट: ज़ेबरा-स्ट्राइपिंग एकटा प्रगतिशील संवर्धन छै जे IE8 आ नीचा जैना पुरान ब्राउज़र कें लेल उपलब्ध नै छै.

<table class = "ज़ेबरा-धारीदार" > 
...
</table>क अनुसार

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

पिछला उदाहरण लैत, हम jQuery आरू Tablesorter प्लगइन के माध्यम स॑ सॉर्टिंग कार्यक्षमता प्रदान करी क॑ अपनऽ टेबल के उपयोगिता म॑ सुधार करै छियै । सॉर्ट बदलबाक लेल कोनो कॉलम क हेडर पर क्लिक करू.

# 2019।	पहिल नाम	उपनाम	भाषा
१	अहांक	एकटा	अंग्रेजी
२	जो	सिक्सपैक	अंग्रेजी
३	स्टू	डेंट	संहिता

<script src = "जेएस/जेक्वेरी/जेक्वेरी.टेबलसॉर्टर.मिनट.जेएस" ></script> 
<लिपि > 
  $ ( फंक्शन () { 1। 
    $ ( "सारणी # क्रमबद्ध तालिकाउदाहरण" ). tablesorter ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });  
  });
</स्क्रिप्ट>
<table class = "ज़ेबरा-धारीदार" > 
  ...
</table>क अनुसार

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

सब फॉर्म कें पठनीय आ स्केल करय योग्य तरीका सं प्रस्तुत करय कें लेल डिफ़ॉल्ट शैली देल गेल छै. पाठ इनपुट, चयन सूची, पाठ क्षेत्र, रेडियो बटन आरू चेकबॉक्स, आरू बटन के लेलऽ शैली उपलब्ध कराय देलऽ गेलऽ छै.

उदाहरण रूप किंवदंती

एक्स-बड़े इनपुट

चुननाइ

१ २ ३ ४ ५

चुननाइ

१ २ ३ ४ ५

असंपादन योग्य इनपुट

किछु मूल्य एतय

अक्षम इनपुट

एक्स-बड़े इनपुट

मदद पाठ के छोटा स्निपेट

उदाहरण रूप किंवदंती

पूर्व-लंबित पाठ

@ .

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

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

फाइल इनपुट

उदाहरण रूप किंवदंती

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

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

नोट: लेबल बहुत पैघ क्लिक क्षेत्र आओर एकटा बेसी उपयोगी फॉर्म के लेल सभ विकल्प के घेरैत अछि.

तिथि सीमा

होए सब समय प्रशांत मानक समय (GMT -08:00) के रूप में देखाओल गेल अछि |

पाठ क्षेत्र

जरूरत पड़ला पर उपरोक्त क्षेत्र कें वर्णन करय कें लेल मदद पाठ कें ब्लॉक.

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

• विकल्प एक ई आ ओ अछि-ई बहुत नीक किएक अछि से अवश्य शामिल करू
• विकल्प दू कें सेहो जांच कैल जा सकय छै आ फॉर्म रिजल्ट मे शामिल कैल जा सकय छै

परिवर्तन सहेजें  रद्द

ढेर हुए रूप

अपन फॉर्म के एचटीएमएल मे जोड़ू .form-stackedआओर अहां के ओकर बामा तरफ के बजाय ओकर फील्ड के ऊपर लेबल रहत. अगर अहां के फॉर्म छोट अछि या अहां के पास भारी फॉर्म के लेल इनपुट के दू कॉलम अछि त ई बहुत नीक काज करैत अछि.

उदाहरण रूप किंवदंती

एक्स-बड़े इनपुट

चुननाइ

१ २ ३ ४ ५

उदाहरण रूप किंवदंती

एक्स-बड़े इनपुट

मदद पाठ के छोटा स्निपेट

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

• विकल्प एक ई आ ओ अछि-ई बहुत नीक किएक अछि से अवश्य शामिल करू
• विकल्प दू कें सेहो जांच कैल जा सकय छै आ फॉर्म रिजल्ट मे शामिल कैल जा सकय छै

नोट: लेबल बहुत पैघ क्लिक क्षेत्र आओर एकटा बेसी उपयोगी फॉर्म के लेल सभ विकल्प के घेरैत अछि.

परिवर्तन सहेजें  रद्द

बटन के

एक रूढ़ि के रूप में, बटन के उपयोग क्रिया के लेलऽ करलऽ जाय छै जबकि लिंक के उपयोग वस्तु के लेलऽ करलऽ जाय छै । जेना, "डाउनलोड" एकटा बटन भ' सकैत अछि आ "हालक गतिविधि" एकटा लिंक भ' सकैत अछि.

सब बटन डिफ़ॉल्ट रूप स॑ हल्का ग्रे शैली प॑ छै, लेकिन अलग-अलग रंग शैली लेली कई तरह के कार्यात्मक वर्ग लागू करलऽ जाब॑ सकै छै । एहि वर्ग मे नील रंगक .primaryवर्ग, हल्का नील रंगक .infoवर्ग, हरियर रंगक .successवर्ग आ लाल रंगक .dangerवर्ग शामिल अछि । प्लस, अपन स्टाइल रोल करब आसान पीसी अछि।

उदाहरण बटन

बटन शैली लागू के साथ कोनो भी चीज़ पर लागू करलऽ जाब॑ सकै छै .btn। <a>आम तौर पर अहाँ ई सब केवल , <button>, आओर चयन <input>तत्व पर लागू करय चाहब . ई केहन लगैत अछि से देखू:

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

फैंसी पैघ या छोट बटन? एहि पर अछि!

अक्षम अवस्था

जे बटन सक्रिय नै छै या ऐप द्वारा कोनों या दोसर कारण स अक्षम छै, ओकरा लेल अक्षम स्थिति के उपयोग करू. जे .disabledलिंक के लेल आ :disabledतत्व <button>के लेल अछि.

लिंक

बटन के

की अछि

हमरऽ टॉपबार एगो फिक्स्ड बार छै जेकरा म॑ कोनो वेबसाइट केरऽ लोगो या नाम, प्राथमिक नेविगेशन, आरू सर्च फॉर्म रखलऽ जाय छै ।

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

भीतरक सभ तत्व, आओर पूरा टॉपबार सेहो, वैकल्पिक अछि. अहां एकटा लोगो/नाम, नव, खोज, आओर एकटा माध्यमिक नव-अथवा ओकर कोनो संयोजन शामिल करय कें लेल चुन सकय छी.

ड्रॉपडाउन शामिल अछि

मुख्य नेविगेशन के हिस्सा के रूप में, हम अहां के लेल अपन नेव में ड्रॉपडाउन जोड़य के क्षमता शामिल केने छी. ऊपर देल गेल माध्यमिक नव (दाहिना संरेखित) देखू जे ई कोना कएल गेल अछि ।

टैब आ गोली

एक के साथ सरल माध्यमिक नेविगेशन बनाएँ <ul>| उचित वर्ग जोड़ क टैब या गोली कें बीच स्वैप करूं.

हमरऽ खाता सेटिंग्स पन्ना जैसनऽ सामग्री केरऽ उप-खंडऽ लेली बढ़िया आरू जैसनऽ सामग्री केरऽ पन्ना के बीच टॉगल करै लेली उपयोगकर्ता समय रेखा । टैब या गोली शैली में उपलब्ध।

• घर
• रूपरेखा
• संदेश
• सेटिंग्स
• संपर्क करनाइ

<ul वर्ग = "टैब" > 
  <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 = "गोलियाँ" > 
  <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 वर्ग = "पृष्ठांकन" > 
  <उल>
    <li class = "पिछला अक्षम" ><a href = "#" > ← पिछला </a></li>  
    <li class = "सक्रिय" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > २ </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > ४ </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "अगला" ><a href = "#" > अगला → </a></li> के अनुसार  
  </ul>
</div>

बेसिक अलर्ट

div.alert-message

कोनों क्रिया कें विफलता, संभावित विफलता, या सफलता कें उजागर करय कें लेल एक लाइन संदेश. विशेष रूप सँ रूपक लेल उपयोगी।

संदेश अवरुद्ध करू

div.alert-message.block-message

जे संदेश के लेल कनि स्पष्टीकरण के जरूरत होएत अछि, ओकरा लेल हमरा सभ लग पैराग्राफ स्टाइल अलर्ट अछि. ई सब लम्बा त्रुटि संदेशऽ क॑ बुदबुदाबै लेली, कोनो उपयोगकर्ता क॑ लंबित कार्रवाई के बारे म॑ चेतावनी दै लेली, या बस पन्ना प॑ अधिक जोर दै लेली जानकारी प्रस्तुत करै लेली एकदम सही छै ।

मोडल

मोडल-संवाद या लाइटबॉक्स-ओय परिस्थितिक मे संदर्भ क्रियाक कें लेल बढ़िया छै जतय इ महत्वपूर्ण छै कि पृष्ठभूमि संदर्भ कें बनाए रखनाय.

टूल टिप्स

ट्विप्सी एकटा भ्रमित उपयोगकर्ता कें सहायता करय आ ओकरा सही दिशा मे इशारा करय कें लेल सुपर उपयोगी छै.

पोपोवर्स

लेआउट के प्रभावित केने बिना कोनो पृष्ठ के उपपाठ जानकारी प्रदान करय लेल पॉपओवर के प्रयोग करू.

बूटस्ट्रैप क॑ Preboot , मिक्सिन आरू चर केरऽ एगो ओपन-सोर्स पैक के साथ बनालऽ गेलऽ छेलै जेकरऽ उपयोग Less के साथ संयोजन म॑ करलऽ जैतै , जे तेज आरू आसान वेब विकास लेली एगो CSS प्रीप्रोसेसर छै ।

देखू जे हम बूटस्ट्रैप मे Preboot के कोना उपयोग केलहुं आओर अगर अहां अपन अगिला प्रोजेक्ट पर Less चलाबय के विकल्प चुनब त अहां एकर उपयोग कोना क सकय छी.

एकर प्रयोग कोना करब

अपनऽ ब्राउज़र म॑ जावास्क्रिप्ट के माध्यम स॑ सीएसएस म॑ बूटस्ट्रैप केरऽ लेस वैरिएबल, मिक्सिन, आरू नेस्टिंग केरऽ पूरा उपयोग करै लेली ई विकल्प के उपयोग करऽ ।

<link rel = "स्टाइलशीट/कम" href = "कम/बूटस्ट्रैप.कम" मीडिया = "सब" />    
<script src = "जेएस/कम-1.1.3.मिनट.जेएस" ></script> 

.js समाधान महसूस नहि क रहल छी? कम मैक ऐप कें कोशिश करूं या संकलित करय कें लेल Node.js कें उपयोग करूं जखन अहां अपन कोड कें तैनात करय छी.

की शामिल अछि

बूटस्ट्रैप के हिस्सा के रूप में ट्विटर बूटस्ट्रैप में जे किछु शामिल अछि ओकर किछ हाइलाइट एतय देल गेल अछि. डाउनलोड करय लेल आओर बेसी जानय लेल बूटस्ट्रैप वेबसाइट या गिथब प्रोजेक्ट पेज पर जाउ.

चर

कम म॑ चर अपनऽ CSS सिरदर्द मुक्त बनाए रखै आरू अपडेट करै लेली एकदम सही छै । जखन अहाँ कोनो रंग मान वा कोनो बेर प्रयोग कएल मान बदलए चाहैत छी तँ ओकरा एक ठाम अपडेट करू आ अहाँ सेट भ' गेल छी.

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

टिप्पणी करैत

कम सीएसएस केरऽ सामान्य /* ... */सिंटैक्स के अलावा टिप्पणी केरऽ एगो आरू शैली भी उपलब्ध करै छै ।

// ई एकटा टिप्पणी अछि
/* ईहो एकटा टिप्पणी अछि */

वज़ू के ऊपर मिक्सिन

मिक्सिन मूल रूप सं सीएसएस कें लेल शामिल या आंशिक छै, जे अहां कें कोड कें एकटा ब्लॉक कें एकटा मे संयोजित करय कें अनुमति देयत छै. ई विक्रेता उपसर्ग गुण जेना box-shadow, क्रॉस-ब्राउजर ढाल, फॉन्ट स्टैक, आओर बहुत किछु के लेल बढ़िया अछि. नीचाँ ओहि मिक्सिन के नमूना देल गेल अछि जे बूटस्ट्रैप के संग शामिल अछि |

फॉन्ट ढेर

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

ढाल

# ढाल { 1।
  . क्षैतिज ( @ शुरू रंग : # 555, @ अंत रंग: # 333) { 
    पृष्ठभूमि - रंग : @endColor ; 
    पृष्ठभूमि - दोहराएँ : दोहराएँ - x ;
    पृष्ठभूमि - छवि : - khtml - ढाल ( रैखिक , बाएं ऊपर , दाएं ऊपर , से ( @startColor ), से ( @endColor )); // कंक्वेरर   
    पृष्ठभूमि - छवि : - moz- रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // एफएफ 3.6+    
    पृष्ठभूमि - छवि : -एमएस - रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // आईई10    
    पृष्ठभूमि - छवि : - वेबकिट - ढाल ( रैखिक , बाएं ऊपर , दाएं ऊपर , रंग - बंद ( 0 % , @ startColor ), रंग - बंद ( 100 % , @ endColor )); // सफारी 4+, क्रोम 2+    
    पृष्ठभूमि - छवि : -वेबकिट - रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // सफारी 5.1+, क्रोम 10+    
    पृष्ठभूमि - छवि : -ओ - रेखीय - ढाल ( बाम , @startColor , @endColor ) ; // ओपेरा 11.10    
    पृष्ठभूमि - छवि : रैखिक - ढाल ( बाम , @startColor , @endColor ); // ले मानक   
  } .
  . ऊर्ध्वाधर ( @ startColor : # 555, @ अंत रंग: # 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+   
    पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( @ startColor , @endColor ); // ओपेरा 11.10   
    पृष्ठभूमि - छवि : रैखिक - ढाल ( @ startColor , @endColor ); // मानक के  
  } .
  . दिशात्मक ( @ startColor : # 555, @ अंत रंग: # 333, @ deg: 45deg) { 
    ...
  } .
  . ऊर्ध्वाधर - तीन - रंग ( @ startColor : # 00b3ee, @ midColor: # 7a43b6, @ colorStop: 50%, @ endColor: # c3325f) { 
    ...
  } .
} .

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

फैंसी करू आ किछु गणित करू जाहि सं नीचा देल गेल तरहक लचीला आ शक्तिशाली मिक्सिन उत्पन्न भ सकय.

// ग्रिडिट्यूड
@ ग्रिडस्तंभ : 16 ;       
@ ग्रिडस्तंभ चौड़ाई : 40px ;   
@ ग्रिडगटरचौड़ाई : 20px ;   
@ siteWidth : ( @ ग्रिडस्तंभ * @ ग्रिडस्तंभ चौड़ाई ) + ( @ ग्रिडगटर चौड़ाई * ( @ ग्रिडस्तंभ - 1 ));                 
 
// ग्रिड सिस्टम
. पात्र { 1 ।
  चौड़ाई : @ साइट चौड़ाई ; 
  मार्जिन : 0 ऑटो ;  
  . क्लियरफिक्स ();
} .
. कॉलम ( @columnSpan : 1 ) { 1।  
  width : ( @ gridColumnWidth * @ कॉलमस्पैन ) + ( @ ग्रिडगटरविड्थ * ( @ कॉलमस्पैन - 1 ));         
} .
. ऑफसेट ( @ स्तम्भऑफसेट : 1 ) { .  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
} .