त्वरित-प्रारंभ उदाहरण

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

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

बूटस्ट्रैप कें हिस्सा कें रूप मे उपलब्ध करायल गेल डिफ़ॉल्ट ग्रिड सिस्टम 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-स्तंभ ग्रिड पर अनुकूलित कोना लागत.

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

एक बेर पुनः संकलित भ' गेलाक बाद, अहाँ सेट भ' जायब!

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

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

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

द्रव लेआउट

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

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

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

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

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

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

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

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

ब्लॉककोट्स

<blockquote> <p> <small>

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

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

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

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

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

अक्रमित<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 अभिजात वर्ग |

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

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

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

संहिता

<code> <pre>

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

कोड प्रस्तुत करब

कोड, ब्लॉक या बस इनलाइन स्निपेट, शैली के साथ प्रदर्शित करलऽ जाब॑ सकै छै बस सही टैग म॑ लपेटी क॑ । एक सँ बेसी रेखा पर फैलल कोड के ब्लॉक के लेल, <pre>तत्व के प्रयोग करू. इनलाइन कोड के लिये, <code>तत्व का प्रयोग करें |

<दिव>
  <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 class = "सीमा-सारणी" > 
  ...
</table>क अनुसार

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

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

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

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

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

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

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

बेसिक गोलियाँ उदाहरण

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

<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>

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

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

• घर

• घर / 1।
• मध्य पृष्ठ

• घर / 1।
• मध्य पृष्ठ / .
• एकटा आओर

• घर / 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>

पृष्ठांकन

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>

बेसिक अलर्ट

.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> बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी। नुल्ला विटाए एलिट लिबेरो, एक फारेत्रा औग। Praesent commodo cursus मैग्ना, वेल scelerisque nisl consectetur एट। </p>
  <div वर्ग = "सचेतक-क्रियाएँ" > 
    <a class = "btn small" href = "#" > ई क्रिया करू </a> <a class = "btn small" href = "#" > अथवा ई करू </a>     
  </div>
</div>

मोडल

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

जावास्क्रिप्ट प्राप्त करू »

टूलटिप्स

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

जावास्क्रिप्ट प्राप्त करू »

पोपोवर्स

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

जावास्क्रिप्ट प्राप्त करू »

शुरू करब

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

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

की शामिल अछि

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

जावास्क्रिप्ट आवश्यक अछि ?

नहि! बूटस्ट्रैप क॑ सबसें पहलऽ आरू सबसें पहलऽ सीएसएस लाइब्रेरी के रूप म॑ डिजाइन करलऽ गेलऽ छै । ई जावास्क्रिप्ट शामिल शैली के ऊपर एकटा बेसिक इंटरएक्टिव लेयर प्रदान करै छै.

लेकिन, जेकरा जावास्क्रिप्ट के जरूरत छै, ओकरा लेली हम्मं॑ उपरोक्त प्लगइन उपलब्ध कराय देल॑ छै, जेकरा स॑ आपने क॑ ई समझै म॑ मदद मिल॑ सक॑ कि बूटस्ट्रैप क॑ जावास्क्रिप्ट के साथ एकीकृत करलऽ जाय छै आरू तुरंत बुनियादी कार्यक्षमता लेली एगो त्वरित, हल्का विकल्प देलऽ जाय सक॑ ।

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