मुद्रणकला
Bootstrap टायपोग्राफी खातीर दस्तावेजीकरण आनी उदाहरणां, जातूंत जागतीक मांडावळी, शीर्षकां, मुखेल मजकूर, यादी, आनी हेर आसपावीत आसात.
जागतीक सेटिंग्ज
बूटस्ट्रॅप मुळावी जागतीक प्रदर्शन, टायपोग्राफी, आनी दुवो शैली सेट करता. जेन्ना चड नियंत्रणाची गरज आसता, तेन्ना मजकूर उपयुक्तताय वर्ग पळयात .
- दरेक OS आनी डिव्हायसा खातीर सगळ्यांत बरें निवडपी मुळ फॉन्ट स्टॅक वापरात .
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> |
h1. बूटस्ट्रॅप शीर्षक |
<h2></h2> |
h2. बूटस्ट्रॅप शीर्षक |
<h3></h3> |
h3 हें नांव. बूटस्ट्रॅप शीर्षक |
<h4></h4> |
h4 हें नांव. बूटस्ट्रॅप शीर्षक |
<h5></h5> |
h5. ब��टस्ट्रॅप शीर्षक |
<h6></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य उपलब्ध आसात, जेन्ना तुमकां शीर्षकाच्या फॉन्ट स्टायलिंग जुळपाक जाय पूण संबंदीत HTML घटक वापरूंक मेळना तेन्ना खातीर.
h1. बूटस्ट्रॅप शीर्षक
h2. बूटस्ट्रॅप शीर्षक
h3 हें नांव. बूटस्ट्रॅप शीर्षक
h4 हें नांव. बूटस्ट्रॅप शीर्षक
h5. बूटस्ट्रॅप शीर्षक
h6 हें नांव. बूटस्ट्रॅप शीर्षक
<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
Sass नकाशा आनी दोन चड-उणें, $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 घटकांखातीर स्टायलिंग.
तुमी मार्क टॅग वापरूं येता 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>
.
वयर दाखयल्ले नासतना, वापरपाक मेकळेपणान <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">
खंयच्याय HTML भोंवतणी गुठलावचें .
एक नामनेचें उद्धरण, ब्लॉककोट घटकांत आशिल्लें.
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
एका स्रोताचें नांव दिवप
HTML स्पेसिफिकेशनाक ब्लॉककोट एट्रिब्यूशन भायर दवरपाची गरज आसा <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>
संरेखण करप
तुमच्या ब्लॉककोटाची संरेखण बदलपाखातीर गरज पडल्यार मजकूर उपयुक्तताय वापरात.
<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>
प्रतिसाद दिवपी फॉन्ट आकार
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;
हांगा आनी रिबूटांत आस्पाव केल्ल्या विविध टायपोग्राफी घटकांकय समर्पीत चड-उणें आसतात.
$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) वापरता .