टाइपोग्राफी
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-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>
शीर्षकाणि प्रदर्शयतु
पारम्परिकशीर्षकतत्त्वानि भवतः पृष्ठसामग्री मांसे सर्वोत्तमरूपेण कार्यं कर्तुं विनिर्मिताः सन्ति। यदा भवन्तः उत्तिष्ठितुं शीर्षकस्य आवश्यकतां अनुभवन्ति तदा प्रदर्शनशीर्षकस्य उपयोगं विचारयन्तु —बृहत्तरं, किञ्चित् अधिकं मतयुक्तं शीर्षकशैली । मनसि धारयतु एते शीर्षकाणि पूर्वनिर्धारितरूपेण प्रतिक्रियाशीलाः न सन्ति, परन्तु प्रतिक्रियाशीलाः font आकाराः सक्षमीकरणं सम्भवति .
प्रदर्शनम् १ |
प्रदर्शनम् २ |
प्रदर्शनम् ३ |
प्रदर्शनम् ४ |
<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
.
एषः प्रमुखः अनुच्छेदः अस्ति । नियमितपरिच्छेदात् विशिष्टं भवति।
<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
वर्गाः अपि तादृशीः शैल्याः प्रयोक्तुं उपलभ्यन्ते यथा टैग्स् आनयिष्यन्ति इति किमपि अवांछितं शब्दार्थनिमित्तं परिहरन् <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 परितः वेष्टयन्तु ।
एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
स्रोतस्य नामकरणम्
<footer class="blockquote-footer">
स्रोतस्य परिचयार्थं a योजयन्तु । स्रोतकार्यस्य नाम <cite>
.
एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
संरेखणम्
स्वस्य blockquote इत्यस्य संरेखणं परिवर्तयितुं आवश्यकतानुसारं पाठ-उपयोगितायाः उपयोगं कुर्वन्तु ।
एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
सूचीति
अशैली
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>
प्रतिक्रियाशील फॉन्ट आकार
v4.3.0 तः, Bootstrap प्रतिक्रियाशील-फॉन्ट-आकारं सक्षमीकरणस्य विकल्पेन सह निर्यातयति, यत् पाठं उपकरणस्य दृश्य-पोर्टस्य च आकारेषु अधिकं स्वाभाविकतया स्केल कर्तुं शक्नोति । Sass चरम् Bootstrap इत्यत्र परिवर्त्य पुनः संकलितं कृत्वा RFS सक्षमं कर्तुं शक्यते ।$enable-responsive-font-sizes
true
RFS समर्थनार्थं वयं अस्माकं सामान्यगुणानां स्थाने Sass mixin इत्यस्य उपयोगं कुर्मः font-size
। प्रतिक्रियाशील-फॉन्ट-आकाराः प्रतिक्रियाशील-स्केलिंग-व्यवहारं सक्षमीकरणाय च दृश्य-पोर्ट-इकायानां calc()
मिश्रणेन सह कार्येषु संकलिताः भविष्यन्ति । RFSrem
इत्यस्य विषये अधिकं तस्य विन्यासस्य च विषये अधिकं तस्य GitHub भण्डारे द्रष्टुं शक्यते |