ടൈപ്പോഗ്രാഫി

ആഗോള ക്രമീകരണങ്ങൾ, തലക്കെട്ടുകൾ, ബോഡി ടെക്‌സ്‌റ്റ്, ലിസ്റ്റുകൾ എന്നിവയും അതിലേറെയും ഉൾപ്പെടെ, ബൂട്ട്‌സ്‌ട്രാപ്പ് ടൈപ്പോഗ്രാഫിക്കുള്ള ഡോക്യുമെന്റേഷനും ഉദാഹരണങ്ങളും.

ഈ പേജിൽ

ആഗോള ക്രമീകരണങ്ങൾ

ബൂട്ട്സ്ട്രാപ്പ് അടിസ്ഥാന ആഗോള ഡിസ്പ്ലേ, ടൈപ്പോഗ്രാഫി, ലിങ്ക് ശൈലികൾ എന്നിവ സജ്ജമാക്കുന്നു. കൂടുതൽ നിയന്ത്രണം ആവശ്യമുള്ളപ്പോൾ, ടെക്സ്റ്റ്വൽ യൂട്ടിലിറ്റി ക്ലാസുകൾ പരിശോധിക്കുക .

ഓരോ OS-നും ഉപകരണത്തിനും ഏറ്റവും മികച്ചത് തിരഞ്ഞെടുക്കുന്ന ഒരു നേറ്റീവ് ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിക്കുക.font-family
കൂടുതൽ ഉൾക്കൊള്ളുന്നതും ആക്സസ് ചെയ്യാവുന്നതുമായ തരം സ്കെയിലിനായി, ഞങ്ങൾ ബ്രൗസറിന്റെ ഡിഫോൾട്ട് റൂട്ട് font-size(സാധാരണയായി 16px) ഉപയോഗിക്കുന്നു, അതിനാൽ സന്ദർശകർക്ക് അവരുടെ ബ്രൗസർ ഡിഫോൾട്ടുകൾ ആവശ്യാനുസരണം ഇഷ്ടാനുസൃതമാക്കാനാകും.
$font-family-baseഞങ്ങളുടെ ടൈപ്പോഗ്രാഫിക് അടിസ്ഥാനമായി , $font-size-base, $line-height-baseആട്രിബ്യൂട്ടുകൾ എന്നിവ ഉപയോഗിക്കുക <body>.
വഴി ആഗോള ലിങ്ക് നിറം സജ്ജമാക്കുക $link-color.
( സ്ഥിരസ്ഥിതിയായി) ഒരു $body-bgസജ്ജീകരിക്കാൻ ഉപയോഗിക്കുക .background-color<body>#fff

ഈ ശൈലികൾ ഉള്ളിൽ കണ്ടെത്താൻ കഴിയും _reboot.scss, കൂടാതെ ആഗോള വേരിയബിളുകൾ നിർവചിച്ചിരിക്കുന്നത് _variables.scss. സജ്ജീകരിക്കുന്നത് ഉറപ്പാക്കുക $font-size-base.rem

തലക്കെട്ടുകൾ

<h1>വഴിയുള്ള എല്ലാ HTML തലക്കെട്ടുകളും <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.h6ഒരു തലക്കെട്ടിന്റെ ഫോണ്ട് സ്റ്റൈലിംഗുമായി പൊരുത്തപ്പെടാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിലും അനുബന്ധ HTML ഘടകം ഉപയോഗിക്കാൻ കഴിയാതെ വരുമ്പോൾ ക്ലാസുകൾ വഴിയും ലഭ്യമാണ് .

h1. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h2. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h3. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h4. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h5. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

h6. ബൂട്ട്സ്ട്രാപ്പ് തലക്കെട്ട്

html

<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-ൽ നിന്ന് ചെറിയ ദ്വിതീയ തലക്കെട്ട് ടെക്‌സ്‌റ്റ് പുനഃസൃഷ്ടിക്കാൻ ഉൾപ്പെടുത്തിയിരിക്കുന്ന യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുക.

മങ്ങിയ ദ്വിതീയ വാചകത്തോടുകൂടിയ ഫാൻസി ഡിസ്പ്ലേ തലക്കെട്ട്

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

പ്രദർശന തലക്കെട്ടുകൾ

നിങ്ങളുടെ പേജ് ഉള്ളടക്കത്തിന്റെ മാംസത്തിൽ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്ന തരത്തിലാണ് പരമ്പരാഗത തലക്കെട്ട് ഘടകങ്ങൾ രൂപകൽപ്പന ചെയ്തിരിക്കുന്നത്. വേറിട്ടുനിൽക്കാൻ നിങ്ങൾക്ക് ഒരു തലക്കെട്ട് ആവശ്യമുള്ളപ്പോൾ, ഒരു ഡിസ്പ്ലേ തലക്കെട്ട് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക - വലുതും അൽപ്പം കൂടുതൽ അഭിപ്രായമുള്ളതുമായ തലക്കെട്ട് ശൈലി.

ഡിസ്പ്ലേ 1

ഡിസ്പ്ലേ 2

ഡിസ്പ്ലേ 3

ഡിസ്പ്ലേ 4

ഡിസ്പ്ലേ 5

ഡിസ്പ്ലേ 6

<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സാസ് മാപ്പിലൂടെയും രണ്ട് വേരിയബിളുകളിലൂടെയും ക്രമീകരിച്ചിരിക്കുന്നു, $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.

ഇതൊരു ലീഡ് ഖണ്ഡികയാണ്. ഇത് സാധാരണ ഖണ്ഡികകളിൽ നിന്ന് വേറിട്ടുനിൽക്കുന്നു.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

ഇൻലൈൻ ടെക്സ്റ്റ് ഘടകങ്ങൾ

സാധാരണ ഇൻലൈൻ HTML5 ഘടകങ്ങൾക്കുള്ള സ്റ്റൈലിംഗ്.

നിങ്ങൾക്ക് അടയാള ടാഗ് ഉപയോഗിക്കാംഹൈലൈറ്റ്വാചകം.

വാചകത്തിന്റെ ഈ വരി ഇല്ലാതാക്കിയ വാചകമായി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

ഈ ടെക്‌സ്‌റ്റ് വരി ഇനി കൃത്യമല്ലാത്തതായി കണക്കാക്കാനാണ് ഉദ്ദേശിക്കുന്നത്.

ഈ വാചകം പ്രമാണത്തിന്റെ ഒരു കൂട്ടിച്ചേർക്കലായി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

ടെക്‌സ്‌റ്റിന്റെ ഈ വരി അടിവരയിട്ടതുപോലെ റെൻഡർ ചെയ്യും.

വാചകത്തിന്റെ ഈ വരി ഫൈൻ പ്രിന്റ് ആയി കണക്കാക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്.

ഈ വരി ബോൾഡ് ടെക്‌സ്‌റ്റായി റെൻഡർ ചെയ്‌തു.

ഈ വരി ചെരിഞ്ഞ വാചകമായി റെൻഡർ ചെയ്‌തു.

html

<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അൽപ്പം ചെറിയ ഫോണ്ട്-സൈസിനായി ഒരു ചുരുക്കെഴുത്ത് ചേർക്കുക .

atr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

ബ്ലോക്ക്ക്വോട്ടുകൾ

നിങ്ങളുടെ പ്രമാണത്തിനുള്ളിലെ മറ്റൊരു ഉറവിടത്തിൽ നിന്നുള്ള ഉള്ളടക്കത്തിന്റെ ബ്ലോക്കുകൾ ഉദ്ധരിക്കാൻ. ഉദ്ധരണിയായി ഏതെങ്കിലും HTML പൊതിയുക <blockquote class="blockquote">.

ഒരു ബ്ലോക്ക്‌ക്വോട്ട് എലമെന്റിൽ അടങ്ങിയിരിക്കുന്ന അറിയപ്പെടുന്ന ഉദ്ധരണി.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

ഒരു ഉറവിടത്തിന് പേരിടുന്നു

എച്ച്ടിഎംഎൽ സ്പെസിഫിന്, ബ്ലോക്ക്ക്വോട്ട് ആട്രിബ്യൂഷൻ ന് പുറത്ത് സ്ഥാപിക്കേണ്ടതുണ്ട് <blockquote>. ആട്രിബ്യൂഷൻ നൽകുമ്പോൾ, നിങ്ങളുടെ <blockquote>a ൽ പൊതിഞ്ഞ്, ക്ലാസിനൊപ്പം <figure>ഒരു <figcaption>അല്ലെങ്കിൽ ബ്ലോക്ക് ലെവൽ ഘടകം (ഉദാ, ) ഉപയോഗിക്കുക. .blockquote-footerഉറവിട സൃഷ്ടിയുടെ പേരും പൊതിയുന്നത് ഉറപ്പാക്കുക <cite>.

ഒരു ബ്ലോക്ക്‌ക്വോട്ട് എലമെന്റിൽ അടങ്ങിയിരിക്കുന്ന അറിയപ്പെടുന്ന ഉദ്ധരണി.

html

<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>

വിന്യാസം

നിങ്ങളുടെ ബ്ലോക്ക്‌ക്വോട്ടിന്റെ വിന്യാസം മാറ്റാൻ ആവശ്യമായ ടെക്സ്റ്റ് യൂട്ടിലിറ്റികൾ ഉപയോഗിക്കുക.

ഒരു ബ്ലോക്ക്‌ക്വോട്ട് എലമെന്റിൽ അടങ്ങിയിരിക്കുന്ന അറിയപ്പെടുന്ന ഉദ്ധരണി.

html

<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>

ഒരു ബ്ലോക്ക്‌ക്വോട്ട് എലമെന്റിൽ അടങ്ങിയിരിക്കുന്ന അറിയപ്പെടുന്ന ഉദ്ധരണി.

html

<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ഇടത് മാർജിനും നീക്കം ചെയ്യുക (ഉടൻ കുട്ടികൾ മാത്രം). ഇത് ഉടനടിയുള്ള കുട്ടികളുടെ ലിസ്റ്റ് ഇനങ്ങൾക്ക് മാത്രമേ ബാധകമാകൂ , അതായത് ഏതെങ്കിലും നെസ്റ്റഡ് ലിസ്റ്റുകൾക്കും നിങ്ങൾ ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്.

ഇതൊരു പട്ടികയാണ്.
ഇത് പൂർണ്ണമായും ശൈലിയില്ലാത്തതായി തോന്നുന്നു.
ഘടനാപരമായി, ഇത് ഇപ്പോഴും ഒരു പട്ടികയാണ്.
എന്നിരുന്നാലും, ഈ ശൈലി ഉടനടി ശിശു ഘടകങ്ങൾക്ക് മാത്രമേ ബാധകമാകൂ.
നെസ്റ്റഡ് ലിസ്റ്റുകൾ:
- ഈ ശൈലി ബാധിക്കില്ല
- ഇനിയും ഒരു ബുള്ളറ്റ് കാണിക്കും
- ഒപ്പം ഉചിതമായ ഇടത് മാർജിൻ ഉണ്ടായിരിക്കും
ചില സാഹചര്യങ്ങളിൽ ഇത് ഇപ്പോഴും ഉപയോഗപ്രദമാകും.

html

<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.

ഇതൊരു ലിസ്റ്റ് ഇനമാണ്.
ഒപ്പം മറ്റൊന്ന്.
എന്നാൽ അവ ഇൻലൈനിൽ പ്രദർശിപ്പിച്ചിരിക്കുന്നു.

html

<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ദൈർഘ്യമേറിയ നിബന്ധനകൾക്കായി, ഒരു എലിപ്‌സിസ് ഉപയോഗിച്ച് ടെക്‌സ്‌റ്റ് ചുരുക്കാൻ നിങ്ങൾക്ക് ഓപ്‌ഷണലായി ഒരു ക്ലാസ് ചേർക്കാം .

വിവരണ ലിസ്റ്റുകൾ

നിബന്ധനകൾ നിർവചിക്കുന്നതിന് ഒരു വിവരണ പട്ടിക അനുയോജ്യമാണ്.

കാലാവധി

പദത്തിന്റെ നിർവചനം.

കൂടാതെ കുറച്ച് പ്ലെയ്‌സ്‌ഹോൾഡർ ഡെഫനിഷൻ ടെക്‌സ്‌റ്റ്.

മറ്റൊരു പദം

ഈ നിർവചനം ചെറുതാണ്, അതിനാൽ അധിക ഖണ്ഡികകളോ മറ്റോ ഇല്ല.

വെട്ടിച്ചുരുക്കിയ പദം വെട്ടിച്ചുരുക്കി

ഇടം കുറവായിരിക്കുമ്പോൾ ഇത് ഉപയോഗപ്രദമാകും. അവസാനം ഒരു ദീർഘവൃത്തം ചേർക്കുന്നു.

നെസ്റ്റിംഗ്

നെസ്റ്റഡ് ഡെഫനിഷൻ ലിസ്റ്റ്: നിങ്ങൾക്ക് ഡെഫനിഷൻ ലിസ്റ്റുകൾ ഇഷ്ടമാണെന്ന് ഞാൻ കേട്ടു. നിങ്ങളുടെ ഡെഫനിഷൻ ലിസ്റ്റിൽ ഒരു ഡെഫനിഷൻ ലിസ്റ്റ് ഇടാം.

html

<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>

പ്രതികരിക്കുന്ന ഫോണ്ട് വലുപ്പങ്ങൾ

ബൂട്ട്‌സ്‌ട്രാപ്പ് 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) ഉപയോഗിക്കുന്നു .