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

1. গ্রিড সিস্টেম এর আরও কিছু অ্যাডভান্স।
2. ফন্ট অসাম ইন্সটল।
3. গ্রিড সিস্টেম অনুসরণ করে একটি 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"> দিয়ে কল করাতে হবে আশা করি এই গুলো আপনারা জানেন।

  Navigation মেনু

Navigation মেনুটি তৈরি করতে নিচের মত এইচটিএমএল Markup করে ফেলুন।

আউটপুট

এই বার আমরা এইটিকে সিএসএস দিয়ে স্টাইলইং করবো।

  অউটপুট

আশা করছি গ্রিড সিস্টেম নিয়ে আমি আপনাদের কিছুটা হলেও ধারনা দিতে পারেছি।