in English

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

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

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

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

ഓരോ 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.

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

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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">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 വേരിയബിൾ മാറ്റി ബൂട്ട്‌സ്‌ട്രാപ്പ് റീകംപൈൽ ചെയ്തുകൊണ്ട് RFS പ്രവർത്തനക്ഷമമാക്കാം .$enable-responsive-font-sizestrue

RFS പിന്തുണയ്‌ക്കുന്നതിന് , ഞങ്ങളുടെ സാധാരണ font-sizeപ്രോപ്പർട്ടികൾ മാറ്റിസ്ഥാപിക്കാൻ ഞങ്ങൾ ഒരു സാസ് മിക്‌സിൻ ഉപയോഗിക്കുന്നു. റെസ്‌പോൺസീവ് സ്കെയിലിംഗ് സ്വഭാവം പ്രവർത്തനക്ഷമമാക്കുന്നതിന് റെസ്‌പോൺസീവ് ഫോണ്ട് സൈസുകൾ, വ്യൂപോർട്ട് യൂണിറ്റുകൾ എന്നിവയുടെ calc()മിശ്രിതം ഉപയോഗിച്ച് ഫംഗ്‌ഷനുകളായി കംപൈൽ ചെയ്യും . RFS- നെ കുറിച്ചും അതിന്റെ കോൺഫിഗറേഷനെ കുറിച്ചും കൂടുതൽ അതിന്റെ remGitHub റിപ്പോസിറ്ററിയിൽ കാണാം .