मुद्रणकला

Bootstrap टायपोग्राफी खातीर दस्तावेजीकरण आनी उदाहरणां, जातूंत जागतीक मांडावळी, शीर्षकां, मुखेल मजकूर, यादी, आनी हेर आसपावीत आसात.

ह्या पानाचेर

जागतीक सेटिंग्ज

बूटस्ट्रॅप मुळावी जागतीक प्रदर्शन, टायपोग्राफी, आनी दुवो शैली सेट करता. जेन्ना चड नियंत्रणाची गरज आसता, तेन्ना मजकूर उपयुक्तताय वर्ग पळयात .

दरेक OS आनी डिव्हायसा खातीर सगळ्यांत बरें निवडपी मुळ फॉन्ट स्टॅक वापरात .font-family
चड समावेशक आनी सुलभ प्रकार प्रमाणा खातीर, आमी ब्राउझराचें मुलभूत मूळ font-size(सादारणपणान 16px) वापरतात जेणे करून भेट दिवपी गरज पडल्यार तांचे ब्राउझर मुलभूत पसंतीचे करूंक शकतात.
$font-family-base, $font-size-base, आनी गुणधर्म वापरात $line-height-baseआमचो मुद्रण आदार म्हणून <body>.
वरवीं जागतीक दुवो रंग सेट करचो $link-color.
( पूर्वनिर्धारीतपणान) चेर $body-bga सेट करपाक वापरात .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>

.h1through .h6classesय उपलब्ध आसात, जेन्ना तुमकां शीर्षकाच्या फॉन्ट स्टायलिंग जुळपाक जाय पूण संबंदीत 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>

शीर्षकां दाखोवप

तुमच्या पानाच्या आशयाच्या मांसांत सगळ्यांत बरे तरेन काम करपाक पारंपारीक शीर्षक घटक तयार केल्यात. जेन्ना तुमकां उबे रावपाक शीर्षकाची गरज आसता, तेन्ना प्रदर्शन शीर्षक वापरपाचो विचार करात —एक व्हडली, मात्शी चड मतां आशिल्ली शीर्षक शैली.

प्रदर्शन 1.

प्रदर्शन 2.

प्रदर्शन 3.

प्रदर्शन 4.

प्रदर्शन 5.

प्रदर्शन ६

<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-sizesSass नकाशा आनी दोन चड-उणें, $display-font-weightआनी $display-line-height.

प्रदर्शन शीर्षकां दोन चड-उणें वरवीं अनुकूल करपाक येतात, $display-font-familyआनी $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$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>

ते टॅग अर्थपूर्ण उद्देशान वापरपाक जाय हाची जतनाय घेयात:

संदर्भ वा संकेतनाच्या उद्देशान चिन्नीत वा हायलाइट केल्लो मजकूर प्रतिनिधित्व करता.
कॉपीराइट आनी कायदेशीर मजकूर सारकिल्या बाजू-टिप्पणीं आनी ल्हान छापांचें प्रतिनिधित्व करता.
<s>आतां प्रासंगीक नाशिल्ल्या वा अचूक नाशिल्ल्या घटकाचें प्रतिनिधित्व करता.
इनलायन मजकूराचो एक स्पॅन दाखयता जो ताका बिगर-मजकूर टिपणी आसा अशें दाखोवपी पद्दतीन रेंडर करपाक जाय.

तुमकां तुमचो मजकूर शैली करपाचो आसल्यार, ताचे बदला तुमी सकयल दिल्ले वर्ग वापरचे:

.markसारकीच शैली लागू करतले .
.smallसारकीच शैली लागू करतले .
.text-decoration-underlineसारकीच शैली लागू करतले .
.text-decoration-line-throughसारकीच शैली लागू करतले <s>.

वयर दाखयल्ले नासतना, वापरपाक मेकळेपणान आनी HTML5 त. अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता, जाल्यार चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.

मजकूर उपयुक्तताय

आमच्या मजकूर उपयुक्तताय आनी रंग उपयुक्तताय कडेन मजकूर संरेखण, रुपांतर, शैली, वजन, रेखा-उंचाय, सजावट आनी रंग बदलात .

संक्षेप

<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>वा ब्लॉक पातळेचो घटक वापरात (देखीक, ) . तशेंच .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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

मिक्सिन हें वखद

टायपोग्राफी खातीर समर्पीत मिक्सिन नात, पूण बूटस्ट्रॅप रिस्पॉन्सिव्ह फॉन्ट साइजिंग (RFS) वापरता .