त्वरित-शुरुआत उदाहरण

कुछ त्वरित टेम्पलेट्स दी लोड़ ऐ? इनें बुनियादी उदाहरणें गी दिक्खो जेह् ड़े असें गी इकट्ठा कीता ऐ:

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

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

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

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

<div वर्ग = "पंक्ति" > ऐ 
  <div वर्ग = "स्पैन6" > ऐ 
    ...
  </div> दा
  <div वर्ग = "स्पैन10" > ऐ 
    ...
  </div> दा
</div> दा

घोंसले बनाने वाले स्तंभ

.rowजेकर तुसें गी इक मौजूदा स्तंभ दे अंदर इक बनाइयै अपनी सामग्री गी नेस्ट करो .

नेस्टेड स्तंभें दा उदाहरण

<div वर्ग = "पंक्ति" > ऐ 
  <div वर्ग = "स्पैन12" > ऐ 
    स्तंभ दा लेवल 1
    <div वर्ग = "पंक्ति" > ऐ 
      <div वर्ग = "स्पैन6" > ऐ 
        लेवल 2 दा
      </div> दा
      <div वर्ग = "स्पैन6" > ऐ 
        लेवल 2 दा
      </div> दा
    </div> दा
  </div> दा
</div> दा

अपनी ग्रिड रोल करो

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

ग्रिड दे अंदर

ग्रिड प्रणाली गी संशोधित करने लेई लोड़चदे चर इसलै सारे variables.less.

अब अनुकूलित करने के लिये

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

बूटस्ट्रैप 24 स्तंभें तगर ग्रिड सिस्टम गी संभालने लेई सुसज्जित ऐ; डिफ़ॉल्ट सिर्फ 16 ऐ इत्थें एह् दिक्खेआ गेआ ऐ जे तुंदे ग्रिड चर 24-स्तंभ ग्रिड गी अनुकूलित कीते गेदे कि’यां दिक्खन जाङन.

@ ग्रिडस्तंभ : 24 ऐ ;       
@ ग्रिडस्तंभ चौड़ाई : 20px ऐ ;   
@ ग्रिडगटर चौड़ाई : 20px ऐ ;   

इक बारी पुनर्संकलित होने पर, तुस सेट होई जाओगे!

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

इक गै <div.container>.

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

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

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

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

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

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

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

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

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

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

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

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

ज ५। हेडिंग 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> डॉ. जूलियस हिबर्ट </small> ऐ
</blockquote> दा

अनऑर्डर<ul>

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

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

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

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

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

ब्यौराdl

विवरण सूची दी

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

यूइसमोद ने दी

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

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

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

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

कोड

<code> <pre>

दो साधारण टैग कन्नै शैली च अपने कोड गी दलाल बनाओ। जावास्क्रिप्ट दे राहें होर बी भयानकता आस्तै, गूगल दा कोड prettify लाइब्रेरी च छोड़ो ते तुस सेट होई गेदे ओ।

कोड पेश करदे होई

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

<दिव> दा
  <h1>शीर्षक</h1> दा
  <p>कुछ ठीक इत्थें...</p>
</div> दा

<div> <h1> हेडिंग </h1> <p> कुछ ठीक इत्थें... </p> </div>
  
  

इनलाइन लेबल

<span class="label">

अपने शरीर दे पाठ च कुसै बी वाक्यांश पर ध्यान आह्नना जां ध्वजांकन करो।

किसी भी चीज़ दा लेबल लगाओ

कदें बी उनें फैंसी न्यू च इक दी लोड़ ही! या कोड लिखदे बेल्लै महत्वपूर्ण झंडे? खैर, हुन तुहाडे कोल ओह हन। एह्दे च डिफ़ॉल्ट रूप कन्नै केह् शामल ऐ:

मीडिया ग्रिड

घट्ट HTML फुटप्रिंट ते घट्ट शा घट्ट शैलियें कन्नै पन्नें पर बक्ख-बक्ख आकारें दे थंबनेल प्रदर्शत करो.

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

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

बड्डा

दरम्याना

लौहका

इन्हें कोडिंग करना

मीडिया ग्रिड दा इस्तेमाल करना आसान ऐ ते मार्कअप साइड पर बल्के सरल ऐ। उंदे आयाम विशुद्ध रूप कन्नै शामल छवियें दे आकार उप्पर आधारत न ।

<ul class = "मीडिया-ग्रिड" > ऐ 
  <ली> दा
    <a href = "#" > ऐ 
      <img वर्ग = "थंबनेल" src = "https://प्लेसहोल्ड.इट/330x230" alt = "" >   
    </a> दा
  </li> दा
  <ली> दा
    <a href = "#" > ऐ 
      <img वर्ग = "थंबनेल" 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 class = "सीमा-सारणी" > 
  ...
</table> दा

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

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

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

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

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

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

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

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

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

• घर

• घर / ऐ।
• बीच दा पेज

• घर / ऐ।
• बीच दा पेज /
• इक होर

• घर / ऐ।
• बीच दा पेज /
• इक होर इक /
• तुसीं इत्थे हो

<ul class = "ब्रेडक्रंब" > ऐ 
  <li><a href = "#" > घर </a> <स्पैन वर्ग = "विभाजक" > / </span></li>   
  <li><a href = "#" > मध्य पृष्ठ </a> <span class = "विभाजक" > / </span></li>   
  <li><a href = "#" > इक होर </a> <span class = "विभाजक" > / </span></li>   
  <li class = "सक्रिय" > तुस इत्थें ओ </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> बेस्ट चेक यो सेल्फ, तुसीं बहुत अच्छा नहीं लग रहे हो। नुल्ला विटाए एलिट लिबेरो, इक फारेत्रा औग। प्रैसेंट कोमोडो कर्सस मैग्ना, वेल scelerisque nisl consectetur एट। </p> दा
  <div वर्ग = "सचेतक-क्रियाएं" > 
    <a class = "btn small" href = "#" > एह् कार्रवाई करो </a> <a class = "btn small" href = "#" > जां एह् करो </a>     
  </div> दा
</div> दा

मोडल ने दी

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

जावास्क्रिप्ट पाओ »

टूलटिप्स दा

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

जावास्क्रिप्ट पाओ »

पोपोवर्स

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

जावास्क्रिप्ट पाओ »

शुरू करना

बूटस्ट्रैप लाइब्रेरी कन्नै जावास्क्रिप्ट गी इकट्ठा करना सुपर आसान ऐ। नीचे अस बुनियादी गल्लें उप्पर जांदे आं ते तुसेंगी शुरू करने आस्तै तुसेंगी किश भयानक प्लगइन उपलब्ध करोआने आं!

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

क्या शामिल ऐ

बूटस्ट्रैप दे किश प्राथमिक घटकें गी नमें कस्टम प्लगइन्स कन्नै जीवन च लाओ जेह् ड़े jQuery ते Ender कन्नै कम्म करदे न . अस तुसेंगी अपने विशेश विकास जरूरतें दे अनुरूप उनेंगी विस्तार ते संशोधित करने लेई प्रोत्साहित करने आं।

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

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

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

होर मती जानकारी आस्तै ते किश लाइव डेमो दिक्खने आस्तै, कृपा करियै साढ़े प्लगइन दस्तावेजीकरण पृष्ठ दा संदर्भ लैओ .