बूटस्ट्रैप दा

बेस सीएसएस ऐ

विस्तार योग्य वर्गें कन्नै शैली ते बधाए गेदे बुनियादी एचटीएमएल तत्व।

टाइपोग्राफी दा

हेडिंग्स

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

एच१ ऐ। शीर्षक 1 दा

ज २। हेडिंग 2 दा

ज ३। हेडिंग 3 दा

ह4 ऐ। हेडिंग 4 दा

ज ५। हेडिंग 5 दा
एच6 ऐ। हेडिंग 6 दा

शरीर दी नकल

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

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

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

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

<p> ... </p> दा

सीसा शरीर नकल

जोड़कर इक पैराग्राफ गी अलग बनाओ .lead.

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

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

कम के साथ बनाया गया

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

जोर

हल्के शैलियें कन्नै HTML दे डिफ़ॉल्ट जोर टैग दा इस्तेमाल करो.

<small>

पाठ दे इनलाइन जां ब्लॉक गी डी-एम्फैस करने आस्तै, निक्के टैग दा इस्तेमाल करो।

पाठ दी इस पंक्ति दा मतलब ऐ जे इसगी बारीक छापें दे रूप च समझेआ जा।

<p> <small> पाठ दी इस पंक्ति दा मतलब ऐ जे ठीक छपाई दे रूप च समझेआ जा. </small> </p> दा

<strong>

महत्वपूर्ण कन्नै पाठ दे इक स्निपेट पर जोर देने आस्तै

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

<strong> बोल्ड पाठ दे रूप च रेंडर कीता गेदा ऐ </strong>

<em>

तनाव कन्नै पाठ दे इक स्निपेट पर जोर देने आस्तै

पाठ दा निम्नलिखित स्निपेट इटैलिक पाठ दे रूप च रेंडर कीता गेदा ऐ .

<em> इटैलिक पाठ दे रूप च रेंडर कीता गेदा ऐ </em>

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

संक्षिप्त रूप

<abbr>होवर पर विस्तारित संस्करण गी दस्सने आस्तै संक्षिप्त ते संक्षिप्त नामें आस्तै एचटीएमएल दे तत्व दा शैलीबद्ध लागू करना । इक विशेषता आह् ले संक्षिप्त रूपें titleच हल्के बिंदीदार निचली सीमा ते होवर पर इक मदद कर्सर होंदा ऐ , जेह् ड़ा होवर पर अतिरिक्त संदर्भ प्रदान करदा ऐ ।

<abbr>

संक्षिप्त रूप दे लंबे होवर पर विस्तारित पाठ आस्तै, titleविशेषता गी शामल करो.

विशेषता शब्द दा इक संक्षिप्त रूप ऐ attr .

<abbr title = "गुण" > एटीआर </abbr>

<abbr class="initialism">

.initialismथोह् ड़ी-मती फॉन्ट-आकार आस्तै इक संक्षिप्त रूप च जोड़ो ।

एचटीएमएल कटा हुआ रोटी दे बाद दी सबतूं अच्छी चीज ऐ।

<abbr title = "गुण" वर्ग = "आरंभवाद" > attr </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 वर्ग = "पुल-राइट" > 
  2.   ...
  3. </blockquote> दा

लिस्टां करदा ऐ

अनऑर्डर

ऐसी चीजें दी सूची जिस च क्रम गी स्पश्ट रूप कन्नै कोई फर्क नेईं पौंदा।

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

आर्डर दे दी

आइटमें दी इक सूची जिस च क्रम स्पश्ट रूप कन्नै महत्व रखदा ऐ ।

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

अनस्टाइल

कोई बी list-styleजां अतिरिक्त बाएं पैडिंग आह् ली चीजें दी सूची।

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

ब्यौरा

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

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

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

<dl>लाइन अप साइड-बाय-साइड च शब्द ते वर्णन बनाओ ।

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

सिर ऊपर ! क्षैतिज वर्णन सूची उनें शब्दें गी कटौती करग जेह् ड़े बाएं स्तंभ ठीक च फिट करने आस्तै मते लम्मे न text-overflow. संकीर्ण व्यूपोर्टें च, ओह् डिफाल्ट स्टैक कीते गेदे लेआउट च बदली जाङन.

कोड

इनलाइन

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

मसलन, <section>इनलाइन दे रूप च लपेटेआ जाना चाहिदा। 
  1. मसाल आस्तै , <code><section> </ code > गी इनलाइन दे रूप च लपेटेआ जाना चाहिदा .

बेसिक ब्लॉक

<pre>कोड दी कई लाइनें लेई इस्तेमाल करो । उचित रेंडरिंग आस्तै कोड च कुसै बी कोण कोष्ठक थमां बचना सुनिश्चत करो.

<p>इत्थें नमूना पाठ...</p>
  1. <प्री> दा
  2.   <p>इत्थें नमूना पाठ...</p>
  3. </pre> दा

सिर ऊपर ! <pre>टैग दे अंदर कोड गी जितना होई सकै उतना बाएं पास्से नेड़े रक्खना सुनिश्चत करो ; एह् सारे टैब रेंडर करग।

तुस वैकल्पिक रूप कन्नै उस .pre-scrollableवर्ग गी जोड़ सकदे ओ जेह् ड़ी 350px दी इक मैक्स-ऊँचाई सेट करग ते इक y-अक्ष स्क्रॉलबार प्रदान करग.

तालिकाएं

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

.tableबुनियादी स्टाइलिंग लेई-हल्के पैडिंग ते सिर्फ क्षैतिज डिवाइडर- किसे बी च आधार वर्ग जोड़ो <table>.

# ऐ पैहला नां अखीरी नां यूजरनेम दा
१ मार्क करो ओटो ने दी @ एमडीओ
२ याकूब दा थॉर्नटन ने दी @मुट्टा
३ लैरी ने दी चिड़िया दा @ ट्विटर पर 
  1. <तालिका वर्ग = "तालिका" > 
  2.   ...
  3. </table> दा

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

.tableबेस क्लास च कुसै बी फॉलो क्लास गी जोड़ो ।

.table-striped

<tbody>सीएसएस चयनकर्ता दे राहें :nth-child(IE7-IE8 च उपलब्ध नेईं ऐ) दे अंदर कुसै बी तालिका पंक्ति च ज़ेबरा-स्ट्राइपिंग जोड़दा ऐ ।

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

.table-bordered

मेज पर सीमाएं ते गोल कोने जोड़ो।

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

.table-hover

इक दे अंदर तालिका पंक्तियें पर इक होवर स्थिति गी सक्षम करो <tbody>.

# ऐ पैहला नां अखीरी नां यूजरनेम दा
१ मार्क करो ओटो ने दी @ एमडीओ
२ याकूब दा थॉर्नटन ने दी @मुट्टा
३ लैरी द बर्ड @ ट्विटर पर 
  1. <table class = "टेबल टेबल-होवर" > 
  2.   ...
  3. </table> दा

.table-condensed

सेल पैडिंग गी आधे च कट्टियै टेबल गी होर कॉम्पैक्ट बनांदा ऐ।

# ऐ पैहला नां अखीरी नां यूजरनेम दा
१ मार्क करो ओटो ने दी @ एमडीओ
२ याकूब दा थॉर्नटन ने दी @मुट्टा
३ लैरी द बर्ड @ ट्विटर पर 
  1. <table class = "तालिका तालिका-संक्षिप्त" > 
  2.   ...
  3. </table> दा

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

तालिका पंक्तियें गी रंगने लेई संदर्भ वर्गें दा उपयोग करो।

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

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

समर्थत तालिका HTML तत्वें दी सूची ते उंदा इस्तेमाल किस चाल्ली कीता जाना चाहिदा ऐ।

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

रूप दे

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

व्यक्तिगत फार्म नियंत्रणें गी स्टाइलिंग हासल होंदी ऐ, पर बिना कुसै जरूरी आधार वर्ग दे पर <form>जां मार्कअप च बड्डे बदलाव दे। फार्म नियंत्रणें दे उप्पर ढेर कीते गेदे, बाएं-संरेखित लेबल दे नतीजे।

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

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

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

सर्च फार्म

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

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

इनलाइन फार्म

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

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

क्षैतिज रूप

लेबल गी दाएं कन्नै संरेखित करो ते उ’नेंगी बाएं आह् ली बक्खी फ्लोट करो तां जे ओह् नियंत्रणें दे समान लाइन पर दिक्खने गी मिलै। डिफाल्ट फार्म थमां मते सारे मार्कअप बदलावें दी लोड़ ऐ:

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

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

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

इनपुट करदा ऐ

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

typeहर समें इक निर्दिश्ट दा इस्तेमाल करने दी लोड़ ऐ ।

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

पाठ क्षेत्र

फार्म नियंत्रण जेह् ड़ा पाठ दी मती पंक्तियें गी समर्थन करदा ऐ । rowजरूरत मताबक विशेषता बदलो ।

  1. <textarea पंक्तियां = "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 </विकल्प> ऐ
  7. </चयन करो>
  8.  
  9. < बहु चुनें = "बहु" > 
  10.   <विकल्प> 1 </विकल्प> ऐ
  11.   <विकल्प> 2 </विकल्प> ऐ
  12.   <विकल्प> 3 </विकल्प> ऐ
  13.   <विकल्प> 4 </विकल्प> ऐ
  14.   <विकल्प> 5 </विकल्प> ऐ
  15. </चयन करो>

फार्म नियंत्रण दा विस्तार करना

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

पूर्व-लंबित ते संलग्न इनपुट

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

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

इक इनपुट च पाठ गी प्रीपेंड करने जां जोड़ने आस्तै दो वर्गें च इक कन्नै इक .add-onते इक गी लपेटो ।input

@ ऐ

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

मिलाया

.add-onइक इनपुट गी प्रीपेंड करने ते संलग्न करने आस्तै दौंऊ वर्गें ते दो उदाहरणें दा इस्तेमाल करो ।

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

पाठ दी जगह बटन

<span>पाठ कन्नै इक दी बजाय , .btnइक इनपुट कन्नै इक बटन (जां दो) संलग्न करने आस्तै a दा इस्तेमाल करो.


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

सर्च फार्म

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

साइजिंग गी नियंत्रित करो

रिलेटिव साइजिंग क्लासें दा इस्तेमाल करो जि’यां .input-largeजां अपने इनपुटें गी बरतून करदे होई ग्रिड स्तंभ आकारें कन्नै मिलान करो.span* जां मिलान करो .

रिलेटिव साइजिंग करना

  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-horizontalबटन स्वतः इंडेंट होई जंदे न तां जे फार्म नियंत्रणें कन्नै लाइन कीता जाई सकै।

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

मदद पाठ

मदद पाठ आस्तै इनलाइन ते ब्लॉक स्तर समर्थन जेह् ड़ा फार्म नियंत्रणें दे आसपास दिक्खने गी मिलदा ऐ।

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

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

मदद ब्लॉक करो

मदद पाठ दा इक लम्मा ब्लॉक जेह् ड़ा इक नमीं पंक्ति पर टूटदा ऐ ते इक पंक्ति कोला परे फैली सकदा ऐ। 
  1. <input type = "text" ><span class = "help-block" > मदद पाठ दा इक लंबा ब्लॉक जेह् ड़ा इक नमीं पंक्ति पर टूटदा ऐ ते इक पंक्ति कोला परे फैली सकदा ऐ. </span> दा

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

फार्म नियंत्रण ते लेबल पर बुनियादी प्रतिक्रिया राज्यें कन्नै बरतूनी जां आगंतुकें गी प्रतिक्रिया देना।

इनपुट फोकस करना

अस किश फार्म नियंत्रणें पर डिफाल्ट outlineशैलियां हटांदे आं box-shadowते :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "एह् केंद्रित ऐ ..." >

अक्षम इनपुट

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. <div वर्ग = "नियंत्रण-समूह त्रुटि" > 
  9.   <label class = "control-label" for = "inputError" > त्रुटि कन्नै इनपुट </label>  
  10.   <div वर्ग = "नियंत्रण करदा ऐ" > 
  11.     <इनपुट प्रकार = "पाठ" आईडी = "इनपुटत्रुटि" >  
  12.     <span class = "help-inline" > कृपा करियै त्रुटि गी ठीक करो </span> 
  13.   </div> दा
  14. </div> दा
  15. <div class = "नियंत्रण-समूह सफलता" > 
  16.   <label class = "control-label" for = "inputSuccess" > सफलता कन्नै इनपुट </label>  
  17.   <div वर्ग = "नियंत्रण करदा ऐ" > 
  18.     <इनपुट प्रकार = "पाठ" आईडी = "इनपुटसफलता" >  
  19.     <span class = "मदद-इनलाइन" > वूहू! </span> दा 
  20.   </div> दा
  21. </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.   <बटन वर्ग = "बीटीएन बीटीएन-बड़े बीटीएन-प्राथमिक" प्रकार = "बटन" > बड़ा बटन </बटन>  
  3.   <बटन वर्ग = "बीटीएन बीटीएन-बड़े" प्रकार = "बटन" > बड़ा बटन </बटन>  
  4. </p> दा
  5. <p> दा
  6.   <बटन वर्ग = "बीटीएन बीटीएन-प्राथमिक" प्रकार = "बटन" > डिफ़ॉल्ट बटन </बटन>  
  7.   <बटन वर्ग = "बीटीएन" प्रकार = "बटन" > डिफ़ॉल्ट बटन </बटन>  
  8. </p> दा
  9. <p> दा
  10.   <बटन वर्ग = "बीटीएन बीटीएन-छोटा बीटीएन-प्राथमिक" प्रकार = "बटन" > छोटा बटन </बटन>  
  11.   <बटन वर्ग = "बीटीएन बीटीएन-छोटा" प्रकार = "बटन" > छोटा बटन </बटन>  
  12. </p> दा
  13. <p> दा
  14.   <बटन वर्ग = "बीटीएन बीटीएन-मिनी बीटीएन-प्राथमिक" प्रकार = "बटन" > मिनी बटन </बटन>  
  15.   <बटन वर्ग = "बीटीएन बीटीएन-मिनी" प्रकार = "बटन" > मिनी बटन </बटन>  
  16. </p> दा

ब्लॉक स्तर बटन बनाओ-ओह् जेह् ड़े इक माता-पिता दी पूरी चौड़ाई च फैले दे न- गी जोड़ियै .btn-block.

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

अक्षम राज्य

बटनें गी 50% वापस फीका करियै अनक्लिक करने योग्य दिक्खने गी बनाओ।

लंगर तत्व

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

प्राथमिक कड़ी तार 

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

सिर ऊपर ! अस .disabledइत्थें इक उपयोगिता वर्ग दे रूप च इस्तेमाल करदे आं , आम .activeवर्ग दे समान , इसलेई कोई उपसर्ग दी लोड़ नेईं ऐ ।

बटन तत्व

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

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

इक क्लास, कई टैग

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

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

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

छवियां

<img>कुसै बी प्रोजेक्ट च छवियें गी आसानी कन्नै स्टाइल करने आस्तै इक तत्व च क्लासें गी जोड़ो ।

  1. <img src = "..." वर्ग = "img-गोल" >  
  2. <img src = "..." वर्ग = "img-वृत्त" >  
  3. <img src = "..." वर्ग = "इमजी-पोलारॉइड" >

सिर ऊपर ! .img-roundedते समर्थन .img-circleदी कमी दे कारण IE7-8 च कम्म नेईं करदे न ।border-radius

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

आइकन ग्लिफ

स्प्राइट रूप च 140 आइकन, गहरे ग्रे (डिफ़ॉल्ट) ते सफेद च उपलब्ध, Glyphicons आसेआ उपलब्ध करोआए गेदे न .

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

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

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

इस्तेमाल किवें करना

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

  1. <i class = "चिह्न-खोज" </i>

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

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

सिर ऊपर ! <i>पाठ दी स्ट्रिंगें दे बक्खी दा इस्तेमाल करदे बेल्लै, जिऱयां बटन जां nav लिंक च, उचित स्पेसिंग आस्तै टैग दे बाद इक स्पेस जरूर छोड़ो .

आइकन उदाहरण दे

बटनें च, इक टूलबार, नेविगेशन, जां प्रीपेंड फार्म इनपुटें आस्तै बटन समूहें च उंदा इस्तेमाल करो.

बटन दे

बटन टूलबार च बटन समूह
  1. <div वर्ग = "बीटीएन-टूलबार" > 
  2.   <div वर्ग = "बीटीएन-समूह" > 
  3.  
  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.     <a class = "btn" href = "#" ><i class = "चिह्न-संरेखित-जस्टिफाई" ></i></a>   
  8.   </div> दा
  9. </div> दा
इक बटन समूह च ड्रॉपडाउन
यूजर 
  1. <div वर्ग = "बीटीएन-समूह" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "चिह्न-उपयोगकर्ता आइकन-सफेद" ></i> उपयोगकर्ता </a>   
  3.   <a वर्ग = "बीटीएन बीटीएन-प्राथमिक ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" 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> एडमिन बनाओ </a></li>  
  10.   </ul> दा
  11. </div> दा
छोटा बटन
  1. <a class = "btn btn-small" href = "#" ><i वर्ग = "चिह्न-तारा" ></i></a>

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

  1. <ul class = "नव नव-सूची" > 
  2.   <li class = "सक्रिय" ><a href = "#" ><i class = "चिह्न-घर आइकन-सफेद" </i> घर </a></li>   
  3.   <li><a href = "#" ><i वर्ग = "चिह्न-पुस्तक" </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 वर्ग = "ऐड-ऑन" ><i वर्ग = "चिह्न-लिफाफा" ><i><span><इनपुट वर्ग = "span2" आईडी = "inputIcon" प्रकार = "पाठ" >     
  6.   </div> दा
  7. </div> दा