इतेहास

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

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

dev.twitter.com पर होर मता पढ़ो ›

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

बूटस्ट्रैप दा परीक्षण ते समर्थन क्रोम, सफारी, इंटरनेट एक्सप्लोरर, ते फायरफॉक्स जनेह् बड्डे आधुनिक ब्राउज़रें च कीता जंदा ऐ।

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

क्या शामिल ऐ

बूटस्ट्रैप संकलित CSS, अनकंपाइल, ते उदाहरण टेम्पलेटें कन्नै पूरा औंदा ऐ।

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

डिफ़ॉल्ट ग्रिड ऐ

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

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

जि’यां इत्थै दिक्खेआ गेआ ऐ, इक बुनियादी लेआउट दो "स्तंभें" कन्नै बनाया जाई सकदा ऐ, हर इक 16 बुनियादी स्तंभें दी इक नंबर गी फैले दा ऐ जिनेंगी अस अपने ग्रिड प्रणाली दे हिस्से दे रूप च परिभाशत कीता ऐ। होर बदलावें लेई हेठ दित्ते गेदे उदाहरनें गी दिक्खो।

<div वर्ग = "पंक्ति" > ऐ 
  <div वर्ग = "span6 स्तंभ" > 
    ...
  </div> दा
  <div वर्ग = "span10 स्तंभ" > 
    ...
  </div> दा
</div> दा

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

इक गै <div.container>.

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

तरल पदार्थ लेआउट

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

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

हेडिंग & प्रतिलिपि

अपने वेबपेजें गी संरचित करने आस्तै इक मानक मुद्रण पदानुक्रम।

पूरा टाइपोग्राफिक ग्रिड साढ़ी preboot.less फाइल च दो Less चर उप्पर आधारत ऐ: @basefontते @baseline. पैह् ला आधार फॉन्ट-आकार ऐ जेह् ड़ा पूरे च बरतेआ गेदा ऐ ते दूआ आधार रेखा-ऊँचाई ऐ ।

अस उनें चर, ते किश गणित दा इस्तेमाल करदे आं, अपने सारे किस्म दे मार्जिन, पैडिंग, ते लाइन-हाईट बनाने आस्तै ते होर मते।

एच१ ऐ। शीर्षक 1 दा

ज २। हेडिंग 2 दा

ज ३। हेडिंग 3 दा

ह4 ऐ। हेडिंग 4 दा

ज ५। हेडिंग 5 दा

एच6 ऐ। हेडिंग 6 दा

उदाहरण पैराग्राफ दा

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ओरनारे वेल ईउ लियो। सह सोसियस नटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्सेटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

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

विविध। तत्वां दा

जोर, पते, & संक्षिप्त नाम दा इस्तेमाल करना

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

कदूं इस्तेमाल करना

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

इक पैराग्राफ च जोर देना

फुस्से दापिबस , टेलस एसी कर्सस कोमोडो , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेंटम मासा जस्टो बैठो अमेट रिसुस। मेसेनास फौसिबस मोलिस इंटरडम। नुल्ला विटाए एलिट लिबेरो, इक फारेत्रा औग।

नोट:<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>ते तुसेंगी —इसदे शा पैह् ले इक एम डैश मिलग।

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

डॉ. जूलियस हिबर्ट ने दी

अनऑर्डर<ul>

• लोरेम इप्सम डोलोर बैठो अमेत
• कन्सेक्टेतुर एडिपिसिंग एलिट
• पूर्णांक मोलेस्टी लोरेम एट मासा
• प्रीटियम निस्ल एलिकेट च फैसिलिसिस
• नुल्ला वोलुतपत अलिक्वाम वेलित
  • फेसेलस इअकुलिस नेके
  • पुरुष सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टिक लिबेरो वोलुतपत एट
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल
• ऐन बैठा अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

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

• लोरेम इप्सम डोलोर बैठो अमेत
• कन्सेक्टेतुर एडिपिसिंग एलिट
• पूर्णांक मोलेस्टी लोरेम एट मासा
• प्रीटियम निस्ल एलिकेट च फैसिलिसिस
• नुल्ला वोलुतपत अलिक्वाम वेलित
  • फेसेलस इअकुलिस नेके
  • पुरुष सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टिक लिबेरो वोलुतपत एट
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल
• ऐन बैठा अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

आर्डर दे दी<ol>

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

ब्यौराdl

विवरण सूची दी

शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।

यूइसमोद ने दी

वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।

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

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

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

मेज बनाना

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

टेबल शानदार होंदे न—बहुत सारी चीजें लेई। महान तालिकाएं गी, हालांकि, उपयोगी, स्केल करने योग्य, ते पठनीय (कोड स्तर पर) होने आस्तै मार्कअप प्यार दी थोह् ड़ी-मती लोड़ ऐ। मदद करने आस्तै किश सुझाऽ दित्ते गेदे न।

अपने स्तंभ हेडरें गी हमेशा <thead>इस चाल्ली लपेटो जे पदानुक्रम <thead>> <tr>> होऐ <th>.

स्तंभ हेडरें दे समान, तुंदी सारी तालिका दी शरीर सामग्री गी इक च लपेटेआ जाना चाहिदा <tbody>तां जे तुंदी पदानुक्रम <tbody>> <tr>> ऐ <td>.

उदाहरण: डिफ़ॉल्ट तालिका शैलियां

पठनीयता गी सुनिश्चित करने ते संरचना गी बनाए रखने लेई सब्भै तालिकाएं गी स्वतः सिर्फ जरूरी सीमाएं कन्नै स्टाइल कीता जाग। अतिरिक्त वर्गें जां विशेषताएं गी जोड़ने दी लोड़ नेईं ऐ।

# ऐ	पैहला नां	अखीरी नां	भाशा
१	चंद	इक	अंगरेजी
२	जो	सिक्सपैक	अंगरेजी
३	स्टू	डेंट	कोड

<टेबल> दा
  ...
</table> दा

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

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

# ऐ	पैहला नां	अखीरी नां	भाशा
१	चंद	इक	अंगरेजी
२	जो	सिक्सपैक	अंगरेजी
३	स्टू	डेंट	कोड

नोट: ज़ेबरा-स्ट्राइपिंग इक प्रगतिशील संवर्धन ऐ जेह् ड़ा IE8 ते हेठ दित्ते गेदे पुराने ब्राउज़रें आस्तै उपलब्ध नेईं ऐ.

<table class = "ज़ेबरा-धारीदार" > 
...
</table> दा

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

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

# ऐ	पैहला नां	अखीरी नां	भाशा
१	थुआढ़ा	इक	अंगरेजी
२	जो	सिक्सपैक	अंगरेजी
३	स्टू	डेंट	कोड

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

डिफ़ॉल्ट शैलियाँ

सब्भै फार्में गी पठनीय ते स्केल करने योग्य तरीके कन्नै पेश करने आस्तै डिफाल्ट शैली दित्ती जंदी ऐ। पाठ इनपुट, चयन सूची, पाठ क्षेत्र, रेडियो बटन ते चेकबॉक्स, ते बटन आस्तै शैलियां उपलब्ध करोआईयां गेदियां न।

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

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

चुनो

१ २ ३ ४ ५

चुनो

१ २ ३ ४ ५

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

कुछ वैल्यू यहां

अक्षम इनपुट

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

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

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

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

@ ऐ

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

चेकबॉक्स संलग्न कीता गेआ

फाइल इनपुट करना

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

विकल्पें दी सूची

• विकल्प इक एह् ऐ ते एह् ऐ- एह् ज़रूर शामल करो जे एह् क्यों शानदार ऐ
• विकल्प दो दी जांच बी कीती जाई सकदी ऐ ते फार्म दे नतीजें च शामल कीता जाई सकदा ऐ
• विकल्प त्रै गी-हां, तुसें अनुमान लाया ऐ-बी जांच कीती जाई सकदी ऐ ते फार्म दे नतीजें च शामल कीता जाई सकदा ऐ
• विकल्प चार दी जांच नेईं कीती जाई सकदी की जे एह् अक्षम ऐ.

नोट: लेबल मते बड्डे क्लिक क्षेत्रें ते इक होर उपयोगी फार्म आस्तै सारे विकल्पें गी घेरदे न।

तारीख रेंज

गी सारे समें गी प्रशांत मानक समें (GMT -08:00) दे रूप च दस्सेआ गेआ ऐ।

पाठ क्षेत्र

जरूरत पौने पर उपर दित्ते गेदे फील्ड दा वर्णन करने आस्तै मदद पाठ दा ब्लॉक।

विकल्पें दी सूची

• विकल्प इक एह् ऐ ते एह् ऐ- एह् ज़रूर शामल करो जे एह् क्यों शानदार ऐ
• विकल्प दो कर सकदा ऐ किश होर ऐ ते इसगी चुनने कन्नै विकल्प 1 दा चयन रद्द करी दित्ता जाग

  रद्द

ढेर किये गये रूप

अपने फार्म दे एचटीएमएल च जोड़ो .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> दा

• घर
• प्रोफाइल
• संदेश
• सेटिंग्स
• राबता

<उल वर्ग = "गोलियां" > 
  <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> दा

पृष्ठांकन करना

आरडीओ द्वारा प्रेरित अल्ट्रा सरल ते न्यूनतम शैली पृष्ठांकन। बड्डा ब्लॉक छूटना मुश्कल ऐ, आसानी कन्नै स्केल कीता जाई सकदा ऐ, ते बड्डे क्लिक क्षेत्र उपलब्ध करोआंदा ऐ।

<div वर्ग = "पृष्ठांकन" > ऐ 
  <उल> दा
    <li class = "पिछला अक्षम" ><a href = "#" > ← पिछला </a></li> दा  
    <li class = "सक्रिय" ><a href = "#" > 1 </a></li> ऐ  
    <li><a href = "#" > 2 </a></li> ऐ 
    <li><a href = "#" > 3 </a></li> ऐ 
    <li><a href = "#" > 4 ​​</a></li> ऐ 
    <li><a href = "#" > 5 </a></li> ऐ 
    <li class = "अगला" ><a href = "#" > अगला → </a></li> दा  
  </ul> दा
</div> दा

बुनियादी अलर्ट

div.alert-message

कुसै कार्रवाई दी असफलता, संभावित असफलता, जां सफलता गी उजागर करने आस्तै इक लाइन दे संदेश। खास तौर उप्पर रूपें आस्तै उपयोगी ऐ ।

संदेशें गी ब्लॉक करो

div.alert-message.block-message

उनें संदेशें लेई जेह् ड़े थोह् ड़ी-मती समझाने दी लोड़ होंदी ऐ, साढ़े कोल पैराग्राफ शैली दे अलर्ट न। एह् लम्मी त्रुटि संदेशें गी बबल करने, इक बरतूनी गी लंबित कार्रवाई दी चेतावनी देने, जां सिर्फ पृष्ठ पर होर जोर देने आस्तै जानकारी पेश करने आस्तै बिल्कुल सही न।

मोडल ने दी

मोडल-संवाद जां लाइटबॉक्स-ऐसे परिस्थितियें च संदर्भ क्रियाएं आस्तै मते शा मते न जित्थें एह् जरूरी ऐ जे पृष्ठभूमि संदर्भ गी बनाए रखना।

औजार टिप्स

ट्विप्सी इक भ्रमित उपयोगकर्ता दी मदद करने ते उनेंगी सही दिशा च इशारा करने आस्तै सुपर उपयोगी न।

पोपोवर्स

लेआउट गी प्रभावित कीते बगैर कुसै पृष्ठ गी उप-पाठ्य जानकारी देने आस्तै पोपोवर दा इस्तेमाल करो.

बूटस्ट्रैप गी प्रीबूट कन्नै बनाया गेआ हा , जेह् ड़ा मिक्सिन ते चर दा इक ओपन-सोर्स पैक ऐ जेह् ड़ा लेस कन्नै संयोजन च बरतेआ जाह् ग , जेह् ड़ा तेज़ ते आसान वेब विकास आस्तै इक सीएसएस प्रीप्रोसेसर ऐ ।

दिक्खो जे अस बूटस्ट्रैप च प्रीबूट दा किस चाल्ली इस्तेमाल कीता हा ते जेकर तुस अपने अगले प्रोजेक्ट पर कम चलाना चुनदे ओ तां तुस इसदा इस्तेमाल किस चाल्ली करी सकदे ओ.

इसदा इस्तेमाल किस चाल्ली करना ऐ

अपने ब्राउज़र च जावास्क्रिप्ट दे राहें सीएसएस च बूटस्ट्रैप दे कम चर, मिक्सिन, ते नेस्टिंग दा पूरा इस्तेमाल करने आस्तै इस विकल्प दा इस्तेमाल करो.

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

.js समाधान महसूस नेईं करदे? कम मैक ऐप दी कोशश करो जां संकलित करने आस्तै Node.js दा इस्तेमाल करो जिसलै तुस अपने कोड गी तैनात करदे ओ.

क्या शामिल ऐ

बूटस्ट्रैप दे हिस्से दे तौर पर ट्विटर बूटस्ट्रैप च शामल कीते गेदे किश खास गल्लें दी जानकारी दित्ती गेदी ऐ। डाउनलोड करने ते होर जानने लेई बूटस्ट्रैप वेबसाइट जां गिथब प्रोजेक्ट पेज पर जाओ।

चर करने वाले

कम च चर तुंदे CSS सिर दर्द मुक्त बनाए रखने ते अपडेट करने लेई बिल्कुल सही न। जदूं तुस इक रंग मूल्य जां बार-बार इस्तेमाल कीते जाने आह् ले मूल्य गी बदलना चांह् दे ओ तां उसी इक थाह् र पर अपडेट करो ते तुस सेट होई गेदे ओ.

// लिंक
@ लिंकरंग : # 8 बी 59 सी 2 ऐ;         
@linkColorHover : अंधेरा करो (     @linkColor , 10 ); 
 
// ग्रेज़ दा
@ काला : # 000 ऐ;             
@ grayDark :           हल्का करो ( @ काला , 25 %); 
@ ग्रे :               हल्का करो ( @ काला , 50 %); 
@ grayLight :          हल्का करो ( @ काला , 70 %); 
@ grayLighter :        हल्का करो ( @ काला , 90 %); 
@ गोरे : # एफएफएफ ;             
 
// लहजे दे रंग
@ नीले रंग दा : # 08 बी 5 एफ बी;              
@ हरे रंग दा : # 46 ए 546;             
@ लाल : # 9 डी 261 डी;               
@ पीला : # एफएफसी 40 डी;            
@ नारंगी : # एफ 89406 ऐ;            
@ गुलाबी : # c3325f ऐ;              
@ बैंगनी : # 7 ए 43 बी 6;            
 
// बेसलाइन ग्रिड
@ बेसफॉन्ट : 13px ऐ ;          
@ आधार रेखा : 18px ऐ ;          

टिप्पणी करदे होई

कम सीएसएस दे सामान्य /* ... */सिंटैक्स दे अलावा टिप्पणी करने दी इक होर शैली बी उपलब्ध करोआंदा ऐ।

// एह् इक टिप्पणी ऐ
/* एह् बी इक टिप्पणी ऐ */

मिक्सिन अप वज़ू

मिक्सिन मूल रूप कन्नै सीएसएस आस्तै शामल जां आंशिक न, जेह् ड़े तुसेंगी कोड दे इक ब्लॉक गी इक च जोड़ने दी इजाजत दिंदे न। box-shadowएह् विक्रेता उपसर्ग गुणें जि'यां , क्रॉस-ब्राउज़र ढाल, फॉन्ट ढेर, ते होर मते आस्तै शानदार न . हेठ दित्ते गेदे मिक्सिन दा नमूना ऐ जेह् ड़े बूटस्ट्रैप कन्नै शामल न।

फॉन्ट ढेर

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

ढाल दा

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

संचालन ते ग्रिड प्रणाली

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

// ग्रिडिट्यूड दा
@ ग्रिडस्तंभ : 16 ऐ ;       
@ ग्रिडस्तंभ चौड़ाई : 40px ऐ ;   
@ ग्रिडगटर चौड़ाई : 20px ऐ ;   
@siteWidth : ( @ ग्रिडस्तंभ * @ ग्रिडस्तंभ चौड़ाई ) + ( @ ग्रिडगटर चौड़ाई * ( @ ग्रिडस्तंभ - 1 ));                 
 
// ग्रिड सिस्टम ऐ
ऐ . कंटेनर दा {
  चौड़ाई : @ साइट चौड़ाई ऐ ; 
  मार्जिन : 0 ऑटो ऐ ;  
  ऐ . साफ करना ();
} ऐ।
ऐ . स्तंभ ( @columnSpan : 1 ) { ऐ।  
  चौड़ाई : ( @ ग्रिडस्तंभ चौड़ाई * @ स्तंभ स्पैन ) + ( @ ग्रिडगटर चौड़ाई * ( @ स्तंभ स्पैन - 1 ));         
} ऐ।
ऐ . ऑफसेट ( @ कॉलमऑफसेट : 1 ) { ऐ।  
  मार्जिन - बाएं : ( @ ग्रिडस्तंभ चौड़ाई * @ स्तंभऑफसेट ) + ( @ ग्रिडगटर चौड़ाई * ( @ स्तंभ ऑफसेट - 1 )) + @ अतिरिक्त स्पेस ;           
} ऐ।