टाइपोग्राफी
Bootstrap टाइपोग्राफी कृते दस्तावेजीकरणं उदाहरणानि च, यत्र वैश्विकसेटिंग्स्, शीर्षकाणि, मुख्यपाठः, सूचीः, इत्यादीनि सन्ति ।
बूटस्ट्रैप् मूलभूतवैश्विकप्रदर्शनं, मुद्रणचित्रणं, लिङ्कशैल्याः च सेट् करोति । यदा अधिकं नियन्त्रणस्य आवश्यकता भवति तदा textual utility classes पश्यन्तु ।
- प्रत्येकस्य OS तथा उपकरणस्य कृते उत्तमं चयनं करोति इति देशी font stack इत्यस्य उपयोगं कुर्वन्तु ।
font-family - अधिकसमावेशी तथा सुलभप्रकारपरिमाणस्य कृते वयं ब्राउजर् पूर्वनिर्धारितं मूलं
font-size(सामान्यतया 16px) कल्पयामः येन आगन्तुकाः आवश्यकतानुसारं स्वस्य ब्राउजर् पूर्वनिर्धारितं अनुकूलितुं शक्नुवन्ति $font-family-base,$font-size-base, तथा विशेषतानां उपयोगं कुर्वन्तु$line-height-baseयथा अस्माकं मुद्रण आधारः<body>.- माध्यमेन वैश्विकलिङ्कवर्णं सेट् कुर्वन्तु
$link-colorतथा च केवलं इत्यत्र लिङ्क् रेखाङ्कनं प्रयोजयन्तु:hover। - ( पूर्वनिर्धारितरूपेण) इत्यत्र
$body-bga सेट् कर्तुं उपयुज्यताम् ।background-color<body>#fff
एताः शैल्याः अन्तः द्रष्टुं शक्यन्ते _reboot.scss, वैश्विकचराः च _variables.scss. अवश्यं सेट् $font-size-baseकुर्वन्तु rem.
सर्वाणि HTML शीर्षकाणि, <h1>माध्यमेन <h6>, उपलभ्यन्ते ।
| शीर्षकम् | उदाहरण |
|---|---|
|
|
ह1. बूटस्ट्रैप शीर्षक |
|
|
ह२. बूटस्ट्रैप शीर्षक |
|
|
ह३. बूटस्ट्रैप शीर्षक |
|
|
ह४ । बूटस्ट्रैप शीर्षक |
|
|
ह५ । बूटस्ट्रैप शीर्षक |
|
|
ह६ । बूटस्ट्रैप शीर्षक |
<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>.h1through .h6classes अपि उपलभ्यन्ते, यतः यदा भवान् शीर्षकस्य 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>पारम्परिकशीर्षकतत्त्वानि भवतः पृष्ठसामग्री मांसे सर्वोत्तमरूपेण कार्यं कर्तुं विनिर्मिताः सन्ति। यदा भवन्तः उत्तिष्ठितुं शीर्षकस्य आवश्यकतां अनुभवन्ति तदा प्रदर्शनशीर्षकस्य उपयोगं विचारयन्तु —बृहत्तरं, किञ्चित् अधिकं मतयुक्तं शीर्षकशैली ।
| प्रदर्शनम् 1 |
| प्रदर्शनम् २ |
| प्रदर्शन 3. |
| प्रदर्शनम् ४ |
<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>योजयित्वा एकं अनुच्छेदं विशिष्टं कुरुत .lead.
Vivamus sagittis lacus vel augue laoreet रटरुम फौसिबस डोलोर नीलामी. Duis mollis, est गैर commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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वर्गाः अपि तादृशीः शैल्याः प्रयोक्तुं उपलभ्यन्ते यथा टैग्स् आनयिष्यन्ति इति किमपि अवांछितं शब्दार्थनिमित्तं परिहरन् <mark>च ।<small>
उपरि न दर्शितं चेदपि, 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 परितः वेष्टयन्तु ।
लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote><footer class="blockquote-footer">स्रोतस्य परिचयार्थं a योजयन्तु । स्रोतकार्यस्य नाम <cite>.
लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>स्वस्य blockquote इत्यस्य संरेखणं परिवर्तयितुं आवश्यकतानुसारं पाठ-उपयोगितायाः उपयोगं कुर्वन्तु ।
लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>लोरेम इप्सम डोलोर बैठा amet, consectetur adipiscing अभिजात वर्ग. पूर्णांक posuere erat a ante.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>list-styleसूचीवस्तूनाम् (केवलं तत्कालीनबालानां) पूर्वनिर्धारितं वाममार्जिनं च निष्कासयन्तु । इदं केवलं तत्कालीनबालसूचीवस्तूनाम् एव प्रवर्तते , अर्थात् भवद्भिः कस्यापि नेस्टेड् सूचीनां कृते अपि वर्गं योजयितुं आवश्यकता भविष्यति ।
- लोरेम इप्सम डोलोर बैठा अमेत
- Consectetur adipiscing अभिजात वर्ग
- पूर्णांक molestie lorem पर massa
- Facilisis in pretium nisl aliquet
- नुल्ला वोलुत्पात अलिक्वाम वेलित
- Phasellus iaculis नेक्वे इति
- पुरुष सोडलेस् ultrices
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- Ac tristique लिबेरो volutpat at
- फौसिबस पोर्टा लेकस फ्रिंगिला वेल
- Aenean बैठा अमेत एरत nunc
- एगेट पोर्टिटोर लोरेम्
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>सूचीयाः गोलिकाः निष्कास्य marginद्वयोः वर्गयोः संयोजनेन किञ्चित् प्रकाशं प्रयोजयन्तु, .list-inlineतथा च .list-inline-item.
- लोरेम् इप्सुम्
- Phasellus iaculis इति
- नुल्ला वोलुत्पात
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>अस्माकं जालप्रणाल्याः पूर्वनिर्धारितवर्गाणां (अथवा शब्दार्थमिश्रणानां) उपयोगेन पदानाम् वर्णनानां च क्षैतिजरूपेण संरेखयन्तु । दीर्घकालं यावत्, भवन्तः वैकल्पिकरूपेण .text-truncateदीर्घवृत्तेन पाठं च्छेदयितुं वर्गं योजयितुं शक्नुवन्ति ।
- वर्णन सूची
- पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
- यूइस्मोदः
-
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम nec अभिजात वर्ग.
Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस.
- मलेसुअदा पोर्टा
- Etiam porta सेम malesuada मैग्ना मोलिस euismod.
- कृन्तितम् पदं च्छिन्नं भवति
- Fusce dapibus, tellus ac cursus commodo, tortor मौरिस condimentum निभ, उत fermentum massa justo बैठो amet risus.
- नीडं करणम्
-
- नेस्टेड परिभाषा सूची
- एनियन posuere, tortor सेड cursus feugiat, nunc augue blandit nunc.
<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">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>प्रतिक्रियाशीलमुद्रणशास्त्रंfont-size केवलं माध्यमप्रश्नानां श्रृङ्खलायाम् अन्तः मूलतत्त्वस्य समायोजनं कृत्वा पाठस्य घटकानां च स्केलीकरणं निर्दिशति । Bootstrap भवतः कृते एतत् न करोति, परन्तु भवतः आवश्यकतानुसारं योजयितुं तुल्यसुलभम् अस्ति ।
अत्र व्यवहारे तस्य उदाहरणम् अस्ति। font-sizeयत्किमपि s तथा मीडिया प्रश्नान् इच्छति तत् चिनुत ।
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}