আসসালামু আলাইকুম।সবাই কেমন আছেন?আশা করি ভালো আছেন।আল্লাহর রহমতে আমিও ভালো আছি।আজকে আমাদের এই টিউটোরিয়ালটা সাজিয়েছি বুটস্ট্রাপ নাভিগেশন বার কিভাবে বানাবেন এবং ডিজাইন করবেন তার উপর।তো একটু মনযোগ দিয়ে পড়ুন।আশা করি আপনার উপকারে আসবে।
আসুন আমরা প্রথমে ডেমো দেখে নিয় ।
 |
| photo from Google |
তো দেখলেনই কতটা রিসপনসিভ এবং সুন্দর।তাছাড়া এটি ওয়েবসাইট হালকা রাখে।ফলে ভিসিটররাও আপনার ওয়েবসাইট আসতে আগ্রহি হবে।
আসুন বিস্তারিত জেনে নেই।
এরপর আমরা nav class টা ব্যবহারক করছে।যার ভিতরে আমরা navbar এবং bg-dark class use করছি।এখানে navbar class টা পরিবর্তন করা যাবে।তবে bg-dark পরিবর্তন করতে পারবেন,এখানে bg-dark এর পরিবর্তে
bg-primary
bg-warning
bg-info
bg-light
bg-success
use করতে পারেন।তাছারা আপনারা চাইলে style="background:" color ব্যবহার করতে পারেন।এর পর আমরা SVG লোগো use করেছি।যেথা আর নাই বা বিশ্লেষন করলাম।শুধু মাত্র লোগো লেখার জায়গায় আপনার লোগো text রিপলেছ করুন।এখন শুরু হবে আসল কাজ।তাই একটু মনোযোগি হন।button ট্যাগ এ যে যে কাজ করা হয়েছে সেগুলো অপরিবর্তিত রাখবেন,শুধু মাত্র style,data-target,aria-controls পরিবর্তন করতে পারবেন।তবে না পরিবর্তন করায় ভালো।এরপর FontAwesome এর নাভিগেশন আইকন ট্যাগ ব্যবহার করেন button close কর দেবেন।আমাদের showed bar এর কাজ শেষ।এখন শুরু হবে hidden content এর কাজ।এরজন্য আমাদের টুগল বাটন টাকে কলাপস করানোর জন্য div ট্যাগ এর ভিতরে class দিয়ে collapse দিতে হবে,তারপর দিতে হবে আমরা কি কলাপস করাতে চাইছি।আমরা navbar collapse করাব এইজন্য navbar-collapse tag use করলাম।এখন আমাদের আইডি দিতে হবে।মনে কি আছে আমরা বাটনে ডাটা টার্গেট একটা #tag দিয়েছি।মূলত ঐটাই আইডি শুধু মাত্র # টা বাদ দিবেন।div class close করুন।
আমাদের কলাপসের কাজ ও শেষ এবার আসা যাক মূল কনটেন্ট এ।কনটেন্ট ডিজাইনারের জন্য আমরা ul এর ভিতরে navbar-nav দিব।এখন থেকে যে কনটেন্ট করব শুধু li ট্যাগ দিয়ে তার navbar-item class দিয়ে বসিয়ে দেব।আর item টা লিংক হলে আবার a ট্যাগ ব্যবহার করে তাতে href এবং navbar-link class ব্যবহার করব।লিংক add করে যথাক্রমে a এবং li ট্যাগ ক্লোস করব।এভাবে সব কনটেন্ট করার পর ধারাবাহিক ভাবে ul div ট্যাগ গুলো ক্লোস করব।ব্যাস শেস।
শেষ কথা :
পোষ্ট এ কোথাও ভুল পেলে মাফ করে দিয়েন।কোথাও বুঝতে সমস্যা হলে কমেন্ট অথবা কন্টান্ট করার অনুরোধ করলাম।ধন্যবাদ।আবার আসবেন।নিচে কোড টি দেওয়া হলো।Bootstrap Installation Code :
0 Comments