মেনু
অধিকাংশ ওয়েব পেইজ এর ই কিছু Menu রয়েছে।
Html এ, একটি মেনু প্রায়ই একটি unordered তালিকা <ul> এর মধ্যে সংজ্ঞায়িত করা হয়।
উদাহরনণঃ
<ul> <li><a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul>
Bootstrap উপরের Menu প্রদর্শনের জন্য দুইটি উপায় অবলম্বন করে, যেমনঃ tabs and pills.
Tabs
Tabs নির্মিত হয় <ul class="nav nav-tabs"> নিয়ে।
বিঃদ্রঃ এ ছাড়াও বর্তমান পেইজেও <li class="active"> চিহ্নিত ।
নীচের উদাহরণ গুলো navigation tabs তৈরি করেঃ
উদাহরনঃ
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Tabs With Dropdown
ট্যাব গুলোতে dropdown Menu রাখা যায়।
নিম্নলিখিত উদাহরণে "মেনু 1" এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।
উদাহরনঃ
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Pills
Pills নির্মিত হয় <ul class="nav nav-pills"> দ্বারা । এ ছাড়াও <li class="active"> বর্তমান page এ চিহ্নিত ।
উদাহরনঃ
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Vertical Pills
Pills লম্বালম্বি ভাবেও প্রদর্শিত হতে পারে। এই ক্ষেত্রে শুধু “.nav-stacked” class টি ব্যবহার করতে হবে।
নিম্নলিখিত উদাহরণে উলম্ব Pill Menu টিকে শেষ কলামের মধ্যে রাখা হয়েছে। তাই বড় পর্দায় মেনুটি ডান পাশে প্রদর্শিত হবে। কিন্তু একটি ছোট পর্দায়, বিষয়বস্তু স্বয়ংক্রিয়ভাবে একটি একক কলামের বিন্যাস মধ্যে নিজেই সমন্বয় করে নিবে।
উদাহরনঃ
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
Pills With Dropdown Menu
Pills এর মধ্যেও Dropdown রাখা যায়।
নিম্নলিখিত উদাহরণে "মেনু 1" এ একটি ড্রপডাউন মেনু যোগ করা হয়েছে।
উদাহরনঃ
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
