टाइपोग्राफिक पैमाना पर बा

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

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

उदाहरण के देह पाठ के बारे में बतावल गइल बा

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

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

जोर देबे के प्रयोग करत बानी

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

नोट: बेझिझक इस्तेमाल करीं <b>आ <i>एचटीएमएल 5 में, बाकिर ओह लोग के इस्तेमाल में तनी बदलाव आइल बा. <b>के मतलब होला शब्द भा वाक्यांश के बिना कवनो अतिरिक्त महत्व के उजागर कइल जबकि <i>ई अधिकतर आवाज, तकनीकी शब्द वगैरह खातिर होला.

उदाहरण के पता दिहल जाव

<address>टैग के इस्तेमाल कइसे कइल जा सके ला एकर दू गो उदाहरण दिहल गइल बा:

उदाहरण संक्षिप्त रूप के रूप में दिहल गइल बा

संक्षिप्त रूप सभ के स्टाइल बड़का पाठ आ हल्का बिंदीदार नीचे वाला सीमा के साथ कइल गइल बा। इनहन में होवर पर हेल्प कर्सर भी होला एह से यूजर लोग के लगे एक्स्ट्रा इंडिकेशन होला कि होवर पर कुछ देखावल जाई।

एचटीएमएल कटा रोटी के बाद से सबसे बढ़िया चीज बा।

विशेषता शब्द के एगो संक्षिप्त रूप ह attr .

ब्लॉककोट शामिल करे खातिर <blockquote>कवनो भी एचटीएमएल के कोट के रूप में लपेट लीं। सीधा उद्धरण खातिर हमनी के एगो <p>.

अपना स्रोत के हवाला देबे खातिर एगो वैकल्पिक तत्व शामिल करीं आ स्टाइलिंग के मकसद से एकरा से पहिले <small>रउरा के एगो एम डैश मिल जाई .—

<ब्लॉककोट> के बा
  <p> लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी वेनेनेटिस। </p>के बा
  <छोट> केहू मशहूर </small>
</blockquote> के बा

डिफ़ॉल्ट ब्लॉककोट सभ के एह तरीका से स्टाइल कइल जाला:

लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी वेनेनेटिस।

बॉडी ऑफ वर्क में केहू मशहूर बा

आपन ब्लॉककोट के दाहिने ओर फ्लोट करे खातिर, जोड़ीं class="pull-right":

लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिंग एलिट। पूर्णांक पोसुएरे एराट एगो एंटी वेनेनेटिस।

बॉडी ऑफ वर्क में केहू मशहूर बा

बिना क्रम के बा

<ul>

• लोरेम इप्सम डोलोर बइठल अमेट
• कॉन्सेक्टेटर एडिपिसिंग एलिट के बा
• मासा में पूर्णांक मोलेस्टी लोरेम के बा
• प्रीटियम निस्ल एलिकेट में फैसिलिसिस के बारे में बतावल गइल बा
• नुल्ला वोलुतपत एलिक्वाम वेलिट के बा
  • फेसेलस इअकुलिस नेके के नाम से जानल जाला
  • पुरुष सोडलेस अल्ट्रिसीज के बा
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम के बा
  • एसी ट्रिस्टिक लिबेरो वोलुटपट पर बा
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल के बा
• एनियन बइठल अमेट एरात ननक
• एगेट पोर्टिटोर लोरेम के बा

अनस्टाइल कइल गइल बा

<ul class="unstyled">

• लोरेम इप्सम डोलोर बइठल अमेट
• कॉन्सेक्टेटर एडिपिसिंग एलिट के बा
• मासा में पूर्णांक मोलेस्टी लोरेम के बा
• प्रीटियम निस्ल एलिकेट में फैसिलिसिस के बारे में बतावल गइल बा
• नुल्ला वोलुतपत एलिक्वाम वेलिट के बा
  • फेसेलस इअकुलिस नेके के नाम से जानल जाला
  • पुरुष सोडलेस अल्ट्रिसीज के बा
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम के बा
  • एसी ट्रिस्टिक लिबेरो वोलुटपट पर बा
• फौसिबस पोर्टा लैकस फ्रिंगिला वेल के बा
• एनियन बइठल अमेट एरात ननक
• एगेट पोर्टिटोर लोरेम के बा

आदेश दिहल गइल बा

<ol>

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

बिबरन

<dl>

विवरण के सूची दिहल गइल बा

शब्दन के परिभाषित करे खातिर एगो विवरण सूची एकदम सही बा।

यूइसमोड के नाम से जानल जाला

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

डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।

मलेसुआडा पोर्टा के बा

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

इनलाइन के बा

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

जइसे कि <code> सेक्शन </ code > के इनलाइन के रूप में लपेटल जाव .  

बेसिक ब्लॉक के बा

<pre>कोड के कई लाइन खातिर इस्तेमाल करीं । सही रेंडरिंग खातिर कवनो कैरेट के ओकर यूनिकोड वर्ण में जरूर बदलीं।

<p>इहाँ के नमूना पाठ...</p>

<पूर्व> के बा
  <p>इहाँ के नमूना पाठ...</p>
</pre> के बा

नोट:<pre> टैग सभ के भीतर कोड के बाईं ओर के जेतना नजदीक हो सके ओतना नजदीक जरूर रखीं ; इ सभ टैब के रेंडर क दिही।

गूगल प्रीटिफाई कइले बानी

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

<p> इहाँ पाठ के नमूना बा... </p>

<pre class = "सुन्दर छाप बा ।" 
     लिनम" > के बा
  <p>इहाँ के नमूना पाठ...</p>
</pre> के बा

google-code-prettify डाउनलोड करीं आ एकर इस्तेमाल करे के तरीका खातिर रीडमी देखीं.

<टेबल> के बा
  <सिर> के बा
    <tr> के बा
      <th> ... </th> के बा
      <th> ... </th> के बा
    </tr>के बा
  </thead> के बा
  <tbody> के बा
    <tr> के बा
      <td> ... </td> के बा
      <td> ... </td> के बा
    </tr>के बा
  </tbody> के बा
</table> के बा

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

<टेबल क्लास = "टेबल" > के बा 
  ...
</table> के बा

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

नोट: स्प्रिट टेबल सभ में :nth-childCSS चयनकर्ता के इस्तेमाल होला आ ई IE7-IE8 में उपलब्ध नइखे।

<तालिका वर्ग = "तालिका तालिका-धारीदार" > 
  ...
</table> के बा

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

<table class = "टेबल टेबल-सीमा वाला" > 
  ...
</table> के बा

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

<तालिका वर्ग = "तालिका तालिका-घनीभूत" > 
  ...
</table> के बा

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

<table class = "टेबल तालिका-धारीदार तालिका-सीमा वाला तालिका-घनीभूत" > 
  ...
</table> के बा

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

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

अउरी जटिल लेआउट सभ में आसान स्टाइलिंग आ इवेंट बाइंडिंग खातिर संक्षिप्त आ स्केल करे लायक क्लास सभ के साथ आवे ला, एह से हर स्टेप पर रउआँ के कवर कइल जाला।

चार गो लेआउट शामिल बा

बूटस्ट्रैप चार तरह के फॉर्म लेआउट खातिर सपोर्ट के संगे आवेला:

• ऊर्ध्वाधर (डिफ़ॉल्ट) के बा।
• तलाशी
• इनलाइन के बा
• क्षैतिज

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

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

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

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

v2.0 के साथ, हमनी के लगे फॉर्म स्टाइल खातिर हल्का आ स्मार्ट डिफ़ॉल्ट बा। कवनो एक्स्ट्रा मार्कअप ना, बस फॉर्म कंट्रोल बा.

डिफ़ॉल्ट वेबकिट शैली के प्रतिबिंबित करत, बस .form-searchअतिरिक्त गोल खोज क्षेत्र खातिर जोड़ल जाला।

इनपुट शुरू करे खातिर ब्लॉक लेवल बा। .form-inlineआ खातिर .form-horizontal, हमनी के इनलाइन-ब्लॉक के इस्तेमाल करेनी जा।

का शामिल बा

बाईं ओर देखावल गइल सभ डिफ़ॉल्ट फॉर्म कंट्रोल सभ के हमनी के सपोर्ट करे लीं। इहाँ बुलेट वाला लिस्ट दिहल गइल बा:

• पाठ इनपुट (पाठ, पासवर्ड, ईमेल आदि) के बारे में जानकारी दिहल गइल बा।
• चेकबॉक्स के बा
• रेडियो पर दिहल गइल बा
• चुनीं
• कई गो चुने के बा
• फाइल के इनपुट कइल जाला
• टेक्स्टएरिया के बा

v2.0 के साथ नया डिफ़ॉल्ट बा

v1.4 तक ले, बूटस्ट्रैप के डिफ़ॉल्ट फॉर्म स्टाइल सभ में क्षैतिज लेआउट के इस्तेमाल कइल गइल। बूटस्ट्रैप 2 के साथ, हमनी के ओह बाधा के हटा देनी जा ताकि कवनो भी फॉर्म खातिर स्मार्ट, अधिक स्केल करे लायक डिफ़ॉल्ट होखे।

ब्राउजर के राज्यन के नया रूप दिहल गइल बा

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

फार्म के मान्यता दिहल जाला

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

<फील्डसेट के बा
  class = "नियंत्रण-समूह त्रुटि" > बा
  ...
</फील्डसेट> के बा

इनपुट के प्रीपेंड & संलग्न कइल जाला

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

चेकबॉक्स आ रेडियो के बारे में बतावल गइल बा

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

इनलाइन चेकबॉक्स आ रेडियो के भी सपोर्ट कइल जाला। बस .inline���वनो .checkboxभा में जोड़ दीं .radioआ रउरा काम पूरा हो गइल.

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

इनलाइन रूप में प्रीपेंड भा एपेंड इनपुट सभ के इस्तेमाल करे खातिर, .add-onआ inputके एकही लाइन पर, बिना स्पेस के, जरूर रखीं।

मदद पाठ के रूप में बा

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

क्रिया खातिर बटन दिहल जाला

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

लंगर आ रूप खातिर

बटन शैली के लागू कइला के साथ कवनो भी चीज पर लागू कइल जा सकेला .btn। हालाँकि, आम तौर पर आप इनहन के खाली <a>आ <button>तत्व सभ पर लागू कइल चाहब।

नोट: सभ बटन में .btnक्लास शामिल होखे के चाहीं। बटन शैली के लागू करे के चाहीं <button>आ <a>स्थिरता खातिर तत्व।

कई गो साइज के होला

फैंसी बड़ बटन बा कि छोट? एकरा पर बा!

प्राथमिक कार्रवाई के बा कार्रवाई

प्राथमिक कार्रवाई के बा कार्रवाई

अक्षम अवस्था में बा

अक्षम बटन सभ खातिर, .btn-disabledलिंक सभ :disabledखातिर आ <button>तत्व सभ खातिर इस्तेमाल करीं।

प्राथमिक कार्रवाई के बा कार्रवाई

प्राथमिक कार्रवाई के बा कार्रवाई

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

IE9 में, हमनी के गोल कोना के पक्ष में सभ बटन पर ढाल छोड़ देनी जा काहें से कि IE9 कोना में बैकग्राउंड ढाल के फसल ना देला।

संबंधित, IE9 अक्षम buttonतत्व सभ के जंफाई करे ला, टेक्स्ट के एगो गंदा टेक्स्ट-शैडो के साथ ग्रे रेंडर करे ला-दुर्भाग्य से हमनी के एकरा के ठीक नइखीं कर सकत।

स्प्राइट के रूप में बनल बा

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

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

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

कइसे इस्तेमाल कइल जाला

v2.0.0 के साथ, हमनी के <i>अपना सभ आइकन सभ खातिर टैग के इस्तेमाल करे के विकल्प चुनले बानी जा, बाकी इनहन के लगे कौनों केस क्लास नइखे-केवल एगो साझा उपसर्ग। इस्तेमाल करे खातिर, निम्नलिखित कोड के लगभग कहीं भी रखीं:

<i class = "आइकन-खोज" </i> के बारे में बतावल गइल बा 

उल्टा (सफेद) आइकन सभ खातिर भी स्टाइल उपलब्ध बाड़ें, एक ठो अतिरिक्त क्लास के साथ तइयार कइल गइल बाड़ें:

<i class = "आइकन-खोज आइकन-सफेद" ></i> 

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

केस के प्रयोग कइल जाला

आइकन त बढ़िया होला बाकिर एकर इस्तेमाल कहाँ करी? इहाँ कुछ विचार दिहल जा रहल बा:

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

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

ताज़ा कर दिहल जाव चेकआउट कइल जाव हटाईं

टिप्पणी सेटिंग्स के बारे में बतावल गइल बा अधिक जानकारी खातिर देखीं