टाइपोग्राफी
Bootstrap टाइपोग्राफी कृते दस्तावेजीकरणं उदाहरणानि च, यत्र वैश्विकसेटिंग्स्, शीर्षकाणि, मुख्यपाठः, सूचीः, इत्यादीनि सन्ति ।
वैश्विक सेटिंग्स्
बूटस्ट्रैप् मूलभूतवैश्विकप्रदर्शनं, मुद्रणचित्रणं, लिङ्कशैल्याः च सेट् करोति । यदा अधिकं नियन्त्रणस्य आवश्यकता भवति तदा textual utility classes पश्यन्तु ।
- प्रत्येकस्य OS तथा उपकरणस्य कृते उत्तमं चयनं करोति इति देशी font stack इत्यस्य उपयोगं कुर्वन्तु ।
font-family
- अधिकसमावेशी तथा सुलभप्रकारपरिमाणस्य कृते वयं ब्राउजर् इत्यस्य पूर्वनिर्धारितं मूलं
font-size
(सामान्यतया 16px) उपयुञ्ज्महे येन आगन्तुकाः आवश्यकतानुसारं स्वस्य ब्राउजर् पूर्वनिर्धारितं अनुकूलितुं शक्नुवन्ति $font-family-base
,$font-size-base
, तथा विशेषतानां उपयोगं कुर्वन्तु$line-height-base
यथा अस्माकं मुद्रण आधारः<body>
.- माध्यमेन वैश्विकलिङ्कवर्णं सेट् कुर्वन्तु
$link-color
। - ( पूर्वनिर्धारितरूपेण) इत्यत्र
$body-bg
a सेट् कर्तुं उपयुज्यताम् ।background-color
<body>
#fff
एताः शैल्याः अन्तः द्रष्टुं शक्यन्ते _reboot.scss
, वैश्विकचराः च _variables.scss
. अवश्यं सेट् $font-size-base
कुर्वन्तु rem
.
शीर्षकाणि
सर्वाणि HTML शीर्षकाणि, <h1>
माध्यमेन <h6>
, उपलभ्यन्ते ।
शीर्षकम् | उदाहरण |
---|---|
<h1></h1> |
ह1. बूटस्ट्रैप शीर्षक |
<h2></h2> |
ह२. बूटस्ट्रैप शीर्षक |
<h3></h3> |
ह३. बूटस्ट्रैप शीर्षक |
<h4></h4> |
ह४ । बूटस्ट्रैप शीर्षक |
<h5></h5> |
ह५ । बूटस्ट्रैप शीर्षक |
<h6></h6> |
ह६ । बूटस्ट्रैप शीर्षक |
<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
through .h6
classes अपि उपलभ्यन्ते, यतः यदा भवान् शीर्षकस्य font styling इत्यस्य मेलनं कर्तुम् इच्छति परन्तु तत्सम्बद्धस्य HTML element इत्यस्य उपयोगं कर्तुं न शक्नोति ।
ह1. बूटस्ट्रैप शीर्षक
ह२. बूटस्ट्रैप शीर्षक
ह३. बूटस्ट्रैप शीर्षक
ह४ । बूटस्ट्रैप शीर्षक
ह५ । बूटस्ट्रैप शीर्षक
ह६ । बूटस्ट्रैप शीर्षक
<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>
शीर्षकों को अनुकूलित करना
Bootstrap 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
Sass map इत्यस्य माध्यमेन विन्यस्तानि भवन्ति तथा च द्वयोः चरयोः माध्यमेन, $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>
इनलाइन पाठ तत्व
सामान्य इनलाइन HTML5 तत्वों के लिए स्टाइलिंग।
भवन्तः mark tag इत्यस्य उपयोगं कर्तुं शक्नुवन्ति to...प्रमुखाकृष्टिपाठ।
एषा पाठपङ्क्तिः विलोपितपाठत्वेन व्यवहर्तुं अभिप्रेता अस्ति ।
एषा पाठपङ्क्तिः न पुनः समीचीना इति व्यवहर्तुं अभिप्रेता ।
एषा पाठपङ्क्तिः दस्तावेजे अतिरिक्तरूपेण व्यवहर्तुं अभिप्रेता अस्ति ।
एषा पाठपङ्क्तिः रेखांकितवत् प्रतिपादयिष्यति ।
एषा पाठपङ्क्तिः सूक्ष्मलेखत्वेन व्यवहर्तुं अभिप्रेता अस्ति ।
एषा रेखा गाढपाठरूपेण प्रतिपादिता ।
इयं रेखा इटालिककृतपाठरूपेण प्रतिपादिता ।
<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>
.
उपरि न दर्शितं चेदपि, HTML5 इत्यस्मिन् <b>
च उपयोगाय निःशङ्कं भवन्तु । अतिरिक्त महत्त्वं न बोधयित्वा शब्दान् वा वाक्यानि वा प्रकाशयितुं भवति, यदा तु अधिकतया स्वरस्य, तकनीकीपदानां इत्यादीनां कृते भवति।<i>
<b>
<i>
पाठ उपयोगिताएँ
अस्माकं पाठ-उपयोगिताभिः वर्ण -उपयोगितैः च पाठ-संरेखणं, परिवर्तनं, शैली, भारः, रेखा-उच्चता, अलङ्कारः, वर्णः च परिवर्तयन्तु ।
संक्षेपाः
<abbr>
विस्तारितं संस्करणं होवर इत्यत्र दर्शयितुं संक्षिप्तनामानां संक्षिप्तनामानां च कृते HTML इत्यस्य तत्त्वस्य शैलीबद्धं कार्यान्वयनम् । संक्षिप्तरूपेषु पूर्वनिर्धारितं रेखाचित्रं भवति तथा च होवर इत्यत्र अतिरिक्तसन्दर्भं प्रदातुं सहायकप्रौद्योगिकीनां उपयोक्तृभ्यः च सहायताकर्सरं प्राप्नोति ।
.initialism
किञ्चित् लघु font-size कृते संक्षिप्तरूपेण योजयन्तु ।
अत्र्
HTML इति
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
ब्लॉककोट्स्
भवतः दस्तावेजस्य अन्तः अन्यस्मात् स्रोतः सामग्रीखण्डानां उद्धरणार्थं । <blockquote class="blockquote">
उद्धरणरूपेण किमपि HTML परितः वेष्टयन्तु ।
एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
स्रोतस्य नामकरणम्
HTML spec इत्यस्य आवश्यकता अस्ति यत् blockquote attribution इत्यस्य बहिः स्थापनीयम् <blockquote>
। एट्रिब्यूशनं प्रदातुं, स्वस्य <blockquote>
a मध्ये लपेटयन्तु तथा च वर्गेण सह <figure>
a <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>
संरेखणम्
स्वस्य blockquote इत्यस्य संरेखणं परिवर्तयितुं आवश्यकतानुसारं पाठ-उपयोगितायाः उपयोगं कुर्वन्तु ।
<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
.
- एतत् सूचीवस्तु अस्ति ।
- अपरं च ।
- परन्तु ते inline प्रदर्शिताः सन्ति।
<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>
प्रतिक्रियाशील फॉन्ट आकार
Bootstrap 5 मध्ये, वयं पूर्वनिर्धारितरूपेण प्रतिक्रियाशील-फॉन्ट-आकाराः सक्षमाः कृतवन्तः, येन पाठः उपकरणस्य दृश्य-पोर्ट्-आकारस्य च मध्ये अधिकं स्वाभाविकतया स्केल कर्तुं शक्नोति । एतत् कथं कार्यं करोति इति ज्ञातुं RFS पृष्ठं पश्यन्तु ।
सस्स
चर
शीर्षकेषु आकारनिर्धारणाय, अन्तरालस्य च कृते केचन समर्पिताः चराः सन्ति ।
$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;
अत्र Reboot इत्यत्र च आच्छादितानां विविधमुद्रणतत्त्वानां समर्पिताः चराः अपि सन्ति ।
$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;
मिक्सिन्
टाइपोग्राफी कृते समर्पितानि मिक्सिन् न सन्ति, परन्तु Bootstrap इत्यत्र Responsive Font Sizing (RFS) इत्यस्य उपयोगः भवति एव ।