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

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

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

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

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

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

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

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

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

उदाहरण के पते

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

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

संक्षिप्ताक्षरों को अपरकेस टेक्स्ट और हल्के डॉटेड बॉटम बॉर्डर के साथ स्टाइल किया गया है। उनके पास होवर पर एक सहायता कर्सर भी है ताकि उपयोगकर्ताओं को अतिरिक्त संकेत मिले कि होवर पर कुछ दिखाया जाएगा।

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

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

एक ब्लॉककोट शामिल करने के लिए, <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>

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

विवरण

<dl>

विवरण सूचियाँ

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

यूइसमोड

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

Donec id elit non mi porta gravida और eget metus.

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

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

इन - लाइन

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

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

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

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

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

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

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

गूगल

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लचीला HTML और CSS

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

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

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

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

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

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

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

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

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

v2.0 के साथ, हमारे पास फ़ॉर्म शैलियों के लिए हल्के और अधिक स्मार्ट डिफ़ॉल्ट हैं। कोई अतिरिक्त मार्कअप नहीं, बस नियंत्रण बनाएं।

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

इनपुट शुरू करने के लिए ब्लॉक स्तर हैं। .form-inlineऔर के लिए .form-horizontal, हम इनलाइन-ब्लॉक का उपयोग करते हैं।

क्या शामिल है

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

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

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

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

पुन: डिज़ाइन किया गया ब्राउज़र बताता है

बूटस्ट्रैप में ब्राउज़र-समर्थित फ़ोकस और 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">

कार्रवाई के लिए बटन

एक परंपरा के रूप में, बटन का उपयोग केवल क्रियाओं के लिए किया जाना चाहिए जबकि हाइपरलिंक का उपयोग वस्तुओं के लिए किया जाना चाहिए। उदाहरण के लिए, "डाउनलोड" एक बटन होना चाहिए जबकि "हाल की गतिविधि" एक लिंक होना चाहिए।

एंकर और रूपों के लिए

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

नोट: सभी बटनों में .btnकक्षा शामिल होनी चाहिए। बटन शैलियों को संगति के लिए <button>और तत्वों पर लागू किया जाना चाहिए ।<a>

एकाधिक आकार

फैंसी बड़े या छोटे बटन? कोशिश करो!

प्राथमिक क्रिया गतिविधि

प्राथमिक क्रिया गतिविधि

अक्षम अवस्था

अक्षम बटन के लिए, .btn-disabledलिंक के :disabledलिए और <button>तत्वों के लिए उपयोग करें।

प्राथमिक क्रिया गतिविधि

प्राथमिक क्रिया गतिविधि

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

IE9 में, हम गोलाकार कोनों के पक्ष में सभी बटनों पर ग्रेडिएंट ड्रॉप करते हैं क्योंकि IE9 कोनों में बैकग्राउंड ग्रेडिएंट को क्रॉप नहीं करता है।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ताज़ा करना चेक आउट मिटाना

टिप्पणी समायोजन और जानकारी