বুটস্ট্রাপ জামবোট্রন এবং পেজ হেডার - Bootstrap Jumbotron and Page Header
বুটস্ট্রাপ জামবোট্রন তৈরি
বুটস্ট্রাপ জামবোট্রন বলতে একটি বড় বক্সকে বুঝায় যা কোন গুরুত্বপূর্ণ কন্টেন্ট বা তথ্যকে বিশেষভাবে আকর্ষনীয় করে প্রদর্শন করে।
বুটস্ট্রাপ জামবোট্রন হচ্ছে ধূসর রঙ্গের একটি বক্স যার কোণাগুলো রাউন্ড হয় এবং এর ভিতরের টেক্সটের আকার সাধারন টেক্সটের ছেয়ে বড় হয়।
জামবোট্রন তৈরি করার জন্য <div> এলিমেন্টের সাথে .jumbotron ক্লাস ব্যবহার করা হয়ঃ
বুটস্ট্রাপ টিউটোরিয়াল
বুটস্ট্রাপ হচ্ছে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের একটি জনপ্রিয় ফ্রেমওয়ার্ক।
এটি একটি অপেন সোর্স। এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!!
কন্টেইনারের মধ্যে জামবোট্রন
যদি জামবোট্রনকে স্ক্রিনের পুরোটা অংশ নিয়ে দেখাতে না চান তাহলে এটিকে <div class="container"> এর ভিতরে রাখুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Jumbotron 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">
<div class="jumbotron">
<h1>বুটস্ট্রাপ টিউটোরিয়াল</h1>
<p>বুটস্ট্রাপ হচ্ছে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের একটি জনপ্রিয় ফ্রেমওয়ার্ক।</p>
<p>বুটস্ট্রাপ হচ্ছে একটি অপেন সোর্স। এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!!</p>
</div>
<p>স্যাট একাডেমী...</p>
<p>স্যাট একাডেমী...</p>
</div>
</body>
</html>
ফলাফল
কন্টেইনারের বাহিরে জামবোট্রন
যদি জামবোট্রনকে স্ক্রিনের পুরোটা অংশ নিয়ে দেখাতে না চান তাহলে এটিকে <div class="container"> এর বাহিরে রাখুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Jumbotron 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="jumbotron">
<h1>বুটস্ট্রাপ টিউটোরিয়াল</h1>
<p> বুটস্ট্রাপ হচ্ছে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের একটি জনপ্রিয় ফ্রেমওয়ার্ক।</p>
<p> বুটস্ট্রাপ হচ্ছে একটি অপেন সোর্স। এটি ডাউনলোড এবং ব্যবহার সম্পূর্ণ ফ্রি!!</p>
</div>
<div class="container">
<p>স্যাট একাডেমী.</p>
<p>স্যাট একাডেমী...</p>
</div>
</body>
</html>
ফলাফল
পেজ হেডার তৈরি
পেজ হেডার অনেকটা সেকশন ডিভাইডারের মতো।
.page-header ক্লাস হেডিংয়ের নিচে একটি আনুভূমিক রেখা যুক্ত করে এবং এলিমেন্টের চারপাশে কিছু অতিরিক্ত স্পেস যুক্ত করে নেয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Jumbotron 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">
<div class="page-header">
<h1>পেজ হেডারের উদাহরন!</h1>
</div>
<p>দেশের বৃহত্তম কম্পিউটার প্রোগ্রামিং শেখার একমাত্র বৃহত্তম প্রতিষ্ঠান স্যাট একাডেমী।</p>
<p>এখানে সম্পূর্ণ বিনামূল্যে কম্পিউটার প্রোগ্রামিং এর উপর প্রশিক্ষণ দেয়া হয়।</p>
</div>
</body>
</html>
ফলাফল