කලින් කියලා දීපූ පාඩම් ටික මතක නම් Boostrap install කරගන්න විදිය හා මූලිකව Boostrap Web එකක් ඩිසයින් වෙන විදිය කියලා දුන්නා මතකනේ. අද අපි පාඩම වෙන් කරන්නේ Boostrap Text/ Typography ගැන. ඒ කියන්නේ අකුරු ටෙක්ස්ට් කෝමද පාවිච්චි කරන්නේ කියලා. අපේ පාඩම් මාලා නිතර බලන කෙනෙක් නම් HTML වල හෙඩින්ග්ස් Headings පරිච්ඡේද නැතිනම් පැරග්‍රාප් Paragraphs වල text භාවිතා වෙන විදිය ඉගෙන ගන්න ඇති.

Bootstrap වලත් ඒ ආකාරයටම Text භාවිතා කල හැකි අතර. සුළු වශයෙන් එහි වෙනස් කම් කිහිපයක් තිබේ. පලමුව අපි Bootstrap හි Text formatting වල තිබෙන විශේෂතා හදුනාගනිමු.

නිතැතින්ම එහි font-size එක 14px ලෙස සැකසී ඇති අතර Line-height
1.428 ලෙස සැකසී තිබෙනවා. මේ සැකසුම් <body> හා <p> යන ඕනෑම ටැග් එකක නිතැතින්ම සැකසී තිබෙනවා.

අමතරව <p> tag වල පහලම මාර්ජින් එක 10px ප්‍රමාණයට සැකසීමක් සිදුවෙනවා. අපිට මේ සැකසුම් සදහා විශේෂ CSS ස්ටයිල්ස් ලිවීම අවශ්‍ය නෑ.


01. H1-H6 HTML HEADINGS – Bootstrap

H1 ආකාරයේ Headings සිට H6 දක්වා ඇති Headings මෙහිදී සැකසෙන ආකාරය පහතින් දැක්වේ. ඒ සදහා විශේෂ ටැග් භාවිතා නොවේ. හෙඩින්ග්ස් සදහා වූ සැකසුම් ම භාවිතා කරයි.

<html>
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</html>

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)


02. Secondary Text – <small>

<small> ටැග් එක ඔබ දන්නවා ඇති. මෙය මාතෘකාවක අනු කොටසක් ප්‍රධාන කොටසින් වෙන්කර කුඩාවට දැක්වීමට heading tags තුලදීම භාවිතා කරයි.

<h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>

Lighter, Secondary Text

The small element is used to create a lighter, secondary text in any heading:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text

03. Highlighted Text – <mark>

මෙම ටැග් එක භාවිතා කිරීමෙන් යම් වචනයක් හෝ වාක්‍යයක් highlight කර පෙන්වනු ලබයි. ඒ සදහා අදාල වචනය <mark> tag තුල යෙදිය යුතු වේ.

<p>Use the mark element to <mark>highlight</mark> text.</p>

Use the mark element to highlight text.


04. Abbreviation Text – <abbr>

Bootstrap වලදී abbreviation වචන හෙවත් කෙටියෙදුම් පෙන්වීමට මෙම ටැග් එක භාවිතා වේ. එහිදි පහත පරිදි ඔබට දැකීමට හැකි වේ. එම ටැගය යෙදු වචනය අසලට මවුස් පොයින්ටරය ගෙන ගිය විට කෙටි යෙදුමට අදාල ව යෙදු දීර්ඝ යෙදීම දිස් වනු ලබයි. පහත උදාහරණය බලන්න කෝ

 <p>The <abbr title="ලංකා දුම්රිය දෙපාර්තමේන්තුව">ලදුදේ</abbr> 1858 වසරේදී ආරම්භ කරන ලදී.</p>

The ලදුදේ 1858 වසරේදී ආරම්භ කරන ලදී.


05. Block Quoted Text – < blockquote >

මෙමගින් යම් යම් උපුටා ගැනීම් එහි මුලාශ්‍රයන් සමග දැක්වීම සදහා භාවිතා කල හැකිය. සහා යම් පුද්ගල ප්‍රකාශ සටහන් කීරීමේදී පුද්ගලයා හා ප්‍රකාශය පැහැදිලි අයුරින් ඉදිරිපත් කල හැකිය.

<blockquote>
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
blockquote html5 bootstrap
slgeek.lk

06. Description List – < dl>

Bootstrap වලදී කිසියම් ලැයිස්තුවක විස්තරාත්මක ඉදිරිපත් කිරීමකදී මෙම ටැගය භාවිතා වේ.

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>
Coffee
Black hot drink
Milk
White cold drink

07. Code < code>

Bootstrap වලදී පරිගණක කේතයක් ආදිය කේත ස්වරූපයෙන් key word දිස්වන ආකාරයෙන් ඉදිරිපත් කරන විට මෙම ටැගය තුල දක්වනු ලබයි..

<code>echo "HELLO";</code>

echo "HELLO";

කේතයේ ප්‍රතිඵල දැක්වීමට <samp> tag එක භාවිතා කරයි.

<samp>hello</samp>

HELLO


08. KeyBoard Short Keys < kbd>

Bootstrap මගින් keyboard කෙටි යෙදුම් පහත පරිදි දක්වයි.

<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

Use ctrl + p to open the Print dialog box.


09. Preview Text – < pre>

Bootstrap මගින් pre යෙදුම් පහත පරිදි දක්වයි.

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

10. Contextual Colors and Backgrounds

වර්ණාලිත වචන භාවිතා කරමින් warnings, notifications ආදිය දැක්වීමට bootstrap සහාය පල කරයි. ඒ සදහා විවිධ classes භාවිතා කරනු ලබයි.

** Text සදහා වු Classes

මේ තියෙන්නේ Text වලට අදාල classes:.text-muted.text-primary.text-success.text-info.text-warning,සහා.text-danger

<p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
Boostrap - Contextual Colors and Backgrounds
slgeek.lk
Background Color classes for Text

මේ තියෙන්නේ අකුරු වල පසුබිම පාට කරන්න යොදාගත හැකි classes:
.bg-primary.bg-success.bg-info.bg-warning, සහා.bg-danger

<p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
 Contextual Colors and Backgrounds
slgeek.lk

ඉතා දිග ලිපියක් තමා අද ඔයාලාට අරන් ආවේ. අපි ඊළග පාඩමෙන් bootstrap තවත් විශේෂාංගයක් ගැන කතා කරමු. මේ ගැන ඔයාලාගේ අදහස් කියන්න කෝ. යාලුවන් එක්ක මේ ලිපිය බෙදා හදාගන්නත් අමතක කරන්න එපා. කමෙන්ට් කරලා ප්‍රශ්න ආදිය ඉදිරිපත් කරන්න.

අදහස් දක්වන්න

අදහස්

‌රැදී සිටින්න...

ඔබත් ගීක් කෙනෙක්ද?

අලුත්ම Geek ලිපි එසැනින් ලබාගන්න අපිව Subscribe කරන්න. දැනුම සොයා යන තරුණ ඔබත් එන්න,ගීක් කෙනෙකු වන්න,

ඔබත් දැන්ම ගීක් කෙනෙක් වෙන්න!

You have successfully subscribed to the Geek

There was an error while trying to send your request. Please try again.

SL Geek LK will use the information you provide on this form to be in touch with you and to provide updates and marketing.

ස්මාර්ට් ගීක් කෙනෙක් වෙන්න! ගීක් මොබයිල් ඇප් එක දාගන්න.

Download Geek App now