Dulan Dalugama
Latest posts by Dulan Dalugama (see all)
- Web Development – Form Handling with PHP – #පාඩම 12 - July 17, 2019
- Carousel Sliders නිර්මාණය කරගැනීම – Responsive Web Designing #Lesson 4 - July 5, 2019
- SLT Selfcare App – Sri Lanka Telecom - January 30, 2019
කලින් කියලා දීපූ පාඩම් ටික මතක නම් 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>
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>
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>
ඉතා දිග ලිපියක් තමා අද ඔයාලාට අරන් ආවේ. අපි ඊළග පාඩමෙන් bootstrap තවත් විශේෂාංගයක් ගැන කතා කරමු. මේ ගැන ඔයාලාගේ අදහස් කියන්න කෝ. යාලුවන් එක්ක මේ ලිපිය බෙදා හදාගන්නත් අමතක කරන්න එපා. කමෙන්ට් කරලා ප්‍රශ්න ආදිය ඉදිරිපත් කරන්න.
