के ऊपर
बाएं
सही
नीचे
बूटस्ट्रैप

बूटस्ट्रैप, ट्विटर से

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

बेवकूफ चेतावनी: बूटस्ट्रैप कम के साथ बनाया गया है और आधुनिक ब्राउज़रों को ध्यान में रखते हुए गेट से बाहर काम करने के लिए डिज़ाइन किया गया था।

CSS को हॉटलिंक करें

सबसे तेज़ और आसान शुरुआत के लिए, बस इस स्निपेट को अपने वेबपेज में कॉपी करें।

इसे कम के साथ प्रयोग करें

कम उपयोग करने का प्रशंसक? कोई बात नहीं, बस रेपो को क्लोन करें और इन पंक्तियों को जोड़ें:

गिटहब पर कांटा

जीथब पर आधिकारिक बूटस्ट्रैप रेपो के साथ डाउनलोड, फोर्क, पुल, फाइल इश्यू और बहुत कुछ।

GitHub पर बूटस्ट्रैप »

वर्तमान में v1.3.0

बूटस्ट्रैप के बारे में संक्षिप्त इतिहास, ब्राउज़र समर्थन, और बहुत कुछ

इतिहास

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

Dev.twitter.com पर और पढ़ें ›

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

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

क्रोम, सफारी, इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स में परीक्षण और समर्थित
  • नवीनतम सफारी
  • नवीनतम गूगल क्रोम
  • फायरफॉक्स 4+
  • इंटरनेट एक्सप्लोरर 7+
  • ओपेरा 11

क्या शामिल है

बूटस्ट्रैप संकलित सीएसएस, असम्पीडित और उदाहरण टेम्पलेट्स के साथ पूरा होता है।

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

कुछ त्वरित टेम्पलेट की आवश्यकता है? इन बुनियादी उदाहरणों को देखें जिन्हें हमने एक साथ रखा है:

  • नायक इकाई के साथ सरल तीन-स्तंभ लेआउट
  • स्थिर साइडबार के साथ द्रव लेआउट
  • ऐप्स के लिए सरल हैंगिंग कंटेनर

ग्रिड सिस्टम मानक 940px रॉक करें या अपना स्वयं का रोल करें

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

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

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

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

  1. <div वर्ग = "पंक्ति" > 
  2.   <div class = "span6" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
1 1
16

ऑफसेटिंग कॉलम

4
8 ऑफसेट 4
1/3 ऑफ़सेट 2/3s
4 ऑफसेट 4
4 ऑफसेट 4
5 ऑफसेट 3
5 ऑफसेट 3
10 ऑफसेट 6

नेस्टिंग कॉलम

अपनी सामग्री को नेस्ट करें यदि आपको .rowकिसी मौजूदा कॉलम के भीतर बनाना है।

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

कॉलम का स्तर 1
लेवल 2
लेवल 2 
  1. <div वर्ग = "पंक्ति" > 
  2.   <div class = "span12" > 
  3.     कॉलम का स्तर 1
  4.     <div वर्ग = "पंक्ति" > 
  5.       <div class = "span6" > 
  6.         लेवल 2
  7.       </div>
  8.       <div class = "span6" > 
  9.         लेवल 2
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

अपना खुद का ग्रिड रोल करें

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

ग्रिड के अंदर

ग्रिड सिस्टम को संशोधित करने के लिए आवश्यक चर वर्तमान में सभी preboot.less.

चर डिफ़ॉल्ट मान विवरण
@gridColumns 16 ग्रिड के भीतर स्तंभों की संख्या
@gridColumnWidth 40px ग्रिड के भीतर प्रत्येक कॉलम की चौड़ाई
@gridGutterWidth 20px प्रत्येक स्तंभ के बीच ऋणात्मक स्थान
@siteWidth सभी स्तंभों और गटरों का परिकलित योग हम कॉलम और गटर की संख्या गिनने और मिश्रण की चौड़ाई निर्धारित करने के लिए कुछ बुनियादी मिलान का उपयोग करते हैं .fixed-container()।

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

ग्रिड को संशोधित करने का अर्थ है तीन @grid-*चर बदलना और कम फ़ाइलों को पुन: संकलित करना।

बूटस्ट्रैप 24 कॉलम तक ग्रिड सिस्टम को संभालने के लिए सुसज्जित है; डिफ़ॉल्ट सिर्फ 16 है। यहां बताया गया है कि 24-कॉलम ग्रिड के लिए आपके ग्रिड वेरिएबल कैसे अनुकूलित दिखेंगे।

  1. @gridColumns : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

एक बार पुन: संकलित हो जाने पर, आप सेट हो जाएंगे!

लेआउट्स वेबपेज बनाने के लिए बुनियादी टेम्पलेट

निश्चित लेआउट

किसी एक वेबसाइट या पेज के लिए डिफ़ॉल्ट और सरल 940px-चौड़ा, केंद्रित लेआउट जो एक <div.container>.

  1. <शरीर>
  2.   <div क्लास = "कंटेनर" > 
  3.     ...
  4.   </div>
  5. </body>

द्रव लेआउट

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

  1. <शरीर>
  2.   <div class = "कंटेनर-तरल पदार्थ" > 
  3.     <div क्लास = "साइडबार" > 
  4.       ...
  5.     </div>
  6.     <div वर्ग = "सामग्री" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

टाइपोग्राफी शीर्षक, पैराग्राफ, सूचियाँ और अन्य इनलाइन प्रकार के तत्व

शीर्षक और कॉपी

आपके वेबपृष्ठों की संरचना के लिए एक मानक टाइपोग्राफ़िक पदानुक्रम।

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

हम अपने सभी प्रकार के मार्जिन, पैडिंग और लाइन-ऊंचाई बनाने के लिए उन चर, और कुछ गणित का उपयोग करते हैं।

एच1. शीर्षक 1

एच2. शीर्षक 2

एच3. शीर्षक 3

एच4. शीर्षक 4

एच5. शीर्षक 5
एच6. शीर्षक 6

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

नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नाटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula ut id elit.

उदाहरण शीर्षक में उप-शीर्षक है…

विविध तत्वों

जोर, पते और संक्षिप्ताक्षरों का उपयोग करना

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

कब इस्तेमाल करें

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

एक पैराग्राफ में जोर

फ्यूस डेपिबस, टेलस एसी कर्सस कमोडो , टॉरटोर मौरिस कंडिमेंटम निभ, यूट फेरमेंटम मासा जस्ट एमेट रिसस । मेकेनास फॉसीबस मोलिस इंटरडम। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग।

नोट:<b> HTML5 में उपयोग और टैग करना अभी भी ठीक है <i>और उन्हें क्रमशः बोल्ड और इटैलिक स्टाइल करने की आवश्यकता नहीं है (हालाँकि यदि अधिक अर्थ तत्व है, तो इसका उपयोग करें)। <b>अतिरिक्त महत्व बताए बिना शब्दों या वाक्यांशों को उजागर करने के लिए है, जबकि <i>ज्यादातर आवाज, तकनीकी शब्दों आदि के लिए है।

पतों

तत्व का <address>उपयोग उसके निकटतम पूर्वज, या कार्य के पूरे निकाय के लिए संपर्क जानकारी के लिए किया जाता है। यहां दो उदाहरण दिए गए हैं कि इसका उपयोग कैसे किया जा सकता है:

ट्विटर, इंक.
795 फोल्सम एवेन्यू, सुइट 600
सैन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890
पूरा नाम
[email protected]

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

लघुरूप

संक्षिप्ताक्षरों और समरूपों के लिए, <abbr>टैग का उपयोग करें ( HTML5<acronym> में पदावनत किया गया है )। शॉर्टहैंड फॉर्म को टैग के अंदर रखें और पूरे नाम के लिए एक टाइटल सेट करें।

ब्लॉक उद्धरण

<blockquote> <p> <small>

कैसे उद्धृत करें

एक ब्लॉककोट शामिल करने के लिए, <blockquote>चारों ओर लपेटें <p>और <small>टैग करें। अपने स्रोत को उद्धृत करने के लिए तत्व का उपयोग करें <small>और आपको इससे पहले एक एम डैश मिलेगा &mdash;।

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

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

सूचियों

अक्रमित<ul>

  • लोरेन इपसाम डलार सिट आमेट
  • Consectetur adipiscing अभिजात वर्ग
  • मासा में पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल एलिकेट में सुविधा
  • नुल्ला वोलुटपाट अलिकम वेलिटा
    • फेसेलस इयाकुलिस नेक
    • पुरुस सोडालेस अल्ट्रीसीज
    • वेस्टिबुलम लौरीट पोर्टिटर सेमी
    • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
  • फौसीबस पोर्टा लैकस फ्रिंजिला वेला
  • ऐनियन सिट आमेट इरेट नन
  • एगेट पोर्टिटर लोरेम

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

  • लोरेन इपसाम डलार सिट आमेट
  • Consectetur adipiscing अभिजात वर्ग
  • मासा में पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल एलिकेट में सुविधा
  • नुल्ला वोलुटपाट अलिकम वेलिटा
    • फेसेलस इयाकुलिस नेक
    • पुरुस सोडालेस अल्ट्रीसीज
    • वेस्टिबुलम लौरीट पोर्टिटर सेमी
    • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
  • फौसीबस पोर्टा लैकस फ्रिंजिला वेला
  • ऐनियन सिट आमेट इरेट नन
  • एगेट पोर्टिटर लोरेम

आदेश दिया<ol>

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

विवरणdl

विवरण सूचियाँ
एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
यूइसमोड
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया ओडियो सेम नेक एलीट।
Donec id elit non mi porta gravida और eget metus.
मालेसुदा पोर्टा
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।

कोड

<code> <pre>

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

प्रस्तुत कोड

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

तत्व परिणाम
<code> >html<इस तरह की टेक्स्ट लाइन में, आपका रैप किया हुआ कोड इस एलिमेंट की तरह दिखेगा ।
<pre> 
<div>
  <h1>शीर्षक</h1>
  <p>यहाँ कुछ है...</p>
</div>

नोट:pre टैग के भीतर कोड को यथासंभव बाईं ओर रखना सुनिश्चित करें ; यह सभी टैब प्रस्तुत करेगा।
<pre class="prettyprint">

google-code-prettify लाइब्रेरी का उपयोग करके, आप कोड के ब्लॉक हैं जो थोड़ा अलग दृश्य शैली और स्वचालित सिंटैक्स हाइलाइटिंग प्राप्त करते हैं।

<div> <h1> शीर्षक </h1> <p> कुछ यहीं पर... </p> </div>

google-code-prettify डाउनलोड करें और उपयोग करने के तरीके के लिए रीडमी देखें।

इनलाइन लेबल

<span class="label">

अपने बॉडी टेक्स्ट में किसी भी वाक्यांश पर ध्यान दें या फ़्लैग करें।

कुछ भी लेबल करें

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

लेबल परिणाम
<span class="label">Default</span> चूक
<span class="label success">New</span> नया
<span class="label warning">Warning</span> चेतावनी
<span class="label important">Important</span> महत्वपूर्ण
<span class="label notice">Notice</span> सूचना

मीडिया छवियों और वीडियो प्रदर्शित कर रहा है

मीडिया ग्रिड

कम HTML पदचिह्न और न्यूनतम शैलियों वाले पृष्ठों पर विभिन्न आकारों के थंबनेल प्रदर्शित करें।

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

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

विशाल

मध्यम

छोटा

उन्हें कोड करना

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

  1. <ul class = "मीडिया-ग्रिड" > 
  2.   <ली>
  3.     <a href = "#" > 
  4.       <img वर्ग = "थंबनेल" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <ली>
  8.     <a href = "#" > 
  9.       <img वर्ग = "थंबनेल" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

टेबल्स के लिए, आपने अनुमान लगाया, सारणीबद्ध डेटा

बिल्डिंग टेबल

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

टेबल्स बहुत अच्छी हैं - बहुत सी चीजों के लिए। हालांकि, महान तालिकाओं को उपयोगी, मापनीय, और पठनीय (कोड स्तर पर) होने के लिए कुछ मार्कअप प्यार की आवश्यकता होती है। मदद करने के लिए यहां कुछ युक्तियां दी गई हैं।

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

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

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

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

# पहला नाम उपनाम भाषा
1 कुछ एक अंग्रेज़ी
2 जो छह पैक अंग्रेज़ी
3 स्टू काटने का निशान कोड 
  1. <तालिका>
  2.   ...
  3. </तालिका>

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

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

# पहला नाम उपनाम भाषा
1 कुछ एक अंग्रेज़ी
2 जो छह पैक अंग्रेज़ी
3 स्टू काटने का निशान कोड

नोट: ज़ेबरा-स्ट्रिपिंग एक प्रगतिशील एन्हांसमेंट है जो IE8 और उससे नीचे के पुराने ब्राउज़रों के लिए उपलब्ध नहीं है।

  1. <टेबल क्लास = "ज़ेबरा-स्ट्राइप्ड" > 
  2. ...
  3. </तालिका>

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

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

# पहला नाम उपनाम भाषा
2 जो छह पैक अंग्रेज़ी
3 स्टू काटने का निशान कोड
1 तुम्हारी एक अंग्रेज़ी 
  1. <स्क्रिप्ट src = "js/jquery/jquery.tablesorter.min.js" ></script> 
  2. <स्क्रिप्ट > 
  3.   $ ( फ़ंक्शन () { 
  4.     $ ( "टेबल # सॉर्टटेबल उदाहरण" )। टेबललेटर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });  
  5.   });
  6. </स्क्रिप्ट>
  7. <टेबल क्लास = "ज़ेबरा-स्ट्राइप्ड" > 
  8.   ...
  9. </तालिका>

फार्म

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

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

उदाहरण प्रपत्र किंवदंती
यहाँ कुछ मूल्य
सहायता पाठ का छोटा अंश
उदाहरण प्रपत्र किंवदंती
@
उदाहरण प्रपत्र किंवदंती
नोट: अधिक बड़े क्लिक क्षेत्रों और अधिक उपयोगी फॉर्म के लिए लेबल सभी विकल्पों को घेर लेते हैं।
प्रति सभी समय प्रशांत मानक समय (जीएमटी -08: 00) के रूप में दिखाए जाते हैं।
यदि आवश्यक हो तो उपरोक्त क्षेत्र का वर्णन करने के लिए सहायता टेक्स्ट का ब्लॉक करें।
 

स्टैक्ड फॉर्म

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

उदाहरण प्रपत्र किंवदंती
उदाहरण प्रपत्र किंवदंती
सहायता पाठ का छोटा अंश
नोट: अधिक बड़े क्लिक क्षेत्रों और अधिक उपयोगी फॉर्म के लिए लेबल सभी विकल्पों को घेर लेते हैं।
 

प्रपत्र फ़ील्ड आकार

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

v1.3.0 के अनुसार, हमने प्रपत्र तत्वों के लिए ग्रिड-आधारित आकार देने वाले वर्ग जोड़े हैं। कृपया इनका उपयोग मौजूदा .mini, .smallआदि कक्षाओं में करें।

बटन

एक सम्मेलन के रूप में, बटन का उपयोग क्रियाओं के लिए किया जाता है जबकि लिंक का उपयोग वस्तुओं के लिए किया जाता है। उदाहरण के लिए, "डाउनलोड" एक बटन हो सकता है और "हाल की गतिविधि" एक लिंक हो सकता है।

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

उदाहरण बटन

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

       

वैकल्पिक आकार

फैंसी बड़े या छोटे बटन? कोशिश करो!

प्राथमिक क्रिया गतिविधि
प्राथमिक क्रिया गतिविधि

अक्षम अवस्था

उन बटनों के लिए जो सक्रिय नहीं हैं या किसी कारण या किसी अन्य कारण से ऐप द्वारा अक्षम हैं, अक्षम स्थिति का उपयोग करें। वह .disabledलिंक के लिए और :disabledतत्वों के लिए <button>है।

लिंक

प्राथमिक क्रिया गतिविधि

बटन

 

अलर्ट और त्रुटियाँ सफलता, चेतावनी और त्रुटि संदेशों या अलर्ट के लिए शैलियाँ

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

.alert-message

विफलता, संभावित विफलता, या किसी कार्रवाई की सफलता को उजागर करने के लिए एक-पंक्ति संदेश। रूपों के लिए विशेष रूप से उपयोगी है।

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

×

पवित्र गुआकामोल! सबसे अच्छा यो स्वयं जांचें, आप बहुत अच्छे नहीं दिख रहे हैं।

×

ओह तस्वीर! इसे और वह बदलें और पुनः प्रयास करें।

×

बहुत बढ़िया! आपने इस अलर्ट संदेश को सफलतापूर्वक पढ़ लिया है।

×

सचेत! यह एक चेतावनी है जिस पर आपको ध्यान देने की आवश्यकता है, लेकिन यह अभी बहुत बड़ी प्राथमिकता नहीं है।

उदाहरण कोड

  1. <div class = "अलर्ट-मैसेज वार्निंग" > 
  2.   <a class = "करीब" href = "#" > × </a>  
  3.   <p><strong> पवित्र guacamole! </strong> अपने आप को सर्वश्रेष्ठ जांचें, आप बहुत अच्छे नहीं दिख रहे हैं। </p>
  4. </div>

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

.alert-message.block-message

उन संदेशों के लिए जिनके लिए कुछ स्पष्टीकरण की आवश्यकता होती है, हमारे पास अनुच्छेद शैली अलर्ट हैं। ये लंबे समय तक त्रुटि संदेशों को बुदबुदाते हुए, किसी लंबित कार्रवाई के लिए उपयोगकर्ता को चेतावनी देने, या पृष्ठ पर अधिक जोर देने के लिए जानकारी प्रस्तुत करने के लिए एकदम सही हैं।

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

×

पवित्र गुआकामोल! यह एक चेतावनी है! सबसे अच्छा यो स्वयं जांचें, आप बहुत अच्छे नहीं दिख रहे हैं। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग। प्रेज़ेंट कमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटूर एट।

यह कार्रवाई करें या यह करो
×

ओह तस्वीर! आपको त्रुटि मिली! इसे और वह बदलें और पुनः प्रयास करें।

  • डुइस मोलिस इस्ट नॉन कमोडो लक्टस
  • निसी इरेट पोर्टिटर लिगुला
  • इगेट लैकिनिया ओडियो सेम नेक एलीट
यह कार्रवाई करें या यह करो
×

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

यह कार्रवाई करें या यह करो
×

सचेत! यह एक चेतावनी है जिस पर आपको ध्यान देने की आवश्यकता है, लेकिन यह अभी बहुत बड़ी प्राथमिकता नहीं है।

यह कार्रवाई करें या यह करो

उदाहरण कोड

  1. <div class = "अलर्ट-मैसेज ब्लॉक-मैसेज वार्निंग" > 
  2.   <a class = "करीब" href = "#" > × </a>  
  3.   <p><strong> पवित्र guacamole! यह एक चेतावनी है! </strong> अपने आप को सर्वश्रेष्ठ जांचें, आप बहुत अच्छे नहीं दिख रहे हैं। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग। प्रेज़ेंट कमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटूर एट। </p>
  4.   <div class = "अलर्ट-एक्शन" > 
  5.     <a class = "btn small" href = "#" > यह क्रिया करें </a> <a class = "btn small" href = "#" > या यह करें </a>     
  6.   </div>
  7. </div>

मोडल, टूलटिप्स और पॉपओवर में सामग्री प्रदर्शित करने के लिए पॉपओवर घटक

क्रियार्थ द्योतक

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

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

×

मोडल हेडिंग

एक अच्छा शरीर…

मुख्य माध्यमिक

टूलटिप्स

भ्रमित उपयोगकर्ता की सहायता करने और उन्हें सही दिशा में इंगित करने के लिए Twipsies सुपर उपयोगी हैं।

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

लोरेम इप्सम डोलर सिट एमेट इलो एरर इप्सम वेरिटैटिस और इस्टे पर्सपिसियाटिस इस्ट वॉलुप्टस नेटस इलो क्वैसी ओडिट ऑट नेटस कॉन्सेक्वेंटूर कॉन्सेक्वंटूर, ऑट नेटस इलो वोलुप्टेटम ओडिट पर्सपिसिअटिस लॉडेंटियम रेम डोलोरेमक्यू टोटम वोलुप्टस। और इसे और अधिक स्पष्ट रूप से समझाते हैं, और अधिक स्पष्ट रूप से समझाते हैं, जो कि एक्यूसेंटियम टोटम टोटम आर्किटेक्टो एक्सप्लिसाबो सिट क्वासी फ्यूगिट फुगिट, टोटम डोलोरेमक्यू और सन्ट सेड डिक्टेट क्वाय एक्क्यूसेंटियम के लिए आवश्यक है ।

पोपोवेर्स

लेआउट को प्रभावित किए बिना किसी पृष्ठ पर सबटेक्स्टुअल जानकारी प्रदान करने के लिए पॉपओवर का उपयोग करें।

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

पॉपओवर शीर्षक

इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड। मेकेनास फॉसीबस मोलिस इंटरडम। मोरबी लियो रिसस, पोर्टा एसी कॉन्सेक्टेटूर एसी, वेस्टिबुलम और एरोस।

बूटस्ट्रैप के साथ जावास्क्रिप्ट का उपयोग करना आपको आरंभ करने के लिए प्लगइन्स का एक सूचकांक

शुरू करना

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

जावास्क्रिप्ट दस्तावेज़ देखें »

क्या शामिल है

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

फ़ाइल विवरण
बूटस्ट्रैप-मोडल.जेएस हमारा मॉडल प्लगइन पारंपरिक मोडल जेएस प्लगइन पर एक सुपर स्लिम टेक है! हमने ट्विटर पर केवल उन्हीं कार्यों को शामिल करने का विशेष ध्यान रखा जिनकी हमें आवश्यकता है।
बूटस्ट्रैप-अलर्ट.जेएस अलर्ट प्लगइन अलर्ट में करीबी कार्यक्षमता जोड़ने के लिए एक सुपर छोटा वर्ग है।
बूटस्ट्रैप-ड्रॉपडाउन.जेएस यह प्लगइन बूटस्ट्रैप टॉपबार या टैब्ड नेविगेशन में ड्रॉपडाउन इंटरैक्शन जोड़ने के लिए है।
बूटस्ट्रैप-scrollspy.js स्क्रॉलस्पाई प्लगइन बूटस्ट्रैप टॉपबार में स्क्रॉल स्थिति के आधार पर एक ऑटो अपडेटिंग एनएवी जोड़ने के लिए है।
बूटस्ट्रैप-टैब.जेएस यह प्लगइन स्थानीय सामग्री के माध्यम से साइकिल चलाने के लिए त्वरित, गतिशील टैब और गोली कार्यक्षमता जोड़ता है।
बूटस्ट्रैप-twipsy.js जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tips प्लगइन पर आधारित; twipsy एक अद्यतन संस्करण है, जो छवियों पर निर्भर नहीं करता है, एनिमेशन के लिए css3 का उपयोग करता है, और स्थानीय शीर्षक भंडारण के लिए डेटा-विशेषताएं!
बूटस्ट्रैप-popover.js पॉपओवर प्लगइन आपके एप्लिकेशन में पॉपओवर जोड़ने के लिए एक सरल इंटरफ़ेस प्रदान करता है। यह boostrap-twipsy.js प्लगइन का विस्तार करता है, इसलिए अपने प्रोजेक्ट में पॉपओवर शामिल करते समय उस फ़ाइल को भी पकड़ना सुनिश्चित करें!

क्या जावास्क्रिप्ट आवश्यक है?

नहीं! बूटस्ट्रैप को सबसे पहले और सबसे महत्वपूर्ण CSS लाइब्रेरी के रूप में डिज़ाइन किया गया है। यह जावास्क्रिप्ट शामिल शैलियों के शीर्ष पर एक बुनियादी इंटरैक्टिव परत प्रदान करता है।

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

अधिक जानकारी के लिए और कुछ लाइव डेमो देखने के लिए, कृपया हमारे प्लगइन प्रलेखन पृष्ठ को देखें ।

कम सुपरचार्ज के साथ बूटस्ट्रैप का उपयोग करके अपने सीएसएस को वेरिएबल, मिक्सिन और फ़ंक्शन के साथ चार्ज करें

बूटस्ट्रैप को प्रीबूट के साथ बनाया गया था , जो मिक्सिन और वेरिएबल्स का एक ओपन-सोर्स पैक है, जिसका उपयोग कम के साथ संयोजन में किया जाना है , जो तेज और आसान वेब विकास के लिए एक सीएसएस प्रीप्रोसेसर है।

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

इसका उपयोग कैसे करना है

अपने ब्राउज़र में जावास्क्रिप्ट के माध्यम से CSS में बूटस्ट्रैप के कम चर, मिक्सिन और नेस्टिंग का पूरा उपयोग करने के लिए इस विकल्प का उपयोग करें।

  1. <लिंक रिले = "स्टाइलशीट/कम" href = "कम/बूटस्ट्रैप.लेस" मीडिया = "सभी" />    
  2. <script src = "js/less-1.1.3.min.js" ></script>

.js समाधान महसूस नहीं कर रहा है? जब आप अपना कोड परिनियोजित करते हैं तो कम मैक ऐप आज़माएं या संकलन करने के लिए Node.js का उपयोग करें।

क्या शामिल है

बूटस्ट्रैप के हिस्से के रूप में ट्विटर बूटस्ट्रैप में क्या शामिल है, इसके कुछ मुख्य अंश यहां दिए गए हैं। डाउनलोड करने और अधिक जानने के लिए बूटस्ट्रैप वेबसाइट या जीथब प्रोजेक्ट पेज पर जाएं।

चर

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

  1. // लिंक
  2. @linkColor : #8b59c2;         
  3. @linkColorHover :     गहरा करें ( @linkColor , 10 ); 
  4.  
  5. // ग्रे
  6. @ब्लैक : #000;             
  7. @ ग्रेडार्क :           हल्का करें ( @ब्लैक , 25 %); 
  8. @ ग्रे :               हल्का करें ( @ब्लैक , 50 %); 
  9. @ ग्रेलाइट :          हल्का करें ( @ब्लैक , 70 %); 
  10. @grayLighter :        हल्का ( @ब्लैक , 90 %); 
  11. @ सफेद : #fff ;             
  12.  
  13. // एक्सेंट रंग
  14. @नीला : #08b5fb ;              
  15. @हरा : #46a546 ;             
  16. @ लाल : #9d261d ;               
  17. @पीला : #ffc40d ;            
  18. @नारंगी : #f89406 ;            
  19. @गुलाबी : #c3325f ;              
  20. @ पर्पल : #7a43b6 ;            
  21.  
  22. // बेसलाइन ग्रिड
  23. @बेसफॉन्ट : 13 पीएक्स ;          
  24. @बेसलाइन : 18px ;

टिप्पणी करते हुए

/* ... */कम सीएसएस के सामान्य ��िंटैक्स के अलावा टिप्पणी करने की एक और शैली भी प्रदान करता है ।

  1. // यह एक टिप्पणी है
  2. /* यह भी एक टिप्पणी है */

वज़ू को मिलाता है

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

फ़ॉन्ट ढेर

  1. #फ़ॉन्ट {
  2.   . शॉर्टहैंड ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
  3.     फ़ॉन्ट - आकार : @ आकार ; 
  4.     फ़ॉन्ट - वजन : @ वजन ; 
  5.     रेखा - ऊँचाई : @lineHeight ; 
  6.   }
  7.   . बिना सेरिफ़ ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
  8.     फ़ॉन्ट - परिवार : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सेन्स - सेरिफ़ ;   
  9.     फ़ॉन्ट - आकार : @ आकार ; 
  10.     फ़ॉन्ट - वजन : @ वजन ; 
  11.     रेखा - ऊँचाई : @lineHeight ; 
  12.   }
  13.   ...
  14. }

ढ़ाल

  1. #ढाल {
  2.   ...
  3.   . लंबवत ( @startColor : #555, @endColor: #333) { 
  4.     पृष्ठभूमि - रंग : @endColor ; 
  5.     पृष्ठभूमि - दोहराना : दोहराना - x ;
  6.     बैकग्राउंड - इमेज : - khtml - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , लेफ्ट बॉटम , से ( @startColor ), से ( @endColor )); // कॉन्करर   
  7.     पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( @startColor , @endColor ); // एफएफ 3.6+   
  8.     पृष्ठभूमि - छवि : - एमएस - रैखिक - ढाल ( @startColor , @endColor ); // IE10   
  9.     बैकग्राउंड - इमेज : - वेबकिट - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , लेफ्ट बॉटम , कलर - स्टॉप ( 0 %, @startColor ), कलर - स्टॉप ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+    
  10.     पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+   
  11.     पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( @startColor , @endColor ); // ओपेरा 11.10   
  12.     पृष्ठभूमि - छवि : रैखिक - ढाल ( @startColor , @endColor ); // मानक  
  13.   }
  14.   ...
  15. }

संचालन

फैंसी प्राप्त करें और नीचे दिए गए जैसे लचीले और शक्तिशाली मिश्रण उत्पन्न करने के लिए कुछ गणित करें।

  1. // ग्रिडिट्यूड
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // कुछ कॉलम बनाएं
  8. . कॉलम ( @columnSpan : 1 ) {  
  9.   चौड़ाई : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

कम संकलन

/lib/ में फ़ाइलों को संशोधित करने के बाद .less, आपको बूटस्ट्रैप-*.*.*.css और बूटस्ट्रैप-*.*.*.min.css फ़ाइलों को पुन: उत्पन्न करने के लिए उन्हें पुन: संकलित करने की आवश्यकता होगी। यदि आप गिटहब को पुल अनुरोध सबमिट कर रहे हैं, तो आपको हमेशा पुन: संकलित करना होगा।

संकलन करने के तरीके

तरीका कदम
मेकफ़ाइल के साथ नोड

निम्न कमांड चलाकर npm के साथ कम कमांड लाइन कंपाइलर स्थापित करें:

$ npm कम स्थापित करें

एक बार इंस्टाल होने के बाद बस makeअपने बूटस्ट्रैप डायरेक्टरी के रूट से चलाएं और आप पूरी तरह तैयार हैं।

इसके अतिरिक्त, यदि आपके पास वॉचर स्थापित है, तो आप make watchबूटस्ट्रैप को हर बार बूटस्ट्रैप लिब में किसी फ़ाइल को संपादित करने के लिए स्वचालित रूप से फिर से बनाने के लिए चला सकते हैं (यह आवश्यक नहीं है, बस एक सुविधा विधि है)।
जावास्क्रिप्ट

नवीनतम कम.जेएस डाउनलोड करें और इसके लिए पथ (और बूटस्ट्रैप) को head.

  1. <लिंक rel = "स्टाइलशीट/कम" href = "/path/to/bootstrap.less" >  
  2. <स्क्रिप्ट src = "/path/to/less.js" ></script>

.less फ़ाइलों को पुन: संकलित करने के लिए, बस उन्हें सहेजें और अपना पृष्ठ पुनः लोड करें। कम.जेएस उन्हें संकलित करता है और उन्हें स्थानीय भंडारण में संग्रहीत करता है।
कमांड लाइन

यदि आपके पास पहले से कम कमांड लाइन उपकरण स्थापित है, तो बस निम्नलिखित कमांड चलाएँ:

$lessc ./lib/bootstrap.less >bootstrap.css

--compressयदि आप कुछ बाइट सहेजने का प्रयास कर रहे हैं तो उस आदेश में शामिल करना सुनिश्चित करें !
कम मैक ऐप

अनौपचारिक मैक ऐप .less फ़ाइलों की निर्देशिका देखता है और देखे गए .less फ़ाइल के प्रत्येक सहेजने के बाद कोड को स्थानीय फ़ाइलों में संकलित करता है।

यदि आप चाहें, तो आप स्वचालित रूप से छोटा करने के लिए ऐप में वरीयताओं को टॉगल कर सकते हैं और संकलित फ़ाइलें किस निर्देशिका में समाप्त होती हैं।