मौलिक एचटीएमएल तत्व सभ के स्टाइल कइल गइल आ बिस्तार करे लायक क्लास सभ के साथ बढ़ावल गइल।
सभ एचटीएमएल हेडिंग, <h1>
माध्यम <h6>
से उपलब्ध बा।
बूटस्ट्रैप के ग्लोबल डिफ़ॉल्ट 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>
ई अधिकतर आवाज, तकनीकी शब्द वगैरह खातिर होला.
पाठ संरेखण वर्ग के साथ घटक में पाठ के आसानी से फिर से संरेखित करीं।
बाईं ओर से संरेखित पाठ बा।
केंद्र से संरेखित पाठ बा।
दाहिने से संरेखित पाठ बा।
- <p class = "text-left" > बाईं ओर संरेखित पाठ। </p>के बा
- <p class = "पाठ-केंद्र" > केंद्र संरेखित पाठ। </p>के बा
- <p class = "text-right" > दाहिने संरेखित पाठ। </p>के बा
मुट्ठी भर जोर उपयोगिता वर्ग के साथ रंग के माध्यम से अर्थ संप्रेषित करीं।
फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ।
एटियाम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड के नाम से जानल जाला।
डोनेक उल्लमकोर्पर नुला गैर मेटस नीलामी फ्रिंगिला।
एनियन ईयू लियो क्वाम के बा। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस के बा।
डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला के नाम से जानल जाला।
- <p class = "म्यूट" > फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ। </p>के बा
- <p class = "पाठ-चेतावनी" > एटियम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड। </p>के बा
- <p class = "पाठ-त्रुटि" > डोनेक उल्लमकॉर्पर नुला गैर मेटस ऑक्टर फ्रिंगिला। </p>के बा
- <p class = "पाठ-जानकारी" > एनियन ईयू लियो क्वाम। पेलेन्टेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस के बा। </p>के बा
- <p class = "पाठ-सफलता" > डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एरेट पोर्टिटोर लिगुला। </p>के बा
<abbr>
होवर पर बिस्तारित संस्करण देखावे खातिर संक्षिप्त आ संक्षिप्त नाँव खातिर एचटीएमएल के तत्व के शैलीबद्ध कार्यान्वयन । एट्रिब्यूट वाला संक्षिप्त नाँव title
सभ में हल्का बिंदीदार नीचे के सीमा आ होवर पर हेल्प कर्सर होला, होवर पर अतिरिक्त संदर्भ उपलब्ध करावे ला।
<abbr>
संक्षिप्त नाँव के लंबा होवर पर बिस्तारित पाठ खातिर, title
बिसेसता के सामिल करीं।
विशेषता शब्द के एगो संक्षिप्त रूप ह attr .
<abbr title = "विशेषता" > attr </abbr> के बारे में बतावल गइल बा
<abbr class="initialism">
.initialism
तनी छोट फॉन्ट-साइज खातिर संक्षिप्त रूप में जोड़ल जाव.
एचटीएमएल कटा रोटी के बाद से सबसे बढ़िया चीज बा।
<abbr title = "हाइपरटेक्स्ट मार्कअप भाषा" class = "प्रारंभिकता" > एचटीएमएल </abbr>
नजदीकी पूर्वज या काम के पूरा निकाय खातिर संपर्क जानकारी प्रस्तुत करीं।
<address>
से सभ लाइन के समाप्त क के प्रारूपण के संरक्षित करीं <br>
।
- <पता> के बा
- <strong> ट्विटर, इंक के </strong><br> के बारे में बतावल गइल बा
- 795 फोल्सम एवेन्यू, सुइट 600 <br> के बा
- सैन फ्रांसिस्को, सीए 94107 <br> के बा
- <abbr title = "फोन" > पी: </abbr> (123) 456-7890 पर संपर्क कइल जा सकेला
- </पता> के बा
- <पता> के बा
- <strong> पूरा नाम </strong><br> बा
- <a href = "mailto:#" > पहिला.अंतिम@उदाहरण.कॉम </a>
- </पता> के बा
अपना दस्तावेज के भीतर कवनो दोसरा स्रोत से सामग्री के ब्लॉक के उद्धरण देबे खातिर.
उद्धरण के रूप में कवनो भी एचटीएमएल<blockquote>
के चारों ओर लपेट लीं । सीधा उद्धरण खातिर हमनी के एगो .<p>
लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी।
- <ब्लॉककोट> के बा
- <p> लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी। </p>के बा
- </blockquote> के बा
मानक ब्लॉककोट पर सरल भिन्नता खातिर शैली आ सामग्री में बदलाव होला।
<small>
स्रोत के पहचान करे खातिर टैग जोड़ीं । में स्रोत काम के नाम लपेटीं <cite>
।
लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी।
स्रोत शीर्षक में केहू मशहूर बा
- <ब्लॉककोट> के बा
- <p> लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी। </p>के बा
- <small> केहू मशहूर <cite title = "स्रोत शीर्षक" > स्रोत शीर्षक </cite></small>
- </blockquote> के बा
.pull-right
फ्लोटेड, राइट-अलाइन ब्लॉककोट खातिर इस्तेमाल करीं ।
- <blockquote class = "पुल-राइट" > बा
- ...
- </blockquote> के बा
अइसन आइटम सभ के लिस्ट जेह में क्रम के स्पष्ट रूप से महत्व ना होखे।
- <उल> के बा
- <li> ... </li> के बा
- </ul> के बा
अइसन आइटम सभ के लिस्ट जेह में क्रम के स्पष्ट रूप से महत्व होला।
- <ol> के बा
- <li> ... </li> के बा
- </ol>के बा
सूची आइटम सभ पर डिफ़ॉल्ट list-style
आ बाईं ओर के पैडिंग हटाईं (केवल तत्काल बच्चा लोग खातिर)।
- <ul class = "अनस्टाइल" > बा
- <li> ... </li> के बा
- </ul> के बा
सभ सूची आइटम के एक लाइन पर inline-block
आ कुछ हल्का पैडिंग के साथ रखीं।
- <ul वर्ग = "इनलाइन" > के बा
- <li> ... </li> के बा
- </ul> के बा
शब्द सभ के लिस्ट जेह में इनहन से जुड़ल बिबरन दिहल गइल बा।
- <dl> के बा
- <dt> ... </dt> के बा
- <dd> ... </dd> के बा
- </dl> के बा
लाइन अप में शब्द आ वर्णन <dl>
एक दोसरा के बगल में बनाईं.
- <dl वर्ग = "डीएल-क्षैतिज" > बा
- <dt> ... </dt> के बा
- <dd> ... </dd> के बा
- </dl> के बा
हेड अप हो गइल बा!क्षैतिज विवरण सूची ओह शब्दन के काट दी जवन बहुत लंबा बा आ बाईं ओर के कॉलम फिक्स में फिट ना हो सकेला text-overflow
. संकरी व्यूपोर्ट सभ में, ई डिफ़ॉल्ट ढेर लेआउट में बदल जइहें।
कोड के इनलाइन स्निपेट के के साथ लपेटीं <code>
।
<section>
कि इनलाइन के रूप में लपेटल जाव.
- उदाहरण खातिर , <कोड> & lt ; section & gt ;</ code > के इनलाइन के रूप में लपेटल जाव .
<pre>
कोड के कई लाइन खातिर इस्तेमाल करीं । सही रेंडरिंग खातिर कोड में कवनो एंगल ब्रैकेट से जरूर बचल जाव.
<p>इहाँ के नमूना पाठ...</p>
- <पूर्व> के बा
- <p>इहाँ के नमूना पाठ...</p>
- </pre> के बा
हेड अप हो गइल बा!<pre>
टैग सभ के भीतर कोड के बाईं ओर के जेतना नजदीक हो सके ओतना नजदीक जरूर रखीं ; इ सभ टैब के रेंडर क दिही।
रउआँ वैकल्पिक रूप से .pre-scrollable
क्लास जोड़ सकत बानी जे 350px के मैक्स-हाईट सेट करी आ y-अक्ष स्क्रॉलबार उपलब्ध करावे ला।
.table
बेसिक स्टाइलिंग खातिर-लाइट पैडिंग आ खाली क्षैतिज डिवाइडर- कोई भी में बेस क्लास जोड़ीं <table>
।
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | प्रयोगकर्ता के नाम बा |
---|---|---|---|
1 के बा | मार्क कइल जाव | ओटो के नाम से जानल जाला | @mdo के बा |
2 के बा | याकूब के नाम से जानल जाला | थॉर्नटन के नाम से जानल जाला | @मोट |
3 के बा | लैरी के नाम से जानल जाला | चिरई के नाम से जानल जाला | @ट्विटर पर दिहल गइल बा |
- <टेबल क्लास = "टेबल" > के बा
- ...
- </table> के बा
.table
बेस क्लास में निम्नलिखित में से कवनो क्लास के जोड़ल जाला ।
.table-striped
<tbody>
सीएसएस चयनकर्ता के माध्यम से :nth-child
(IE7-8 में उपलब्ध नइखे) के भीतर कवनो टेबल पंक्ति में ज़ेबरा-स्ट्राइपिंग जोड़ देला ।
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | प्रयोगकर्ता के नाम बा |
---|---|---|---|
1 के बा | मार्क कइल जाव | ओटो के नाम से जानल जाला | @mdo के बा |
2 के बा | याकूब के नाम से जानल जाला | थॉर्नटन के नाम से जानल जाला | @मोट |
3 के बा | लैरी के नाम से जानल जाला | चिरई के नाम से जानल जाला | @ट्विटर पर दिहल गइल बा |
- <तालिका वर्ग = "तालिका तालिका-धारीदार" >
- ...
- </table> के बा
.table-bordered
टेबल पर सीमा आ गोल कोना जोड़ल जाला।
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | प्रयोगकर्ता के नाम बा |
---|---|---|---|
1 के बा | मार्क कइल जाव | ओटो के नाम से जानल जाला | @mdo के बा |
मार्क कइल जाव | ओटो के नाम से जानल जाला | @getbootstrap के बा | |
2 के बा | याकूब के नाम से जानल जाला | थॉर्नटन के नाम से जानल जाला | @मोट |
3 के बा | लैरी द बर्ड के नाम से जानल जाला | @ट्विटर पर दिहल गइल बा |
- <table class = "टेबल टेबल-सीमा वाला" >
- ...
- </table> के बा
.table-hover
एगो के भीतर टेबल पंक्तियन पर एगो होवर स्टेट सक्षम करीं <tbody>
.
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | प्रयोगकर्ता के नाम बा |
---|---|---|---|
1 के बा | मार्क कइल जाव | ओटो के नाम से जानल जाला | @mdo के बा |
2 के बा | याकूब के नाम से जानल जाला | थॉर्नटन के नाम से जानल जाला | @मोट |
3 के बा | लैरी द बर्ड के नाम से जानल जाला | @ट्विटर पर दिहल गइल बा |
- <टेबल क्लास = "टेबल टेबल-होवर" > बा
- ...
- </table> के बा
.table-condensed
सेल पैडिंग के आधा में काट के टेबल के अउरी कॉम्पैक्ट बनावेला।
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | प्रयोगकर्ता के नाम बा |
---|---|---|---|
1 के बा | मार्क कइल जाव | ओटो के नाम से जानल जाला | @mdo के बा |
2 के बा | याकूब के नाम से जानल जाला | थॉर्नटन के नाम से जानल जाला | @मोट |
3 के बा | लैरी द बर्ड के नाम से जानल जाला | @ट्विटर पर दिहल गइल बा |
- <तालिका वर्ग = "तालिका तालिका-घनीभूत" >
- ...
- </table> के बा
तालिका पंक्तियन के रंगाई-पोताई करे खातिर संदर्भ कक्षा के इस्तेमाल करीं।
कक्षा | बिबरन |
---|---|
.success |
सफल भा सकारात्मक कार्रवाई के संकेत देला। |
.error |
खतरनाक भा संभावित नकारात्मक कार्रवाई के संकेत देला। |
.warning |
एगो चेतावनी के संकेत देला जवना पर ध्यान देबे के जरूरत पड़ सकेला. |
.info |
डिफ़ॉल्ट शैली सभ के विकल्प के रूप में इस्तेमाल होला। |
# भोजपुरी में पढ़ें: | उत्पाद | भुगतान ले लिहल गइल बा | ओहदा |
---|---|---|---|
1 के बा | टीबी - मासिक बा | 01/04/2012 के भइल | मंजूर |
2 के बा | टीबी - मासिक बा | 02/04/2012 के भइल | मना कर दिहल गइल |
3 के बा | टीबी - मासिक बा | 03/04/2012 के भइल | फँसल |
4 के बा | टीबी - मासिक बा | 04/04/2012 के भइल | कन्फर्म करे खातिर कॉल इन करीं |
- ...
- < tr class = "सफलता" > के बा
- <td> 1 < /td> के बा
- <td>टीबी - मासिक</ td > के बा
- <td> 01 / 04 / 2012 < /td> के भइल
- <td>अनुमोदित हो गइल बा</ td >
- </ tr > के बा
- ...
समर्थित टेबल एचटीएमएल तत्व सभ के लिस्ट आ इनहन के इस्तेमाल कइसे कइल जाय।
घुंडी | बिबरन |
---|---|
<table> |
सारणीबद्ध प्रारूप में डेटा के प्रदर्शित करे खातिर रैपिंग तत्व |
<thead> |
टेबल हेडर पंक्ति ( <tr> ) खातिर कंटेनर तत्व टेबल कॉलम के लेबल करे खातिर |
<tbody> |
<tr> तालिका के शरीर में तालिका पंक्ति ( ) के लिए कंटेनर तत्व |
<tr> |
<td> टेबल सेल ( या ) के सेट खातिर कंटेनर तत्व जे <th> एकही पंक्ति पर लउके ला |
<td> |
डिफ़ॉल्ट टेबल सेल बा |
<th> |
कॉलम (या पंक्ति, दायरा आ प्लेसमेंट के आधार पर) लेबल सभ खातिर बिसेस टेबल सेल |
<caption> |
तालिका में का रखल गइल बा ओकर वर्णन भा सारांश, खासतौर पर स्क्रीन रीडर खातिर उपयोगी |
- <टेबल> के बा
- <कैप्शन> ... </कैप्शन> के बा
- <सिर> के बा
- <tr> के बा
- <th> ... </th> के बा
- <th> ... </th> के बा
- </tr>के बा
- </thead> के बा
- <tbody> के बा
- <tr> के बा
- <td> ... </td> के बा
- <td> ... </td> के बा
- </tr>के बा
- </tbody> के बा
- </table> के बा
अलग-अलग फॉर्म कंट्रोल स्टाइलिंग प्राप्त करे लें, बाकी बिना कौनों जरूरी बेस क्लास के पर <form>
या मार्कअप में बड़हन बदलाव के। फॉर्म कंट्रोल के ऊपर ढेर, बाईं ओर संरेखित लेबल के परिणाम होला।
- <रूप> के बा
- <फील्डसेट> के बा
- <किंवदंती> किंवदंती </किंवदंती> के बारे में बतावल गइल बा
- <label> लेबल के नाम </label> बा
- <input type = "text" placeholder = "कुछ टाइप करीं..." >
- <span class = "help-block" > इहाँ ब्लॉक-स्तर के मदद पाठ के उदाहरण दीं। </span>के बा
- <लेबल वर्ग = "चेकबॉक्स" > बा
- <input type = "checkbox" > हमरा के जांच करीं
- </label> के बा
- <बटन प्रकार = "सबमिट" class = "btn" > सबमिट करीं </बटन>
- </फील्डसेट> के बा
- </form> के बा
बूटस्ट्रैप के साथ आम उपयोग केस खातिर तीन गो वैकल्पिक फॉर्म लेआउट शामिल बा।
एगो अतिरिक्त गोल पाठ इनपुट खातिर .form-search
फार्म में आ में .search-query
जोड़ीं ।<input>
- <फॉर्म क्लास = "फॉर्म-खोज" > बा
- <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-माध्यम खोज-क्वेरी" >
- <बटन प्रकार = "सबमिट" क्लास = "btn" > खोज </बटन>
- </form> के बा
.form-inline
बाईं ओर के संरेखित लेबल आ कॉम्पैक्ट लेआउट खातिर इनलाइन-ब्लॉक नियंत्रण खातिर जोड़ीं ।
- <फॉर्म क्लास = "फॉर्म-इनलाइन" > बा
- <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-छोट" प्लेसहोल्डर = "ईमेल" >
- <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-छोट" प्लेसहोल्डर = "पासवर्ड" >
- <लेबल वर्ग = "चेकबॉक्स" > बा
- <input type = "checkbox" > हमरा के याद रखीं
- </label> के बा
- <बटन प्रकार = "सबमिट" क्लास = "btn" > साइन इन करीं </बटन>
- </form> के बा
लेबल सभ के दाहिना ओर संरेखित करीं आ बाईं ओर फ्लोट करीं जेह से कि ऊ नियंत्रण सभ के समान लाइन पर लउके। डिफ़ॉल्ट फॉर्म से सभसे ढेर मार्कअप बदलाव के जरूरत बा:
.form-horizontal
फार्म में जोड़ल जाव.control-group
.control-label
लेबल में जोड़ल जाव.controls
सही संरेखण खातिर कवनो संबद्ध नियंत्रण के लपेटीं
- <फॉर्म क्लास = "फॉर्म-क्षैतिज" > बा
- <div वर्ग = "नियंत्रण-समूह" > बा
- <label class = "control-label" for = "इनपुटईमेल" > ईमेल </label>
- <div वर्ग = "नियंत्रित करेला" >
- <इनपुट प्रकार = "पाठ" आईडी = "इनपुटईमेल" प्लेसहोल्डर = "ईमेल" >
- </div> के बा
- </div> के बा
- <div वर्ग = "नियंत्रण-समूह" > बा
- <label class = "control-label" for = "इनपुटपासवर्ड" > पासवर्ड </label>
- <div वर्ग = "नियंत्रित करेला" >
- <इनपुट प्रकार = "पासवर्ड" आईडी = "इनपुटपासवर्ड" प्लेसहोल्डर = "पासवर्ड" >
- </div> के बा
- </div> के बा
- <div वर्ग = "नियंत्रण-समूह" > बा
- <div वर्ग = "नियंत्रित करेला" >
- <लेबल वर्ग = "चेकबॉक्स" > बा
- <input type = "checkbox" > हमरा के याद रखीं
- </label> के बा
- <बटन प्रकार = "सबमिट" क्लास = "btn" > साइन इन करीं </बटन>
- </div> के बा
- </div> के बा
- </form> के बा
एगो उदाहरण फॉर्म लेआउट में समर्थित मानक फॉर्म नियंत्रण सभ के उदाहरण।
सबसे आम रूप नियंत्रण, पाठ आधारित इनपुट फील्ड। सभ HTML5 प्रकार खातिर सपोर्ट शामिल बा: टेक्स्ट, पासवर्ड, डेटटाइम, डेटटाइम-लोकल, डेट, महीना, समय, हप्ता, नंबर, ईमेल, यूआरएल, खोज, टेल, आ रंग।
type
हर समय एगो निर्दिष्ट के इस्तेमाल के जरूरत बा ।
- <इनपुट प्रकार = "पाठ" प्लेसहोल्डर = "पाठ इनपुट" >
फॉर्म कंट्रोल जवन पाठ के कई लाइन के सपोर्ट करेला। rows
जरूरत के हिसाब से विशेषता बदलीं ।
- <textarea rows = "3" ></textarea> के बारे में बतावल गइल बा
चेकबॉक्स कौनों लिस्ट में एक या कई गो विकल्प चुने खातिर होला जबकि रेडियो कई में से एक विकल्प चुने खातिर होला।
- <लेबल वर्ग = "चेकबॉक्स" > बा
- <इनपुट प्रकार = "चेकबॉक्स" मान = "" > बा
- विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
- </label> के बा
- <लेबल वर्ग = "रेडियो" > बा
- <इनपुट प्रकार = "रेडियो" नाम = "विकल्परेडियो" आईडी = "विकल्परेडियो1" मान = "विकल्प1" के जांच कइल गइल >
- विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
- </label> के बा
- <लेबल वर्ग = "रेडियो" > बा
- <इनपुट प्रकार = "रेडियो" नाम = "विकल्परेडियो" आईडी = "विकल्परेडियो2" मान = "विकल्प2" >
- विकल्प दू कुछ अउर हो सकेला आ ओकरा के चुनला से विकल्प एक के चयन रद्द हो जाई
- </label> के बा
.inline
एकही लाइन पर नियंत्रण खातिर चेकबॉक्स भा रेडियो सभ के एगो श्रृंखला में क्लास के जोड़ल जाला ।
- <लेबल वर्ग = "चेकबॉक्स इनलाइन" > बा
- <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइनचेकबॉक्स1" मान = "विकल्प1 " > 1
- </label> के बा
- <लेबल वर्ग = "चेकबॉक्स इनलाइन" > बा
- <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइनचेकबॉक्स2" मान = "विकल्प2 " > 2
- </label> के बा
- <लेबल वर्ग = "चेकबॉक्स इनलाइन" > बा
- <इनपुट प्रकार = "चेकबॉक्स" आईडी = "इनलाइनचेकबॉक्स3" मान = "विकल्प3 " > 3
- </label> के बा
डिफ़ॉल्ट विकल्प के इस्तेमाल करीं या multiple="multiple"
एक साथ कई गो विकल्प देखावे खातिर a निर्दिष्ट करीं।
- <चयन> के बा
- <विकल्प> 1 </विकल्प> के बा
- <विकल्प> 2 </विकल्प> के बा
- <विकल्प> 3 </विकल्प> के बा
- <विकल्प> 4 </विकल्प> के बा
- <विकल्प> 5 </option> के बा
- </चयन> के बा
- < बहु चुनें = "बहु" > के बा
- <विकल्प> 1 </विकल्प> के बा
- <विकल्प> 2 </विकल्प> के बा
- <विकल्प> 3 </विकल्प> के बा
- <विकल्प> 4 </विकल्प> के बा
- <विकल्प> 5 </option> के बा
- </चयन> के बा
मौजूदा ब्राउजर नियंत्रण के ऊपर जोड़ के, बूटस्ट्रैप में अउरी उपयोगी फॉर्म घटक शामिल बा।
कवनो पाठ आधारित इनपुट से पहिले भा बाद में पाठ भा बटन जोड़ीं. ध्यान दीं कि select
इहाँ तत्व सभ के समर्थन नइखे कइल गइल।
कवनो इनपुट में टेक्स्ट के प्रीपेंड भा जोड़े खातिर दू गो क्लास में से कवनो एक के साथ an .add-on
आ an के लपेटीं ।input
- <div वर्ग = "इनपुट-प्रीपेंड" > बा
- <span class = "एड-ऑन" > @ </span> के बा
- <इनपुट क्लास = "span2" आईडी = "prependedInput" प्रकार = "पाठ" प्लेसहोल्डर = "उपयोगकर्ता नाम" >
- </div> के बा
- <div क्लास = "इनपुट-एपेंड" > बा
- <इनपुट वर्ग = "span2" आईडी = "संलग्नइनपुट" प्रकार = "पाठ" >
- <span class = "एड-ऑन" > .00 </span> के बा
- </div> के बा
.add-on
कवनो इनपुट के प्रीपेंड आ एपेंड करे खातिर दुनो क्लास आ दू गो इंस्टेंस के इस्तेमाल करीं ।
- <div class = "इनपुट-प्रीपेंड इनपुट-एपेंड" > बा
- <span class = "एड-ऑन" > $ </span> के बा
- <इनपुट क्लास = "span2" id = "appendedPrependedInput" प्रकार = "पाठ" >
- <span class = "एड-ऑन" > .00 </span> के बा
- </div> के बा
<span>
टेक्स्ट के साथ a के बजाय , .btn
इनपुट में बटन (या दू गो) संलग्न करे खातिर a के इस्तेमाल करीं।
- <div क्लास = "इनपुट-एपेंड" > बा
- <इनपुट क्लास = "span2" आईडी = "संलग्नइनपुटबटन" प्रकार = "पाठ" >
- <बटन वर्ग = "बीटीएन" प्रकार = "बटन" > जा! </बटन> के बा
- </div> के बा
- <div क्लास = "इनपुट-एपेंड" > बा
- <इनपुट क्लास = "span2" आईडी = "संलग्नइनपुटबटन" प्रकार = "पाठ" >
- <button class = "btn" type = "बटन" > खोज </बटन> बा
- <बटन वर्ग = "btn" प्रकार = "बटन" > विकल्प </बटन>
- </div> के बा
- <div क्लास = "इनपुट-एपेंड" > बा
- <इनपुट क्लास = "span2" आईडी = "संलग्नड्रॉपडाउनबटन" प्रकार = "पाठ" >
- <div वर्ग = "बीटीएन-समूह" > बा
- <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
- कार्रवाई
- <span class = "कैरेट" </span> के बारे में बतावल गइल बा
- </बटन> के बा
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- ...
- </ul> के बा
- </div> के बा
- </div> के बा
- <div वर्ग = "इनपुट-प्रीपेंड" > बा
- <div वर्ग = "बीटीएन-समूह" > बा
- <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
- कार्रवाई
- <span class = "कैरेट" </span> के बारे में बतावल गइल बा
- </बटन> के बा
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- ...
- </ul> के बा
- </div> के बा
- <इनपुट क्लास = "span2" आईडी = "prependedDropdownButton" प्रकार = "पाठ" >
- </div> के बा
- <div class = "इनपुट-प्रीपेंड इनपुट-एपेंड" > बा
- <div वर्ग = "बीटीएन-समूह" > बा
- <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
- कार्रवाई
- <span class = "कैरेट" </span> के बारे में बतावल गइल बा
- </बटन> के बा
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- ...
- </ul> के बा
- </div> के बा
- <इनपुट क्लास = "span2" आईडी = "संलग्नप्रधानड्रॉपडाउनबटन" प्रकार = "पाठ" >
- <div वर्ग = "बीटीएन-समूह" > बा
- <बटन वर्ग = "बीटीएन ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" >
- कार्रवाई
- <span class = "कैरेट" </span> के बारे में बतावल गइल बा
- </बटन> के बा
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- ...
- </ul> के बा
- </div> के बा
- </div> के बा
- <रूप> के बा
- <div वर्ग = "इनपुट-प्रीपेंड" > बा
- <div वर्ग = "btn-समूह" > ... </div> के बारे में बतावल गइल बा
- <इनपुट प्रकार = "पाठ" > बा
- </div> के बा
- <div क्लास = "इनपुट-एपेंड" > बा
- <इनपुट प्रकार = "पाठ" > बा
- <div वर्ग = "btn-समूह" > ... </div> के बारे में बतावल गइल बा
- </div> के बा
- </form> के बा
- <फॉर्म क्लास = "फॉर्म-खोज" > बा
- <div क्लास = "इनपुट-एपेंड" > बा
- <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-क्वेरी" >
- <बटन प्रकार = "सबमिट" क्लास = "btn" > खोज </बटन>
- </div> के बा
- <div वर्ग = "इनपुट-प्रीपेंड" > बा
- <बटन प्रकार = "सबमिट" क्लास = "btn" > खोज </बटन>
- <इनपुट प्रकार = "पाठ" वर्ग = "span2 खोज-क्वेरी" >
- </div> के बा
- </form> के बा
रिलेटिव साइजिंग क्लास सभ के इस्तेमाल करीं जइसे कि .input-large
या क्लास सभ के इस्तेमाल से ग्रिड कॉलम साइज सभ से आपन इनपुट सभ के मिलान करीं .span*
।
<input>
कवनो भा <textarea>
तत्व के ब्लॉक लेवल तत्व नियर व्यवहार करे के बनाईं ।
- <इनपुट क्लास = "इनपुट-ब्लॉक-स्तर" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-ब्लॉक-स्तर" >
- <इनपुट क्लास = "इनपुट-मिनी" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-मिनी" >
- <इनपुट क्लास = "इनपुट-छोट" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-छोट" >
- <इनपुट क्लास = "इनपुट-मीडियम" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-मीडियम" >
- <इनपुट क्लास = "इनपुट-बड़ा" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-बड़ा" >
- <इनपुट क्लास = "इनपुट-xlarge" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-xlarge" >
- <इनपुट क्लास = "इनपुट-xxlarge" प्रकार = "पाठ" प्लेसहोल्डर = ".इनपुट-xxlarge" >
हेड अप हो गइल बा!भविष्य के संस्करण सभ में, हमनी के एह रिलेटिव इनपुट क्लास सभ के इस्तेमाल में बदलाव करब जा ताकि हमनी के बटन साइज से मेल खा सके। जइसे कि .input-large
कवनो इनपुट के पैडिंग आ फॉन्ट-साइज बढ़ जाई.
ग्रिड कॉलम सभ के एकही साइज से मेल खाए वाला इनपुट सभ खातिर .span1
to के इस्तेमाल करीं ।.span12
- <इनपुट क्लास = "span1" प्रकार = "पाठ" प्लेसहोल्डर = ".span1" >
- <इनपुट क्लास = "span2" प्रकार = "पाठ" प्लेसहोल्डर = ".span2" >
- <इनपुट क्लास = "span3" प्रकार = "पाठ" प्लेसहोल्डर = ".span3" >
- < वर्ग चुनें = "span1" > के बा
- ...
- </चयन> के बा
- < वर्ग चुनें = "span2" > के बा
- ...
- </चयन> के बा
- < वर्ग चुनें = "span3" > के बा
- ...
- </चयन> के बा
प्रति लाइन कई गो ग्रिड इनपुट खातिर, उचित स्पेसिंग खातिर संशोधक वर्ग के इस्तेमाल करीं.controls-row
। ई व्हाइट-स्पेस के संकुचित करे खातिर इनपुट सभ के फ्लोट करे ला, उचित मार्जिन सेट करे ला आ फ्लोट के खाली करे ला।
- <div वर्ग = "नियंत्रित करेला" >
- <इनपुट क्लास = "span5" प्रकार = "पाठ" प्लेसहोल्डर = ".span5" >
- </div> के बा
- <div class = "नियंत्रण-पंक्ति के नियंत्रित करेला" >
- <इनपुट क्लास = "span4" प्रकार = "पाठ" प्लेसहोल्डर = ".span4" >
- <इनपुट क्लास = "span1" प्रकार = "पाठ" प्लेसहोल्डर = ".span1" >
- </div> के बा
- ...
डेटा के अइसन रूप में प्रस्तुत करीं जवन वास्तविक फॉर्म मार्कअप के इस्तेमाल कइले बिना संपादन योग्य ना होखे।
- <span class = "input-xlarge uneditable-input" > इहाँ कुछ मान </span>
क्रिया सभ के समूह (बटन) के साथ कौनों फॉर्म के अंत करीं। जब एगो के भीतर रखल .form-actions
जाई त बटन स्वचालित रूप से इंडेंट हो जाई ताकि फॉर्म कंट्रोल के संगे लाइन में खड़ा हो सके।
- <div वर्ग = "रूप-क्रिया" > बा
- <button type = "submit" class = "btn btn-primary" > बदलाव सहेजीं </बटन>
- <बटन प्रकार = "बटन" वर्ग = "btn" > रद्द करीं </बटन>
- </div> के बा
मदद पाठ खातिर इनलाइन आ ब्लॉक स्तर के समर्थन जे फॉर्म नियंत्रण सभ के आसपास लउके ला।
- <input type = "text" ><span class = "help-inline" > इनलाइन मदद पाठ </span>
- <input type = "text" ><span class = "help-block" > मदद पाठ के एगो लंबा ब्लॉक जे नया लाइन पर टूट जाला आ एक लाइन से आगे बढ़ सके ला। </span>के बा
फॉर्म कंट्रोल आ लेबल सभ पर बेसिक फीडबैक स्टेट सभ के साथ यूजर भा विजिटर लोग के फीडबैक दिहल।
outline
हमनी के कुछ फॉर्म कंट्रोल पर डिफ़ॉल्ट स्टाइल हटा देनी जा आ box-shadow
ओकरा जगह पर एगो लागू कर देनी जा :focus
.
- <input class = "input-xlarge" id = "focusedInput" type = "text" मान = "ई केंद्रित बा ..." >
के साथ डिफ़ॉल्ट ब्राउज़र कार्यक्षमता के माध्यम से स्टाइल इनपुट बा :invalid
। a निर्दिष्ट करीं type
, अगर फील्ड वैकल्पिक ना होखे तब विशेषता जोड़ीं required
, आ (अगर लागू होखे) a निर्दिष्ट करीं pattern
।
ई इंटरनेट एक्सप्लोरर 7-9 के संस्करण सभ में उपलब्ध नइखे काहें से कि CSS छद्म चयनकर्ता सभ के सपोर्ट के कमी बा।
- <इनपुट क्लास = "span3" प्रकार = "ईमेल" के जरूरत बा >
disabled
यूजर इनपुट के रोके खातिर आ तनिका अलग लुक के ट्रिगर करे खातिर कवनो इनपुट पर एट्रिब्यूट जोड़ल जाला ।
- <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "इहाँ इनपुट अक्षम कइल गइल बा ..." अक्षम कइल गइल >
बूटस्ट्रैप में त्रुटि, चेतावनी, जानकारी, आ सफलता संदेश खातिर सत्यापन शैली शामिल बा। उपयोग करे खातिर, आसपास के में उचित वर्ग जोड़ीं .control-group
।
- <div class = "नियंत्रण-समूह चेतावनी" > बा
- <label class = "control-label" for = "inputWarning" > चेतावनी के साथ इनपुट </label>
- <div वर्ग = "नियंत्रित करेला" >
- <इनपुट प्रकार = "पाठ" आईडी = "इनपुटचेतावनी" >
- <span class = "help-inline" > कुछ गड़बड़ हो सकेला </span>
- </div> के बा
- </div> के बा
- <div class = "नियंत्रण-समूह त्रुटि" > बा
- <label class = "control-label" for = "inputError" > त्रुटि के साथ इनपुट </label>
- <div वर्ग = "नियंत्रित करेला" >
- <इनपुट प्रकार = "पाठ" आईडी = "इनपुटत्रुटि" >
- <span class = "help-inline" > कृपया त्रुटि के सुधार करीं </span>
- </div> के बा
- </div> के बा
- <div वर्ग = "नियंत्रण-समूह के जानकारी" >
- <label class = "control-label" for = "inputInfo" > जानकारी के साथ इनपुट </label>
- <div वर्ग = "नियंत्रित करेला" >
- <इनपुट प्रकार = "पाठ" आईडी = "इनपुटइन्फो" >
- <span class = "help-inline" > प्रयोगकर्ता नाँव पहिले से लिहल गइल बा </span>
- </div> के बा
- </div> के बा
- <div class = "नियंत्रण-समूह सफलता" > बा
- <label class = "control-label" for = "inputSuccess" > सफलता के साथ इनपुट </label>
- <div वर्ग = "नियंत्रित करेला" >
- <इनपुट प्रकार = "पाठ" आईडी = "इनपुटसफलता" >
- <span class = "मदद-इनलाइन" > वूहू! </span>के बा
- </div> के बा
- </div> के बा
<img>
कवनो भी प्रोजेक्ट में छवि के आसानी से स्टाइल करे खातिर कवनो तत्व में क्लास जोड़ल जाला।
- <img src = "..." वर्ग के बा = "img-गोल" > बा
- <img src = "..." वर्ग के बा = "img-सर्कल" > बा
- <img src = "..." वर्ग = "img-पोलारॉइड" > बा
हेड अप हो गइल बा! .img-rounded
आ समर्थन .img-circle
के कमी के कारण IE7-8 में काम ना करेला ।border-radius
स्प्राइट रूप में 140 गो आइकन, गहरे ग्रे (डिफ़ॉल्ट) आ सफेद रंग में उपलब्ध बा, ग्लिफिकॉन्स द्वारा दिहल गइल बा ।
ग्लिफिकॉन्स हाफलिंग सामान्य रूप से मुफ्त में उपलब्ध ना होला, बाकी बूटस्ट्रैप आ ग्लिफिकॉन्स के निर्माता लोग के बीच एगो ब्यवस्था से ई संभव हो गइल बा आ डेवलपर के रूप में रउआँ के बिना कौनों खरचा के काम कइल जा सके ला। धन्यवाद के रूप में हम रउआ से कहत बानी कि जब भी व्यावहारिक होखे त ग्लिफिकॉन के वापस एगो वैकल्पिक लिंक शामिल करीं।
सभ आइकन सभ खातिर <i>
एगो बिसेस क्लास वाला टैग के जरूरत होला, जेकर उपसर्ग icon-
. इस्तेमाल करे खातिर, निम्नलिखित कोड के लगभग कहीं भी रखीं:
- <i class = "आइकन-खोज" </i> के बारे में बतावल गइल बा
उल्टा (सफेद) आइकन सभ खातिर भी स्टाइल उपलब्ध बाड़ें, एक ठो अतिरिक्त क्लास के साथ तइयार कइल गइल बाड़ें। हमनी के एह वर्ग के विशेष रूप से nav आ ड्रॉपडाउन लिंक खातिर होवर आ सक्रिय राज्यन पर लागू करब जा।
- <i class = "आइकन-खोज आइकन-सफेद" ></i>
हेड अप हो गइल बा!<i>
पाठ के स्ट्रिंग के बगल में इस्तेमाल करत समय, जइसे कि बटन भा nav लिंक में, सही स्पेसिंग खातिर टैग के बाद स्पेस जरूर छोड़ीं ।
इनहन के बटन, टूलबार खातिर बटन समूह, नेविगेशन, या प्रीपेंड फॉर्म इनपुट में इस्तेमाल करीं।
- <div वर्ग = "बीटीएन-टूलबार" > बा
- <div वर्ग = "बीटीएन-समूह" > बा
- <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-बाँया" ></i></a>
- <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-केंद्र" ></i></a>
- <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-दाहिना" ></i></a>
- <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-जस्टिफाई" ></i></a>
- </div> के बा
- </div> के बा
- <div वर्ग = "बीटीएन-समूह" > बा
- <a class = "btn btn-primary" href = "#" ><i class = "आइकन-उपयोगकर्ता आइकन-सफेद" ></i> प्रयोगकर्ता </a>
- <a class = "btn btn-प्राइमरी ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#" ><span क्लास = "कैरेट" ></span></a>
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- <li><a href = "#" ><i class = "आइकन-पेंसिल" </i> संपादन करीं </a></li>
- <li><a href = "#" ><i class = "आइकॉन-ट्रैश" </i> हटाईं </a></li>
- <li><a href = "#" ><i class = "आइकन-बैन-सर्कल" ></i> प्रतिबंधित करीं </a></li>
- <li class = "विभाजक" </li> के बारे में बतावल गइल बा
- <li><a href = "#" ><i class = "i" </i> व्यवस्थापक बनाईं </a></li>
- </ul> के बा
- </div> के बा
- <a class = "btn btn-large" href = "#" ><i class = "आइकॉन-स्टार" ></i> स्टार </a>
- <a class = "btn btn-small" href = "#" ><i class = "आइकन-स्टार" ></i> स्टार </a>
- <a class = "btn btn-mini" href = "#" ><i class = "आइकॉन-स्टार" ></i> स्टार </a> के बारे में जानकारी दिहल गइल बा
- <ul class = "नव नव-सूची" > बा
- <li class = "सक्रिय" ><a href = "#" ><i class = "आइकन-घर आइकन-सफेद" </i> घर </a></li>
- <li><a href = "#" ><i class = "आइकन-बुक" </i> लाइब्रेरी </a></li> बा
- <li><a href = "#" ><i class = "आइकन-पेंसिल" </i> आवेदन </a></li> बा
- <li><a href = "#" ><i वर्ग = "हम" </i> विविध </a></li> बा
- </ul> के बा
- <div वर्ग = "नियंत्रण-समूह" > बा
- <label class = "control-label" for = "inputIcon" > ईमेल पता </label>
- <div वर्ग = "नियंत्रित करेला" >
- <div वर्ग = "इनपुट-प्रीपेंड" > बा
- <span class = "एड-ऑन" ><i class = "आइकन-लिफाफा" ></i></span>
- <इनपुट क्लास = "span2" आईडी = "इनपुटआइकॉन" प्रकार = "पाठ" >
- </div> के बा
- </div> के बा
- </div> के बा