इतिहास

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

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

dev.twitter.com पर अउरी पढ़ीं ›

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

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

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

का शामिल बा

बूटस्ट्रैप संकलित सीएसएस, बिना संकलित, आ उदाहरण टेम्पलेट सभ के साथ पूरा तरीका से आवे ला।

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

डिफ़ॉल्ट ग्रिड बा

बूटस्ट्रैप के हिस्सा के रूप में दिहल गइल डिफ़ॉल्ट ग्रिड सिस्टम 940px चौड़ाई वाला 16 कॉलम वाला ग्रिड हवे। इ लोकप्रिय 960 ग्रिड सिस्टम के स्वाद ह, लेकिन बिना बाईं ओर अवुरी दाहिना ओर के अतिरिक्त मार्जिन/पैडिंग के।

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

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

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

लेआउट तय हो गइल बा

डिफ़ॉल्ट आ सरल 940px-चौड़ाई, केंद्रित लेआउट बस लगभग कवनो वेबसाइट भा पन्ना खातिर एकल द्वारा उपलब्ध करावल गइल बा <div.container>।

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

तरल पदार्थ के लेआउट के बारे में बतावल गइल बा

न्यूनतम- आ अधिकतम-चौड़ाई आ बाईं ओर के साइडबार वाला एगो वैकल्पिक, लचीला द्रव पन्ना संरचना। ऐप आ डॉक्स खातिर बढ़िया बा.

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

हेडिंग & कॉपी के बारे में बतावल गइल बा

अपना वेबपन्ना के संरचना खातिर एगो मानक टाइपोग्राफिक पदानुक्रम।

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

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

ज1 के बा। शीर्षक 1 के बा

ज2 के बा। शीर्षक 2 के बा

ज3 के बा। शीर्षक 3 के बा

ज4 के बा। शीर्षक 4 के बा

ज5 के बा। शीर्षक 5 के बा

ज6 के बा। शीर्षक 6 के बा

उदाहरण खातिर पैराग्राफ के बा

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

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

विविध प्रकार के बा। तत्वन के बारे में बतावल गइल बा

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

<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>होखे।

उदाहरण: डिफ़ॉल्ट तालिका शैली सभ के बारे में बतावल गइल बा

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

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	भाखा
1 के बा	कुछु	एगो	अंगरेजी
2 के बा	जो के बा	सिक्सपैक के बा	अंगरेजी
3 के बा	स्टू के बा	डेंट हो गइल	कोड के बा

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

उदाहरण खातिर : ज़ेबरा-धारी वाला

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

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	भाखा
1 के बा	कुछु	एगो	अंगरेजी
2 के बा	जो के बा	सिक्सपैक के बा	अंगरेजी
3 के बा	स्टू के बा	डेंट हो गइल	कोड के बा

नोट: ज़ेबरा-स्ट्राइपिंग एगो प्रोग्रेसिव एन्हांसमेंट हवे जे IE8 आ नीचे नियर पुरान ब्राउजर सभ खातिर उपलब्ध नइखे।

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

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

पिछला उदाहरण लेके हमनी के jQuery आ Tablesorter प्लगइन के माध्यम से सॉर्टिंग कार्यक्षमता उपलब्ध करा के अपना टेबल के उपयोगिता में सुधार करेनी जा। सॉर्ट बदले खातिर कवनो कॉलम के हेडर पर क्लिक करीं।

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	भाखा
1 के बा	तोहार	एगो	अंगरेजी
2 के बा	जो के बा	सिक्सपैक के बा	अंगरेजी
3 के बा	स्टू के बा	डेंट हो गइल	कोड के बा

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

डिफ़ॉल्ट शैली के बा

सभ फार्म सभ के डिफ़ॉल्ट स्टाइल दिहल गइल बा जेह से कि इनहन के पठनीय आ स्केल करे लायक तरीका से पेश कइल जा सके। टेक्स्ट इनपुट, सिलेक्ट लिस्ट, टेक्स्टएरिया, रेडियो बटन आ चेकबॉक्स, आ बटन खातिर स्टाइल दिहल गइल बा।

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

एक्स-लार्ज इनपुट के बा

चुनीं

1 के बा 2 के बा 3 के बा 4 के बा 5 के बा

चुनीं

1 के बा 2 के बा 3 के बा 4 के बा 5 के बा

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

कुछ मूल्य इहाँ बा

इनपुट के अक्षम हो गइल बा

एक्स-लार्ज इनपुट के बा

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

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

पूर्व-लंबित पाठ के बारे में बतावल गइल बा

@ के बा।

प्रीपेंड चेकबॉक्स के बा

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

फाइल इनपुट के बा

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

विकल्प के सूची बा

• विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
• विकल्प दू के भी जांच कईल जा सकता अवुरी फॉर्म के नतीजा में शामिल कईल जा सकता
• विकल्प तीन के भी-हँ, रउआ अंदाजा लगा लेले बानी-ओकर जांच कइल जा सकेला आ फॉर्म रिजल्ट में शामिल कइल जा सकेला
• विकल्प चार के जांच ना कइल जा सके काहे कि ई अक्षम बा.

नोट: लेबल सभ बहुत बड़ क्लिक क्षेत्र आ ढेर इस्तेमाल करे लायक फॉर्म खातिर सभ विकल्प सभ के घेर लेलें।

तारीख के रेंज के बा

खातिर सभ समय प्रशांत मानक समय (GMT -08:00) के रूप में देखावल गइल बा।

टेक्स्टएरिया के बा

जरूरत पड़ला पर ऊपर दिहल क्षेत्र के वर्णन करे खातिर मदद पाठ के ब्लॉक।

विकल्प के सूची बा

• विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
• विकल्प दू के भी जांच कईल जा सकता अवुरी फॉर्म के नतीजा में शामिल कईल जा सकता

बदलाव के सहेजल जाला  मना कइ दीं

ढेर हो गइल फार्म बा

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

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

एक्स-लार्ज इनपुट के बा

चुनीं

1 के बा 2 के बा 3 के बा 4 के बा 5 के बा

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

एक्स-लार्ज इनपुट के बा

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

विकल्प के सूची बा

• विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
• विकल्प दू के भी जांच कईल जा सकता अवुरी फॉर्म के नतीजा में शामिल कईल जा सकता

नोट: लेबल सभ बहुत बड़ क्लिक क्षेत्र आ ढेर इस्तेमाल करे लायक फॉर्म खातिर सभ विकल्प सभ के घेर लेलें।

बदलाव के सहेजल जाला  मना कइ दीं

बटन के बा

एगो कन्वेंशन के रूप में बटन सभ के इस्तेमाल क्रिया सभ खातिर होला जबकि लिंक सभ के इस्तेमाल ऑब्जेक्ट सभ खातिर कइल जाला। उदाहरण खातिर, "डाउनलोड" एगो बटन हो सके ला आ "हाल के गतिविधि" एगो लिंक हो सके ला।

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

उदाहरण के बटन के बारे में बतावल गइल बा

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

बारी-बारी से आकार के बा

फैंसी बड़ बटन बा कि छोट? एकरा पर बा!

अक्षम अवस्था में बा

जवन बटन सक्रिय नईखे चाहे कवनो ना कवनो कारण से ऐप के ओर से अक्षम बा, ओकरा खाती अक्षम स्थिति के इस्तेमाल करीं। ऊ .disabledलिंक खातिर आ तत्वन :disabledखातिर बा.<button>

लिंक दिहल गइल बा

बटन के बा

ई का बा

हमनी के टॉपबार एगो फिक्स बार ह जवना में कवनो वेबसाइट के लोगो भा नाम, प्राथमिक नेविगेशन, आ सर्च फॉर्म होला.

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

भीतर के सभ तत्व, आ पूरा टॉपबार भी, वैकल्पिक बाड़ें। रउआँ लोगो/नाँव, नव, खोज, आ सेकेंडरी नव-या एकर कौनों भी संयोजन शामिल करे के विकल्प चुन सकत बानी।

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

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

टैब आ गोली के बारे में बतावल गइल बा

एगो के साथ सरल माध्यमिक नेविगेशन बनाईं <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> के बा

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

<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> के बा

पृष्ठांकन कइल गइल बा

आरडीओ से प्रेरित अल्ट्रा सरल आ न्यूनतम स्टाइल के पेजिनेशन। बड़ ब्लॉक के छूटल मुश्किल बा, आसानी से स्केल करे लायक बा, अवुरी बड़ क्लिक एरिया उपलब्ध करावेला।

<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 के इस्तेमाल करीं.

का शामिल बा

बूटस्ट्रैप के हिस्सा के रूप में ट्विटर बूटस्ट्रैप में जवन कुछ शामिल बा ओकर कुछ खास बात इहाँ दिहल बा। डाउनलोड करे आ ��उरी जाने खातिर बूटस्ट्रैप वेबसाइट भा गिथब प्रोजेक्ट पन्ना पर जाईं.

चर के बारे में बतावल गइल बा

कम में चर आपके सीएसएस सिरदर्द मुक्त बनाए रखे आ अपडेट करे खातिर एकदम सही बा। जब रउआँ कवनो रंग मान भा अक्सर इस्तेमाल होखे वाला मान बदलल चाहत बानी त ओकरा के एक जगह अपडेट करीं आ रउआँ सेट हो जाईं।

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

टिप्पणी करत बानी

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

// ई एगो टिप्पणी बा
/* ईहो एगो टिप्पणी बा */

वजू के ऊपर मिक्सिंग करेला

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

फॉन्ट के ढेर हो जाला

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

ढाल के बारे में बतावल गइल बा

# ढाल { के बा।
  . क्षैतिज ( @ शुरू रंग : # 555, @ अंत रंग: # 333) { 1। 
    पृष्ठभूमि - रंग : @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 ); // ले मानक के बा   
  } के बा।
  . ऊर्ध्वाधर ( @ शुरू रंग : # 555, @ अंत रंग: # 333) { 1। 
    पृष्ठभूमि - रंग : @endColor ; 
    पृष्ठभूमि - दोहरावे के : दोहरावे के - x ;
    पृष्ठभूमि - छवि : - 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) { 
    ...
  } के बा।
} के बा।

संचालन आ ग्रिड सिस्टम के बारे में बतावल गइल बा

फैंसी होखीं आ कुछ गणित करीं जेहसे कि नीचे दिहल जइसन लचीला आ शक्तिशाली मिक्सिन पैदा कइल जा सके.

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