बूटस्ट्रैप

बेस सीएसएस

मौलिक HTML तत्वों को एक्स्टेंसिबल क्लासेस के साथ स्टाइल और एन्हांस किया गया।

सचेत! ये दस्तावेज़ v2.3.2 के लिए हैं, जो अब आधिकारिक रूप से समर्थित नहीं है। बूटस्ट्रैप का नवीनतम संस्करण देखें!

टाइपोग्राफी

शीर्षकों

सभी HTML शीर्षक, <h1>थ्रू <h6>उपलब्ध हैं।

एच1. शीर्षक 1

एच2. शीर्षक 2

एच3. शीर्षक 3

एच4. शीर्षक 4

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

शरीर की नकल

बूटस्ट्रैप का वैश्विक डिफ़ॉल्ट 14pxfont-size है , जिसमें 20px है । यह और सभी अनुच्छेदों पर लागू होता है। इसके अलावा, (पैराग्राफ) को उनकी आधी लाइन-ऊंचाई (डिफ़ॉल्ट रूप से 10px) का निचला मार्जिन प्राप्त होता है।line-height<body><p>

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

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

मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट सिट एमेट नॉन मैग्ना। Donec id elit non mi porta gravida और eget metus. ड्यूस मोलिस, इस्ट नॉन कमोडो लक्टस, निसि इरेट पोर्टिटर लिगुला, एगेट लैकिनिया ओडियो सेम नेक एलीट।

<p> ... </p>

लीड बॉडी कॉपी

जोड़कर एक पैराग्राफ को अलग बनाएं .lead।

विवामस सैगिटिस लैकस वेल ऑग्यू लॉरीट रुट्रम फॉसीबस डोलर ऑक्टर। डुइस मोलिस, इस्ट नॉन कमोडो लक्टस।

<p क्लास = "लीड" > ... </p>

कम के साथ निर्मित

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

ज़ोर

हल्के स्टाइल के साथ HTML के डिफ़ॉल्ट जोर टैग का उपयोग करें।

<small>

इनलाइन या टेक्स्ट के ब्लॉक पर जोर देने के लिए, छोटे टैग का उपयोग करें।

पाठ की इस पंक्ति को ठीक प्रिंट के रूप में माना जाना है।

<p> <छोटा> पाठ की इस पंक्ति को ठीक प्रिंट के रूप में माना जाना है। </छोटा> </p>

साहसिक

भारी फॉन्ट-वेट वाले टेक्स्ट के एक स्निपेट पर जोर देने के लिए।

टेक्स्ट का निम्न स्निपेट बोल्ड टेक्स्ट के रूप में प्रस्तुत किया गया है ।

<strong> बोल्ड टेक्स्ट के रूप में प्रस्तुत किया गया </strong>

तिर्छा

इटैलिक के साथ टेक्स्ट के एक स्निपेट पर जोर देने के लिए।

टेक्स्ट के निम्नलिखित स्निपेट को इटैलिकाइज़्ड टेक्स्ट के रूप में प्रस्तुत किया गया है ।

<em> इटैलिकाइज़्ड टेक्स्ट के रूप में रेंडर किया गया </em>

सचेत!बेझिझक उपयोग करें <b>और <i>HTML5 में। <b>अतिरिक्त महत्व बताए बिना शब्दों या वाक्यांशों को उजागर करने के <i>लिए है, जबकि ज्यादातर आवाज, तकनीकी शब्दों आदि के लिए है।

संरेखण कक्षाएं

टेक्स्ट अलाइनमेंट क्लासेस वाले कंपोनेंट्स के लिए टेक्स्ट को आसानी से री-अलाइन करें।

बाएं संरेखित पाठ।

मध्य संरेखित पाठ।

सही संरेखित पाठ।

  1. <p वर्ग = "पाठ-बाएँ" > बाएँ संरेखित पाठ। </p> 
  2. <p वर्ग = "पाठ-केंद्र" > मध्य संरेखित पाठ। </p> 
  3. <p क्लास = "टेक्स्ट-राइट" > राइट अलाइन्ड टेक्स्ट। </p>

जोर वर्ग

कुछ विशेष जोर उपयोगिता वर्गों के साथ रंग के माध्यम से अर्थ व्यक्त करें।

फ्यूस डापीबस, टेलस एसी कर्सस कमोडो, टॉर्चर मौरिस निभ।

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

डोनेक उलमकॉर्पर नाला नॉन मेटस ऑक्टर फ्रिंजिला।

ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनाटिस।

डुइस मोलिस, इस्ट नॉन कमोडो लक्टस, निसी इरेट पोर्टिटर लिगुला।

  1. <p क्लास = "म्यूट" > फ्यूस डैपिबस, टेलस एसी कर्सस कमोडो, टॉरटोर मौरिस निभ। </p> 
  2. <p वर्ग = "पाठ-चेतावनी" > एतिम पोर्टा सेम मेसुआदा मैग्ना मोलिस यूइसमॉड। </p> 
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनाटिस। </p> 
  5. <p वर्ग = "पाठ-सफलता" > डुइस मोलिस, इस प्रकार गैर कमोडो लक्टस, निसी इरेट पोर्टिटर लिगुला। </p>

लघुरूप

<abbr>होवर पर विस्तारित संस्करण दिखाने के लिए संक्षिप्ताक्षरों और समरूपों के लिए HTML के तत्व का शैलीबद्ध कार्यान्वयन । विशेषता वाले संक्षिप्ताक्षरों में titleएक हल्की बिंदीदार निचली सीमा होती है और होवर पर एक सहायता कर्सर होता है, जो होवर पर अतिरिक्त संदर्भ प्रदान करता है।

<abbr>

संक्षिप्त नाम के लंबे होवर पर विस्तारित टेक्स्ट के लिए, titleविशेषता शामिल करें।

विशेषता शब्द का संक्षिप्त रूप attr है ।

<abbr शीर्षक = "विशेषता" > attr </abbr>

<abbr class="initialism">

.initialismथोड़े छोटे फ़ॉन्ट-आकार के लिए संक्षिप्त नाम में जोड़ें ।

कटा हुआ ब्रेड के बाद से HTML सबसे अच्छी चीज है।

<abbr शीर्षक = "हाइपरटेक्स्ट मार्कअप लैंग्वेज" वर्ग = "आरंभवाद" > HTML </abbr>

पतों

निकटतम पूर्वज या कार्य के पूरे निकाय के लिए संपर्क जानकारी प्रस्तुत करें।

<address>

के साथ सभी पंक्तियों को समाप्त करके स्वरूपण को संरक्षित करें <br>।

ट्विटर, इंक.
795 फोल्सम एवेन्यू, सुइट 600
सैन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890
पूरा नाम
[email protected] 
  1. <पता>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   795 फोल्सम एवेन्यू, सुइट 600 <br>
  4.   सैन फ्रांसिस्को, सीए 94107 <br>
  5.   <abbr शीर्षक = "फ़ोन" > P: </abbr> (123) 456-7890 
  6. </पता>
  7.  
  8. <पता>
  9.   <strong> पूरा नाम </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </पता>

ब्लॉक उद्धरण

अपने दस्तावेज़ के भीतर किसी अन्य स्रोत से सामग्री के ब्लॉक को उद्धृत करने के लिए।

डिफ़ॉल्ट ब्लॉककोट

उद्धरण के रूप में किसी भी HTML<blockquote> के चारों ओर लपेटें । सीधे उद्धरणों के लिए हम अनुशंसा करते हैं कि एक .<p>

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

  1. <ब्लॉकक्वॉट>
  2.   <p> लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें। </p>
  3. </blockquote>

ब्लॉककोट विकल्प

मानक ब्लॉककोट पर सरल विविधताओं के लिए शैली और सामग्री में परिवर्तन।

एक स्रोत का नामकरण

<small>स्रोत की पहचान के लिए टैग जोड़ें । स्रोत कार्य का नाम <cite>.

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

स्रोत शीर्षक में प्रसिद्ध कोई व्यक्ति 
  1. <ब्लॉकक्वॉट>
  2.   <p> लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिंग एलीट। पूर्णांक posuere एक पूर्व मिटा दें। </p>
  3.   <छोटा> कोई प्रसिद्ध <उद्धरण शीर्षक = "स्रोत शीर्षक" > स्रोत शीर्षक </साइट> </ छोटा> 
  4. </blockquote>

वैकल्पिक प्रदर्शन

.pull-rightएक फ़्लोट किए गए, दाएं-संरेखित ब्लॉकक्वाट के लिए उपयोग करें ।

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

स्रोत शीर्षक में प्रसिद्ध कोई व्यक्ति 
  1. <ब्लॉकक्वॉट क्लास = "पुल-राइट" > 
  2.   ...
  3. </blockquote>

सूचियों

अक्रमित

वस्तुओ�� की एक सूची जिसमें आदेश स्पष्ट रूप से मायने नहीं रखता।

  • लोरेन इपसाम डलार सिट आमेट
  • Consectetur adipiscing अभिजात वर्ग
  • मासा में पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल एलिकेट में सुविधा
  • नुल्ला वोलुटपाट अलिकम वेलिटा
    • फेसेलस इयाकुलिस नेक
    • पुरुस सोडालेस अल्ट्रीसीज
    • वेस्टिबुलम लौरीट पोर्टिटर सेमी
    • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
  • फौसीबस पोर्टा लैकस फ्रिंजिला वेला
  • ऐनियन सिट आमेट इरेट नन
  • एगेट पोर्टिटर लोरेम
  1. <उल>
  2.   <li> ... </li>
  3. </ul>

आदेश दिया

वस्तुओं की एक सूची जिसमें आदेश स्पष्ट रूप से मायने रखता है ।

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

अनस्टाइल्ड

सूची आइटम (केवल तत्काल बच्चे) पर डिफ़ॉल्ट list-styleऔर बायां पैडिंग निकालें।

  • लोरेन इपसाम डलार सिट आमेट
  • Consectetur adipiscing अभिजात वर्ग
  • मासा में पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल एलिकेट में सुविधा
  • नुल्ला वोलुटपाट अलिकम वेलिटा
    • फेसेलस इयाकुलिस नेक
    • पुरुस सोडालेस अल्ट्रीसीज
    • वेस्टिबुलम लौरीट पोर्टिटर सेमी
    • एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
  • फौसीबस पोर्टा लैकस फ्रिंजिला वेला
  • ऐनियन सिट आमेट इरेट नन
  • एगेट पोर्टिटर लोरेम
  1. <उल क्लास = "अनस्टाइल्ड" > 
  2.   <li> ... </li>
  3. </ul>

इन - लाइन

सभी सूची वस्तुओं को एक पंक्ति में inline-blockऔर कुछ हल्के पैडिंग के साथ रखें।

  • लोरेम इप्सम
  • फेसेलस आईकुलिस
  • नुल्ला वोलुटपाट
  1. <उल वर्ग = "इनलाइन" > 
  2.   <li> ... </li>
  3. </ul>

विवरण

उनके संबंधित विवरण के साथ शब्दों की एक सूची।

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

क्षैतिज विवरण

<dl>साथ-साथ लाइन अप में नियम और विवरण बनाएं ।

विवरण सूचियाँ
एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
यूइसमोड
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया ओडियो सेम नेक एलीट।
Donec id elit non mi porta gravida और eget metus.
मालेसुदा पोर्टा
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।
फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया
फ्यूस डेपिबस, टेलस एसी कर्सस कमोडो, टॉरटोर मौरिस कंडिमेंटम निभ, यूट फेरमेंटम मासा जस्टो सिट एमेट रिसस। 
  1. <डीएल वर्ग = "डीएल-क्षैतिज" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

सचेत!क्षैतिज विवरण सूचियाँ उन शब्दों को काट-छाँट कर देंगी जो बाएँ स्तंभ में फ़िट होने के लिए बहुत लंबे हैं text-overflow। संकीर्ण व्यूपोर्ट में, वे डिफ़ॉल्ट स्टैक्ड लेआउट में बदल जाएंगे।

कोड

इन - लाइन

कोड के इनलाइन स्निपेट को <code>.

उदाहरण के लिए, <section>इनलाइन के रूप में लपेटा जाना चाहिए। 
  1. उदाहरण के लिए , <कोड> और लेफ्टिनेंट ; अनुभाग & gt ;</ कोड > इनलाइन के रूप में लपेटा जाना चाहिए ।

बुनियादी ब्लॉक

<pre>कोड की कई पंक्तियों के लिए उपयोग करें । उचित प्रतिपादन के लिए कोड में किसी भी कोण कोष्ठक से बचना सुनिश्चित करें।

<p>यहां नमूना पाठ...</p>
  1. <पूर्व>
  2.   <p>नमूना पाठ यहां...</p>
  3. </pre>

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

आप वैकल्पिक रूप से उस .pre-scrollableवर्ग को जोड़ सकते हैं जो 350px की अधिकतम-ऊंचाई निर्धारित करेगा और एक y-अक्ष स्क्रॉलबार प्रदान करेगा।

टेबल

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

बेसिक स्टाइलिंग के लिए—लाइट पैडिंग और केवल हॉरिजॉन्टल डिवाइडर— .tableकिसी भी <table>.

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
  1. <टेबल क्लास = "टेबल" > 
  2.   …
  3. </तालिका>

वैकल्पिक कक्षाएं

निम्न में से किसी भी वर्ग को .tableआधार वर्ग में जोड़ें।

.table-striped

<tbody>CSS चयनकर्ता के माध्यम से किसी भी तालिका पंक्ति में ज़ेबरा-स्ट्रिपिंग जोड़ता है :nth-child(IE7-8 में उपलब्ध नहीं)।

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर 
  1. <टेबल क्लास = "टेबल टेबल-स्ट्राइप्ड" > 
  2.   …
  3. </तालिका>

.table-bordered

टेबल पर बॉर्डर और गोल कोने जोड़ें।

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
निशान ओटो @getbootstrap
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
  1. <टेबल क्लास = "टेबल टेबल-बॉर्डर" > 
  2.   …
  3. </तालिका>

.table-hover

तालिका पंक्तियों पर एक होवर स्थिति सक्षम करें <tbody>।

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
  1. <टेबल क्लास = "टेबल टेबल-होवर" > 
  2.   …
  3. </तालिका>

.table-condensed

सेल पैडिंग को आधा काटकर टेबल को अधिक कॉम्पैक्ट बनाता है।

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी द बर्ड @ट्विटर 
  1. <टेबल क्लास = "टेबल टेबल-कंडेंस्ड" > 
  2.   …
  3. </तालिका>

वैकल्पिक पंक्ति कक्षाएं

तालिका पंक्तियों को रंगने के लिए प्रासंगिक कक्षाओं का उपयोग करें।

कक्षा विवरण
.success एक सफल या सकारात्मक कार्रवाई का संकेत देता है।
.error एक खतरनाक या संभावित नकारात्मक कार्रवाई का संकेत देता है।
.warning एक चेतावनी इंगित करता है जिस पर ध्यान देने की आवश्यकता हो सकती है।
.info डिफ़ॉल्ट शैलियों के विकल्प के रूप में उपयोग किया जाता है।
# उत्पाद भुगतान लिया गया दर्जा
1 टीबी - मासिक 01/04/2012 स्वीकृत
2 टीबी - मासिक 02/04/2012 इंकार कर दिया
3 टीबी - मासिक 03/04/2012 लंबित
4 टीबी - मासिक 04/04/2012 पुष्टि करने के लिए कॉल करें 
  1. ...
  2.   < tr वर्ग = "सफलता" >
  3.     <td> 1 < /td>
  4.     <td>टीबी - मासिक</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>स्वीकृत</ td >
  7.   </ tr >
  8. ...

समर्थित तालिका मार्कअप

समर्थित तालिका HTML तत्वों की सूची और उनका उपयोग कैसे किया जाना चाहिए।

उपनाम विवरण
<table> सारणीबद्ध प्रारूप में डेटा प्रदर्शित करने के लिए रैपिंग तत्व
<thead> तालिका शीर्षलेख पंक्तियों के लिए कंटेनर तत्व ( <tr>) तालिका स्तंभों को लेबल करने के लिए
<tbody> <tr>तालिका के मुख्य भाग में तालिका पंक्तियों ( ) के लिए कंटेनर तत्व
<tr> तालिका सेल ( <td>या <th>) के सेट के लिए कंटेनर तत्व जो एक पंक्ति में दिखाई देता है
<td> डिफ़ॉल्ट तालिका सेल
<th> कॉलम के लिए विशेष टेबल सेल (या रो, स्कोप और प्लेसमेंट के आधार पर) लेबल
<caption> तालिका में क्या है इसका विवरण या सारांश, विशेष रूप से स्क्रीन पाठकों के लिए उपयोगी 
  1. <तालिका>
  2.   <कैप्शन> ... </कैप्शन>
  3.   <थेड>
  4.     <tr>
  5.       <वें> ... </वें>
  6.       <वें> ... </वें>
  7.     </tr>
  8.   </थड>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </तालिका>

फार्म

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

<form>अलग-अलग फॉर्म नियंत्रण स्टाइल प्राप्त करते हैं, लेकिन मार्कअप में या बड़े बदलावों पर किसी भी आवश्यक बेस क्लास के बिना । प्रपत्र नियंत्रणों के शीर्ष पर स्टैक्ड, बाएँ-संरेखित लेबल में परिणाम।

दंतकथा उदाहरण ब्लॉक-स्तरीय सहायता पाठ यहाँ। 
  1. <फॉर्म>
  2.   <फ़ील्डसेट>
  3.     <किंवदंती> किंवदंती </किंवदंती>
  4.     <लेबल> लेबल का नाम </लेबल>
  5.     <इनपुट प्रकार = "पाठ" प्लेसहोल्डर = "कुछ टाइप करें ..." >  
  6.     <span class = "help-block" > उदाहरण ब्लॉक-लेवल हेल्प टेक्स्ट यहाँ। </span> 
  7.     <लेबल वर्ग = "चेकबॉक्स" > 
  8.       <इनपुट प्रकार = "चेकबॉक्स" > मुझे देखें 
  9.     </लेबल>
  10.     <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > सबमिट करें </बटन>  
  11.   </फ़ील्डसेट>
  12. </फॉर्म>

वैकल्पिक लेआउट

बूटस्ट्रैप के साथ आम उपयोग के मामलों के लिए तीन वैकल्पिक फॉर्म लेआउट शामिल हैं।

खोज फ़ॉर्म

अतिरिक्त-गोलाकार पाठ इनपुट के लिए .form-searchप्रपत्र और में जोड़ें ।.search-query<input>

  1. <फॉर्म क्लास = "फॉर्म-सर्च" > 
  2.   <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-माध्यम खोज-क्वेरी" >  
  3.   <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > खोज </बटन>  
  4. </फॉर्म>

इनलाइन फॉर्म

.form-inlineएक कॉम्पैक्ट लेआउट के लिए बाएं-संरेखित लेबल और इनलाइन-ब्लॉक नियंत्रण जोड़ें ।

  1. <फॉर्म क्लास = "फॉर्म-इनलाइन" > 
  2.   <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-छोटा" प्लेसहोल्डर = "ईमेल" >   
  3.   <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-छोटा" प्लेसहोल्डर = "पासवर्ड" >   
  4.   <लेबल वर्ग = "चेकबॉक्स" > 
  5.     <इनपुट प्रकार = "चेकबॉक्स" > मुझे याद रखें 
  6.   </लेबल>
  7.   <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > साइन इन करें </बटन>  
  8. </फॉर्म>

क्षैतिज रूप

लेबलों को दाईं ओर संरेखित करें और उन्हें नियंत्रण के समान पंक्ति पर प्रदर्शित करने के लिए बाईं ओर फ़्लोट करें। डिफ़ॉल्ट प्रपत्र से सर्वाधिक मार्कअप परिवर्तनों की आवश्यकता है:

  • .form-horizontalफॉर्म में जोड़ें
  • लेबल और नियंत्रणों को इसमें लपेटें.control-group
  • .control-labelलेबल में जोड़ें
  • .controlsउचित संरेखण के लिए किसी भी संबद्ध नियंत्रण को लपेटें
  1. <फॉर्म क्लास = "फॉर्म-क्षैतिज" > 
  2.   <div वर्ग = "नियंत्रण-समूह" > 
  3.     <लेबल क्लास = "कंट्रोल-लेबल" के लिए = "इनपुट ईमेल" > ईमेल </लेबल>  
  4.     <div वर्ग = "नियंत्रण" > 
  5.       <इनपुट प्रकार = "पाठ" आईडी = "इनपुट ईमेल" प्लेसहोल्डर = "ईमेल" >   
  6.     </div>
  7.   </div>
  8.   <div वर्ग = "नियंत्रण-समूह" > 
  9.     <लेबल क्लास = "कंट्रोल-लेबल" के लिए = "इनपुटपासवर्ड" > पासवर्ड </लेबल>  
  10.     <div वर्ग = "नियंत्रण" > 
  11.       <इनपुट प्रकार = "पासवर्ड" आईडी = "इनपुट पासवर्ड" प्लेसहोल्डर = "पासवर्ड" >   
  12.     </div>
  13.   </div>
  14.   <div वर्ग = "नियंत्रण-समूह" > 
  15.     <div वर्ग = "नियंत्रण" > 
  16.       <लेबल वर्ग = "चेकबॉक्स" > 
  17.         <इनपुट प्रकार = "चेकबॉक्स" > मुझे याद रखें 
  18.       </लेबल>
  19.       <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > साइन इन करें </बटन>  
  20.     </div>
  21.   </div>
  22. </फॉर्म>

समर्थित प्रपत्र नियंत्रण

उदाहरण प्रपत्र लेआउट में समर्थित मानक प्रपत्र नियंत्रणों के उदाहरण।

इनपुट

सबसे आम प्रपत्र नियंत्रण, पाठ-आधारित इनपुट फ़ील्ड। सभी HTML5 प्रकारों के लिए समर्थन शामिल है: टेक्स्ट, पासवर्ड, डेटाटाइम, डेटाटाइम-लोकल, दिनांक, माह, समय, सप्ताह, संख्या, ईमेल, url, खोज, दूरभाष, और रंग।

typeहर समय एक निर्दिष्ट के उपयोग की आवश्यकता होती है ।

  1. <इनपुट प्रकार = "टेक्स्ट" प्लेसहोल्डर = "टेक्स्ट इनपुट" >

पाठ क्षेत्र

प्रपत्र नियंत्रण जो पाठ की कई पंक्तियों का समर्थन करता है। आवश्यकतानुसार विशेषता बदलें rows।

  1. <textarea पंक्तियाँ = "3" </textarea>

चेकबॉक्स और रेडियो

चेकबॉक्स एक सूची में एक या कई विकल्प चुनने के लिए होते हैं जबकि रेडियो कई विकल्पों में से एक विकल्प चुनने के लिए होते हैं।

डिफ़ॉल्ट (स्टैक्ड)


  1. <लेबल वर्ग = "चेकबॉक्स" > 
  2.   <इनपुट प्रकार = "चेकबॉक्स" मान = "" >  
  3.   विकल्प एक यह है और वह है - यह शामिल करना सुनिश्चित करें कि यह बहुत अच्छा क्यों है
  4. </लेबल>
  5.  
  6. <लेबल वर्ग = "रेडियो" > 
  7.   <इनपुट प्रकार = "रेडियो" नाम = "विकल्प रेडियो" आईडी = "विकल्प रेडियो 1" मान = "विकल्प 1" चेक किया गया >     
  8.   विकल्प एक यह है और वह है - यह शामिल करना सुनिश्चित करें कि यह बहुत अच्छा क्यों है
  9. </लेबल>
  10. <लेबल वर्ग = "रेडियो" > 
  11.   <इनपुट प्रकार = "रेडियो" नाम = "विकल्प रेडियो" आईडी = "विकल्प रेडियो 2" मान = "विकल्प 2" >    
  12.   विकल्प दो कुछ और हो सकता है और इसे चुनने से विकल्प एक का चयन रद्द हो जाएगा
  13. </लेबल>

इनलाइन चेकबॉक्स

.inlineएक ही पंक्ति पर नियंत्रण के लिए कक्षा को चेकबॉक्स या रेडियो की एक श्रृंखला में जोड़ें ।

  1. <लेबल वर्ग = "चेकबॉक्स इनलाइन" > 
  2.   <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइन चेकबॉक्स 1" मान = "विकल्प 1" > 1   
  3. </लेबल>
  4. <लेबल वर्ग = "चेकबॉक्स इनलाइन" > 
  5.   <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइन चेकबॉक्स 2" मान = "विकल्प 2" > 2   
  6. </लेबल>
  7. <लेबल वर्ग = "चेकबॉक्स इनलाइन" > 
  8.   <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइन चेकबॉक्स 3" मान = "विकल्प 3" > 3   
  9. </लेबल>

चयन

multiple="multiple"एक साथ कई विकल्प दिखाने के लिए डिफ़ॉल्ट विकल्प का उपयोग करें या निर्दिष्ट करें।


  1. <चुनें>
  2.   <विकल्प> 1 </विकल्प>
  3.   <विकल्प> 2 </विकल्प>
  4.   <विकल्प> 3 </विकल्प>
  5.   <विकल्प> 4 </विकल्प>
  6.   <विकल्प> 5 </विकल्प>
  7. </चयन>
  8.  
  9. < एकाधिक चुनें = "एकाधिक" > 
  10.   <विकल्प> 1 </विकल्प>
  11.   <विकल्प> 2 </विकल्प>
  12.   <विकल्प> 3 </विकल्प>
  13.   <विकल्प> 4 </विकल्प>
  14.   <विकल्प> 5 </विकल्प>
  15. </चयन>

प्रपत्र नियंत्रण का विस्तार

मौजूदा ब्राउज़र नियंत्रणों के अलावा, बूटस्ट्रैप में अन्य उपयोगी प्रपत्र घटक शामिल हैं।

प्रीपेड और संलग्न इनपुट

किसी भी टेक्स्ट-आधारित इनपुट से पहले या बाद में टेक्स्ट या बटन जोड़ें। ध्यान दें कि selectयहां तत्व समर्थित नहीं हैं।

डिफ़ॉल्ट विकल्प

किसी इनपुट में टेक्स्ट जोड़ने या जोड़ने के लिए a और a को दो वर्गों में से एक के साथ .add-onलपेटें ।input

@

.00 
  1. <div class = "इनपुट-प्रीपेन्ड" > 
  2.   <span class = "ऐड-ऑन" > @ </span> 
  3.   <इनपुट वर्ग = "span2" आईडी = "प्रीपेन्डइनपुट " प्रकार = "पाठ" प्लेसहोल्डर = "उपयोगकर्ता नाम" >    
  4. </div>
  5. <div class = "इनपुट-एपेंड" > 
  6.   <इनपुट वर्ग = "span2" आईडी = "संलग्न इनपुट" प्रकार = "पाठ" >   
  7.   <span class = "ऐड-ऑन" > .00 </span> 
  8. </div>

संयुक्त

.add-onइनपुट को प्रीपेन्ड करने और जोड़ने के लिए दोनों वर्गों और दो उदाहरणों का उपयोग करें ।

$ .00 
  1. <div class = "इनपुट-प्रीपेन्ड इनपुट-एपेंड" > 
  2.   <span class = "ऐड-ऑन" > $ </span> 
  3.   <इनपुट वर्ग = "span2" आईडी = "संलग्न प्रीपेड इनपुट" प्रकार = "पाठ" >   
  4.   <span class = "ऐड-ऑन" > .00 </span> 
  5. </div>

टेक्स्ट के बजाय बटन

<span>टेक्स्ट के साथ के बजाय , .btnइनपुट में एक बटन (या दो) संलग्न करने के लिए a का उपयोग करें।

  1. <div class = "इनपुट-एपेंड" > 
  2.   <इनपुट वर्ग = "span2" आईडी = "संलग्न इनपुट बटन" प्रकार = "पाठ" >   
  3.   <बटन वर्ग = "बीटीएन" प्रकार = "बटन" > जाओ! </बटन>  
  4. </div>
  1. <div class = "इनपुट-एपेंड" > 
  2.   <इनपुट वर्ग = "span2" आईडी = "संलग्न इनपुट बटन" प्रकार = "पाठ" >   
  3.   <बटन वर्ग = "बीटीएन" प्रकार = "बटन" > खोज </बटन>  
  4.   <बटन वर्ग = "बीटीएन" प्रकार = "बटन" > विकल्प </बटन>  
  5. </div>

बटन ड्रॉपडाउन

  1. <div class = "इनपुट-एपेंड" > 
  2.   <इनपुट क्लास = "स्पैन 2" आईडी = "एपेंडेडड्रॉपडाउनबटन" टाइप = " टेक्स्ट" >   
  3.   <div class = "btn-group" > 
  4.     <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  5.       गतिविधि
  6.       <span class = "caret" </span> 
  7.     </बटन>
  8.     <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "इनपुट-प्रीपेन्ड" > 
  2.   <div class = "btn-group" > 
  3.     <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  4.       गतिविधि
  5.       <span class = "caret" </span> 
  6.     </बटन>
  7.     <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <इनपुट क्लास = "स्पैन 2" आईडी = "प्रीपेन्डेडड्रॉपडाउनबटन " टाइप = "टेक्स्ट" >   
  12. </div>
  1. <div class = "इनपुट-प्रीपेन्ड इनपुट-एपेंड" > 
  2.   <div class = "btn-group" > 
  3.     <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  4.       गतिविधि
  5.       <span class = "caret" </span> 
  6.     </बटन>
  7.     <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <इनपुट क्लास = "स्पैन 2" आईडी = "एपेंडेड प्रीपेन्डेडड्रॉपडाउनबटन" टाइप = " टेक्स्ट" >   
  12.   <div class = "btn-group" > 
  13.     <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  14.       गतिविधि
  15.       <span class = "caret" </span> 
  16.     </बटन>
  17.     <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

विभाजित ड्रॉपडाउन समूह

  1. <फॉर्म>
  2.   <div class = "इनपुट-प्रीपेन्ड" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <इनपुट प्रकार = "पाठ" > 
  5.   </div>
  6.   <div class = "इनपुट-एपेंड" > 
  7.     <इनपुट प्रकार = "पाठ" > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </फॉर्म>

खोज फ़ॉर्म

  1. <फॉर्म क्लास = "फॉर्म-सर्च" > 
  2.   <div class = "इनपुट-एपेंड" > 
  3.     <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-क्वेरी" >  
  4.     <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > खोज </बटन>  
  5.   </div>
  6.   <div class = "इनपुट-प्रीपेन्ड" > 
  7.     <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > खोज </बटन>  
  8.     <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-क्वेरी" >  
  9.   </div>
  10. </फॉर्म>

नियंत्रण आकार

सापेक्ष आकार देने वाली कक्षाओं का उपयोग करें .input-largeया कक्षाओं का उपयोग करके अपने इनपुट को ग्रिड कॉलम के आकार से मिलाएँ .span*।

ब्लॉक स्तर के इनपुट

किसी भी तत्व <input>या <textarea>तत्व को ब्लॉक स्तर के तत्व की तरह व्यवहार करें।

  1. <इनपुट क्लास = "इनपुट-ब्लॉक-लेवल" टाइप = "टेक्स्ट" प्लेसहोल्डर = ".इनपुट-ब्लॉक-लेवल" >

सापेक्ष आकार

  1. <इनपुट वर्ग = "इनपुट-मिनी" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-मिनी" >   
  2. <इनपुट वर्ग = "इनपुट-छोटा" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-छोटा" >   
  3. <इनपुट वर्ग = "इनपुट-माध्यम" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-माध्यम" >   
  4. <इनपुट क्लास = "इनपुट-लार्ज" टाइप = "टेक्स्ट" प्लेसहोल्डर = ".इनपुट-लार्ज" >   
  5. <इनपुट क्लास = "इनपुट-एक्सलार्ज" टाइप = "टेक्स्ट" प्लेसहोल्डर = ".इनपुट-एक्सलार्ज" >   
  6. <इनपुट क्लास = "इनपुट-एक्सएक्सलार्ज" टाइप = "टेक्स्ट" प्लेसहोल्डर = ".इनपुट-एक्सएक्सलार्ज" >

सचेत!भविष्य के संस्करणों में, हम अपने बटन आकार से मेल खाने के लिए इन सापेक्ष इनपुट कक्षाओं के उपयोग को बदल देंगे। उदाहरण के लिए, .input-largeइनपुट के पैडिंग और फ़ॉन्ट-आकार को बढ़ाएगा।

ग्रिड साइज़िंग

ग्रिड कॉलम के समान आकार से मेल खाने वाले इनपुट के लिए उपयोग करें .span1।.span12

  1. <इनपुट वर्ग = "span1" प्रकार = "पाठ" प्लेसहोल्डर = ".span1" >   
  2. <इनपुट वर्ग = "span2" प्रकार = "पाठ" प्लेसहोल्डर = ".span2" >   
  3. <इनपुट वर्ग = "span3" प्रकार = "पाठ" प्लेसहोल्डर = ".span3" >   
  4. < वर्ग का चयन करें = "span1" > 
  5.   ...
  6. </चयन>
  7. < वर्ग का चयन करें = "span2" > 
  8.   ...
  9. </चयन>
  10. < वर्ग का चयन करें = "span3" > 
  11.   ...
  12. </चयन>

प्रति पंक्ति एकाधिक ग्रिड इनपुट के लिए, उचित रिक्ति के लिए संशोधक वर्ग का उपयोग करें.controls-row । यह व्हाइट-स्पेस को संक्षिप्त करने के लिए इनपुट्स को फ़्लोट करता है, उचित मार्जिन सेट करता है, और फ्लोट को साफ़ करता है।

  1. <div वर्ग = "नियंत्रण" > 
  2.   <इनपुट वर्ग = "span5" प्रकार = "पाठ" प्लेसहोल्डर = ".span5" >   
  3. </div>
  4. <div class = "नियंत्रण-पंक्ति को नियंत्रित करता है" > 
  5.   <इनपुट वर्ग = "span4" प्रकार = "पाठ" प्लेसहोल्डर = ".span4" >   
  6.   <इनपुट वर्ग = "span1" प्रकार = "पाठ" प्लेसहोल्डर = ".span1" >   
  7. </div>
  8. ...

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

डेटा को ऐसे रूप में प्रस्तुत करें जो वास्तविक प्रपत्र मार्कअप का उपयोग किए बिना संपादन योग्य नहीं है।

यहाँ कुछ मूल्य 
  1. <span class = "input-xlarge uneditable-input" > कुछ वैल्यू यहाँ </span>

प्रपत्र क्रियाएं

क्रियाओं के समूह (बटन) के साथ प्रपत्र समाप्त करें। जब a के भीतर रखा जाता है .form-actions, तो बटन स्वचालित रूप से प्रपत्र नियंत्रणों के साथ लाइन अप करने के लिए इंडेंट हो जाएंगे।

  1. <div class = "फॉर्म-एक्शन" > 
  2.   <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > परिवर्तन सहेजें </ बटन>  
  3.   <बटन प्रकार = "बटन" वर्ग = "बीटीएन" > रद्द करें </बटन>  
  4. </div>

मदद पाठ

प्रपत्र नियंत्रणों के आसपास दिखाई देने वाले सहायता पाठ के लिए इनलाइन और ब्लॉक स्तरीय समर्थन।

इनलाइन सहायता

इनलाइन सहायता पाठ 
  1. <इनपुट प्रकार = "पाठ" ><span वर्ग = "सहायता-इनलाइन" > इनलाइन सहायता पाठ </span>

ब्लॉक सहायता

सहायता टेक्स्ट का एक लंबा ब्लॉक जो एक नई लाइन पर टूट जाता है और एक लाइन से आगे बढ़ सकता है। 
  1. <इनपुट प्रकार = "टेक्स्ट" > <span class = "help-block" > हेल्प टेक्स्ट का एक लंबा ब्लॉक जो एक नई लाइन पर टूट जाता है और एक लाइन से आगे बढ़ सकता है। </span>

फॉर्म कंट्रोल स्टेट्स

प्रपत्र नियंत्रणों और लेबलों पर बुनियादी प्रतिक्रिया राज्यों के साथ उपयोगकर्ताओं या आगंतुकों को प्रतिक्रिया प्रदान करें।

इनपुट फोकस

हम कुछ प्रपत्र नियंत्रणों पर डिफ़ॉल्ट outlineशैलियों को हटाते हैं और के लिए box-shadowइसके स्थान पर a लागू करते हैं :focus।

  1. <इनपुट वर्ग = "इनपुट- एक्सलार्ज" आईडी = "केंद्रित इनपुट" प्रकार = "पाठ" मान = "यह केंद्रित है ..." >

अमान्य इनपुट

के साथ डिफ़ॉल्ट ब्राउज़र कार्यक्षमता के माध्यम से शैली इनपुट :invalid। निर्दिष्ट करें type, यदि फ़ील्ड वैकल्पिक नहीं है, तो विशेषता जोड़ें required, और (यदि लागू हो) निर्दिष्ट करें pattern।

CSS छद्म चयनकर्ताओं के लिए समर्थन की कमी के कारण यह Internet Explorer 7-9 के संस्करणों में उपलब्ध नहीं है।

  1. <इनपुट वर्ग = "span3" प्रकार = "ईमेल" आवश्यक >

अक्षम इनपुट

disabledउपयोगकर्ता इनपुट को रोकने और थोड़ा अलग रूप ट्रिगर करने के लिए इनपुट पर विशेषता जोड़ें ।

  1. <इनपुट वर्ग = "इनपुट-एक्सलार्ज" आईडी = "अक्षम इनपुट" प्रकार = "पाठ" प्लेसहोल्डर = "यहां अक्षम इनपुट ..." अक्षम >

सत्यापन राज्य

बूटस्ट्रैप में त्रुटि, चेतावनी, जानकारी और सफलता संदेशों के लिए सत्यापन शैलियाँ शामिल हैं। उपयोग करने के लिए, उपयुक्त वर्ग को आसपास के .control-group.

हो सकता है कुछ गलत हो गया हो
कृपया त्रुटि सुधारें
उपयोगकर्ता का नाम लिया गया है
वू हू! 
  1. <div class = "नियंत्रण-समूह चेतावनी" > 
  2.   <लेबल वर्ग = "नियंत्रण-लेबल" के लिए = "इनपुट चेतावनी" > चेतावनी के साथ इनपुट </लेबल>  
  3.   <div वर्ग = "नियंत्रण" > 
  4.     <इनपुट प्रकार = "पाठ" आईडी = "इनपुट चेतावनी" >  
  5.     <span class = "help-inline" > कुछ गलत हो सकता है </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "कंट्रोल-ग्रुप एरर" > 
  10.   <लेबल वर्ग = "नियंत्रण-लेबल" के लिए = "इनपुट त्रुटि" > त्रुटि के साथ इनपुट </लेबल>  
  11.   <div वर्ग = "नियंत्रण" > 
  12.     <इनपुट प्रकार = "पाठ" आईडी = "इनपुट त्रुटि" >  
  13.     <span class = "help-inline" > कृपया त्रुटि सुधारें </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div वर्ग = "नियंत्रण-समूह की जानकारी" > 
  18.   <लेबल वर्ग = "नियंत्रण-लेबल" के लिए = "इनपुटइन्फो" > जानकारी के साथ इनपुट </लेबल>  
  19.   <div वर्ग = "नियंत्रण" > 
  20.     <इनपुट प्रकार = "पाठ" आईडी = "इनपुटइन्फो" >  
  21.     <span class = "help-inline" > यूजरनेम पहले ही लिया जा चुका है </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "कंट्रोल-ग्रुप सक्सेस" > 
  26.   <लेबल वर्ग = "नियंत्रण-लेबल" के लिए = "इनपुट सफलता" > सफलता के साथ इनपुट </लेबल>  
  27.   <div वर्ग = "नियंत्रण" > 
  28.     <इनपुट प्रकार = "पाठ" आईडी = "इनपुट सफलता" >  
  29.     <span class = "help-inline" > वाह! </span> 
  30.   </div>
  31. </div>

बटन

डिफ़ॉल्ट बटन

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

बटन वर्ग = "" विवरण
btn ग्रेडिएंट के साथ मानक ग्रे बटन
btn btn-primary अतिरिक्त दृश्य भार प्रदान करता है और बटनों के एक सेट में प्राथमिक क्रिया की पहचान करता है
btn btn-info डिफ़ॉल्ट शैलियों के विकल्प के रूप में उपयोग किया जाता है
btn btn-success एक सफल या सकारात्मक कार्रवाई का संकेत देता है
btn btn-warning इंगित करता है कि इस कार्रवाई में सावधानी बरतनी चाहिए
btn btn-danger खतरनाक या संभावित रूप से नकारात्मक कार्रवाई का संकेत देता है
btn btn-inverse वैकल्पिक गहरे भूरे रंग का बटन, शब्दार्थ क्रिया या उपयोग से बंधा नहीं है
btn btn-link बटन व्यवहार को बनाए रखते हुए एक बटन को एक लिंक की तरह बनाकर उस पर जोर दें

क्रॉस ब्राउज़र संगतता

IE9 गोल कोनों पर बैकग्राउंड ग्रेडिएंट को क्रॉप नहीं करता है, इसलिए हम इसे हटा देते हैं। संबंधित, IE9 अक्षम buttonतत्वों को जॉकी करता है, पाठ ग्रे को एक खराब टेक्स्ट-छाया के साथ प्रस्तुत करता है जिसे हम ठीक नहीं कर सकते हैं।

बटन आकार

फैंसी बड़े या छोटे बटन? जोड़ें .btn-large, .btn-small, या .btn-miniअतिरिक्त आकार के लिए।

  1. <p>
  2.   <बटन वर्ग = "बीटीएन बीटीएन-बड़ा बीटीएन-प्राथमिक" प्रकार = "बटन" > बड़ा बटन </बटन>  
  3.   <बटन वर्ग = "बीटीएन बीटीएन-बड़ा" प्रकार = "बटन" > बड़ा बटन </ बटन>  
  4. </p>
  5. <p>
  6.   <बटन वर्ग = "बीटीएन बीटीएन-प्राथमिक" प्रकार = "बटन" > डिफ़ॉल्ट बटन </ बटन>  
  7.   <बटन वर्ग = "बीटीएन" प्रकार = "बटन" > डिफ़ॉल्ट बटन </बटन>  
  8. </p>
  9. <p>
  10.   <बटन वर्ग = "बीटीएन बीटीएन-छोटा बीटीएन-प्राथमिक" प्रकार = "बटन" > छोटा बटन </ बटन>  
  11.   <बटन वर्ग = "बीटीएन बीटीएन-छोटा" प्रकार = "बटन" > छोटा बटन </बटन>  
  12. </p>
  13. <p>
  14.   <बटन वर्ग = "बीटीएन बीटीएन-मिनी बीटीएन-प्राथमिक" प्रकार = "बटन" > मिनी बटन </ बटन>  
  15.   <बटन वर्ग = "बीटीएन बीटीएन-मिनी" प्रकार = "बटन" > मिनी बटन </बटन>  
  16. </p>

ब्लॉक स्तर के बटन बनाएं—जो कि माता-पिता की पूरी चौड़ाई को बढ़ाते हैं—जोड़कर .btn-block.

  1. <बटन वर्ग = "बीटीएन बीटीएन-बड़ा बीटीएन-ब्लॉक बीटीएन-प्राथमिक" प्रकार = "बटन" > ब्लॉक स्तर बटन </ बटन>  
  2. <बटन वर्ग = "बीटीएन बीटीएन-बड़े बीटीएन-ब्लॉक" प्रकार = "बटन" > ब्लॉक स्तर बटन </ बटन>

अक्षम अवस्था

बटनों को 50% पीछे हटाकर उन्हें क्लिक करने योग्य न बनाएं।

लंगर तत्व

.disabledकक्षा को <a>बटन में जोड़ें ।

प्राथमिक लिंक संपर्क 

  1. <a href = "#" वर्ग = "बीटीएन बीटीएन-बड़ा बीटीएन-प्राथमिक अक्षम" > प्राथमिक लिंक </a>  
  2. <a href = "#" वर्ग = "बीटीएन बीटीएन-बड़ा अक्षम" > लिंक </a>

सचेत!हम .disabledयहां सामान्य वर्ग के समान उपयोगिता वर्ग के रूप में उपयोग करते हैं .active, इसलिए किसी उपसर्ग की आवश्यकता नहीं है। साथ ही, यह वर्ग केवल सौंदर्य के लिए है; आपको यहां लिंक अक्षम करने के लिए कस्टम जावास्क्रिप्ट का उपयोग करना चाहिए।

बटन तत्व

बटन में disabledविशेषता जोड़ें ।<button>

  1. <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-बड़ा बीटीएन-प्राथमिक अक्षम" अक्षम = "अक्षम" > प्राथमिक बटन </बटन>   
  2. <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-बड़ा" अक्षम > बटन </बटन>

एक वर्ग, एकाधिक टैग

एक , , या तत्व .btnपर कक्षा का प्रयोग करें ।<a><button><input>

संपर्क 
  1. <a class = "btn" href = "" > लिंक </a>  
  2. <बटन वर्ग = "बीटीएन" प्रकार = "सबमिट करें" > बटन </बटन>  
  3. <इनपुट वर्ग = "बीटीएन" प्रकार = "बटन" मान = "इनपुट" >   
  4. <इनपुट वर्ग = "बीटीएन" प्रकार = "सबमिट" मान = "सबमिट करें" >

सर्वोत्तम अभ्यास के रूप में, मिलान करने वाले क्रॉस-ब्राउज़र प्रतिपादन को सुनिश्चित करने के लिए अपने संदर्भ के लिए तत्व से मिलान करने का प्रयास करें। यदि आपके पास एक है , तो अपने बटन के लिए inputएक का उपयोग करें।<input type="submit">

इमेजिस

<img>किसी भी प्रोजेक्ट में छवियों को आसानी से स्टाइल करने के लिए तत्वों में कक्षाएं जोड़ें ।

140x140 140x140 140x140 
  1. <img src = "..." वर्ग = "img-गोल" >  
  2. <img src = "..." वर्ग = "img-circle" >  
  3. <img src = "..." वर्ग = "img-polaroid" >

सचेत! .img-roundedऔर समर्थन .img-circleकी कमी के कारण IE7-8 में काम नहीं करते ।border-radius

Glyphicons . द्वारा प्रतीक

चिह्न ग्लिफ़

स्प्राइट रूप में 140 आइकन, ग्लिफ़िकॉन द्वारा प्रदान किए गए गहरे भूरे (डिफ़ॉल्ट) और सफेद रंग में उपलब्ध हैं ।

  • आइकॉन-ग्लास
  • आइकन-संगीत
  • आइकन-खोज
  • चिह्न लिफाफा
  • आइकन-दिल
  • आइकन-स्टार
  • आइकन-स्टार-खाली
  • आइकन-उपयोगकर्ता
  • आइकन-फिल्म
  • आइकन-वें-बड़े
  • आइकन-थ
  • आइकन-वें-सूची
  • चिह्न-ठीक है
  • आइकन-निकालें
  • आइकन-ज़ूम-इन
  • आइकन-ज़ूम-आउट
  • आइकन-ऑफ
  • चिह्न-संकेत
  • आइकन-कोग
  • आइकन-कचरा
  • आइकन-होम
  • आइकन-फ़ाइल
  • चिह्न-समय
  • चिह्न-सड़क
  • आइकन-डाउनलोड-alt
  • आइकन-डाउनलोड
  • आइकन-अपलोड
  • आइकन-इनबॉक्स
  • आइकन-प्ले-सर्कल
  • आइकन-दोहराना
  • आइकन-रीफ्रेश
  • आइकन-सूची-alt
  • चिह्न-ताला
  • चिह्न-ध्वज
  • आइकन-हेडफ़ोन
  • आइकन-वॉल्यूम-बंद
  • आइकन-वॉल्यूम-डाउन
  • आइकन-वॉल्यूम-अप
  • आइकन-क्यूआरकोड
  • आइकन-बारकोड
  • आइकन-टैग
  • आइकन-टैग
  • चिह्न-पुस्तक
  • आइकन-बुकमार्क
  • आइकन-प्रिंट
  • आइकन-कैमरा
  • चिह्न-फ़ॉन्ट
  • आइकन-बोल्ड
  • आइकन-इटैलिक
  • आइकन-पाठ-ऊंचाई
  • आइकन-पाठ-चौड़ाई
  • आइकन-संरेखित-बाएं
  • आइकन-संरेखित-केंद्र
  • आइकन-संरेखित-दाएं
  • आइकन-संरेखण-औचित्य
  • आइकन-सूची
  • चिह्न-माँग-बाएँ
  • चिह्न-माँग-दायाँ
  • आइकन-फेसटाइम-वीडियो
  • आइकन-तस्वीर
  • आइकन-पेंसिल
  • आइकन-मानचित्र-मार्कर
  • आइकन-समायोजित
  • आइकन-टिंट
  • आइकन-संपादित करें
  • आइकन-शेयर
  • आइकन की जांच
  • आइकन-मूव
  • चिह्न-कदम-पिछड़े
  • आइकन-तेज़-पिछड़े
  • चिह्न-पिछड़ा
  • आइकन-प्ले
  • आइकन-रोकें
  • आइकन-स्टॉप
  • आइकन-फ़ॉरवर्ड
  • आइकन-फास्ट-फॉरवर्ड
  • आइकन-स्टेप-फॉरवर्ड
  • आइकन-इजेक्ट
  • आइकन-शेवरॉन-बाएं
  • आइकन-शेवरॉन-दाएं
  • चिह्न-प्लस-चिह्न
  • चिह्न-ऋण-चिह्न
  • चिह्न-निकालें-चिह्न
  • चिह्न-ठीक-चिह्न
  • चिह्न-प्रश्न-चिह्न
  • चिह्न-सूचना-चिह्न
  • आइकन-स्क्रीनशॉट
  • आइकन-निकालें-सर्कल
  • आइकन-ओके-सर्कल
  • आइकन-प्रतिबंध-सर्कल
  • आइकन-तीर-बाएं
  • आइकन-तीर-दाएं
  • आइकन-एरो-अप
  • चिह्न-तीर-नीचे
  • आइकन-शेयर-alt
  • आइकन-आकार-पूर्ण
  • आइकन-आकार-छोटा
  • आइकन-प्लस
  • आइकन-माइनस
  • चिह्न-तारांकन
  • चिह्न विस्मयादिबोधक चिह्न
  • आइकन-उपहार
  • चिह्न-पत्ती
  • आइकन-फायर
  • आइकन-आंख-खुला
  • आइकन-आंख-करीब
  • चिह्न-चेतावनी-चिह्न
  • आइकन-प्लेन
  • आइकन-कैलेंडर
  • आइकन-यादृच्छिक
  • आइकन-टिप्पणी
  • आइकन-चुंबक
  • आइकन-शेवरॉन-अप
  • आइकन-शेवरॉन-डाउन
  • आइकन-रीट्वीट
  • आइकन-शॉपिंग-कार्ट
  • आइकन-फ़ोल्डर-बंद
  • आइकन-फ़ोल्डर-खुला
  • आइकन-आकार-ऊर्ध्वाधर
  • आइकन-आकार-क्षैतिज
  • आइकन-एचडीडी
  • आइकन-बुलहॉर्न
  • चिह्न-घंटी
  • आइकन-प्रमाण पत्र
  • आइकन-अंगूठे-अप
  • आइकन-अंगूठे-नीचे
  • आइकन-हाथ-दाएं
  • आइकन-हाथ-बाएं
  • आइकन-हैंड-अप
  • आइकन-हैंड-डाउन
  • आइकन-सर्कल-तीर-दाएं
  • आइकन-सर्कल-तीर-बाएं
  • आइकन-सर्कल-एरो-अप
  • आइकन-सर्कल-तीर-नीचे
  • आइकन-ग्लोब
  • चिह्न-रिंच
  • आइकन-कार्य
  • आइकन-फ़िल्टर
  • आइकन-ब्रीफ़केस
  • आइकन-पूर्णस्क्रीन

ग्लिफ़िकॉन्स एट्रिब्यूशन

Glyphicons Halflings आमतौर पर मुफ़्त में उपलब्ध नहीं होते हैं, लेकिन बूटस्ट्रैप और Glyphicons क्रिएटर्स के बीच एक व्यवस्था ने इसे डेवलपर्स के रूप में आपके लिए बिना किसी कीमत के संभव बना दिया है। धन्यवाद के रूप में, हम आपसे व्यावहारिक होने पर Glyphicons के लिए एक वैकल्पिक लिंक वापस शामिल करने के लिए कहते हैं।

कैसे इस्तेमाल करे

सभी आइकनों <i>को एक अद्वितीय वर्ग के साथ एक टैग की आवश्यकता होती है, जिसके साथ उपसर्ग होता है icon-। उपयोग करने के लिए, निम्न कोड को लगभग कहीं भी रखें:

  1. <i वर्ग = "आइकन-खोज" ></i>

उल्टे (सफ़ेद) चिह्नों के लिए शैलियाँ भी उपलब्ध हैं, जिन्हें एक अतिरिक्त वर्ग के साथ तैयार किया गया है। हम इस वर्ग को विशेष रूप से एनएवी और ड्रॉपडाउन लिंक के लिए होवर और सक्रिय राज्यों पर लागू करेंगे।

  1. <i वर्ग = "आइकन-खोज आइकन-सफेद" ></i>

सचेत!<i>टेक्स्ट के बगल में स्ट्रिंग्स का उपयोग करते समय, जैसे कि बटन या नेविगेशन लिंक में, उचित रिक्ति के लिए टैग के बाद एक स्थान छोड़ना सुनिश्चित करें ।

चिह्न उदाहरण

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

बटन

बटन टूलबार में बटन समूह
  1. <div class = "btn-toolbar" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
एक बटन समूह में ड्रॉपडाउन
उपयोगकर्ता 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> उपयोगकर्ता </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> संपादित करें </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> मिटाएं </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> प्रतिबंध </a></li>  
  8.     <ली क्लास = "डिवाइडर" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> व्यवस्थापक बनाएं </a></li>  
  10.   </ul>
  11. </div>
बटन आकार
सितारा सितारा सितारा 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> स्टार </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" </i> स्टार </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" </i> स्टार </a>

मार्गदर्शन

  1. <उल वर्ग = "एनएवी नेवी-सूची" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> होम </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> लाइब्रेरी </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> एप्लीकेशन </a></li>  
  5.   <li><a href = "#" ><i class = "i" ></i> विविध </a></li>  
  6. </ul>

फॉर्म फ़ील्ड

  1. <div वर्ग = "नियंत्रण-समूह" > 
  2.   <लेबल वर्ग = "नियंत्रण-लेबल" के लिए = "इनपुट आइकन" > ईमेल पता </लेबल>  
  3.   <div वर्ग = "नियंत्रण" > 
  4.     <div class = "इनपुट-प्रीपेन्ड" > 
  5.       <span class = "ऐड-ऑन" ><i class = "icon-envelope" ></i></span>  
  6.       <इनपुट वर्ग = "span2" आईडी = "इनपुट आइकन" प्रकार = "पाठ" >   
  7.     </div>
  8.   </div>
  9. </div>