Bootstrap এর প্রাথমিক (default ) ফন্ট সাইজ হল ১৪ পিক্সেল, যার প্রতি লাইনের উচ্চতা (height) ১.৪২৮ ।
এটা <body> এবং সমস্ত প্যরাগ্রাফে ব্যবহার করা হয় ।
উপরন্তু, সকল <p> elements এর একটি bottom margin থাকে যেটা তাদের নির্ণিত line-height এর সমান অথবা অর্ধেক (ডিফল্ট হিসেবে 10px)
বুটস্ট্র্যাপ বনাম ব্রাউজার ডিফল্ট
এই অনুশীলনীতে আমারা দেখব বুটস্ট্র্যাপ এবং এর পরে ব্রাউজার এর সাহায্যে HTML এলিমেন্টকে কিছুটা ভিন্নতরভাবে স্টাইল করা।
<h1> - <h6>
Default হিসাবে, বুটস্ট্র্যাপ HTML হেডিংকে (<h1> to <h6>) নিম্নোক্তভাবে স্টাইল করে :
কোড :
<div class="container"> <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> </div>
উল্লেখ্য : এই অনুচ্ছেদের প্রতিটি উদাহরণ নিয়ে কাজ করার ক্ষেত্রে হেড অংশে নিম্নোক্ত কোড অবশ্যই লিখতে হবে :
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap .min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head>
<small>
Bootstrap এ HTML <small> এলিমেন্টকে কিছুটা আলোকিত এবং দ্বীতিয় পর্যায়ের টেক্স তৈরি করার জন্য ব্যবহার করা হয়।
কোড :
<div class="container"> <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> </div>
<mark>
Bootstrap, HTML <mark> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।
কোড :
<div class="container"> <p>Use the mark element to <mark>highlight</mark> text.</p> </div>
<abbr>
Bootstrap, HTML <abbr> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।
কোড :
<div class="container"> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> </div>
<blockquote>
HTML <blockquote> এলিমেন্ট Bootstrap এ নিচের মত স্টাইল হয় :
কোড :
<div class="container"> <h1>Blockquotes</h1> <p>The blockquote element is used to present content from another source:</p> <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> </div>
.blockquote-reverse class টি ব্যবহার করা হয় ডান পাশে quote দেখানোর জন্য
কোড :
<div class="container"> <h1>Blockquotes</h1> <p>To show the quote on the right use the class .blockquote-reverse:</p> <blockquote class="blockquote-reverse"> <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> </div>
<dl>
HTML <dl> এর সাহায্যে Bootstrap এ নিচের style টি তৈরি হয়
কোড :
<div class="container"> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </div>
<code>
Bootstrap এ HTML <code> এলিমেন্ট নিচের মত স্টাইল হয় :
কোড :
<div class="container"> <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p> </div>
<kbd>
Bootstrap এ HTML <kbd> এলিমেন্ট নিচের মত স্টাইল হয় :
কোড:
<div class="container"> <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p> </div>
<pre>
HTML <pre>এর সাহায্যে Bootstrap এ নিচের style তৈরি হয়
কোড:
<div class="container"> <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks. </pre> </div>
প্রাসঙ্গিক রং এবং ব্যাকগ্রাউন্ড
Bootstrap এ কিছু প্রাসঙ্গিক class আছে, যার মাধ্যমে অর্থবহ রং তৈরি করা যায়।
টেক্সট এর জন্য class গুলো হচ্ছে :.text-muted, .text-primary, .text-success, .text-info, .text-warning, এবং .text-danger:
কোড :
<div class="container"> <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> </div>
ব্যাকগ্রাউন্ট এর জন্য class গুলো হচ্ছে : .bg-primary, .bg-success, bg-info, bg-warning, এবং .bg-danger:
কোড:
<div class="container"> <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> </div>
অন্যান্য টাইপোগ্রাফি Class
- .lead
- .small
- .text-left
- .text-center
- .text-right
- .text-justify
- .text-nowrap
- .text-lowercase
- .text-uppercase
- .text-capitalize
- .initialism
- .list-unstyled
- .list-inline
- .dl-horizontal
- .pre-scrollable
এগুলো ব্যবহারের ফলাফল দেখার জন্য <p class="lead">এখানে আপনার টেক্সট লিখুন</p> লাইনের class=’উপরের যেকোন একটি ক্লাস’ লিখে চেষ্টা করুন।
