बूटस्ट्रैप

आधार सीएसएस

मचान के ऊपर, बेसिक एचटीएमएल तत्व क॑ स्टाइल करलऽ गेलऽ छै आरू विस्तार योग्य वर्गऽ के साथ बढ़ालऽ गेलऽ छै ताकि एक ताजा, सुसंगत रूप आरू एहसास प्रदान करलऽ जाय सक॑ ।

टाइपोग्राफी हेडिंग, पैराग्राफ, सूची, और अन्य इनलाइन प्रकार तत्व |

शीर्षक एवं शरीर प्रतिलिपि

मुद्रण पैमाना

पूरा टाइपोग्राफिक ग्रिड हमर variables.less फाइल मे दू टा Less चर पर आधारित अछि: @baseFontSizeआ @baseLineHeight. पहिल बेस फॉन्ट-साइज पूरा मे प्रयोग कएल गेल अछि आ दोसर बेस लाइन-हाइट ।

हम ओहि चर के उपयोग करैत छी, आ किछु गणित, अपन सब प्रकार आओर बहुत किछु के मार्जिन, पैडिंग, आ लाइन-हाइट्स बनेबाक लेल |

उदाहरण देह पाठ

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

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

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

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

ज1। शीर्षक 1

ज2। शीर्षक 2

ज3। शीर्षक 3

ज ४। शीर्षक 4

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

जोर, सम्बोधन, आ संक्षिप्त रूप

तत्त्व प्रयोग ऐच्छिक
<strong> महत्वपूर्ण के साथ पाठ के एक स्निपेट पर जोर देने के लिये | कोनो नहि
<em> तनाव के साथ पाठ के एक स्निपेट पर जोर देने के लिये | कोनो नहि
<abbr> होवर पर विस्तारित संस्करण देखाबै लेली संक्षिप्त आरू संक्षिप्त नाम लपेटै छै

titleविस्तारित पाठ क लेल वैकल्पिक विशेषता शामिल करू

.initialismबड़का संक्षिप्त नामक लेल वर्गक प्रयोग करू ।
<address> इसके निकटतम पूर्वज या सम्पूर्ण कार्य निकाय के लिये सम्पर्क जानकारी के लिये | सभ पाँतिकेँसँ समाप्त कए प्रारूपणकेँ संरक्षित करू<br>

जोर देबय के प्रयोग

Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेन्टम मासा जस्टो बैठो अमेट रिसुस | मेसेनास फौसिबस मोलिस इंटरडम। नुल्ला विटाए एलिट लिबेरो, एक फारेत्रा औग।

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

उदाहरण के पता

<address>टैग कें उपयोग कोना कैल जा सकय छै कें दूटा उदाहरण देल गेल छै :

ट्विटर, इंक
795 फोल्सम एवेन्यू, सुइट 600
सैन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890
पूरा नाम
[email protected]

उदाहरण संक्षिप्त नाम

विशेषता वाला संक्षिप्त नामऽ titleम॑ हल्का बिंदीदार निचला सीमा आरू होवर प॑ मदद कर्सर होय छै । एहि सं उपयोगकर्ता के अतिरिक्त संकेत मिलैत अछि जे होवर पर किछ देखाओल जाएत.

कक्षा क॑ संक्षिप्त रूप म॑ जोड़ै छै ताकि ओकरा कनी initialismछोटऽ पाठ आकार द॑ क॑ मुद्रण सामंजस्य बढ़ैलऽ जाय सक॑ ।

एचटीएमएल कटा रोटी के बाद सबस नीक चीज अछि।

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

ब्लॉककोट्स

तत्त्व प्रयोग ऐच्छिक
<blockquote> दोसर स्रोत स सामग्री उद्धृत करबाक लेल ब्लॉक-स्तरीय तत्व

citeस्रोत यूआरएल क लेल विशेषता जोड़ू

फ्लोटेड विकल्पक लेल उपयोग .pull-leftआ वर्ग.pull-right
<small> एक उपयोगकर्ता-मुखी उद्धरण जोड़ने के लिये वैकल्पिक तत्व, आम तौर पर एक लेखक के साथ कार्य के शीर्षक | <cite>स्रोत के शीर्षक या नाम के आसपास रखें |

ब्लॉककोट शामिल करय लेल <blockquote>कोनो एचटीएमएल के कोट के रूप मे लपेटू. सीधा उद्धरण के लेल हम एकटा <p>.

अपन स्रोत के हवाला देबय लेल एकटा वैकल्पिक तत्व शामिल करू आओर स्टाइलिंग के उद्देश्य सं एकरा सं पहिने <small>अहां के एकटा एम डैश मिलत .&mdash;

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

उदाहरण ब्लॉककोट्स

पूर्वनिर्धारित ब्लॉककोट कए एहि तरहेँ स्टाइल कएल गेल अछि:

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

बॉडी ऑफ वर्क में कियो प्रसिद्ध

अपन ब्लॉककोट के दाहिना दिस फ्लोट करबाक लेल, जोड़ू class="pull-right":

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

बॉडी ऑफ वर्क में कियो प्रसिद्ध

सूची बनाइए

अक्रमित

<ul>

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

अनस्टाइल

<ul class="unstyled">

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

आदेश देल गेल

<ol>

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

वर्णन

<dl>

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

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

<dl class="dl-horizontal">

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

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

कोड इनलाइन आ ब्लॉक कोड स्निपेट

इनलाइन

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

  1. जेना , <code> खंड </ code > केँ इनलाइन केर रूप मे लपेटल जेबाक चाही .

बेसिक ब्लॉक

<pre>कोडक अनेक पंक्तिक लेल प्रयोग करू । सही रेंडरिंग के लेल कोड में कोनो कोण कोष्ठक के अवश्य बचू.

<p>एतय नमूना पाठ...</p>

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

नोट:<pre> टैग के भीतर कोड के यथासंभव बामा कात के नजदीक अवश्य राखू ; ई सभ टैब रेंडर करत।

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

गूगल प्रीटिफाई

एकहि <pre>तत्व लिअ आओर बढ़ल रेंडरिंग के लेल दू टा वैकल्पिक क्लास जोड़ू.

  1. <p> नमूना पाठ एतय... </p>
  1. <pre class = "सुन्दर छाप।" 
  2.      लिनम" >
  3.   <p>एतय नमूना पाठ...</p>
  4. </pre>

google-code-prettify डाउनलोड करू आ उपयोग कोना करब ताहि लेल readme देखू।

तालिकाक लेल, अहाँ अनुमान लगा लेलहुँ, सारणीबद्ध डेटा

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

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

तालिका विकल्प

नाम वर्ग वर्णन
चुकनाइ कोनो नहि कोनो शैली नहि, बस कॉलम आ पंक्ति
मूलभूत .table पंक्तिक बीच मात्र क्षैतिज रेखा
सीमाबद्ध .table-bordered कोना गोल करैत अछि आ बाहरी सीमा जोड़ैत अछि
ज़ेबरा-पट्टी .table-striped विषम पंक्ति (1, 3, 5, आदि) मे हल्का धूसर पृष्ठभूमि रंग जोड़ैत अछि
संघनित .table-condensed ऊर्ध्वाधर पैडिंग क॑ आधा म॑ काटै छै, 8px स॑ 4px तलक, सब tdआरू thतत्वऽ के भीतर

उदाहरण तालिकाएँ

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

तालिकाक कें स्वचालित रूप सं केवल किछु सीमाक कें साथ स्टाइल कैल जायत छै, ताकि पठनीयता सुनिश्चित कैल जा सकय आ संरचना कें बनाए रखल जा सकय. 2.0 के संग .tableक्लास के आवश्यकता अछि।

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

2. धारीदार टेबुल

ज़ेबरा-स्ट्राइपिंग जोड़ि कए अपन टेबल क संग कनि फैंसी करू-बस .table-stripedक्लास जोड़ू।

नोट: धारीदार तालिका :nth-childCSS चयनकर्ता कें उपयोग करयत छै आ IE7-IE8 मे उपलब्ध नहि छै.

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

3. सीमाबद्ध तालिका

सौंदर्य के उद्देश्य स पूरा टेबुल के चारू कात सीमा आ गोल कोना जोड़ू।

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

4. घनीभूत तालिका

.table-condensedटेबल सेल पैडिंग क॑ आधा म॑ (8px स॑ 4px तलक) काटै लेली क्लास क॑ जोड़ क॑ अपनऽ टेबल क॑ आरू कॉम्पैक्ट बनाबै छै ।

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

5. सभटा मिला दियौक!

उपलब्ध कोनों वर्ग कें उपयोग करयत अलग-अलग लुक प्राप्त करय कें लेल कोनों टेबल क्लास कें संयोजन करय मे बेझिझक महसूस करूं.

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

रूप

लचीला एचटीएमएल आ सीएसएस

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

अधिक जटिल लेआउट आसान स्टाइलिंग आरू इवेंट बाइंडिंग लेली संक्षिप्त आरू स्केल करलऽ जाय वाला क्लास के साथ आबै छै, जेकरा स॑ आपने हर कदम प॑ कवर करलऽ जाय छै ।

चारि टा लेआउट शामिल छल

बूटस्ट्रैप चारि प्रकार कें फॉर्म लेआउट कें लेल समर्थन कें साथ आबै छै:

  • ऊर्ध्वाधर (पूर्वनिर्धारित) 1।
  • खोजनाइ
  • इनलाइन
  • क्षैतिज

विभिन्न प्रकार कें फॉर्म लेआउट कें लेल मार्कअप कें लेल किछ बदलाव कें आवश्यकता होयत छै, मुदा नियंत्रण स्वयं एकहि तरह कें रहयत छै आ व्यवहार करयत छै.

नियंत्रण राज्य आओर बहुत किछु

बूटस्ट्रैप कें फॉर्म मे सबटा बेस फॉर्म नियंत्रणक कें लेल शैली शामिल छै जेना इनपुट, टेक्स्टएरिया, आ चयन जे अहां अपेक्षा करब. लेकिन एकरा म॑ एपेंडेड आरू प्रीपेंड इनपुट जैसनऽ कईएक कस्टम कंपोनेंट आरू चेकबॉक्स केरऽ लिस्ट लेली सपोर्ट भी आबै छै ।

प्रत्येक प्रकार कें फॉर्म नियंत्रण कें लेल त्रुटि, चेतावनी, आ सफलता जैना राज्यक कें शामिल कैल गेल छै. अक्षम नियंत्रणक कें लेल शैलीक कें सेहो शामिल कैल गेल छै.

चार प्रकार के रूप

बूटस्ट्रैप आम वेब फॉर्म कें चारि शैली कें लेल सरल मार्कअप आ शैली प्रदान करयत छै.

नाम वर्ग वर्णन
ऊर्ध्वाधर (पूर्वनिर्धारित) 1। .form-vertical (आवश्यक नहि) नियंत्रणक ऊपर ढेर, बामा-संरेखित लेबल
इनलाइन .form-inline कॉम्पैक्ट शैली के लेल बाम-संरेखित लेबल आ इनलाइन-ब्लॉक नियंत्रण
खोजनाइ .form-search एक ठेठ खोज सौंदर्यशास्त्र के लिये अतिरिक्त गोल पाठ इनपुट |
क्षैतिज .form-horizontal नियंत्रणक समान रेखा पर बामा, दाहिना-संरेखित लेबल फ्लोट करू

उदाहरण फॉर्म केवल फॉर्म नियंत्रण क उपयोग कए, कोनो अतिरिक्त मार्कअप नहि

मूल रूप

बिना अतिरिक्त मार्कअप के स्मार्ट आ हल्का डिफ़ॉल्ट।

उदाहरण ब्लॉक-स्तरीय सहायता पाठ एतय।

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

क्षैतिज रूप

दाहिना दिस देखाओल गेल अछि सभ डिफ़ॉल्ट फॉर्म नियंत्रण जे हम समर्थन करैत छी. एतय बुलेट वाला लिस्ट अछि:

  • पाठ इनपुट (पाठ, पासवर्ड, ईमेल, आदि)
  • चेकबॉक्स
  • रेडियो
  • चुननाइ
  • बहु चयन
  • फाइल इनपुट
  • पाठक्षेत्र

फ्रीफॉर्म टेक्स्ट के अलावा, कोनो भी HTML5 टेक्स्ट-आधारित इनपुट ऐन्हऽ ही प्रकट होय छै ।

उदाहरण मार्कअप

उपरोक्त उदाहरण फॉर्म लेआउट कें देल गेलय, एतय पहिल इनपुट आ नियंत्रण समूह सं जुड़ल मार्कअप छै. स्टाइलिंग के लेल .control-group, .control-label, आ .controlsक्लास सब आवश्यक अछि।

  1. <form class = "रूप-क्षैतिज" > 
  2.   <फील्डसेट>
  3.     <legend> किंवदंती पाठ </legend>
  4.     <div वर्ग = "नियंत्रण-समूह" > 
  5.       <label class = "control-label" for = "input01" > पाठ इनपुट </label>  
  6.       <div वर्ग = "नियंत्रण" > 
  7.         <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट- xlarge" आईडी = "इनपुट 01" >   
  8.         <p class = "help-block" > समर्थन पाठ </p> 
  9.       </div>
  10.     </div>
  11.   </फील्डसेट>
  12. </form>

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

बूटस्ट्रैप ब्राउज़र-समर्थित केंद्रित आ disabledराज्यक कें लेल शैलीक कें सुविधा देयत छै. हम डिफ़ॉल्ट वेबकिट हटाबैत छी आ ओकर जगह outlineपर एकटा लागू करैत छी .box-shadow:focus

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

एकरा म॑ त्रुटि, चेतावनी, आरू सफलता लेली सत्यापन शैली भी शामिल छै. उपयोग करबाक लेल, त्रुटि वर्ग केँ आसपासक मे जोड़ू .control-group.

  1. <फील्डसेट
  2.   class = "नियंत्रण-समूह त्रुटि" >
  3.   ...
  4. </फील्डसेट>
किछु मूल्य एतय
किछु गड़बड़ भ’ सकैत अछि
कृपया त्रुटि सुधारू
वूहू!
वूहू!

फॉर्म नियंत्रण के विस्तार करब

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

इनपुट समूह-संलग्न या पूर्व-लंबित पाठ कें साथ-अपनऽ इनपुट कें लेल अधिक संदर्भ देवय कें एकटा आसान तरीका प्रदान करय छै. बढ़िया उदाहरण में ट्विटर यूजरनेम के लेल @ चिन्ह या वित्त के लेल $ शामिल अछि |

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

v1.4 तक, बूटस्ट्रैप क॑ ओकरा ढेर करै लेली चेकबॉक्स आरू रेडियो के आसपास अतिरिक्त मार्कअप के जरूरत छेलै । आब, ई एकटा साधारण बात अछि जे दोहराबय के <label class="checkbox">जे लपेटैत अछि <input type="checkbox">.

इनलाइन चेकबॉक्स आ रेडियो सेहो समर्थित अछि. बस .inlineकोनो .checkboxया मे जोड़ू .radioआ अहाँक काज भ गेल।

इनलाइन फॉर्म आ संलग्न/प्रीपेंड करू

इनलाइन फॉर्म मे प्रीपेंड या एपेंड इनपुट कें उपयोग करय कें लेल, .add-onआ inputकें एकहि लाइन पर, बिना स्पेस कें, सुनिश्चित करूं.

मदद पाठ बनाएँ

अपन फॉर्म इनपुट कें लेल मदद पाठ जोड़य कें लेल, इनपुट तत्व कें बाद कें साथ <span class="help-inline">या एकटा मदद पाठ ब्लॉक कें साथ इनलाइन मदद पाठ शामिल करूं.<p class="help-block">

इनपुट आकारक कें लेल ग्रिड सिस्टम सं समान .span*वर्गक कें उपयोग करूं.

अहां स्थिर वर्गक कें उपयोग सेहो कयर सकय छी जे ग्रिड कें मैप नहि करयत छै, प्रतिक्रियाशील CSS शैलीक कें अनुकूल नहि करयत छै, या विभिन्न प्रकार कें नियंत्रणक कें लेल खाता नहि करयत छै (जैना, inputबनाम select).

@ .

एतय किछु मदद पाठ अछि

.00 के अछि
एतय आओर मदद पाठ अछि
$ .00 के अछि

नोट: लेबल बहुत पैघ क्लिक क्षेत्र आओर एकटा बेसी उपयोगी फॉर्म के लेल सभ विकल्प के घेरैत अछि.

बटन के

बोताम class=""। वर्णन
btn ढाल के साथ मानक ग्रे बटन
btn btn-primary अतिरिक्त दृश्य वजन प्रदान करयत छै आ बटन कें एकटा सेट मे प्राथमिक क्रिया कें पहचान करयत छै
btn btn-info पूर्वनिर्धारित शैलियों के विकल्प के रूप में प्रयोग किया जाता है |
btn btn-success सफल या सकारात्मक कार्य कें संकेत करयत छै
btn btn-warning संकेत करैत अछि जे एहि कार्रवाई सं सावधानी बरतबाक चाही
btn btn-danger खतरनाक या संभावित नकारात्मक क्रिया कें संकेत करएयत छै
btn btn-inverse गहरे धूसर रंगक बटन वैकल्पिक करू, कोनो शब्दार्थ क्रिया वा प्रयोगसँ बान्हल नहि

क्रियाओं के लिये बटन

एक रूढ़ि के रूप मे, बटन के उपयोग केवल क्रिया के लेल करबाक चाही जखन कि हाइपरलिंक के उपयोग वस्तु के लेल करबाक अछि. जेना, "डाउनलोड" एकटा बटन हेबाक चाही जखन कि "हालक गतिविधि" एकटा लिंक हेबाक चाही.

बटन शैली के कोनो भी चीज पर लागू करलऽ जाब॑ सकै छै जेकरा म॑ .btnक्लास लागू करलऽ गेलऽ छै । <a>मुदा, आम तौर पर अहाँ एहि सभ केँ केवल आ <button>तत्व पर लागू करय चाहब .

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

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

एकाधिक आकार के

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


अक्षम अवस्था

अक्षम बटन क लेल, .disabledलिंक मे वर्ग आओर तत्व क disabledलेल विशेषता जोड़ू.<button>

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

हेड अप! हम .disabledएतय उपयोगिता वर्ग के रूप में उपयोग करैत छी, सामान्य वर्ग के समान .active, अतः कोनो उपसर्ग के आवश्यकता नै अछि |

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

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

सम्बन्ध 
  1. <a class = "btn" href = "" > लिंक </a>  
  2. <बटन वर्ग = "btn" प्रकार = "सबमिट" >  
  3.   बोताम
  4. </बटन>
  5. <input class = "btn" प्रकार = "बटन"।  
  6.          मान = "इनपुट" >
  7. <input class = "btn" प्रकार = "सबमिट"।  
  8.          value = "सबमिट" >

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

आइकन कृपापूर्वक ग्लिफिकॉन्स द्वारा प्रदान कएल गेल

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

स्प्राइट के रूप में निर्मित

हर आइकन क॑ एक अतिरिक्त अनुरोध बनाबै के बजाय, हम्मं॑ ओकरा एक स्प्राइट म॑ संकलित करल॑ छै-एक फाइल म॑ छवि केरऽ एगो गुच्छा जे CSS के उपयोग करी क॑ छवि क॑ background-position. ई वैह तरीका अछि जे हम सब ट्विटर डॉट कॉम पर प्रयोग करैत छी आ ई हमरा सब लेल नीक काज केलक अछि।

सब आइकन क्लास के उपसर्ग .icon-उचित नाम अंतराल आरू स्कोपिंग के लेलऽ छै, बहुत कुछ हमरऽ अन्य घटकऽ के तरह । एहि सं अन्य उपकरणक सं टकराव सं बचय मे मदद मिलतय.

ग्लिफिकॉन्स न॑ हमरा अपनऽ ओपन-सोर्स टूलकिट म॑ सेट करलऽ गेलऽ हाफलिंग्स केरऽ उपयोग के अनुमति देल॑ छै जब॑ तलक कि हम्मं॑ डॉक्स म॑ एत॑ लिंक आरू क्रेडिट उपलब्ध करै छियै । कृपया अपन प्रोजेक्ट मे सेहो एहने करबाक विचार करू।

प्रयोग केना करब

बूटस्ट्रैप <i>सब आइकन क लेल एकटा टैग क उपयोग करैत अछि, मुदा ओकर कोनो केस क्लास नहि अछि-केवल एकटा साझा उपसर्ग. उपयोग करबाक लेल, निम्नलिखित कोड लगभग कतहु राखू:

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

उल्टा (सफेद) आइकन के लेल शैली सेहो उपलब्ध अछि, जे एकटा अतिरिक्त वर्ग के संग तैयार कएल गेल अछि:

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

अपन आइकन के लेल 140 क्लास चुनय के अछि. बस <i>सही क्लास वाला टैग जोड़ू आओर अहां सेट भ जाएब. पूरा सूची अहां sprites.less मे या ठीक एतय एहि दस्तावेज मे पाबि सकय छी.

हेड अप! <i>पाठ के बगल में स्ट्रिंग के उपयोग करय के समय, जेना बटन या nav लिंक में, उचित अंतराल के लेल टैग के बाद एकटा स्पेस अवश्य छोड़ू .

प्रयोग केस

आइकन बहुत नीक अछि, मुदा एकर उपयोग कतय करत? किछु विचार प्रस्तुत अछि : १.

  • अपन साइडबार नेविगेशन के लेल विजुअल के रूप में
  • विशुद्ध रूप स आइकन संचालित नेविगेशन क लेल
  • बटन के लेल जे कोनो क्रिया के अर्थ संप्रेषित करय में मदद करत
  • कोनों उपयोगकर्ता कें गंतव्य पर संदर्भ साझा करय कें लेल लिंक कें साथ

अनिवार्य रूप स कतहु <i>टैग लगा सकैत छी, आइकन लगा सकैत छी।

उदाहरण के लिये

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

प्रयोक्ता

ताज़ा करे चेकआउट करब हटानाइ

व्यंग सेटिंग्स अधिक जानकारी