बेस सीएसएस

मचान के शीर्ष पर, मूल HTML तत्वों को एक नया, सुसंगत रूप और अनुभव प्रदान करने के लिए एक्स्टेंसिबल कक्षाओं के साथ स्टाइल और बढ़ाया जाता है।

शीर्षक और बॉडी कॉपी

टाइपोग्राफिक स्केल

संपूर्ण टाइपोग्राफ़िक ग्रिड हमारे वेरिएबल में दो कम चरों पर आधारित है। फ़ाइल रहित: @baseFontSizeऔर @baseLineHeight. पहला आधार फ़ॉन्ट-आकार का उपयोग किया जाता है और दूसरा आधार रेखा-ऊंचाई है।

हम अपने सभी प्रकार के मार्जिन, पैडिंग और लाइन-ऊंचाई बनाने के लिए उन चर, और कुछ गणित का उपयोग करते हैं।

उदाहरण बॉडी टेक्स्ट

नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula ut id elit.

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

एच1. शीर्षक 1

एच2. शीर्षक 2

एच3. शीर्षक 3

एच4. शीर्षक 4

एच5. शीर्षक 5

एच6. शीर्षक 6

जोर, पता और संक्षिप्त नाम

तत्व	प्रयोग	वैकल्पिक
`<strong>`	महत्वपूर्ण के साथ पाठ के एक अंश पर जोर देने के लिए	कोई भी नहीं
`<em>`	तनाव के साथ पाठ के एक अंश पर जोर देने के लिए	कोई भी नहीं
`<abbr>`	होवर पर विस्तृत संस्करण दिखाने के लिए संक्षिप्ताक्षर और संक्षिप्तीकरण लपेटता है	`title`विस्तारित टेक्स्ट के लिए वैकल्पिक विशेषता शामिल करें `.initialism`अपरकेस संक्षेपों के लिए कक्षा का प्रयोग करें ।
`<address>`	अपने निकटतम पूर्वज या कार्य के पूरे निकाय के लिए संपर्क जानकारी के लिए	सभी पंक्तियों को समाप्त करके स्वरूपण को संरक्षित करें`<br>`

जोर का उपयोग करना

फ्यूस डेपिबस, टेलस एसी कर्सस कमोडो , टॉरटोर मौरिस कंडिमेंटम निभ, यूट फेरमेंटम मासा जस्ट एमेट रिसस । मेकेनास फॉसीबस मोलिस इंटरडम। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग।

नोट: बेझिझक <b>और <i>HTML5 में उपयोग करें, लेकिन उनका उपयोग थोड़ा बदल गया है। <b>अतिरिक्त महत्व बताए बिना शब्दों या वाक्यांशों को उजागर करने के <i>लिए है, जबकि ज्यादातर आवाज, तकनीकी शब्दों आदि के लिए है।

उदाहरण के पते

<address>टैग का उपयोग कैसे किया जा सकता है, इसके दो उदाहरण यहां दिए गए हैं :

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

पूरा नाम
[email protected]

उदाहरण संक्षेप

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

initialismटाइपोग्राफिक सामंजस्य को थोड़ा छोटा टेक्स्ट आकार देकर बढ़ाने के लिए कक्षा को एक संक्षिप्त नाम में जोड़ें ।

कटा हुआ ब्रेड के बाद से HTML सबसे अच्छी चीज है।

विशेषता शब्द का संक्षिप्त रूप attr है ।

ब्लॉक उद्धरण

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

एक ब्लॉककोट शामिल करने के लिए, <blockquote>किसी भी HTML को कोट के रूप में लपेटें। सीधे उद्धरणों के लिए हम अनुशंसा करते हैं कि एक <p>.

अपने स्रोत का हवाला देने के लिए एक वैकल्पिक तत्व शामिल करें और स्टाइलिंग उद्देश्यों के लिए <small>आपको इससे पहले एक एम डैश मिलेगा ।—

<ब्लॉकक्वॉट>
  <p> लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिंग एलीट। पूर्णांक posuere एक पूर्व venenatis मिटा देता है। </p>
  <छोटा> कोई प्रसिद्ध </छोटा>
</blockquote>

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

डिफ़ॉल्ट ब्लॉकक्वाट्स को इस प्रकार स्टाइल किया जाता है:

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व venenatis मिटा दें।
बॉडी ऑफ़ वर्क में प्रसिद्ध कोई व्यक्ति

अपने ब्लॉकक्वाट को दाईं ओर फ़्लोट करने के लिए, जोड़ें class="pull-right":

लोरेम इप्सम डोलर सिट एमेट, कॉन्सेक्टेटूर एडिपिसिसिंग एलीट। पूर्णांक posuere एक पूर्व venenatis मिटा दें।
बॉडी ऑफ़ वर्क में प्रसिद्ध कोई व्यक्ति

सूचियों

अक्रमित

<ul>

लोरेन इपसाम डलार सिट आमेट
Consectetur adipiscing अभिजात वर्ग
मासा में पूर्णांक मोलेस्टी लोरेम
प्रीटियम निस्ल एलिकेट में सुविधा
नुल्ला वोलुटपाट अलिकम वेलिटा
- फेसेलस इयाकुलिस नेक
- पुरुस सोडालेस अल्ट्रीसीज
- वेस्टिबुलम लौरीट पोर्टिटर सेमी
- एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
फौसीबस पोर्टा लैकस फ्रिंजिला वेला
ऐनियन सिट आमेट इरेट नन
एगेट पोर्टिटर लोरेम

अनस्टाइल्ड

<ul class="unstyled">

लोरेन इपसाम डलार सिट आमेट
Consectetur adipiscing अभिजात वर्ग
मासा में पूर्णांक मोलेस्टी लोरेम
प्रीटियम निस्ल एलिकेट में सुविधा
नुल्ला वोलुटपाट अलिकम वेलिटा
- फेसेलस इयाकुलिस नेक
- पुरुस सोडालेस अल्ट्रीसीज
- वेस्टिबुलम लौरीट पोर्टिटर सेमी
- एसी ट्रिस्टिक लिबरो वॉलुटपाट एट
फौसीबस पोर्टा लैकस फ्रिंजिला वेला
ऐनियन सिट आमेट इरेट नन
एगेट पोर्टिटर लोरेम

आदेश दिया

<ol>

लोरेन इपसाम डलार सिट आमेट
Consectetur adipiscing अभिजात वर्ग
मासा में पूर्णांक मोलेस्टी लोरेम
प्रीटियम निस्ल एलिकेट में सुविधा
नुल्ला वोलुटपाट अलिकम वेलिटा
फौसीबस पोर्टा लैकस फ्रिंजिला वेला
ऐनियन सिट आमेट इरेट नन
एगेट पोर्टिटर लोरेम

विवरण

<dl>

विवरण सूचियाँ: एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
यूइसमोड: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया ओडियो सेम नेक एलीट।; Donec id elit non mi porta gravida और eget metus.
मालेसुदा पोर्टा: इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।

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

<dl class="dl-horizontal">

विवरण सूचियाँ: एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
यूइसमोड: वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया ओडियो सेम नेक एलीट।; Donec id elit non mi porta gravida और eget metus.
मालेसुदा पोर्टा: इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड।
फेलिस यूइसमॉड सेम्पर एगेट लैकिनिया: फ्यूस डेपिबस, टेलस एसी कर्सस कमोडो, टॉरटोर मौरिस कंडिमेंटम निभ, यूट फेरमेंटम मासा जस्टो सिट एमेट रिसस।

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

इन - लाइन

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

उदाहरण के लिए , <code> अनुभाग </ कोड > को इनलाइन के रूप में लपेटा जाना चाहिए ।

बुनियादी ब्लॉक

<pre>कोड की कई पंक्तियों के लिए उपयोग करें । उचित प्रतिपादन के लिए कोड में किसी भी कोण कोष्ठक से बचना सुनिश्चित करें।

<p>यहां नमूना पाठ...</p>

<पूर्व>
  <p>नमूना पाठ यहां...</p>
</pre>

नोट:<pre> टैग के भीतर कोड को यथासंभव बाईं ओर रखना सुनिश्चित करें ; यह सभी टैब प्रस्तुत करेगा।

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

गूगल

एक ही <pre>तत्व लें और बेहतर प्रतिपादन के लिए दो वैकल्पिक कक्षाएं जोड़ें।

<p> यहां नमूना पाठ... </p>

<प्री क्लास = "सुंदर प्रिंट 
     लिननम्स" >
  <p>नमूना पाठ यहां...</p>
</pre>

google-code-prettify डाउनलोड करें और उपयोग करने के तरीके के लिए रीडमी देखें।

टेबल मार्कअप

उपनाम	विवरण
`<table>`	सारणीबद्ध प्रारूप में डेटा प्रदर्शित करने के लिए रैपिंग तत्व
`<thead>`	तालिका शीर्षलेख पंक्तियों के लिए कंटेनर तत्व ( `<tr>`) तालिका स्तंभों को लेबल करने के लिए
`<tbody>`	`<tr>`तालिका के मुख्य भाग में तालिका पंक्तियों ( ) के लिए कंटेनर तत्व
`<tr>`	तालिका सेल ( `<td>`या `<th>`) के सेट के लिए कंटेनर तत्व जो एक पंक्ति में दिखाई देता है
`<td>`	डिफ़ॉल्ट तालिका सेल
`<th>`	कॉलम के लिए विशेष टेबल सेल (या रो, स्कोप और प्लेसमेंट के आधार पर) लेबल का उपयोग a . के भीतर किया जाना चाहिए`<thead>`
`<caption>`	तालिका में क्या है इसका विवरण या सारांश, विशेष रूप से स्क्रीन पाठकों के लिए उपयोगी

<तालिका>
  <थेड>
    <tr>
      <वें> ... </वें>
      <वें> ... </वें>
    </tr>
  </थड>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</तालिका>

टेबल विकल्प

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

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

1. डिफ़ॉल्ट तालिका शैलियाँ

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

<टेबल क्लास = "टेबल" > 
  …
</तालिका>

#	पहला नाम	उपनाम	उपयोगकर्ता नाम
1	निशान	ओटो	@mdo
2	याकूब	थार्नटन	@मोटा
3	लैरी	पक्षी	@ट्विटर

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

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

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

<टेबल क्लास = "टेबल टेबल-स्ट्राइप्ड" > 
  …
</तालिका>

#	पहला नाम	उपनाम	उपयोगकर्ता नाम
1	निशान	ओटो	@mdo
2	याकूब	थार्नटन	@मोटा
3	लैरी	पक्षी	@ट्विटर

3. बॉर्डर वाली टेबल

सौंदर्य प्रयोजनों के लिए पूरी मेज और गोल कोनों के चारों ओर बॉर्डर जोड़ें।

<टेबल क्लास = "टेबल टेबल-बॉर्डर" > 
  …
</तालिका>

#	पहला नाम	उपनाम	उपयोगकर्ता नाम
1	निशान	ओटो	@mdo
1	निशान	ओटो	@getbootstrap
2	याकूब	थार्नटन	@मोटा
3	लैरी द बर्ड		@ट्विटर

4. संघनित तालिका

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

<टेबल क्लास = "टेबल टेबल-कंडेंस्ड" > 
  …
</तालिका>

#	पहला नाम	उपनाम	उपयोगकर्ता नाम
1	निशान	ओटो	@mdo
2	याकूब	थार्नटन	@मोटा
3	लैरी द बर्ड		@ट्विटर

5. उन सभी को मिलाएं!

किसी भी उपलब्ध वर्ग का उपयोग करके अलग-अलग रूप प्राप्त करने के लिए किसी भी तालिका वर्ग को संयोजित करने के लिए स्वतंत्र महसूस करें।

<टेबल क्लास = "टेबल टेबल-स्ट्राइप्ड टेबल-बॉर्डर टेबल-कंडेंस्ड" > 
  ...
</तालिका>

	पूरा नाम
#	पहला नाम	उपनाम	उपयोगकर्ता नाम
1	निशान	ओटो	@mdo
2	याकूब	थार्नटन	@मोटा
3	लैरी द बर्ड		@ट्विटर

लचीला HTML और CSS

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

आसान स्टाइलिंग और ईवेंट बाइंडिंग के लिए अधिक जटिल लेआउट संक्षिप्त और स्केलेबल कक्षाओं के साथ आते हैं, इसलिए आप हर कदम पर कवर होते हैं।

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

बूटस्ट्रैप चार प्रकार के प्रपत्र लेआउट के लिए समर्थन के साथ आता है:

लंबवत (डिफ़ॉल्ट)
खोज
इन - लाइन
क्षैतिज

विभिन्न प्रकार के प्रपत्र लेआउट को मार्कअप में कुछ परिवर्तनों की आवश्यकता होती है, लेकिन नियंत्रण स्वयं बने रहते हैं और समान व्यवहार करते हैं।

नियंत्रण राज्य और अधिक

बूटस्ट्रैप के रूपों में इनपुट, टेक्स्टरेरा जैसे सभी आधार प्रपत्र नियंत्रणों के लिए शैलियाँ शामिल हैं, और आप जो अपेक्षा करते हैं उसका चयन करें। लेकिन यह कई कस्टम घटकों के साथ आता है जैसे संलग्न और प्रीपेड इनपुट और चेकबॉक्स की सूचियों के लिए समर्थन।

प्रत्येक प्रकार के प्रपत्र नियंत्रण के लिए त्रुटि, चेतावनी और सफलता जैसी स्थितियाँ शामिल हैं। अक्षम नियंत्रणों के लिए शैलियाँ भी शामिल हैं।

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

बूटस्ट्रैप सामान्य वेब रूपों की चार शैलियों के लिए सरल मार्कअप और शैलियाँ प्रदान करता है।

नाम	कक्षा	विवरण
लंबवत (डिफ़ॉल्ट)	`.form-vertical` (आवश्यक नहीं)	नियंत्रणों पर स्टैक्ड, बाएँ-संरेखित लेबल
इन - लाइन	`.form-inline`	कॉम्पैक्ट शैली के लिए वाम-संरेखित लेबल और इनलाइन-ब्लॉक नियंत्रण
खोज	`.form-search`	एक विशिष्ट खोज सौंदर्य के लिए अतिरिक्त-गोल पाठ इनपुट
क्षैतिज	`.form-horizontal`	नियंत्रण के समान पंक्ति पर बाएं, दाएं-संरेखित लेबल फ़्लोट करें

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

बुनियादी रूप

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

<फॉर्म क्लास = "वेल" > 
  <लेबल> लेबल का नाम </लेबल>
  <इनपुट प्रकार = "पाठ" वर्ग = "स्पैन 3" प्लेसहोल्डर = "कुछ टाइप करें ..." >   
  <span class = "help-block" > उदाहरण ब्लॉक-लेवल हेल्प टेक्स्ट यहाँ। </span> 
  <लेबल वर्ग = "चेकबॉक्स" > 
    <इनपुट प्रकार = "चेकबॉक्स" > मुझे देखें 
  </लेबल>
  <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > सबमिट करें </बटन>  
</फॉर्म>

खोज फ़ॉर्म

.form-searchफॉर्म में जोड़ें .search-queryऔर input.

<फॉर्म क्लास = "वेल फॉर्म-सर्च" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-माध्यम खोज-क्वेरी" >  
  <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > खोज </बटन>  
</फॉर्म>

इनलाइन फॉर्म

.form-inlineप्रपत्र नियंत्रणों के लंबवत संरेखण और रिक्ति को बेहतर बनाने के लिए जोड़ें ।

<फॉर्म क्लास = "वेल फॉर्म-इनलाइन" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट-छोटा" प्लेसहोल्डर = "ईमेल" >   
  <इनपुट प्रकार = "पासवर्ड" वर्ग = "इनपुट-छोटा" प्लेसहोल्डर = "पासवर्ड" >   
  <लेबल वर्ग = "चेकबॉक्स" > 
    <इनपुट प्रकार = "चेकबॉक्स" > मुझे याद रखें 
  </लेबल>
  <बटन प्रकार = "सबमिट करें" वर्ग = "बीटीएन" > साइन इन करें </बटन>  
</फॉर्म>

क्षैतिज रूप

दाईं ओर दिखाए गए सभी डिफ़ॉल्ट फ़ॉर्म नियंत्रण हैं जिनका हम समर्थन करते हैं। यहाँ बुलेटेड सूची है:

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

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

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

<फॉर्म क्लास = "फॉर्म-क्षैतिज" > 
  <फ़ील्डसेट>
    <किंवदंती> लेजेंड टेक्स्ट </किंवदंती>
    <div वर्ग = "नियंत्रण-समूह" > 
      <लेबल क्लास = "कंट्रोल-लेबल" के लिए = "इनपुट01" > टेक्स्ट इनपुट </लेबल>  
      <div वर्ग = "नियंत्रण" > 
        <इनपुट प्रकार = "पाठ" वर्ग = "इनपुट- एक्सलार्ज" आईडी = "इनपुट01" >   
        <p class = "help-block" > सपोर्टिंग हेल्प टेक्स्ट </p> 
      </div>
    </div>
  </फ़ील्डसेट>
</फॉर्म>

फॉर्म कंट्रोल स्टेट्स

बूटस्ट्रैप में ब्राउज़र-समर्थित फ़ोकस और disabledस्थिति के लिए शैलियाँ हैं। हम डिफ़ॉल्ट वेबकिट को हटाते हैं outlineऔर box-shadowइसके स्थान पर :focus.

फॉर्म सत्यापन

इसमें त्रुटियों, चेतावनियों और सफलता के लिए सत्यापन शैलियाँ भी शामिल हैं। उपयोग करने के लिए, त्रुटि वर्ग को आसपास के .control-group.

<फ़ील्डसेट
  वर्ग = "नियंत्रण-समूह त्रुटि" >
  …
</फ़ील्डसेट>

प्रपत्र नियंत्रण का विस्तार

इनपुट तैयार करें और संलग्न करें

इनपुट समूह—जोड़े गए या पहले से जोड़े गए टेक्स्ट के साथ—आपके इनपुट के लिए अधिक संदर्भ देने का एक आसान तरीका प्रदान करते हैं। महान उदाहरणों में ट्विटर उपयोगकर्ता नाम के लिए @ चिह्न या वित्त के लिए $ शामिल हैं।

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

V1.4 तक, बूटस्ट्रैप को उन्हें स्टैक करने के लिए चेकबॉक्स और रेडियो के आसपास अतिरिक्त मार्कअप की आवश्यकता होती है। अब, <label class="checkbox">जो रैप करता है उसे दोहराने का एक साधारण मामला है <input type="checkbox">।

इनलाइन चेकबॉक्स और रेडियो भी समर्थित हैं। बस .inlineकिसी में जोड़ें .checkboxया .radioऔर आपका काम हो गया।

इनलाइन फॉर्म और एपेंड/प्रीपेन्ड

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

प्रपत्र सहायता पाठ

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

फॉर्म ग्रिड आकार

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

वैकल्पिक आकार

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

तैयार पाठ

यहाँ कुछ सहायता पाठ है

संलग्न पाठ

.00

यहां और सहायता टेक्स्ट है

जोड़ें और प्रीपेन्ड करें

$ .00

बटन के साथ संलग्न करें

दो बटन वाला परिशिष्ट

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

1 2 3

चेक बॉक्स

विकल्प एक यह है और वह है - यह शामिल करना सुनिश्चित करें कि यह बहुत अच्छा क्यों है विकल्प दो को भी चेक किया जा सकता है और फॉर्म परिणामों में शामिल किया जा सकता है विकल्प तीन—हां, आपने अनुमान लगाया—भी जांचा जा सकता है और फ़ॉर्म परिणामों में शामिल किया जा सकता है

नोट: अधिक बड़े क्लिक क्षेत्रों और अधिक उपयोगी फॉर्म के लिए लेबल सभी विकल्पों को घेर लेते हैं।

रेडियो के बटन

विकल्प एक यह है और वह है - यह शामिल करना सुनिश्चित करें कि यह बहुत अच्छा क्यों है विकल्प दो कैन कुछ और है और इसे चुनने से विकल्प एक का चयन रद्द हो जाएगा

बटन	वर्ग = ""	विवरण
	`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तत्वों को जॉकी करता है, पाठ ग्रे को एक खराब टेक्स्ट-छाया के साथ प्रस्तुत करता है जिसे हम ठीक नहीं कर सकते हैं।

एकाधिक आकार

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

अक्षम अवस्था

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

प्राथमिक लिंक संपर्क

सचेत! हम .disabledयहां सामान्य वर्ग के समान उपयोगिता वर्ग के रूप में उपयोग करते हैं .active, इसलिए किसी उपसर्ग की आवश्यकता नहीं है।

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

एक , , या तत्व .btnपर कक्षा का प्रयोग करें ।<a><button><input>

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

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

आइकॉन-ग्लास
आइकन-संगीत
आइकन-खोज
चिह्न लिफाफा
आइकन-दिल
आइकन-स्टार
आइकन-स्टार-खाली
आइकन-उपयोगकर्ता
आइकन-फिल्म
आइकन-वें-बड़े
आइकन-थ
आइकन-वें-सूची
चिह्न-ठीक है
आइकन-निकालें
आइकन-ज़ूम-इन
आइकन-ज़ूम-आउट
आइकन-ऑफ
चिह्न-संकेत
आइकन-कोग
आइकन-कचरा
आइकन-होम
आइकन-फ़ाइल
चिह्न-समय
चिह्न-सड़क
आइकन-डाउनलोड-alt
आइकन-डाउनलोड
आइकन-अपलोड
आइकन-इनबॉक्स
आइकन-प्ले-सर्कल
आइकन-दोहराना
आइकन-रीफ्रेश
आइकन-सूची-alt
चिह्न-ताला
चिह्न-ध्वज
आइकन-हेडफ़ोन

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

चिह्न-पिछड़ा
आइकन-प्ले
आइकन-रोकें
आइकन-स्टॉप
आइकन-फ़ॉरवर्ड
आइकन-फास्ट-फॉरवर्ड
आइकन-स्टेप-फॉरवर्ड
आइकन-इजेक्ट
आइकन-शेवरॉन-बाएं
आइकन-शेवरॉन-दाएं
चिह्न-प्लस-चिह्न
चिह्न-ऋण-चिह्न
चिह्न-निकालें-चिह्न
चिह्न-ठीक-चिह्न
चिह्न-प्रश्न-चिह्न
चिह्न-सूचना-चिह्न
आइकन-स्क्रीनशॉट
आइकन-निकालें-सर्कल
आइकन-ओके-सर्कल
आइकन-प्रतिबंध-सर्कल
आइकन-तीर-बाएं
आइकन-तीर-दाएं
आइकन-एरो-अप
चिह्न-तीर-नीचे
आइकन-शेयर-alt
आइकन-आकार-पूर्ण
आइकन-आकार-छोटा
आइकन-प्लस
आइकन-माइनस
चिह्न-तारांकन
चिह्न विस्मयादिबोधक चिह्न
आइकन-उपहार
चिह्न-पत्ती
आइकन-फायर
आइकन-आंख-खुला

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

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

प्रत्येक आइकन को एक अतिरिक्त अनुरोध करने के बजाय, हमने उन्हें एक स्प्राइट में संकलित किया है - एक फ़ाइल में छवियों का एक गुच्छा जो छवियों को background-position. यह वही तरीका है जिसका उपयोग हम Twitter.com पर करते हैं और इसने हमारे लिए अच्छा काम किया है।

.icon-हमारे अन्य घटकों की तरह, उचित नेमस्पेसिंग और स्कोपिंग के लिए सभी आइकन वर्गों के साथ उपसर्ग किया जाता है। यह अन्य उपकरणों के साथ टकराव से बचने में मदद करेगा।

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

कैसे इस्तेमाल करे

बूटस्ट्रैप <i>सभी आइकन के लिए एक टैग का उपयोग करता है, लेकिन उनके पास कोई केस क्लास नहीं है—केवल एक साझा उपसर्ग है। उपयोग करने के लिए, निम्न कोड को लगभग कहीं भी रखें:

<i वर्ग = "आइकन-खोज" ></i>

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

<i वर्ग = "आइकन-खोज आइकन-सफेद" ></i>

आपके आइकन के लिए चुनने के लिए 120 कक्षाएं हैं। बस <i>सही वर्गों के साथ एक टैग जोड़ें और आप तैयार हैं। आप पूरी सूची इस दस्तावेज़ में sprites.less या यहीं पर पा सकते हैं।

सचेत! <i>टेक्स्ट के बगल में स्ट्रिंग्स का उपयोग करते समय, जैसे कि बटन या नेविगेशन लिंक में, उचित रिक्ति के लिए टैग के बाद एक स्थान छोड़ना सुनिश्चित करें ।

बक्सों का इस्तेमाल करें

प्रतीक महान हैं, लेकिन कोई उनका उपयोग कहां करेगा? यहां कुछ विचार हैं:

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

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

उदाहरण

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

टाइपोग्राफी शीर्षक, पैराग्राफ, सूचियाँ और अन्य इनलाइन प्रकार के तत्व