বুটস্ট্রাপ টেক্সট/টাইপোগ্রাফী - Bootstrap Typography
বুটস্ট্রাপের ডিফল্ট সেটিং
বুটস্ট্রাপে গ্লোবাল ফন্ট-সাইজ হলো ১৪ পিক্সেল, এবং লাইন-উচ্চতা হলো ১.৪২৮।
এটি <body> এবং সকল প্যারাগ্রাফ এলিমেন্টের জন্য প্রযোজ্য।
সকল <p> এলিমেন্টের নিচে মার্জিন আছে যা তার লাইন-উচ্চতার অর্ধেক। (ডিফল্ট হচ্ছে ১০ পিক্সেল)।
বুটস্ট্রাপ এবং ব্রাউজার ডিফল্ট এর পার্থক্য
এই অধ্যায়ে, আমরা এইচটিএমএল এলিমেন্টের দিকে তাকালে দেখতে পাবো যে ব্রাউজারের ডিফল্ট স্টাইলের চেয়ে বুটস্ট্রাপের ডিফল্ট স্টাইলে কিছুটা ভিন্নতা রয়েছে।
<h1> - <h6>
বুটস্ট্রাপ এইচটিএমএল হেডিং এলিমেন্টগুলোকে (<h1> থেকে <h6>) নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>h1 বুটস্ট্রাপ হেডিং (৩৬পিক্সেল)</h1>
<h2>h2 বুটস্ট্রাপ হেডিং (৩০পিক্সেল)</h2>
<h3>h3 বুটস্ট্রাপ হেডিং (২৪পিক্সেল)</h3>
<h4>h4 বুটস্ট্রাপ হেডিং (১৮পিক্সেল)</h4>
<h5>h5 বুটস্ট্রাপ হেডিং (১৪পিক্সেল)</h5>
<h6>h6 বুটস্ট্রাপ হেডিং (১২পিক্সেল)</h6>
</div>
</body>
</html>
ফলাফল
<small>
বুটস্ট্রাপে এইচটিএমএল <small> এলিমেন্ট যেকোনো হেডিং এ একটি লাইটার, সেকেন্ডারি টেক্সট তৈরি করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>h1 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h1>
<h2>h2 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h2>
<h3>h3 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h3>
<h4>h4 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h4>
<h5>h5 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h5>
<h6>h6 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h6>
</div>
</body>
</html>
ফলাফল
<mark>
বুটস্ট্রাপ এইচটিএমএল <mark> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>mark এলিমেন্টের উদাহরণ</h3>
<p>টেক্সকে <mark>হাইলাইট</mark> করার জন্য mark এলিমেন্ট ব্যবহার করা হয়।</p>
</div>
</body>
</html>
ফলাফল
<abbr>
বুটস্ট্রাপ এইচটিএমএল <abbr> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>abbr এলিমেন্টের উদাহরণ</h3>
<p><abbr title="রাজধানী উন্নয়ন কর্তৃপক্ষ">রাজউক</abbr> বাংলাদেশের গণপূর্ত মন্ত্রণালয়ের অধীনে একটি সরকারি সংস্থা
যা রাজধানী ঢাকার উন্নয়ন প্রকল্পসমূহের পরিকল্পনা ও বাস্তবায়ন করে থাকে।</p>
</div>
</body>
</html>
ফলাফল
<blockquote>
বুটস্ট্রাপ এইচটিএমএল <blockquote> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>abbr এলিমেন্টের উদাহরণ</h3>
<blockquote>
<p>বাংলাদেশ দক্ষিণ এশিয়ার একটি জনবহুল রাষ্ট্র। বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের
পশ্চিম, উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত। বাংলাদেশের ভূখণ্ড
ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ। পার্শ্ববর্তী দেশের রাজ্য পশ্চিমবঙ্গ ও ত্রিপুরা-সহ বাংলাদেশ একটি ভৌগোলিকভাবে
জাতিগত ও ভাষাগত "বঙ্গ" অঞ্চলটির মানে পূর্ণ করে। "বঙ্গ" ভূখণ্ডের পূর্বাংশ পূর্ব বাংলা নামে পরিচিত ছিল, যা বর্তমানে বাংলাদেশ
নামের দেশ। পৃথিবীতে যে ক'টি রাষ্ট্র জাতিরাষ্ট্র হিসেবে মর্যাদা পায় তার মধ্যে বাংলাদেশ অন্যতম।</p>
<footer>উইকিপিডিয়া থেকে সংগৃহীত</footer>
</blockquote>
</div>
</body>
</html>
ফলাফল
কোটেশনকে ডানদিকে দেখানোর জন্য .blockquote-reverse ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>abbr এলিমেন্টের উদাহরণ</h3>
<blockquote class="blockquote-reverse">
<p>বাংলাদেশ দক্ষিণ এশিয়ার একটি জনবহুল রাষ্ট্র। বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের
পশ্চিম, উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত। বাংলাদেশের ভূখণ্ড
ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ। পার্শ্ববর্তী দেশের রাজ্য পশ্চিমবঙ্গ ও ত্রিপুরা-সহ বাংলাদেশ একটি ভৌগোলিকভাবে
জাতিগত ও ভাষাগত "বঙ্গ" অঞ্চলটির মানে পূর্ণ করে। "বঙ্গ" ভূখণ্ডের পূর্বাংশ পূর্ব বাংলা নামে পরিচিত ছিল, যা বর্তমানে বাংলাদেশ
নামের দেশ। পৃথিবীতে যে ক'টি রাষ্ট্র জাতিরাষ্ট্র হিসেবে মর্যাদা পায় তার মধ্যে বাংলাদেশ অন্যতম।</p>
<footer>উইকিপিডিয়া থেকে সংগৃহীত</footer>
</blockquote>
</div>
</body>
</html>
ফলাফল
<dl>
বুটস্ট্রাপ এইচটিএমএল <dl> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>dl এলিমেন্টের উদাহরণ</h3>
<dl>
<dt>Coffee</dt>
<dd>- Black hot drink</dd>
<dt>MIlk</dt>
<dd>- White cold drink</dd>
<dt>Cold-drinks</dt>
<dd>- carbonated beverage soft drinks</dd>
</dl>
</div>
</body>
</html>
ফলাফল
<code>
বুটস্ট্রাপ এইচটিএমএল <code> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>code এলিমেন্টের উদাহরণ</h3>
<p>এই এইচটিএমএল কোডগুলোর মাধ্যমে একটি ডকুমেন্টের মধ্যে হেডিং এবং প্যারাগ্রাফ তৈরি করা হয়ঃ
<code>h1</code> - <code>h6</code> এবং <code>p</code></p>
</div>
</body>
</html>
ফলাফল
<kbd>
বুটস্ট্রাপ এইচটিএমএল <kbd> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>kbd এলিমেন্টের উদাহরণ</h3>
<p>সেভ ডায়ালগ বক্স ওপেন করার জন্য <kbd>ctrl + s</kbd> চাপুন।</p>
</div>
</body>
</html>
ফলাফল
<pre>
বুটস্ট্রাপ এইচটিএমএল <pre> এলিমেন্টকে নিম্নলিখিত স্টাইলে প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>pre এলিমেন্টের উদাহরণ</h3>
<pre><code>pre</code> এলিমেন্টের মধ্যের টেক্সট ফিক্সড প্রস্থের
ফন্টে প্রদর্শিত হয়, এছাড়াও এর
মধ্যের স্পেস এবং
লাইন ব্রেকগুলো
ব্রাউজার গননা করে।
</pre>
</div>
</body>
</html>
ফলাফল
কালার এবং ব্যাকগ্রাউন্ড
বুটস্ট্রাপের কিছু কনটেকচুয়াল ক্লাস আছে যারা "অর্থবহ কালার" নির্ধারন করে।
টেক্সট কালারের জন্য ক্লাসগুলো হচ্ছেঃ .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, এবং .text-danger:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>টেক্সট কালারের উদাহরণ</h3>
<p class="text-muted">এই টেক্সটি মিউটেড।</p>
<p class="text-primary">এই টেক্সটটি গুরুত্বপূর্ণ।</p>
<p class="text-success">এই টেক্সটের দ্বারা সফলতা বুঝাচ্ছে।</p>
<p class="text-info">এই টেক্সটি কিছু তথ্য রিপ্রেজেন্ট করে।</p>
<p class="text-warning">এই টেক্সটটি সতর্কতা বুঝাচ্ছে।</p>
<p class="text-danger">এই টেক্সটটি বিপদজনক বুঝাচ্ছে।</p>
</div>
</body>
</html>
ফলাফল
ব্যাকগ্রাউন্ড কালারের ক্লাসগুলো হচ্ছেঃ .bg-primary,
.bg-success, bg-info, bg-warning, এবং .bg-danger:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>ব্যাকগ্রাউন্ড কালারের উদাহরণ</h3>
<p class="bg-primary">এই টেক্সটটি গুরুত্বপূর্ণ।</p>
<p class="bg-success">এই টেক্সটের দ্বারা সফলতা বুঝাচ্ছে।</p>
<p class="bg-info">এই টেক্সটি কিছু তথ্য রিপ্রেজেন্ট করে।</p>
<p class="bg-warning">এই টেক্সটটি সতর্কতা বুঝাচ্ছে।</p>
<p class="bg-danger">এই টেক্সটটি বিপদজনক বুঝাচ্ছে।</p>
</div>
</body>
</html>
ফলাফল
টাইপোগ্রাফীর অন্যান্য ক্লাস
এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য নিম্নোক্ত বুটস্ট্রাপ ক্লাসগুলো ব্যবহার করা যায়ঃ
| ক্লাস | বর্ণনা | উদাহরণ |
|---|---|---|
.lead |
একটি প্যারাগ্রাফকে লক্ষ্যনীয় করে তু্লে। | উদাহরণ দেখুন |
.small |
ছোট টেক্সটকে নির্দেশ করে (প্যারেন্টের ৮৫% সাইজে সেট করে) | উদাহরণ দেখুন |
.text-left |
টেক্সটকে বামে এ্যালাইন করে। | উদাহরণ দেখুন |
.text-center |
টেক্সটকে মাঝখানে এ্যালাইন করে। | উদাহরণ দেখুন |
.text-right |
টেক্সটকে ডানে এ্যালাইন করে। | উদাহরণ দেখুন |
.text-justify |
টেক্সটকে justify করে। | উদাহরণ দেখুন |
.text-nowrap |
টেক্সটে no wrap করে। | উদাহরণ দেখুন |
.text-lowercase |
ছোট হাতের লেখাতে পরিনত করে। | উদাহরণ দেখুন |
.text-uppercase |
বড় হাতের লেখাতে পরিনত করে। | উদাহরণ দেখুন |
.text-capitalize |
লেখাকে capitalize করে। | উদাহরণ দেখুন |
.list-unstyled |
ডিফল্ট লিস্ট-স্টাইল এবং বাম দিকের মার্জিন মুছে ফেলে(<ul> এবং <ol> উভয়ের ক্ষেত্রে কাজ করে )। এই ক্লাস শুধু নেস্টেড লিস্টের সবচেয়ে কাছাকাছি লিস্টে ব্যবহার হয় (এই ক্লাস যেকোনো নেস্টেড লিস্টের ডিফল্ট লিস্ট-স্টাইল মুছে দেয়)। |
উদাহরণ দেখুন |
.list-inline |
সকল লিস্ট আইটেমকে একটি একক লাইনে পরিনত করে ফেলে। | উদাহরণ দেখুন |
.dl-horizontal |
একের পর এক লিস্টের বর্ণনা দেয়। | উদাহরণ দেখুন |