TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 নেভিগেশন তৈরি করবেন?

2

বুটস্ট্র্যাপের এনএভি উপাদানটি বিভিন্ন স্টাইলের সাথে লিঙ্কগুলির তালিকা তৈরি করতে ব্যবহৃত হয়। মূলত তালিকার লিঙ্কগুলি একটি নেভিগেশনাল মেনু হিসাবে ব্যবহৃত হয়। এই টিউটোরিয়ালে আসুন লিঙ্কগুলির বিভিন্ন শৈলী অন্বেষণ করি যা বুটস্ট্র্যাপ 5 এনভি উপাদান দিয়ে তৈরি করা যায়।

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

  1. বেসিক এনএভি লিঙ্ক তৈরি করা
  2. উল্লম্ব নং
  3. এনএভি সহ ট্যাব
  4. এনএভিতে বড়ি যোগ করা
  5. বড়ি এবং ন্যায্য প্রান্তিককরণ সঙ্গে Nav
  6. প্রতিক্রিয়াশীল নেভিগেশন
  7. ড্রপডাউন মেনু সহ নেভ
  8. উল্লম্ব ট্যাব এবং বড়ি সঙ্গে Nav

১ টি বেসিক লিংক

ডিফল্ট এবং বেসিক এনএভি নীচের মত দেখাবে:

বেসিক এনএভির কোড নিম্নরূপ:

<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

ডিফল্ট এনএভি উপাদান তৈরিতে ব্যবহৃত ক্লাসগুলি নীচে রয়েছে:

  • সম্পূর্ণ এনএভি ".nav" ক্লাস ব্যবহার করে একটি অনিয়ন্ত্রিত তালিকা।
  • প্রতিটি
  • ট্যাগটি ".nav-item" শ্রেণী ব্যবহার করে একটি নেভ আইটেম উপস্থাপন করে।
  • ভিতরে
  • ট্যাগ, নোঙ্গর ট্যাগটি ".nav-link" ক্লাস ব্যবহার করে প্রকৃত পাঠ্যের লিঙ্ক তৈরি করতে ব্যবহৃত হয়।

এনএভি এর বিষয়বস্তু কেন্দ্রের মধ্যে এবং ডানদিকে অতিরিক্ত ক্লাস ব্যবহার করে ঠিক করা যায়

নিচের মত ট্যাগ:

  • <ul class = "nav justify-content-center”>-কেন্দ্র সারিবদ্ধতার জন্য।
  • <ul class = “nav justify-content-end”>-শেষ বা ডান সারিবদ্ধতার জন্য।
  • <ul class = “nav nav-fill”>-সম্পূর্ণ অনুভূমিক প্রস্থ পূরণ করুন।
  • <ul class = “nav nav-justified”>-প্রতিটি NAV লিংকের সমান প্রস্থ দিয়ে পূর্ণ অনুভূমিক প্রস্থ পূরণ করুন।

2 উল্লম্ব Nav

আপনি নীচের চিত্রের মতো অনুভূমিকের পরিবর্তে উল্লম্ব লিঙ্কগুলিতে পুরো এনএভি সামঞ্জস্য তৈরি করতে "ফ্লেক্স-কলাম" ক্লাস ব্যবহার করতে পারেন:

এবং উল্লম্ব NAV উপাদান তৈরির কোড নিচে দেওয়া হল:

<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

3 Nav দিয়ে ট্যাব তৈরি করা

আপনি ভিতরে ".nav-tabs" ক্লাস ব্যবহার করে সহজেই ট্যাবযুক্ত সামগ্রী তৈরি করতে পারেন

নিচের মত ট্যাগ:

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

".Nav-tabs" ক্লাস ডিফল্ট NAV কে নিচের মত একটি ট্যাবে রূপান্তর করবে:

কিভাবে বুটস্ট্র্যাপ 5 নেভিগেশন তৈরি করবেন?

4 নাভিতে বড়ি যোগ করা

আপনি।

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

ব্রাউজারে ফলাফল নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 নেভিগেশন তৈরি করবেন?

5 বড়ি এবং ন্যায়সঙ্গত সংমিশ্রণ সঙ্গে Nav

আপনি যদি নেভিগেশন আইটেমগুলিকে সম্পূর্ণ প্রস্থে ন্যায়সঙ্গত করতে চান তাহলে নীচের মত ".nav-fill" ক্লাস যোগ করুন:

<ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

এটি নিম্নলিখিত ফলাফল উত্পাদন করবে:

কিভাবে বুটস্ট্র্যাপ 5 নেভিগেশন তৈরি করবেন?

6 প্রতিক্রিয়াশীল Nav কম্পোনেন্ট

এখন পর্যন্ত তৈরি এনএভি উপাদানগুলি প্রতিক্রিয়াশীল নয় এবং এটিকে প্রতিক্রিয়াশীল করতে আপনার অতিরিক্ত ফ্লেক্সবক্স ইউটিলিটি ক্লাস যুক্ত করা উচিত। উদাহরণস্বরূপ, আমরা নীচের মত ".flex-md-row" ক্লাস ব্যবহার করে মাঝারি আকারের ডিভাইস থেকে এটিকে নমনীয় করতে পারি:

<ul class="nav nav-pills flex-column flex-md-row"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

7 নেভে ড্রপডাউন মেনু যোগ করা

ড্রপডাউন toোকানোর জন্য ".dropdown" ক্লাস ব্যবহার করুন এবং তারপর ".dropdown-menu" এবং ".dropdown-item" ক্লাস ব্যবহার করে মেনু আইটেমগুলি ব্যবহার করুন।

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <a class="dropdown-item" href="#">Link 4</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 5</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 6</a> </li> </ul>

বড়ি সহ ড্রপডাউন এনএভি উপাদানটি নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 নেভিগেশন তৈরি করবেন?

8 উল্লম্ব ট্যাব এবং বড়ি সঙ্গে Nav

আপনি গ্রিড লেআউট ব্যবহার করতে পারেন এবং বড়িগুলির সাথে এনএভি উপাদান ব্যবহার করে একটি উল্লম্ব ট্যাবযুক্ত সামগ্রী তৈরি করতে পারেন ।

<div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-expanded="true">TAB 1</a> <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-expanded="true">TAB 2</a> <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-expanded="true">TAB 3</a> <a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-expanded="true">TAB 4</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-home-tab">Here is a content for tab 1.</div> <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">Here is a content for tab 2.</div> <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">Here is a content for tab 3.</div> <div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">Here is a content for tab 4.</div> </div> </div> </div>

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে:

কিভাবে বুটস্ট্র্যাপ 5 নেভিগেশন তৈরি করবেন?

বুটস্ট্র্যাপ নেভবার কম্পোনেন্টের চেকআউট টিউটোরিয়ালটি নেভবার সম্পর্কে আরও জানতে।


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত