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

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

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

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

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

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

जोर के प्रयोग

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

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

उदाहरण के पता

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

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

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

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

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

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

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

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

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

मलेसुआदा पोर्टा

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

इनलाइन

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

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

बेसिक ब्लॉक

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

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

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

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

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

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

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

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

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

<तालिका>
  <शीर्ष>
    <tr>
      <th> ... </th> के अनुसार
      <th> ... </th> के अनुसार
    </tr>
  </tहेड>
  <टीबॉडी>
    <tr>
      <td> ... </td> के अनुसार
      <td> ... </td> के अनुसार
    </tr>
  </tbody> के
</table>क अनुसार

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

<तालिका वर्ग = "सारणी" > 
  ...
</table>क अनुसार

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

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

<table class = "तालिका तालिका-धारीदार" > 
  ...
</table>क अनुसार

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

<table class = "तालिका तालिका-सीमाबद्ध" > 
  ...
</table>क अनुसार

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

<table class = "तालिका तालिका-संघनित" > 
  ...
</table>क अनुसार

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

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

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

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

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

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

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

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

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

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

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

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

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तत्व क॑ janifies करै छै, एक गंदा पाठ-छाया के साथ पाठ ग्रे रेंडर करै छै-दुर्भाग्यवश हम एकरा ठीक नै करी सकै छियै.

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

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

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

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

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

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

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

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

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

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

प्रयोग केस

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

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

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

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

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