Source

मुद्रणकला

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">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

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

लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक आंते.

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

लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक आंते.

स्रोत शीर्षकांत कोण तरी फामाद
<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 एलिट हें नांव
  • मासा हांगा पूर्णांक मोलेस्टी लोरेम
  • प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
  • नुल्ला वोलुत्पात आलिक्वाम वेलिट
    • फासेलस इअकुलिस नेक हें नांव
    • पुरुस सोडलेस अल्ट्रिसीस
    • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
    • एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
  • फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
  • एनियन बस अमेत एरात नुंक
  • एगेट पोर्टिटोर लोरेम
<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.

  • लोरेम इप्सम हें नांव
  • फासेलस इअकुलिस हें नांव
  • नुल्ला वोलुत्पात
<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मजकूर अंडाकारान कापून उडोवपाखातीर वर्ग जोडूंक शकतात.

वर्णन यादी
संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
युइस्मोड हांणी केला

वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.

डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.

मालेसुआदा पोर्टा
एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.
कापून काडिल्ली संज्ञा कापल्या
फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस कॉन्डिमेंटम निभ, उत फर्मेन्टम मासा जस्टो बस अमेट रिसुस.
घोंस घालप
नेस्टेड व्याख्या वळेरी
एनियन पोसुएरे, टॉर्टोर सेड कर्सस फ्युजियाट, ननक ऑग ब्लॅंडिट ननक.
<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माध्यम क्वेरीच्या माळेंतल्या मुळाव्या घटकांचे समायोजन करून मजकूर आनी घटक स्केल करप. बूटस्ट्रॅप तुमकां हें करिना, पूण तुमकां गरज पडल्यार जोडप सामकें सोंपें.

वेव्हारांत ताची एक देख हांगा दिल्या. 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;
  }
}