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>
ফলাফল
No comments