বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ জামবোট্রন এবং পেজ হেডার


জামবোট্রন তৈরি

জামবোট্রন বলতে একটি বড় বক্সকে বুঝায় যা কোন গুরুত্বপূর্ণ কন্টেন্ট বা তথ্যকে বিশেষভাবে আকর্ষনীয় করে প্রদর্শন করে।

জামবোট্রন হচ্ছে ধূসর রঙ্গের একটি বক্স যার কোণাগুলো রাউন্ড হয় এবং এর ভিতরের টেক্সটের আকার সাধারন টেক্সটের ছেয়ে বড় হয়।

জামবোট্রন তৈরি করার জন্য <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>

ফলাফল