बूटस्ट्रैप

आधार सीएसएस

मौलिक एचटीएमएल तत्व शैलीबद्ध आ विस्तार योग्य वर्गक संग बढ़ाओल गेल |

हेड अप! ई डॉक्स v2.3.2 क लेल अछि, जे आब आधिकारिक तौर पर समर्थित नहि अछि. बूटस्ट्रैप के नवीनतम संस्करण देखु!

टाइपोग्राफी

शीर्षक

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

ज1। शीर्षक 1

ज2। शीर्षक 2

ज3। शीर्षक 3

ज ४। शीर्षक 4

ज5। शीर्षक 5
ज6। शीर्षक 6

शरीर प्रतिलिपि

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

Nullam quis risus eget उर्ना मोलिस ornare वेल ईउ लियो | सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला।

सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस। Donec ullamcorper nulla गैर मेटस नीलामी fringilla। डुइस मोलिस, एस्ट गैर कोमोडो लक्टस, निसी एरेट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेक एलिट। Donec ullamcorper nulla गैर मेटस नीलामी fringilla।

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

<p> ... </p>

सीसा शरीर प्रतिलिपि

कोनो पैराग्राफ के जोड़ि क ' अलग बनाउ .lead.

विवामस सेजिटिस लैकस वेल औग लाओरीत रुट्रम फौसिबस डोलोर नीलामी। Duis mollis, est गैर कोमोडो लक्टस।

<p class = "लीड" > ... </p>

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

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

जोर देनाइ

हल्का शैली के साथ एचटीएमएल के डिफ़ॉल्ट जोर टैग के उपयोग करू.

<small>

पाठ के इनलाइन या ब्लॉक पर जोर नै देबय के लेल, छोट टैग के प्रयोग करू.

पाठ के ई पाँति के मतलब छै कि एकरा फाइन प्रिंट के रूप में मानलऽ जाय ।

<p> <small> पाठ क' ई पाँति महीन प्रिंट क' रूप मे मानबाक लेल अछि. </small> </p>

साहसी

भारी फॉन्ट-वेट वाला पाठ के स्निपेट पर जोर देबय के लेल.

पाठक निम्नलिखित स्निपेट बोल्ड पाठक रूपमे प्रस्तुत कएल गेल अछि .

<strong> मोट पाठक रूपमे प्रस्तुत कएल गेल </strong>

इटैलिक

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

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

<em> इटैलिक पाठ </em> के रूप में प्रस्तुत कयल गेल अछि |

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

संरेखण वर्ग

पाठ संरेखण वर्गों के साथ घटकों के लिए पाठ को आसानी से पुनः संरेखित करें |

वाम संरेखित पाठ।

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

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

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

जोर कक्षाएँ

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

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

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

Donec ullamcorper nulla गैर मेटस नीलामी fringilla।

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

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

  1. <p class = "muted" > फुस्से दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ। </p> 
  2. <p class = "पाठ-चेतावनी" > Etiam porta sem malesuada मैग्ना मोलिस euismod. </p> 
  3. <p class = "पाठ-त्रुटि" > डोनेक ullamcorper nulla गैर मेटस नीलामी fringilla. </p> 
  4. <p class = "पाठ-जानकारी" > एनियन ईयू लियो क्वाम। Pellentesque ornare सेम लैसिनिया क्वाम वेनेनेटिस। </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:#" > पहिल.अंतिम@उदाहरण .com </a> 
  11. </पता>

ब्लॉककोट्स

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

पूर्वनिर्धारित ब्लॉककोट

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

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

  1. <ब्लॉककोट>
  2.   <p> लोरेम इप्सम डोलोर बैठा अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante। </p>
  3. </blockquote> के लिये

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

एकटा मानक ब्लॉककोट पर सरल भिन्नताक लेल शैली आ सामग्री परिवर्तन.

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

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

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

स्रोत शीर्षक में कियो प्रसिद्ध 
  1. <ब्लॉककोट>
  2.   <p> लोरेम इप्सम डोलोर बैठा अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante। </p>
  3.   <small> कियो प्रसिद्ध <cite title = "स्रोत शीर्षक" > स्रोत शीर्षक </cite></small> 
  4. </blockquote> के लिये

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

.pull-rightएकटा फ्लोटेड, दाहिना-संरेखित ब्लॉककोट क लेल प्रयोग करू .

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

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

सूची बनाइए

अक्रमित

एहन वस्तुक सूची जाहि मे क्रम स्पष्ट रूप सँ कोनो मायने नहि रखैत अछि ।

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

आदेश देल गेल

वस्तुक सूची जाहि मे क्रम स्पष्ट रूप सँ मायने रखैत अछि ।

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

अनस्टाइल

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

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

इनलाइन

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

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

वर्णन

शब्दक सूची ओकर संबद्ध वर्णनक संग।

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

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

लाइन मे शब्द आ वर्णन <dl>कात-कात बनाउ।

विवरण सूची
शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
यूइसमोद
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग |
डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआदा पोर्टा
एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड।
फेलिस यूइसमोड सेम्पर एगेट लैसिनिया
फ्यूसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस कंडिमेंटम निभ, उत फर्मेन्टम मासा जस्टो बैस अमेट रिसुस। 
  1. <dl वर्ग = "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>.

# 2019। पहिल नाम उपनाम उपयोगकर्ता नाम
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
  1. <तालिका वर्ग = "सारणी" > 
  2.   ...
  3. </table>क अनुसार

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

.tableआधार वर्ग मे निम्नलिखित मे सँ कोनो वर्ग जोड़ू ।

.table-striped

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

# 2019। पहिल नाम उपनाम उपयोगकर्ता नाम
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी चिड़ै के @ ट्विटर पर 
  1. <table class = "तालिका तालिका-धारीदार" > 
  2.   ...
  3. </table>क अनुसार

.table-bordered

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

# 2019। पहिल नाम उपनाम उपयोगकर्ता नाम
१ मार्क ओटो @ mdo
मार्क ओटो @ गेटबूटस्ट्रैप
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
  1. <table class = "तालिका तालिका-सीमाबद्ध" > 
  2.   ...
  3. </table>क अनुसार

.table-hover

एकटा <tbody>.

# 2019। पहिल नाम उपनाम उपयोगकर्ता नाम
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
  1. <table class = "तालिका तालिका-होवर" > 
  2.   ...
  3. </table>क अनुसार

.table-condensed

सेल पैडिंग कें आधा मे काट क टेबल कें बेसि कॉम्पैक्ट बनायत छै.

# 2019। पहिल नाम उपनाम उपयोगकर्ता नाम
१ मार्क ओटो @ mdo
२ याकूब थॉर्नटन @मोट
३ लैरी द बर्ड @ ट्विटर पर 
  1. <table class = "तालिका तालिका-संघनित" > 
  2.   ...
  3. </table>क अनुसार

वैकल्पिक पंक्ति वर्ग

तालिका पंक्तियों को रंगने के लिये संदर्भ वर्गों का प्रयोग करें |

वर्ग वर्णन
.success सफल या सकारात्मक कार्य कें संकेत करयत छै.
.error खतरनाक या संभावित नकारात्मक क्रिया कें संकेत करएयत छै.
.warning एकटा चेतावनी कें संकेत करएयत छै जेकरा पर ध्यान देवय कें आवश्यकता भ सकएयत छै.
.info पूर्वनिर्धारित शैलियों के विकल्प के रूप में प्रयोग किया जाता है |
# 2019। उजप भुगतान लिया स्थिति
१ टीबी - मासिक 01/04/2012 के स्वीकृत भेटल
२ टीबी - मासिक 02/04/2012 के अस्वीकार क देल गेल
३ टीबी - मासिक 03/04/2012 के लंबित
४ टीबी - मासिक 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.   </tहेड>
  9.   <टीबॉडी>
  10.     <tr>
  11.       <td> ... </td> के लिये |
  12.       <td> ... </td> के लिये |
  13.     </tr>
  14.   </tbody> के
  15. </table>क अनुसार

रूप

पूर्वनिर्धारित शैलियाँ

व्यक्तिगत रूप नियंत्रण स्टाइलिंग प्राप्त करय छै, लेकिन बिना कोनों आवश्यक आधार वर्ग पर <form>या मार्कअप मे पैघ बदलाव. फॉर्म नियंत्रणक कें ऊपर ढेर, बायां संरेखित लेबल कें परिणामस्वरूप.

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

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

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

खोज फॉर्म

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

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

इनलाइन रूप

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

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

क्षैतिज रूप

लेबल कें दाहिना संरेखित करूं आ ओकरा बामा तरफ फ्लोट करूं ताकि ओ नियंत्रणक कें समान लाइन पर दिखाई द सकय. एकटा डिफ़ॉल्ट फॉर्म सं सबसँ बेसी मार्कअप परिवर्तनक आवश्यकता अछि:

  • .form-horizontalफॉर्म मे जोड़ू
  • लेबल और नियंत्रण में लपेटें.control-group
  • .control-labelलेबल मे जोड़ू
  • .controlsउचित संरेखण कें लेल कोनों संबद्ध नियंत्रण कें अंदर लपेटूं
  1. <form class = "रूप-क्षैतिज" > 
  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.       <button type = "submit" class = "btn" > साइन इन करू </button>  
  20.     </div>
  21.   </div>
  22. </form>

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

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

इनपुट

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

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

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

पाठ क्षेत्र

फॉर्म नियंत्रण जे पाठक अनेक पंक्तिक समर्थन करैत अछि | rowsआवश्यकतानुसार विशेषता बदलें ।

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

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

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

पूर्वनिर्धारित (ढेर) 1।


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

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

क्लास कें चेकबॉक्स कें एकटा श्रृंखला मे जोड़ूं .inlineया नियंत्रणक कें लेल रेडियो एकहि लाइन पर दिखाई देयत छै.

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

चयन करैत अछि

डिफ़ॉल्ट विकल्प क उपयोग करू अथवा multiple="multiple"एक बेर मे कईटा विकल्प देखाबय लेल a निर्दिष्ट करू.


  1. <चयन>
  2.   <विकल्प> 1 </विकल्प>
  3.   <विकल्प> २ </विकल्प>
  4.   <विकल्प> ३ </विकल्प>
  5.   <विकल्प> ४ </विकल्प>
  6.   <विकल्प> ५ </विकल्प>
  7. </चयन>
  8.  
  9. < बहु = "बहु" > चुनू 
  10.   <विकल्प> 1 </विकल्प>
  11.   <विकल्प> २ </विकल्प>
  12.   <विकल्प> ३ </विकल्प>
  13.   <विकल्प> ४ </विकल्प>
  14.   <विकल्प> ५ </विकल्प>
  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 वर्ग = "ऐड-ऑन" > .00 </span> 
  8. </div>

संयुक्त

.add-onएकटा इनपुट के प्रीपेंड आ एपेंड करय लेल के दुनू क्लास आओर दूटा इंस्टेंस के प्रयोग करू .

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

पाठ के जगह बटन

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

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

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

  1. <div वर्ग = "इनपुट-संलग्न" > 
  2.   <इनपुट वर्ग = "span2" आईडी = "appendedDropdownButton " प्रकार = "पाठ" >   
  3.   <div वर्ग = "बीटीएन-समूह" > 
  4.     <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  5.       कार्य
  6.       <span class = "कैरेट" </span> 
  7.     </बटन>
  8.     <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div वर्ग = "इनपुट-प्रीपेंड" > 
  2.   <div वर्ग = "बीटीएन-समूह" > 
  3.     <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  4.       कार्य
  5.       <span class = "कैरेट" </span> 
  6.     </बटन>
  7.     <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <इनपुट वर्ग = "span2" आईडी = "prependedDropdownButton" प्रकार = "पाठ" >   
  12. </div>
  1. <div class = "इनपुट-प्रीपेंड इनपुट-एपेंड" > 
  2.   <div वर्ग = "बीटीएन-समूह" > 
  3.     <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  4.       कार्य
  5.       <span class = "कैरेट" </span> 
  6.     </बटन>
  7.     <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <इनपुट वर्ग = "span2" id = "संलग्नPrependedDropdownButton" प्रकार = "पाठ" >   
  12.   <div वर्ग = "बीटीएन-समूह" > 
  13.     <button class = "btn ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >  
  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. <form class = "फॉर्म-खोज" > 
  2.   <div वर्ग = "इनपुट-संलग्न" > 
  3.     <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-क्वेरी" >  
  4.     <button type = "submit" class = "btn" > खोज </बटन>  
  5.   </div>
  6.   <div वर्ग = "इनपुट-प्रीपेंड" > 
  7.     <button type = "submit" class = "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 class = "रूप-क्रियाएँ" > 
  2.   <button type = "submit" class = "btn btn-primary" > परिवर्तन सहेजें </button>  
  3.   <बटन प्रकार = "बटन" वर्ग = "btn" > रद्द करू </button>  
  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 के संस्करण में उपलब्ध नै छै.

  1. <input class = "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 class = "नियंत्रण-समूह जानकारी" > 
  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तत्व क॑ janifies करै छै, पाठ क॑ एक गंदा पाठ-छाया के साथ ग्रे रेंडर करै छै जेकरा हम ठीक नै करी सकै छियै ।

बटन के आकार

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

  1. <p>
  2.   <button class = "btn btn-बड़ा btn-प्राथमिक" प्रकार = "बटन" > बड़ा बटन </बटन>  
  3.   <button class = "btn btn-large" प्रकार = "बटन" > बड़ा बटन </बटन>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" प्रकार = "बटन" > पूर्वनिर्धारित बटन </बटन>  
  7.   <button class = "btn" type = "बटन" > पूर्वनिर्धारित बटन </बटन>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" प्रकार = "बटन" > छोट बटन </बटन>  
  11.   <button class = "btn btn-small" type = "बटन" > छोट बटन </बटन>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" प्रकार = "बटन" > मिनी बटन </बटन>  
  15.   <button class = "btn btn-mini" प्रकार = "बटन" > मिनी बटन </बटन>  
  16. </p>

ब्लॉक स्तर बटन बनाउ-ओ जे कोनो अभिभावक कें पूरा चौड़ाई मे फैलल छै- जोड़ क .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" प्रकार = "बटन" > अवरोध स्तर बटन </button>  
  2. <button class = "btn btn-large btn-block" type = "बटन" > अवरोध स्तर बटन </बटन>

अक्षम अवस्था

बटन के 50% वापस फीका क के अनक्लिक करय योग्य बनाउ.

लंगर तत्व

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

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

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

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

बटन तत्व

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

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

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

कोनो , , अथवा तत्व .btnपर वर्गक प्रयोग करू ।<a><button><input>

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

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

छवियाँ

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

१४०x१४० के १४०x१४० के १४०x१४० के 
  1. <img src = "..." वर्ग = "img-गोल" >  
  2. <img src = "..." वर्ग = "img-वृत्त" >  
  3. <img src = "..." वर्ग = "img-पोलारॉइड" >

हेड अप! .img-roundedआ समर्थन .img-circleकें अभाव मे IE7-8 मे काज नहि border-radiusकरएयत छै.

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

आइकन ग्लिफ

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

  • आइकन-ग्लास
  • आइकन-संगीत
  • आइकन-खोज
  • आइकन-लिफाफा
  • आइकन-हृदय
  • आइकन-स्टार
  • आइकन-स्टार-खाली
  • आइकन-उपयोगकर्ता
  • आइकन-फिल्म
  • आइकन-वीं-बड़े
  • आइकन-थ
  • आइकन-वीं-सूची
  • आइकन-ठीक अछि
  • आइकन-हटाओ
  • आइकन-ज़ूम-इन
  • आइकन-ज़ूम-आउट
  • आइकन-बंद
  • आइकन-संकेत
  • आइकन-कॉग
  • आइकन-कचरा
  • आइकन-घर
  • आइकन-फाइल
  • आइकन-समय
  • आइकन-रोड
  • आइकन-डाउनलोड-अल्ट
  • आइकन-डाउनलोड करब
  • आइकन-अपलोड
  • आइकन-इनबॉक्स
  • आइकन-खेल-वृत्त
  • आइकन-दोहराएँ
  • आइकन-ताज़ा
  • आइकन-सूची-अल्ट
  • आइकन-लॉक
  • आइकन-ध्वज
  • आइकन-हेडफोन
  • आइकन-वॉल्यूम-बंद
  • आइकन-वॉल्यूम-डाउन
  • आइकन-वॉल्यूम-अप
  • आइकन-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-प्राथमिक ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "#" ><span class = "कैरेट" ></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" आईडी = "inputIcon" प्रकार = "पाठ" >   
  7.     </div>
  8.   </div>
  9. </div>