त्वरित-शुरुआत के उदाहरण दिहल गइल बा

कुछ त्वरित टेम्पलेट के जरूरत बा? हमनी के एक साथ रखल ई मूल उदाहरण सभ के देखल जाय:

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

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

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

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

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

घोंसला बनावे के कॉलम बा

.rowअगर रउआँ के कवनो मौजूदा कॉलम के भीतर एगो बना के आपन सामग्री के नेस्ट करीं ।

नेस्टेड कॉलम के उदाहरण बा

<div वर्ग = "पंक्ति" > के बा 
  <div वर्ग = "span12" > के बा 
    कॉलम के लेवल 1 के बा
    <div वर्ग = "पंक्ति" > के बा 
      <div वर्ग = "span6" > के बा 
        स्तर 2 के बा
      </div> के बा
      <div वर्ग = "span6" > के बा 
        स्तर 2 के बा
      </div> के बा
    </div> के बा
  </div> के बा
</div> के बा

आपन ग्रिड खुदे रोल करीं

बूटस्ट्रैप में डिफ़ॉल्ट 940px ग्रिड सिस्टम के अनुकूलित करे खातिर मुट्ठी भर चर बनावल गइल बा। तनी कस्टमाइजेशन से रउआ कॉलम के साइज, ओकर गटर, आ जवना कंटेनर में ऊ रहेला, ओकरा में बदलाव कर सकेनी।

ग्रिड के भीतर बा

ग्रिड सिस्टम के संशोधित करे खातिर जवन चर के जरूरत बा ऊ वर्तमान में सभे variables.less.

अब कस्टमाइज करे खातिर

ग्रिड के संशोधित करे के मतलब होला तीनों @grid-*चर के बदलल आ लेस फाइल सभ के फिर से संकलित कइल।

बूटस्ट्रैप 24 गो कॉलम तक के ग्रिड सिस्टम के संभाले खातिर सुसज्जित बा; डिफ़ॉल्ट बस 16. इहाँ बतावल गइल बा कि राउर ग्रिड चर 24 कॉलम वाला ग्रिड खातिर अनुकूलित कइसे लउकी.

@gridColumns : 24 के बा ;       
@gridColumnWidth : 20px के बा;   
@gridGutterWidth : 20px के बा;   

एक बेर रिकंपाइल हो गइला का बाद रउरा सेट हो जाईं!

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

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

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

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

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

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

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

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

पूरा टाइपोग्राफिक ग्रिड हमनी के variables.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>इस्तेमाल ओकर नजदीकी पूर्वज खातिर संपर्क जानकारी खातिर कइल जाला, या पूरा काम के निकाय खातिर। एकर इस्तेमाल कइसे कइल जा सकेला एकर दू गो उदाहरण दिहल जा रहल बा:

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

संक्षिप्त रूप दिहल गइल बा

संक्षिप्त नाँव आ संक्षिप्त नाँव खातिर, <abbr>टैग के इस्तेमाल करीं ( HTML5<acronym> में डिप्रीकेट कइल गइल बा )। टैग के भीतर आशुलिपि फार्म डाल के पूरा नाम खातिर एगो टाइटिल सेट करीं।

ब्लॉककोट कइल गइल बा

<blockquote> <p> <small>

कइसे उद्धरण दिहल जाव

ब्लॉककोट शामिल करे खातिर, लपेट <blockquote>के <p>आ <small>टैग करीं। अपना स्रोत के हवाला देवे खातिर तत्व के इस्तेमाल करीं आ एकरा से पहिले <small>रउआँ के एगो एम डैश मिली ।—

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

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

<ब्लॉककोट> के बा
  <p> लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एरेट एगो एंटी वेनेनेटिस डापिबस पोसुएरे वेलिट एलिकेट। </p>के बा
  <छोट> डॉ. जूलियस हिबर्ट </small> के बा
</blockquote> के बा

बिना क्रम के बा<ul>

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

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

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

आदेश दिहल गइल बा<ol>

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

बिबरनdl

विवरण के सूची दिहल गइल बा

शब्दन के परिभाषित करे खातिर एगो विवरण सूची एकदम सही बा।

यूइसमोड के नाम से जानल जाला

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

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

मलेसुआडा पोर्टा के बा

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

कोड के बा

<code> <pre>

दू गो साधारण टैग के साथ स्टाइल में आपन कोड पिंप करीं। जावास्क्रिप्ट के माध्यम से अवुरी जादे भयानकता खाती गूगल के कोड prettify लाइब्रेरी में ड्रॉप करीं अवुरी आप सेट हो जाईब।

कोड पेश करत बानी

कोड, इनलाइन के ब्लॉक भा बस स्निपेट, बस सही टैग में लपेट के स्टाइल के साथ देखावल जा सके ला। कई लाइन सभ पर बिस्तार वाला कोड के ब्लॉक सभ खातिर, <pre>तत्व के इस्तेमाल करीं। इनलाइन कोड खातिर, <code>तत्व के इस्तेमाल करीं।

<div> के बा
  <h1>शीर्षक</h1> के बा
  <p>कुछ ठीक इहाँ...</p>
</div> के बा

<div> <h1> हेडिंग </h1> <p> कुछ ठीक इहाँ... </p> </div>
  
  

इनलाइन लेबल के बा

<span class="label">

अपना शरीर के पाठ में कवनो वाक्यांश पर ध्यान दीं भा झंडा देखाईं.

कवनो भी चीज के लेबल लगाईं

कबो ओह फैंसी न्यू में से एगो के जरूरत पड़ल बा! या कोड लिखत घरी महत्वपूर्ण झंडा? खैर, अब रउरा लगे ऊ लोग बा. इहाँ डिफ़ॉल्ट रूप से का शामिल कइल गइल बा:

मीडिया ग्रिड के बा

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

उदाहरण खातिर थंबनेल बा

में थंबनेल .media-gridकौनों भी साइज के हो सके ला, बाकी ई सभसे नीक काम करे लें जब सीधे बिल्ट-इन बूटस्ट्रैप ग्रिड सिस्टम में मैप कइल जाय। 90, 210, आ 330 नियर छवि के चौड़ाई कुछ पिक्सेल के पैडिंग के साथ मिल के .span2, .span4, आ .span6कॉलम के साइज के बराबर हो जाला।

बड़हन

माध्यम

छोट

ओह लोग के कोडिंग कइल

मीडिया ग्रिड सभ के इस्तेमाल आसान होला आ मार्कअप साइड पर बल्कि सरल होला। इनहन के आयाम बिशुद्ध रूप से शामिल बिम्ब सभ के साइज के आधार पर होला।

<ul class = "मीडिया-ग्रिड" > के बा 
  <ली> के बा
    <a href = "#" > के बा 
      <img class = "थंबनेल" src = "https://प्लेसहोल्ड.इट/330x230" alt = "" > बा   
    </a> के बा
  </li> के बा
  <ली> के बा
    <a href = "#" > के बा 
      <img class = "थंबनेल" src = "https://प्लेसहोल्ड.इट/330x230" alt = "" > बा   
    </a> के बा
  </li> के बा
</ul> के बा

टेबल बनावे के बा

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

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

हमेशा अपना कॉलम हेडर के <thead>अइसन लपेटीं कि पदानुक्रम <thead>> <tr>> <th>होखे .

कॉलम हेडर के समान, आपके टेबल के सभ बॉडी कंटेंट के एगो में लपेटल जाए के चाही <tbody>ताकि आपके हायरर्की <tbody>> <tr>> <td>होखे।

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

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

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

उदाहरण खातिर : संघनित तालिका

अइसन टेबल सभ खातिर जेह में कड़ा जगह पर ढेर डेटा के जरूरत होखे, कंडेनसेट फ्लेवर के इस्तेमाल करीं जे पैडिंग के आधा में काट देला। एकर इस्तेमाल बॉर्डर आ ज़ेबरा-स्ट्राइप सभ के साथ भी कइल जा सके ला, ठीक डिफ़ॉल्ट टेबल स्टाइल सभ नियर।

उदाहरण खातिर: सीमाबद्ध तालिका

अपना टेबल के कोना गोल क के आ चारो ओर बॉर्डर जोड़ के बस तनिका चिकना देखाई दिही।

<तालिका वर्ग = "सीमा वाला-तालिका" > 
  ...
</table> के बा

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

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

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

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

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

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

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

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

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

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

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

फार्म फील्ड के साइज के बा

अपना मार्कअप में बस कुछ क्लास जोड़ के कवनो भी फॉर्म input, select, या चौड़ाई के अनुकूलित करीं।textarea

v1.3.0 के रूप में, हमनी के फॉर्म तत्व खातिर ग्रिड आधारित साइजिंग क्लास जोड़ले बानी जा। कृपया मौजूदा .mini, .small, आदि कक्षा सभ के ऊपर इनहन के इस्तेमाल करीं।

बटन के बा

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

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

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

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

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

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

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

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

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

बटन के बा

ई का बा

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

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

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

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

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

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

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

रोटी के टुकड़न के

ब्रेडक्रंब नेविगेशन के इस्तेमाल यूजर लोग के ई देखावे के तरीका के रूप में कइल जाला कि ऊ लोग कौनों ऐप भा साइट के भीतर कहाँ बा, बाकी प्राथमिक नेविगेशन खातिर ना।

• घर

• घर / 1999 के बा।
• बीच के पन्ना पर बा

• घर / 1999 के बा।
• बीच के पन्ना / 1 बा।
• एगो अउरी बा

• घर / 1999 के बा।
• बीच के पन्ना / 1 बा।
• एगो अउरी एगो / .
• रउआ इहाँ बानी

<ul class = "ब्रेडक्रंब" > के बा 
  <li><a href = "#" > घर </a> <span class = "विभाजक" > / </span></li> बा   
  <li><a href = "#" > बीच के पन्ना </a> <span class = "विभाजक" > / </span></li>   
  <li><a href = "#" > एगो अउरी </a> <span class = "divider" > / </span></li>   
  <li class = "active" > रउआँ इहाँ बानी </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> के बा

बेसिक अलर्ट दिहल गइल बा

.alert-message

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

जावास्क्रिप्ट ले लीं »

उदाहरण के कोड बा

<div class = "अलर्ट-संदेश चेतावनी" > बा 
  <a class = "बंद करीं" href = "#" > × </a>  
  <p><strong> पवित्र ग्वाकामोल के बा! </strong> बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत. </p>के बा
</div> के बा

संदेशन के ब्लॉक कर दिहल जाव

.alert-message.block-message

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

जावास्क्रिप्ट ले लीं »

उदाहरण के कोड बा

<div class = "सचेतक-संदेश ब्लॉक-संदेश चेतावनी" > 
  <a class = "बंद करीं" href = "#" > × </a>  
  <p><strong> पवित्र ग्वाकामोल के बा! ई एगो चेतावनी बा! </strong> बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत. नुल्ला विटा एलिट लिबेरो, एगो फारेट्रा औग। प्रैसेंट कोमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटर एट के बा। </p>के बा
  <div वर्ग = "सचेतक-क्रिया" > बा 
    <a class = "btn small" href = "#" > ई कार्रवाई करीं </a> <a class = "btn small" href = "#" > या ई करीं </a>     
  </div> के बा
</div> के बा

मोडल के बा

मोडल-संवाद भा लाइटबॉक्स- अइसन स्थिति सभ में संदर्भ क्रिया सभ खातिर बहुत बढ़िया होलें जहाँ ई जरूरी होखे कि पृष्ठभूमि संदर्भ के रखरखाव कइल जाय।

जावास्क्रिप्ट ले लीं »

टूलटिप के बारे में बतावल गइल बा

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

जावास्क्रिप्ट ले लीं »

पोपोवर्स के नाम से जानल जाला

लेआउट के प्रभावित कइले बिना कौनों पन्ना के उपपाठ जानकारी देवे खातिर पॉपओवर सभ के इस्तेमाल करीं।

जावास्क्रिप्ट ले लीं »

शुरुआत कइल जा रहल बा

बूटस्ट्रैप लाइब्रेरी के संगे जावास्क्रिप्ट के एकीकृत कईल सुपर आसान बा। नीचे हमनी के मूल बातन पर जानी जा आ रउआ के कुछ भयानक प्लगइन उपलब्ध करावत बानी जा जवना से रउआ शुरू हो सके!

जावास्क्रिप्ट के डॉक्स देखल जाव »

का शामिल बा

बूटस्ट्रैप के कुछ प्राथमिक घटक के नया कस्टम प्लगइन के साथ जीवन में ले आईं जवन jQuery आ Ender के साथ काम करेला । हम रउआँ के प्रोत्साहित करत बानी कि रउआँ के विशिष्ट विकास जरूरतन के अनुरूप इनहन के विस्तार आ संशोधन करीं।

का जावास्क्रिप्ट जरूरी बा?

ना! बूटस्ट्रैप के सभसे पहिले आ सभसे खास बात ई सीएसएस लाइब्रेरी होखे खातिर डिजाइन कइल गइल बा। ई जावास्क्रिप्ट शामिल शैली सभ के ऊपर एगो बेसिक इंटरएक्टिव लेयर उपलब्ध करावे ला।

हालांकि, जेकरा जावास्क्रिप्ट के जरूरत बा, ओकरा खातिर हमनी के ऊपर दिहल प्लगइन उपलब्ध करवले बानी जा, जवना से रउआ इ समझे में मदद मिली कि बूटस्ट्रैप के जावास्क्रिप्ट के संगे कईसे एकीकृत कईल जा सकता अवुरी रउआ के तुरंत बेसिक फंक्शनलिटी खाती एगो त्वरित, हल्का विकल्प दिहल जाई।

अधिक जानकारी खातिर आ कुछ लाइव डेमो देखे खातिर, कृपया हमनी के प्लगइन दस्तावेजीकरण पन्ना देखल जाय ।