টুইটার বুটসট্র্যাপ এর পূর্ণাঙ্গ চেইন কোর্স পর্ব

টুইটার বুটস্ত্রাপ এর তৃতীয় পর্বে আপনাদের স্বাগতম

আজকে আমি আপনাদের সাথে যা যা আলোচনা করবো :

গ্রিড সিস্টেম এর আরও কিছু অ্যাডভান্স।
ফন্ট অসাম ইন্সটল।
গ্রিড সিস্টেম অনুসরণ করে একটি Navigation Menu।

Offsetting columns

অফসেটইং কলাম এর মানে হল,আপনি যদি col-lg-offset-1 দেন সেক্ষেত্রে সে ডান দিকে এবং বাম দিকে এক ঘর খালি রাখবে। col-lg-offset-২ দিলে দুই দিকে ডানে বামে দুই ঘর খালি রাখবে। চলুন ব্যাপারটি বাস্তবে দেখা যাক।
প্রথমে আপনার টেক্সট এডিটর টি ওপেন করে নিচের ছবির মত টাইপ করুন।
এই খানে আমি col-lg-offset-২ দিয়েছি

আউটপুট

col-lg-offset-3 দিলে সে ডানে এবং বামে ৩ ঘর করে খালি রেখে মাঝ বরাবর চলে আসবে।

আউটপুট

তো এই ভাবে করে আপনারা col-lg-offset-4,col-lg-offset-5,col-lg-offset-6 দিয়ে দেখুন।

গ্রিড এর আরও কিছু উদাহরণ

নিচের এই মেনু আর সাথে Social বাটন টি তৈরি করতে,মেনুতে কয়টি কলাম লাগবে আর Social বাটন এ কয়টি লাগবে????

চলুন বাস্তবে দেখা যাক।

ফন্টঅসাম ইন্সটল

আমি প্রথমে আমার প্রজেক্ট এ ফন্টঅসাম ইন্সটল করছি
প্রথমে এই ওয়েব সাইট এ যান http://fortawesome.github.io/Font-Awesome/ এর পর ডাউনলোড এ ক্লিক করুন।

এর পর ফাইল টি ডাউনলোড হবার পর জিপ ফাইলটি আনজিপ করুন।আনজিপ করার পর ফন্ট ফোল্ডার এ যত ফন্ট আছে তা আপনার প্রোজেক্ট এর ফন্ট ফোল্ডার এ Paste করে দিন।এর পর সিএসএস ফোল্ডার এ font-awesome.min.css ফাইলটি কাট করে আপনার প্রোজেক্ট এর সিএসএস ফোল্ডার এ Paste করে দিন। এর পর ফাইল টিকে Index.Html এ কল করার পালা।
ফাইল টিকে স্টাইল সীট এর নিচে <link href="css/font-awesome.min.css" rel="stylesheet"> দিয়ে কল করাতে হবে আশা করি এই গুলো আপনারা জানেন।