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

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

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

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

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

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

Vivamus sagittis lacus vel ague laoreet rutrum faucibus dolor auctor. ഡ്യൂയിസ് മോളിസ്, ഇത് നോൺ കമോഡോ ലക്റ്റസ് ആണ്.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

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

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

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

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

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

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

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

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

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

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

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

മുകളിൽ കാണിച്ചിട്ടില്ലെങ്കിലും, HTML5- <b>ലും ഉപയോഗിക്കാൻ മടിക്കേണ്ടതില്ല. വോയ്‌സ്, ടെക്‌നിക്കൽ പദങ്ങൾ മുതലായവയ്‌ക്കായി അധിക പ്രാധാന്യം നൽകാതെ വാക്കുകളോ ശൈലികളോ ഹൈലൈറ്റ് ചെയ്യുന്നതാണ് ഇത്.<i><b><i>

ടെക്സ്റ്റ് യൂട്ടിലിറ്റികൾ

ഞങ്ങളുടെ ടെക്സ്റ്റ് യൂട്ടിലിറ്റികളും കളർ യൂട്ടിലിറ്റികളും ഉപയോഗിച്ച് ടെക്സ്റ്റ് വിന്യാസം, രൂപാന്തരം, ശൈലി, ഭാരം, നിറം എന്നിവ മാറ്റുക .

ചുരുക്കെഴുത്തുകൾ

<abbr>വിപുലീകരിച്ച പതിപ്പ് ഹോവറിൽ കാണിക്കുന്നതിന് ചുരുക്കങ്ങൾക്കും ചുരുക്കെഴുത്തുകൾക്കുമായി HTML ന്റെ മൂലകത്തിന്റെ ശൈലിയിലുള്ള നടപ്പിലാക്കൽ . ചുരുക്കെഴുത്തുകൾക്ക് ഒരു ഡിഫോൾട്ട് അടിവരയുമുണ്ട്, കൂടാതെ ഹോവറിൽ അധിക സന്ദർഭം നൽകാനും സഹായക സാങ്കേതികവിദ്യകളുടെ ഉപയോക്താക്കൾക്ക് ഒരു ഹെൽപ്പ് കഴ്‌സർ നേടാനും കഴിയും.

.initialismഅൽപ്പം ചെറിയ ഫോണ്ട്-സൈസിനായി ഒരു ചുരുക്കെഴുത്ത് ചേർക്കുക .

atr

HTML

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

ലോറെം ഇപ്സം ഡോളോർ സിറ്റ് അമെറ്റ്
കൺസെക്റ്റൂർ അഡിപിസ്സിംഗ് എലിറ്റ്
പൂർണ്ണസംഖ്യ മോളസ്‌റ്റി ലോറം അറ്റ് മാസ്‌
പ്രെറ്റിയം നിസ്ൽ അലിക്വറ്റിലെ സൗകര്യം
Nulla volutpat aliquam velit
- ഫാസെല്ലസ് ഐക്യുലിസ് നെക്വെ
- പുരുസ് സോഡൽസ് അൾട്രിസികൾ
- വെസ്റ്റിബുലം ലൗറെറ്റ് പോർട്ടിറ്റർ സെം
- AC tristique libero volutpat at
ഫൗസിബസ് പോർട്ട ലാക്കസ് ഫ്രിംഗില്ല വേൽ
എനിയൻ ഇരിക്കുന്നു
എഗെറ്റ് പോർട്ടിറ്റർ ലോറം

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

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

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

യൂയിസ്മോഡ്

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

ഡോനെക് ഐഡി എലിറ്റ് നോൺ മൈ പോർട്ട ഗ്രാവിഡ അറ്റ് എഗെറ്റ് മെറ്റസ്.

Malesuada പോർട്ട

Etiam porta sem malesuada Magna mollis euismod.

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

ഫ്യൂസ് ഡാപിബസ്, ടെല്ലസ് എസി കർസസ് കമ്മോഡോ, ടോർട്ടർ മൗറിസ് കോൺഡിമെന്റം നിബ്, യുട്ട് ഫെർമെന്റം മാസ് ജസ്തോ സിറ്റ് അമെറ്റ് റിസസ്.

നെസ്റ്റിംഗ്

നെസ്റ്റഡ് ഡെഫനിഷൻ ലിസ്റ്റ്: എനിയൻ പോസുവേർ, ടോർട്ടോർ സെഡ് കർസസ് ഫ്യൂജിയാറ്റ്, നോൺക് ഓഗ് ബ്ലാൻഡിറ്റ് നൺക്.

<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നിങ്ങൾക്ക് താൽപ്പര്യമുള്ളവയും മീഡിയ ചോദ്യങ്ങളും തിരഞ്ഞെടുക്കുക .

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