টুইটার বুটসট্র্যাপ [পর্ব-০৩] পূর্ণাঙ্গ আলোচনা

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

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

  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 করে ফেলুন।

আউটপুট

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

  অউটপুট

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

সোর্স ফাইল টি ডাউনলোড করতে নিচের ইমেজ এ ক্লিক করুন।
ধন্যবাদ সবাইকে টিউনটি পড়ার জন্য।
বিঃদ্রঃ আমার অনুমতি ছাড়া আমার ব্লগ ও টেকটিউনস এর টিউন অন্য কোথাও দিবেন না যদি দিতে চান আমার ব্লগ ও টেকটিউনস এর নাম উল্লেখ করে দিবেন।
ফেসবুক এ আমি

Level 0

আমি রিদম দত্ত। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 6 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 34 টি টিউন ও 270 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

হাই আমি রিদম , জানি না তেমন কিছু তবে যা জানি তা সবার মাঝে শেয়ার করার চেষ্টা করি,টেকনোলজি কে অনেক ভালোবাসি টেকনোলজি ছাড়া এক সেকেন্ড ও চলতে পারি না।বর্তমানে পড়াশোনার পাশাপাশি আর্ট ওয়েব ইউ আই ইউএক্স ডিজাইন ও ওয়েব প্রোগ্রামিং নিয়ে কাজ করছি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

খুবই সুন্দর টিউন ।

ওয়ালিফ:ধন্যবাদ আপানদের কমেন্ট গুলো আমার অনুপ্রেরণা।

দীপ্ত বাংলা দেশ: ধন্যবাদ।

sundor boss. ami html, css basic jani to ami ki ai post follow korte parbo ? chalie jaan sathe achi

হুম পারবেন,বেশি বেশি করে সিএসএস চর্চা করুন।