टाइपोग्राफी दा
बूटस्ट्रैप टाइपोग्राफी आस्तै दस्तावेजीकरण ते उदाहरण, जिंदे च वैश्विक सेटिंग्स, हेडिंग, शरीर पाठ, सूची, ते होर मते शामल न।
वैश्विक सेटिंग्स
बूटस्ट्रैप बुनियादी वैश्विक प्रदर्शन, टाइपोग्राफी, ते लिंक शैलियां सेट करदा ऐ। जदूं होर नियंत्रण दी लोड़ होंदी ऐ तां पाठ उपयोगिता वर्गें दी जांच करो .
- इक देशी फॉन्ट स्टैक
font-family
दा इस्तेमाल करो जेह् ड़ा हर ओएस ते डिवाइस आस्तै सर्वश्रेष्ठ चयन करदा ऐ। - होर समावेशी ते सुलभ किस्म दे पैमाने आस्तै, अस ब्राउज़र दे डिफाल्ट रूट
font-size
(आम तौर पर 16px) दा उपयोग करदे न तां जे आगंतुक जरूरत मताबक अपने ब्राउज़र डिफाल्ट गी अनुकूलित करी सकन। $font-family-base
,$font-size-base
, ते विशेषताएं दा इस्तेमाल$line-height-base
साढ़े मुद्रण आधार दे रूप च करो जेह् ड़ा<body>
.- दे माध्यम कन्नै वैश्विक लिंक रंग सेट करो
$link-color
. - पर
$body-bg
ए सेट करने लेई इस्तेमाल करो ( डिफ़ॉल्ट रूप कन्नै)।background-color
<body>
#fff
एह् शैलियां अंदर पाई सकदियां न _reboot.scss
, ते वैश्विक चर गी _variables.scss
. सेट करना ज़रूरी $font-size-base
ऐ rem
.
हेडिंग्स
सारे एचटीएमएल हेडिंग, <h1>
दे राहें <h6>
, उपलब्ध न।
हेडिंग करना | मसाल |
---|---|
<h1></h1> |
एच१ ऐ। बूटस्ट्रैप हेडिंग |
<h2></h2> |
ज २। बूटस्ट्रैप हेडिंग |
<h3></h3> |
ज ३। बूटस्ट्रैप हेडिंग |
<h4></h4> |
ह4 ऐ। बूटस्ट्रैप हेडिंग |
<h5></h5> |
ज ५। बूटस्ट्रैप हेडिंग |
<h6></h6> |
एच6 ऐ। बूटस्ट्रैप हेडिंग |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
क्लासें दे माध्यम कन्नै .h6
बी उपलब्ध न, कीजे जिसलै तुस कुसै हेडिंग दी फॉन्ट स्टाइलिंग कन्नै मेल खाना चांह् दे ओ पर संबद्ध HTML तत्व दा इस्तेमाल नेईं करी सकदे ओ.
एच१ ऐ। बूटस्ट्रैप हेडिंग
ज २। बूटस्ट्रैप हेडिंग
ज ३। बूटस्ट्रैप हेडिंग
ह4 ऐ। बूटस्ट्रैप हेडिंग
ज ५। बूटस्ट्रैप हेडिंग
एच6 ऐ। बूटस्ट्रैप हेडिंग
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
हेडिंग गी अनुकूलित करना
बूटस्ट्रैप 3 थमां छोटे सेकेंडरी हेडिंग पाठ गी दुबारा बनाने आस्तै शामल उपयोगिता वर्गें दा इस्तेमाल करो.
फैंसी डिस्प्ले हेडिंग फीके होए दे माध्यमिक पाठ कन्नै
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
हेडिंग प्रदर्शत करो
परंपरागत हेडिंग तत्वें गी तुंदी पृष्ठ सामग्री दे मांस च बेहतर कम्म करने आस्तै डिजाइन कीता गेदा ऐ। जदूं तुसेंगी इक हेडिंग दी लोड़ होंदी ऐ तां इक डिस्प्ले हेडिंग दा इस्तेमाल करने पर विचार करो — इक बड्डी, थोह् ड़ी-मती राय आह् ली हेडिंग शैली।
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
$display-font-sizes
प्रदर्शत हेडिंग्स गी सस्स मैप ते दो चरें दे राहें कॉन्फ़िगर कीता जंदा ऐ , $display-font-weight
ते $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$display-font-weight: 300;
$display-line-height: $headings-line-height;
सेध
जोड़कर इक पैराग्राफ गी अलग बनाओ .lead
.
एह् इक लीड पैराग्राफ ऐ। एह् नियमित पैराग्राफें थमां बक्खरा खड़ोंदा ऐ।
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
इनलाइन पाठ तत्व
आम इनलाइन एचटीएमएल 5 तत्वें लेई स्टाइलिंग।
तुस निशान टैग दा इस्तेमाल करी सकदे ओमुक्ख हिस्सापाठ.
पाठ दी इस पंक्ति दा मतलब ऐ जे डिलीट कीते गेदे पाठ दे रूप च समझेआ जा।
पाठ दी इस पंक्ति दा मतलब ऐ जे इसगी हून सटीक नेईं मन्नेआ जा।
पाठ दी इस पंक्ति दा मतलब ऐ जे दस्तावेज च इक जोड़ दे रूप च समझेआ जा।
पाठ दी एह् पंक्ति रेखांकित कीते गेदे तरीके कन्नै रेंडर करग।
पाठ दी इस पंक्ति दा मतलब ऐ जे इसगी बारीक छापें दे रूप च समझेआ जा।
इस पंक्ति गी बोल्ड पाठ दे रूप च प्रस्तुत कीता गेआ।
इस पंक्ति गी इटैलिक पाठ दे रूप च प्रस्तुत कीता गेआ ऐ।
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
सावधान रौह्ओ जे उनें टैगें दा इस्तेमाल शब्दार्थ मकसद आस्तै कीता जाना चाहिदा:
<mark>
पाठ दा प्रतिनिधित्व करदा ऐ जेह् ड़ा संदर्भ जां संकेतन उद्देशें लेई चिऱन्नत जां हाइलाइट कीता गेदा ऐ।<small>
साइड-टिप्पणी ते छोटे-छोटे प्रिंट दा प्रतिनिधित्व करदा ऐ, जि’यां कापीराइट ते कानूनी पाठ।<s>
तत्व दा प्रतिनिधित्व करदा ऐ जेह् ड़ा हून प्रासंगिक नेईं ऐ जां सटीक नेईं ऐ ।<u>
इनलाइन पाठ दे इक स्पैन दा प्रतिनिधित्व करदा ऐ जेह् ड़ा इस चाल्लीं रेंडर कीता जाना चाहिदा ऐ जे इस च गैर-पाठ्य एनोटेशन ऐ ।
जेकर तुस अपने पाठ गी स्टाइल करना चांह् दे ओ तां तुसेंगी इसदे बजाय निम्नलिखित वर्गें दा इस्तेमाल करना चाहिदा:
.mark
उसी शैलियां लागू करग जि'यां<mark>
..small
उसी शैलियां लागू करग जि'यां<small>
..text-decoration-underline
उसी शैलियां लागू करग जि'यां<u>
..text-decoration-line-through
उसी शैलियां लागू करग जि'यां<s>
.
जदके उप्पर नेईं दस्सेआ गेआ ऐ, तां बेझिझक बरतेआ जा <b>
ते <i>
HTML5 च। <b>
शब्दें जां वाक्यांशें गी बिना कुसै अतिरिक्त महत्व दे उजागर करने दा मतलब ऐ , जदके <i>
एह् मते सारें शा मता आवाज़ , तकनीकी शब्दें बगैरा आस्तै ऐ ।
पाठ उपयोगिताएं दा
साढ़ी पाठ उपयोगिताएं ते रंग उपयोगिताएं कन्नै पाठ संरेखण, रूपांतरण, शैली, वजन, रेखा-ऊँचाई, सजावट ते रंग बदलो .
संक्षिप्त रूप
<abbr>
होवर पर विस्तारित संस्करण गी दस्सने आस्तै संक्षिप्त ते संक्षिप्त नामें आस्तै HTML दे तत्व दा शैलीबद्ध कार्यान्वयन । संक्षेप च इक डिफाल्ट रेखांकन होंदा ऐ ते होवर पर ते सहायक तकनीकें दे बरतूनकर्ताएं गी अतिरिक्त संदर्भ देने लेई इक मदद कर्सर हासल होंदा ऐ।
.initialism
थोह् ड़ी-मती फॉन्ट-आकार आस्तै इक संक्षिप्त रूप च जोड़ो ।
अटत्र
एचटीएमएल
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
ब्लॉककोट्स
अपने दस्तावेज़ दे अंदर कुसै होर स्रोत थमां सामग्री दे ब्लॉक उद्धृत करने आस्तै। उद्धरण दे रूप च कुसै बी एचटीएमएल<blockquote class="blockquote">
दे चारों-पार लपेटो ।
इक सुप्रसिद्ध उद्धरण, इक ब्लॉककोट तत्व च निहित।
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
इक स्रोत दा नाम देना
एचटीएमएल स्पेक्स गी जरूरी ऐ जे ब्लॉककोट एट्रिब्यूशन गी <blockquote>
. एट्रिब्यूशन प्रदान करदे बेल्लै, अपने <blockquote>
इक च लपेटो <figure>
ते वर्ग कन्नै इक <figcaption>
जां इक ब्लॉक स्तर तत्व (जियां, <p>
) दा इस्तेमाल करो. .blockquote-footer
स्रोत कम्मै दा नांऽ बी ज़रूर लपेटो <cite>
।
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
संरेखण करना
अपने ब्लॉककोट दी संरेखण गी बदलने लेई जरूरत मताबक पाठ उपयोगिताएं दा इस्तेमाल करो.
<figure class="text-center">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
<figure class="text-end">
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</figure>
लिस्टां करदा ऐ
अनस्टाइल
सूची आइटमें पर डिफाल्ट list-style
ते बाएं मार्जिन गी हटाओ (केवल फौरी बच्चें गी)। एह् सिर्फ फौरी बच्चें दी सूची आइटमें पर लागू होंदा ऐ , मतलब तुसेंगी कुसै बी नेस्टेड सूची आस्तै बी क्लास जोड़ने दी लोड़ होग.
- एह् इक लिस्ट ऐ।
- एह् बिल्कुल अनस्टाइल दिक्खने गी मिलदा ऐ।
- संरचनात्मक तौर पर, एह् अजें बी इक सूची ऐ।
- पर, एह् शैली सिर्फ तत्काल बाल तत्वें उप्पर गै लागू होंदी ऐ ।
- नेस्टेड सूची: ऐ।
- इस शैली कन्नै अप्रभावित न
- अभी भी एक गोली दिखा देगी
- ते उचित बाएं मार्जिन होऐ
- एह् अजें बी किश परिस्थितियें च कम्म करी सकदा ऐ।
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
इनलाइन
margin
इक सूची दी गोलियां हटाओ ते दो वर्गें दे संयोजन कन्नै किश रोशनी लाओ , .list-inline
ते .list-inline-item
.
- एह् इक सूची आइटम ऐ।
- ते इक होर।
- पर ओह इनलाइन प्रदर्शत होंदे न।
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
विवरण सूची संरेखण
साढ़े ग्रिड सिस्टम दी पूर्व-निर्धारित वर्गें (जां शब्दार्थ मिक्सिन) दा इस्तेमाल करियै शब्दें ते वर्णनें गी क्षैतिज रूप कन्नै संरेखित करो। लम्मी अवधि आस्तै, तुस वैकल्पिक रूप .text-truncate
कन्नै पाठ गी इक दीर्घवृत्त कन्नै कटौती करने आस्तै इक वर्ग जोड़ सकदे ओ.
- विवरण सूची दी
- शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।
- म्याद
-
शब्द दे वास्ते परिभाषा।
ते कुछ होर प्लेसहोल्डर परिभाषा पाठ।
- इक होर शब्द
- एह् परिभाषा छोटी ऐ, इस करी कोई अतिरिक्त पैराग्राफ नेईं ते कुसै होर चीजै दा।
- कटौती कीती गेदी शब्द गी कटौती कीती गेई ऐ
- जदूं जगह तंग होंदी ऐ तां एह् फायदेमंद होई सकदा ऐ। अंत च इक दीर्घवृत्त जोड़दा ऐ।
- घोंसला बनाना
-
- नेस्टेड परिभाषा सूची
- मैं तुसें गी परिभाषा लिस्ट पसंद सुनी। मैं तुंदी परिभाषा सूची दे अंदर इक परिभाषा सूची पाना।
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
उत्तरदायी फॉन्ट आकार
बूटस्ट्रैप 5 च, असें डिफाल्ट रूप कन्नै प्रतिक्रियाशील फॉन्ट आकारें गी सक्षम कीता ऐ, जेह् ड़ा पाठ गी डिवाइस ते व्यूपोर्ट आकारें च होर स्वाभाविक रूप कन्नै स्केल करने दी इजाजत दिंदा ऐ. एह् जानने लेई जे एह् किस चाल्ली कम्म करदा ऐ, आरएफएस पेज पर इक नज़र पाओ ।
सस्स
चर करने वाले
हेडिंग्स च आकार ते स्पेसिंग आस्तै किश समर्पित चर होंदे न ।
$headings-margin-bottom: $spacer * .5;
$headings-font-family: null;
$headings-font-style: null;
$headings-font-weight: 500;
$headings-line-height: 1.2;
$headings-color: null;
इत्थै ते रिबूट च कवर कीते गेदे विविध टाइपोग्राफी तत्वें च बी समर्पित चर न।
$lead-font-size: $font-size-base * 1.25;
$lead-font-weight: 300;
$small-font-size: .875em;
$sub-sup-font-size: .75em;
$text-muted: $gray-600;
$initialism-font-size: $small-font-size;
$blockquote-margin-y: $spacer;
$blockquote-font-size: $font-size-base * 1.25;
$blockquote-footer-color: $gray-600;
$blockquote-footer-font-size: $small-font-size;
$hr-margin-y: $spacer;
$hr-color: inherit;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
मिक्सिन
टाइपोग्राफी आस्तै कोई समर्पित मिक्सिन नेईं ऐ , पर बूटस्ट्रैप रिस्पांसिव फॉन्ट साइजिंग (RFS) दा इस्तेमाल करदा ऐ .