বুটস্ট্রাপ ন্যাভিগেশন বার - Bootstrap Navbar
বুটস্ট্রাপ ন্যাভিগেশন বার
বুটস্ট্রাপ ন্যাভিগেশন বার হলো একটি ন্যাভিগেশন হেডার যা একটি পেজের উপরে ব্যবহার করা হয়:
বুটস্ট্রাপ দ্বারা খুব সহজে ডিভাইসের স্ক্রিন সাইজের উপর নির্ভর করে একটি পেজের ন্যাভিগেশন বারকে প্রসারিত বা কলাপ্স করা যায়।
একটি স্ট্যান্ডার্ড ন্যাভিগেশন বার তৈরি করার জন্য <nav class="navbar navbar-default"> ক্লাস ব্যবহার করা হয়।
কিভাবে ন্যাভিগেশন বারকে একটি পেজের উপরে ব্যবহার করা যায় নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebsiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contract</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
...
নিজে চেষ্টা করি »
একটি ন্যাভিগেশন বার বড় স্ক্রিনের জন্য এক লাইনের হলেও ছোট স্ক্রিনের ডিভাইসের জন্য এটি নিচে নিচে অনেক বড় জায়গা দখল করে নেয়। কারণ বুটস্ট্রাপ সম্পূর্ণ রেসপন্সিভ। ছোট স্ক্রিনের এই সমস্যার সমাধানের জন্য এই পেজের শেষে একটি উদাহরণ দেয়া আছে।
ইনভার্স(Inverse) ন্যাভিগেশন বার
যদি বুটস্ট্রাপের ডিফল্ট ন্যাভিগেশন বারটি আপনার পছন্দ না হয় তাহলে আপনি চাইলে কালো কালারের ন্যাভিগেশন বার ব্যবহার করতে পারেনঃ
এর জন্য শুধুমাত্র .navbar-default ক্লাস এর পরিবর্তে .navbar-inverse ক্লাস ব্যবহার করুনঃ
উদাহরণ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebsiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contract</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
নিজে চেষ্টা করি »
ফিক্সড ন্যাভিগেশন বার
একজন ব্যবহারকারী তার ইচ্ছা মত ন্যাভিগেশন বারকে পেজের উপরে বা নিচে ফিক্সড করতে পারে।
এক্ষেত্রে ন্যাভিগেশন বারটি পেজের উপরে অথবা নিচে ফিক্সড থাকবে এমনকি যখন পেজটি স্ক্রলিং করা হয় তখনও এর অবস্থানের কোন পরিবর্তন হবে না।
ন্যাভিগেশন বারকে পেজের উপরে ফিক্সড করার জন্য .navbar-fixed-top ক্লাসটি ব্যবহার করুনঃ
উদাহরণ
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebsiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contract</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
নিজে চেষ্টা করি »
ন্যাভিগেশন বারকে পেজের নিচে ফিক্সড করার জন্য .navbar-fixed-bottom ক্লাসটি ব্যবহার করুনঃ
উদাহরণ
<nav class="navbar navbar-inverse
navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebsiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contract</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
নিজে চেষ্টা করি »
ন্যাভিগেশন বারের সাথে ড্রপাডাউনের ব্যবহার
আমরা চাইলে একটি ন্যাভিগেশন বারের সাথে ড্রপাডাউনও ব্যবহার করতে পারি।
নিচের এই উদাহরণে "Service" মেনুর মধ্যে ড্রপাডাউন ব্যবহার করা হয়েছে:
উদাহরণ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebsiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Service
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Web-development</a></li>
<li><a href="#">App-development</a></li>
<li><a href="#">Web-security</a></li>
</ul>
</li>
<li><a href="#">Contract</a></li>
<li><a href="#">About us</a></li>
</ul>
</div>
</nav>
নিজে চেষ্টা করি »
ডানে এ্যালাইনকৃত ন্যাভিগেশন বার
ন্যাভিগেশন বারের বাটনকে ডানদিকে নেয়ার জন্য .navbar-right ক্লাস ব্যবহার করুনঃ
এই উদাহরণটিতে "Sign up" এবং "Log in" নামে দুইটি বাটনকে ন্যাভিগেশন বারের ডানদিকে ব্যবহার করা হয়েছে এবং বাটন গুলোর সাথে গ্লিফআইকনও ব্যবহার করা হয়েছেঃ
উদাহরণ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebsiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contract</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span>Sign up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Log in</a></li>
</ul>
</div>
</nav>
নিজে চেষ্টা করি »
কলাপ্সিবল ন্যাভিগেশন বার
ন্যাভিগেশন বার ছোট স্ক্রিনের জন্য অনেক জায়গায় দখল করে।
এই সমস্যার সমাধানের জন্য ছোট স্ক্রিনের ক্ষেত্রে ন্যাভিগেশন বারকে হাইড করে রাখা যায় এবং প্রয়োজনের সময় প্রদর্শন করানো যায়।
এই উদাহরণটিতে ন্যাভিগেশন বারকে উপরে ডানদিকে বাটন আকারে রাখা হয়েছে। এক্ষেত্রে যখনই বাটনে ক্লিক করা হবে তখনই এটি প্রদর্শিত হবে অন্যথায় এটি হাইড হয়ে থাকবেঃ
উদাহরণ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebsiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contract</a></li>
<li><a href="#">About us</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span>Sign up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Log in</a></li>
</ul>
</div>
</div>
</nav>
নিজে চেষ্টা করি »