बूटस्ट्रैप के बा

आधार सीएसएस के बा

मौलिक एचटीएमएल तत्व सभ के स्टाइल कइल गइल आ बिस्तार करे लायक क्लास सभ के साथ बढ़ावल गइल।

टाइपोग्राफी के बारे में बतावल गइल बा

हेडिंग के बारे में बतावल गइल बा

सभ एचटीएमएल हेडिंग, <h1>माध्यम <h6>से उपलब्ध बा।

ज1 के बा। शीर्षक 1 के बा

ज2 के बा। शीर्षक 2 के बा

ज3 के बा। शीर्षक 3 के बा

ज4 के बा। शीर्षक 4 के बा

ज5 के बा। शीर्षक 5 के बा
ज6 के बा। शीर्षक 6 के बा

बॉडी कॉपी के बा

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

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नरे वेल ईउ लियो। सह सोसाइटिस नाटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्केटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला।

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

मेसेनास सेड डायम एगेट रिसुस वैरियस ब्लैंडिट सिट अमेट नॉन मैग्ना। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट।

<p> ... </p> के बा

सीसा के शरीर के प्रतिलिपि बा

जोड़ के कवनो पैराग्राफ के अलगा बना दीं .lead.

विवामस सैजिटिस लैकस वेल औग लाओरीट रुट्रम फौसिबस डोलोर नीलामी। डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस के नाम से जानल जाला।

<p class = "लीड" > ... </p> के बा

कम से बनल बा

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

जोर डालल

हल्का शैली के साथ एचटीएमएल के डिफ़ॉल्ट जोर टैग के इस्तेमाल करीं।

<small>

इनलाइन भा पाठ के ब्लॉक पर जोर ना देवे खातिर, छोट टैग के इस्तेमाल करीं।

पाठ के एह लाइन के मतलब बा कि एकरा के फाइन प्रिंट के रूप में मानल जाव.

<p> <small> पाठ के ई लाइन के मतलब बा कि ई फाइन प्रिंट के रूप में मानल जाय। </small> </p> के बा

हिम्मती

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

निम्नलिखित पाठ के स्निपेट के बोल्ड पाठ के रूप में रेंडर कइल गइल बा .

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

इटैलिक के लिखल बा

इटैलिक के साथ पाठ के एगो स्निपेट पर जोर देवे खातिर।

निम्नलिखित पाठ के स्निपेट के इटैलिक पाठ के रूप में प्रस्तुत कइल गइल बा .

<em> के इटैलिक पाठ के रूप में रेंडर कइल गइल बा </em>

हेड अप हो गइल बा!बेझिझक इस्तेमाल करीं <b>आ <i>एचटीएमएल5 में. <b>के मतलब होला शब्द भा वाक्यांश के बिना कवनो अतिरिक्त महत्व के उजागर कइल जबकि <i>ई अधिकतर आवाज, तकनीकी शब्द वगैरह खातिर होला.

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

पाठ संरेखण वर्ग के साथ घटक में पाठ के आसानी से फिर से संरेखित करीं।

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

केंद्र से संरेखित पाठ बा।

दाहिने से संरेखित पाठ बा।

  1. <p class = "text-left" > बाईं ओर संरेखित पाठ। </p>के बा 
  2. <p class = "पाठ-केंद्र" > केंद्र संरेखित पाठ। </p>के बा 
  3. <p class = "text-right" > दाहिने संरेखित पाठ। </p>के बा

जोर देवे के कक्षा बा

मुट्ठी भर जोर उपयोगिता वर्ग के साथ रंग के माध्यम से अर्थ संप्रेषित करीं।

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

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

डोनेक उल्लमकोर्पर नुला गैर मेटस नीलामी फ्रिंगिला।

एनियन ईयू लियो क्वाम के बा। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस के बा।

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

  1. <p class = "म्यूट" > फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ। </p>के बा 
  2. <p class = "पाठ-चेतावनी" > एटियम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड। </p>के बा 
  3. <p class = "पाठ-त्रुटि" > डोनेक उल्लमकॉर्पर नुला गैर मेटस ऑक्टर फ्रिंगिला। </p>के बा 
  4. <p class = "पाठ-जानकारी" > एनियन ईयू लियो क्वाम। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस के बा। </p>के बा 
  5. <p class = "पाठ-सफलता" > डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एरेट पोर्टिटोर लिगुला। </p>के बा

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

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

<abbr>

संक्षिप्त नाँव के लंबा होवर पर बिस्तारित पाठ खातिर, titleबिसेसता के सामिल करीं।

विशेषता शब्द के एगो संक्षिप्त रूप ह attr .

<abbr title = "विशेषता" > attr </abbr> के बारे में बतावल गइल बा

<abbr class="initialism">

.initialismतनी छोट फॉन्ट-साइज खातिर संक्षिप्त रूप में जोड़ल जाव.

एचटीएमएल कटा रोटी के बाद से सबसे बढ़िया चीज बा।

<abbr title = "हाइपरटेक्स्ट मार्कअप भाषा" class = "प्रारंभिकता" > एचटीएमएल </abbr>

संबोधन दिहल गइल बा

नजदीकी पूर्वज या काम के पूरा निकाय खातिर संपर्क जानकारी प्रस्तुत करीं।

<address>

से सभ लाइन के समाप्त क के प्रारूपण के संरक्षित करीं <br>।

ट्विटर, इंक
795 फोल्सम एवेन्यू, सुइट 600
सैन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890 पर बा
पूरा नाम
[email protected] पर दिहल गइल बा 
  1. <पता> के बा
  2.   <strong> ट्विटर, इंक के </strong><br> के बारे में बतावल गइल बा
  3.   795 फोल्सम एवेन्यू, सुइट 600 <br> के बा
  4.   सैन फ्रांसिस्को, सीए 94107 <br> के बा
  5.   <abbr title = "फोन" > पी: </abbr> (123) 456-7890 पर संपर्क कइल जा सकेला 
  6. </पता> के बा
  7.  
  8. <पता> के बा
  9.   <strong> पूरा नाम </strong><br> बा
  10.   <a href = "mailto:#" > पहिला.अंतिम@उदाहरण.कॉम </a> 
  11. </पता> के बा

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

अपना दस्तावेज के भीतर कवनो दोसरा स्रोत से सामग्री के ब्लॉक के उद्धरण देबे खातिर.

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

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

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

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

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

मानक ब्लॉककोट पर सरल भिन्नता खातिर शैली आ सामग्री में बदलाव होला।

कवनो स्रोत के नामकरण कइल जाला

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

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

स्रोत शीर्षक में केहू मशहूर बा 
  1. <ब्लॉककोट> के बा
  2.   <p> लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी। </p>के बा
  3.   <small> केहू मशहूर <cite title = "स्रोत शीर्षक" > स्रोत शीर्षक </cite></small> 
  4. </blockquote> के बा

वैकल्पिक रूप से प्रदर्शन कइल जाला

.pull-rightफ्लोटेड, राइट-अलाइन ब्लॉककोट खातिर इस्तेमाल करीं ।

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

स्रोत शीर्षक में केहू मशहूर बा 
  1. <blockquote class = "पुल-राइट" > बा 
  2.   ...
  3. </blockquote> के बा

सूची दिहल गइल बा

बिना क्रम के बा

अइसन आइटम सभ के लिस्ट जेह में क्रम के स्पष्ट रूप से महत्व ना होखे।

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

आदेश दिहल गइल बा

अइसन आइटम सभ के लिस्ट जेह में क्रम के स्पष्ट रूप से महत्व होला।

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

अनस्टाइल कइल गइल बा

सूची आइटम सभ पर डिफ़ॉल्ट list-styleआ बाईं ओर के पैडिंग हटाईं (केवल तत्काल बच्चा लोग खातिर)।

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

इनलाइन के बा

सभ सूची आइटम के एक लाइन पर inline-blockआ कुछ हल्का पैडिंग के साथ रखीं।

  • लोरेम इप्सम के बा
  • फेसेलस इअकुलिस के नाम से जानल जाला
  • नुल्ला वोलुतपत के बा
  1. <ul वर्ग = "इनलाइन" > के बा 
  2.   <li> ... </li> के बा
  3. </ul> के बा

बिबरन

शब्द सभ के लिस्ट जेह में इनहन से जुड़ल बिबरन दिहल गइल बा।

विवरण के सूची दिहल गइल बा
शब्दन के परिभाषित करे खातिर एगो विवरण सूची एकदम सही बा।
यूइसमोड के नाम से जानल जाला
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।
डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआडा पोर्टा के बा
एटियाम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड के नाम से जानल जाला। 
  1. <dl> के बा
  2.   <dt> ... </dt> के बा
  3.   <dd> ... </dd> के बा
  4. </dl> के बा

क्षैतिज वर्णन कइल गइल बा

लाइन अप में शब्द आ वर्णन <dl>एक दोसरा के बगल में बनाईं.

विवरण के सूची दिहल गइल बा
शब्दन के परिभाषित करे खातिर एगो विवरण सूची एकदम सही बा।
यूइसमोड के नाम से जानल जाला
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमोड सेम्पर एगेट लैसिनिया ओडियो सेम नेसी एलिट।
डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआडा पोर्टा के बा
एटियाम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड के नाम से जानल जाला।
फेलिस यूइसमोड सेम्पर एगेट लैसिनिया के बा
फ्यूसे डापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस कंडिमेंटम निभ, उट फर्मेन्टम मासा जस्टो बइठ अमेट रिसुस। 
  1. <dl वर्ग = "डीएल-क्षैतिज" > बा 
  2.   <dt> ... </dt> के बा
  3.   <dd> ... </dd> के बा
  4. </dl> के बा

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

कोड के बा

इनलाइन के बा

कोड के इनलाइन स्निपेट के के साथ लपेटीं <code>।

जइसे <section>कि इनलाइन के रूप में लपेटल जाव. 
  1. उदाहरण खातिर , <कोड> & lt ; section & gt ;</ code > के इनलाइन के रूप में लपेटल जाव .

बेसिक ब्लॉक के बा

<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बेस क्लास में निम्नलिखित में से कवनो क्लास के जोड़ल जाला ।

.table-striped

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

# भोजपुरी में पढ़ें: पहिला नांव अंतिम नाम प्रयोगकर्ता के नाम बा
1 के बा मार्क कइल जाव ओटो के नाम से जानल जाला @mdo के बा
2 के बा याकूब के नाम से जानल जाला थॉर्नटन के नाम से जानल जाला @मोट
3 के बा लैरी के नाम से जानल जाला चिरई के नाम से जानल जाला @ट्विटर पर दिहल गइल बा 
  1. <तालिका वर्ग = "तालिका तालिका-धारीदार" > 
  2.   ...
  3. </table> के बा

.table-bordered

टेबल पर सीमा आ गोल कोना जोड़ल जाला।

# भोजपुरी में पढ़ें: पहिला नांव अंतिम नाम प्रयोगकर्ता के नाम बा
1 के बा मार्क कइल जाव ओटो के नाम से जानल जाला @mdo के बा
मार्क कइल जाव ओटो के नाम से जानल जाला @getbootstrap के बा
2 के बा याकूब के नाम से जानल जाला थॉर्नटन के नाम से जानल जाला @मोट
3 के बा लैरी द बर्ड के नाम से जानल जाला @ट्विटर पर दिहल गइल बा 
  1. <table class = "टेबल टेबल-सीमा वाला" > 
  2.   ...
  3. </table> के बा

.table-hover

एगो के भीतर टेबल पंक्तियन पर एगो होवर स्टेट सक्षम करीं <tbody>.

# भोजपुरी में पढ़ें: पहिला नांव अंतिम नाम प्रयोगकर्ता के नाम बा
1 के बा मार्क कइल जाव ओटो के नाम से जानल जाला @mdo के बा
2 के बा याकूब के नाम से जानल जाला थॉर्नटन के नाम से जानल जाला @मोट
3 के बा लैरी द बर्ड के नाम से जानल जाला @ट्विटर पर दिहल गइल बा 
  1. <टेबल क्लास = "टेबल टेबल-होवर" > बा 
  2.   ...
  3. </table> के बा

.table-condensed

सेल पैडिंग के आधा में काट के टेबल के अउरी कॉम्पैक्ट बनावेला।

# भोजपुरी में पढ़ें: पहिला नांव अंतिम नाम प्रयोगकर्ता के नाम बा
1 के बा मार्क कइल जाव ओटो के नाम से जानल जाला @mdo के बा
2 के बा याकूब के नाम से जानल जाला थॉर्नटन के नाम से जानल जाला @मोट
3 के बा लैरी द बर्ड के नाम से जानल जाला @ट्विटर पर दिहल गइल बा 
  1. <तालिका वर्ग = "तालिका तालिका-घनीभूत" > 
  2.   ...
  3. </table> के बा

वैकल्पिक पंक्ति कक्षा के बा

तालिका पंक्तियन के रंगाई-पोताई करे खातिर संदर्भ कक्षा के इस्तेमाल करीं।

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

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

समर्थित टेबल एचटीएमएल तत्व सभ के लिस्ट आ इनहन के इस्तेमाल कइसे कइल जाय।

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

फार्म के रूप में बा

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

अलग-अलग फॉर्म कंट्रोल स्टाइलिंग प्राप्त करे लें, बाकी बिना कौनों जरूरी बेस क्लास के पर <form>या मार्कअप में बड़हन बदलाव के। फॉर्म कंट्रोल के ऊपर ढेर, बाईं ओर संरेखित लेबल के परिणाम होला।

दंतकथा उदाहरण ब्लॉक-स्तर के मदद पाठ इहाँ दिहल जा सके ला। 
  1. <रूप> के बा
  2.   <फील्डसेट> के बा
  3.     <किंवदंती> किंवदंती </किंवदंती> के बारे में बतावल गइल बा
  4.     <label> लेबल के नाम </label> बा
  5.     <input type = "text" placeholder = "कुछ टाइप करीं..." >  
  6.     <span class = "help-block" > इहाँ ब्लॉक-स्तर के मदद पाठ के उदाहरण दीं। </span>के बा 
  7.     <लेबल वर्ग = "चेकबॉक्स" > बा 
  8.       <input type = "checkbox" > हमरा के जांच करीं 
  9.     </label> के बा
  10.     <बटन प्रकार = "सबमिट" class = "btn" > सबमिट करीं </बटन>  
  11.   </फील्डसेट> के बा
  12. </form> के बा

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

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

खोज के फार्म बा

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

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

इनलाइन फार्म के बा

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

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

क्षैतिज रूप के बा

लेबल सभ के दाहिना ओर संरेखित करीं आ बाईं ओर फ्लोट करीं जेह से कि ऊ नियंत्रण सभ के समान लाइन पर लउके। डिफ़ॉल्ट फॉर्म से सभसे ढेर मार्कअप बदलाव के जरूरत बा:

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

समर्थित फार्म नियंत्रण बा

एगो उदाहरण फॉर्म लेआउट में समर्थित मानक फॉर्म नियंत्रण सभ के उदाहरण।

इनपुट के बा

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

typeहर समय एगो निर्दिष्ट के इस्तेमाल के जरूरत बा ।

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

टेक्स्टएरिया के बा

फॉर्म कंट्रोल जवन पाठ के कई लाइन के सपोर्ट करेला। rowsजरूरत के हिसाब से विशेषता बदलीं ।

  1. <textarea rows = "3" ></textarea> के बारे में बतावल गइल बा

चेकबॉक्स आ रेडियो के बारे में बतावल गइल बा

चेकबॉक्स कौनों लिस्ट में एक या कई गो विकल्प चुने खातिर होला जबकि रेडियो कई में से एक विकल्प चुने खातिर होला।

डिफ़ॉल्ट (ढेर हो गइल) .


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

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

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

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

चुनत बा

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


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

फार्म नियंत्रण के विस्तार कइल जा रहल बा

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

प्रीपेंड आ संलग्न इनपुट के बारे में बतावल गइल बा

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

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

कवनो इनपुट में टेक्स्ट के प्रीपेंड भा जोड़े खातिर दू गो क्लास में से कवनो एक के साथ an .add-onआ an के लपेटीं ।input

@ के बा।

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

मिला के देखल जाव

.add-onकवनो इनपुट के प्रीपेंड आ एपेंड करे खातिर दुनो क्लास आ दू गो इंस्टेंस के इस्तेमाल करीं ।

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

पाठ के जगह बटन के इस्तेमाल कइल जाला

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

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

बटन के ड्रॉपडाउन हो जाला

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

खंडित ड्रॉपडाउन समूह के बा

  1. <रूप> के बा
  2.   <div वर्ग = "इनपुट-प्रीपेंड" > बा 
  3.     <div वर्ग = "btn-समूह" > ... </div> के बारे में बतावल गइल बा 
  4.     <इनपुट प्रकार = "पाठ" > बा 
  5.   </div> के बा
  6.   <div क्लास = "इनपुट-एपेंड" > बा 
  7.     <इनपुट प्रकार = "पाठ" > बा 
  8.     <div वर्ग = "btn-समूह" > ... </div> के बारे में बतावल गइल बा 
  9.   </div> के बा
  10. </form> के बा

खोज के फार्म बा

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

साइजिंग के नियंत्रित करे के बा

रिलेटिव साइजिंग क्लास सभ के इस्तेमाल करीं जइसे कि .input-largeया क्लास सभ के इस्तेमाल से ग्रिड कॉलम साइज सभ से आपन इनपुट सभ के मिलान करीं .span*।

ब्लॉक लेवल के इनपुट बा

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

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

रिलेटिव साइजिंग के बारे में बतावल गइल बा

  1. <इनपुट क्लास = "इनपुट-मिनी" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-मिनी" >   
  2. <इनपुट क्लास = "इनपुट-छोट" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-छोट" >   
  3. <इनपुट क्लास = "इनपुट-मीडियम" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-मीडियम" >   
  4. <इनपुट क्लास = "इनपुट-बड़ा" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-बड़ा" >   
  5. <इनपुट क्लास = "इनपुट-xlarge" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-xlarge" >   
  6. <इनपुट क्लास = "इनपुट-xxlarge" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-xxlarge" >

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

ग्रिड के साइजिंग कइल जाला

ग्रिड कॉलम सभ के एकही साइज से मेल खाए वाला इनपुट सभ खातिर .span1to के इस्तेमाल करीं ।.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>

क्रिया के रूप देवे के बा

क्रिया सभ के समूह (बटन) के साथ कौनों फॉर्म के अंत करीं। जब एगो के भीतर रखल .form-actionsजाई त बटन स्वचालित रूप से इंडेंट हो जाई ताकि फॉर्म कंट्रोल के संगे लाइन में खड़ा हो सके।

  1. <div वर्ग = "रूप-क्रिया" > बा 
  2.   <button type = "submit" class = "btn btn-primary" > बदलाव सहेजीं </बटन>  
  3.   <बटन प्रकार = "बटन" वर्ग = "btn" > रद्द करीं </बटन>  
  4. </div> के बा

मदद पाठ के बारे में बतावल गइल बा

मदद पाठ खातिर इनलाइन आ ब्लॉक स्तर के समर्थन जे फॉर्म नियंत्रण सभ के आसपास लउके ला।

इनलाइन मदद करे के बा

इनलाइन मदद पाठ बा 
  1. <input type = "text" ><span class = "help-inline" > इनलाइन मदद पाठ </span>

मदद के ब्लॉक करीं

मदद पाठ के एगो लंबा ब्लॉक जे नया लाइन पर टूट जाला आ एक लाइन से आगे बढ़ सके ला। 
  1. <input type = "text" ><span class = "help-block" > मदद पाठ के एगो लंबा ब्लॉक जे नया लाइन पर टूट जाला आ एक लाइन से आगे बढ़ सके ला। </span>के बा

रूप नियंत्रण राज्य के बा

फॉर्म कंट्रोल आ लेबल सभ पर बेसिक फीडबैक स्टेट सभ के साथ यूजर भा विजिटर लोग के फीडबैक दिहल।

इनपुट फोकस कइल जाला

outlineहमनी के कुछ फॉर्म कंट्रोल पर डिफ़ॉल्ट स्टाइल हटा देनी जा आ box-shadowओकरा जगह पर एगो लागू कर देनी जा :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" मान = "ई केंद्रित बा ..." >

अमान्य इनपुट बा

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

ई इंटरनेट एक्सप्लोरर 7-9 के संस्करण सभ में उपलब्ध नइखे काहें से कि CSS छद्म चयनकर्ता सभ के सपोर्ट के कमी बा।

  1. <इनपुट क्लास = "span3" प्रकार = "ईमेल" के जरूरत बा >

इनपुट के अक्षम हो गइल बा

disabledयूजर इनपुट के रोके खातिर आ तनिका अलग लुक के ट्रिगर करे खातिर कवनो इनपुट पर एट्रिब्यूट जोड़ल जाला ।

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "इहाँ इनपुट अक्षम कइल गइल बा ..." अक्षम कइल गइल >

मान्यता के राज्य बा

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

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

बटन के बा

डिफ़ॉल्ट बटन बा

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

बटन class="" के बा। बिबरन
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.   <button class = "btn btn-large btn-primary" प्रकार = "बटन" > बड़ बटन </बटन>  
  3.   <बटन वर्ग = "btn btn-बड़ा" प्रकार = "बटन" > बड़ बटन </बटन>  
  4. </p>के बा
  5. <p> के बा
  6.   <बटन वर्ग = "btn btn-प्राथमिक" प्रकार = "बटन" > डिफ़ॉल्ट बटन </बटन>  
  7.   <बटन वर्ग = "btn" प्रकार = "बटन" > डिफ़ॉल्ट बटन </बटन>  
  8. </p>के बा
  9. <p> के बा
  10.   <बटन वर्ग = "बीटीएन बीटीएन-छोट बीटीएन-प्राथमिक" प्रकार = "बटन" > छोट बटन </बटन>  
  11.   <बटन वर्ग = "btn btn-छोटा" प्रकार = "बटन" > छोट बटन </बटन>  
  12. </p>के बा
  13. <p> के बा
  14.   <बटन वर्ग = "बीटीएन बीटीएन-मिनी बीटीएन-प्राथमिक" प्रकार = "बटन" > मिनी बटन </बटन>  
  15.   <बटन वर्ग = "btn btn-mini" प्रकार = "बटन" > मिनी बटन </बटन>  
  16. </p>के बा

जोड़ के ब्लॉक लेवल बटन बनाईं-जवन कवनो पैरेंट के पूरा चौड़ाई में फैलल होखे .btn-block।

  1. <button class = "btn btn-large btn-block btn-primary" प्रकार = "बटन" > ब्लॉक स्तर बटन </बटन>  
  2. <button class = "btn btn-large btn-block" प्रकार = "बटन" > ब्लॉक स्तर बटन </बटन>

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

बटन के 50% वापस फीका क के अनक्लिक करे लायक देखाई दिही।

लंगर तत्व के बा

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

प्राथमिक कड़ी बा संपर्क 

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

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

बटन तत्व के बा

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

  1. <button type = "बटन" class = "btn btn-large btn-primary अक्षम" अक्षम = "अक्षम" > प्राथमिक बटन </बटन>   
  2. <बटन प्रकार = "बटन" वर्ग = "btn btn-large" अक्षम कइल गइल > बटन </बटन>

एक क्लास, कई गो टैग बा

कवनो , , या तत्व .btnपर क्लास के इस्तेमाल करीं ।<a><button><input>

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

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

छवियन के बा

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

140x140 के बा 140x140 के बा 140x140 के बा 
  1. <img src = "..." वर्ग = "img-गोल" > बा  
  2. <img src = "..." वर्ग = "img-सर्कल" > बा  
  3. <img src = "..." वर्ग = "img-पोलारॉइड" > बा

हेड अप हो गइल बा! .img-roundedआ समर्थन .img-circleके कमी के कारण IE7-8 में काम ना करेला ।border-radius

ग्लिफिकॉन्स द्वारा आइकन के बा

आइकन ग्लिफ के बा

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

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

ग्लिफिकॉन्स के एट्रिब्यूशन के बारे में बतावल गइल बा

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

कइसे इस्तेमाल कइल जाला

सभ आइकन सभ खातिर <i>एगो बिसेस क्लास वाला टैग के जरूरत होला, जेकर उपसर्ग icon-. इस्तेमाल करे खातिर, निम्नलिखित कोड के लगभग कहीं भी रखीं:

  1. <i class = "आइकन-खोज" </i> के बारे में बतावल गइल बा

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

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

हेड अप हो गइल बा!<i>पाठ के स्ट्रिंग के बगल में इस्तेमाल करत समय, जइसे कि बटन भा nav लिंक में, सही स्पेसिंग खातिर टैग के बाद स्पेस जरूर छोड़ीं ।

आइकन के उदाहरण दिहल गइल बा

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

बटन के बा

एगो बटन टूलबार में बटन समूह
  1. <div वर्ग = "बीटीएन-टूलबार" > बा 
  2.   <div वर्ग = "बीटीएन-समूह" > बा 
  3.     <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-बाँया" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-केंद्र" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-दाहिना" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-जस्टिफाई" ></i></a>   
  7.   </div> के बा
  8. </div> के बा
एगो बटन समूह में ड्रॉपडाउन बा
प्रयोगकर्ता के बा 
  1. <div वर्ग = "बीटीएन-समूह" > बा 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "आइकन-उपयोगकर्ता आइकन-सफेद" ></i> प्रयोगकर्ता </a>   
  3.   <a class = "btn btn-प्राइमरी ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#" ><span क्लास = "कैरेट" ></span></a>    
  4.   <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा 
  5.     <li><a href = "#" ><i class = "आइकन-पेंसिल" </i> संपादन करीं </a></li>  
  6.     <li><a href = "#" ><i class = "आइकॉन-ट्रैश" </i> हटाईं </a></li>  
  7.     <li><a href = "#" ><i class = "आइकन-बैन-सर्कल" ></i> प्रतिबंधित करीं </a></li>  
  8.     <li class = "विभाजक" </li> के बारे में बतावल गइल बा 
  9.     <li><a href = "#" ><i class = "i" </i> व्यवस्थापक बनाईं </a></li>  
  10.   </ul> के बा
  11. </div> के बा
बटन के साइज के बा
तारा तारा तारा 
  1. <a class = "btn btn-large" href = "#" ><i class = "आइकॉन-स्टार" ></i> स्टार </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "आइकन-स्टार" ></i> स्टार </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "आइकन-स्टार" ></i> स्टार </a> के बारे में जानकारी दिहल गइल बा

नेविगेशन के बा

  1. <ul class = "नव नव-सूची" > बा 
  2.   <li class = "सक्रिय" ><a href = "#" ><i class = "आइकन-घर आइकन-सफेद" </i> घर </a></li>   
  3.   <li><a href = "#" ><i class = "आइकन-बुक" </i> लाइब्रेरी </a></li> बा  
  4.   <li><a href = "#" ><i class = "आइकन-पेंसिल" </i> आवेदन </a></li> बा  
  5.   <li><a href = "#" ><i वर्ग = "हम" </i> विविध </a></li> बा  
  6. </ul> के बा

फार्म फील्ड के बा

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