in English

मुद्रणकला

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

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

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

  • दरेक OS आनी डिव्हायसा खातीर सगळ्यांत बरें निवडपी मुळ फॉन्ट स्टॅक वापरात .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>, उपलब्ध आसात.

शीर्षक उदारण
<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.
<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 घटकांखातीर स्टायलिंग.

तुमी मार्क टॅग वापरूं येता 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>

वयर दाखयल्ले नासतना, वापरपाक मेकळेपणान <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 class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

एका स्रोताचें नांव दिवप

<footer class="blockquote-footer">स्रोत वळखुपाखातीर एक जोडात . स्त्रोत कार्याचें नांव <cite>.

एक नामनेचें उद्धरण, ब्लॉककोट घटकांत आशिल्लें.

स्रोत शीर्षकांत कोण तरी फामाद
<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 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 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.

  • ही एक वळेरी आयटम आसा.
  • आनी आनीक एक.
  • पूण ते इनलायन दाखयतात.
<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 सावन, बूटस्ट्रॅप प्रतिसाद दिवपी फॉन्ट आकार सक्षम करपाचो पर्याय घेवन धाडटा, मजकूर डिव्हायस आनी व्यूपोर्ट आकारां मदीं चड सैमीक रितीन स्केल करपाक परवानगी दिता. Sass चडांत चड Bootstrap कडेन बदलून आनी परतून संकलित करून RFS सक्षम करूंक शकता.$enable-responsive-font-sizestrue

RFS चो आदार दिवपाक , आमी आमच्या सामान्य font-sizeगुणधर्मांक बदलपाक Sass mixin वापरतात . प्रतिसाद दिवपी फॉन्ट आकार प्रतिसाद दिवपी मापन वर्तन सक्षम करपाक आनी दृश्यपोर्ट एककांच्या calc()मिश्रणा वांगडा कार्यांत संकलित करतले . RFSrem आनी ताचे संरचनेविशीं चड ताच्या GitHub भंडाराचेर मेळूं येता .