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

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

এর আগের পর্বে আমরা টুইটার বুটসট্র্যাপ কি,এবং কিভাবে ডাউনলোড করতে হয় তা জেনে ছিলাম আজকে আমরা দেখবো কিভাবে আমাদের প্রোজেক্ট এ টুইটার বুটসট্র্যাপ সাপোর্ট দিতে হয়।
প্রথমে টুইটার বুটসট্র্যাপ ডাউনলোড করা  ফোল্ডার টির ভিতর একটি index.html ফাইল তৈরি করুন।এর পর http://getbootstrap.com/getting-started/#template এই খানে গিয়ে নিচের মত এইচটিএমএল এর কোড দেখতে পারবেন।

এই কোড টুকু কপি করে index.html এ পেস্ট করে দিন।এই খানে বুটসট্র্যাপ এর স্টাইলসীট ও জেকুউরি কল করা আছে আপনার     আর আলাদা করে কল করা লাগবে না। নিচে কোড গুলর সংক্ষেপে বর্ণনা দেয়া হয়েছে।
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"> এই টি দিয়ে বুটসট্র্যাপ এর সিএসএস কল করা হয়েছে।
<meta name="viewport" content="width=device-width, initial-scale=1"> এই কোড টুকু ব্যবহার করা হয়েছে রেস্পন্সিভ ওয়েব ডিজাইন এর জন্য এইটি  ছাড়া  রেস্পন্সিভ ওয়েব সাইট এর কোড গুলো কাজ করবে না।
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->   এই কোড গুলো ইন্টারনেট এক্সপ্লোরার এ এইচটিএমএল ৫ সাপোর্ট এর জন্য ব্যবহার করা হয়েছে।কারন এইচটিএমএল ৫ ইন্টারনেট এক্সপ্লোরার  ছাড়া বাকি সব ব্রাউজার এ সাপোর্ট করে।এই কোড গুলো শুধুমাত্র  ইন্টারনেট এক্সপ্লোরার  এর জন্য প্রযোজ্য।
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->  এইটি দিয়ে jQuery বা  JavaScript plugins এর প্লুাগিন কল করা হয়েছে।
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> এই টি দিয়ে বুটসট্র্যাপ  এর জাভাস্ক্রিপ্ট কল করা হয়েছে।
<script src="js/bootstrap.min.js"></script>
আশা করি উপরের কোড গুলো কেন ব্যবহার করা হল তা বুঝাতে পেরেছি।head,body,Title,এই গুলো নিয়ে আর লিখলাম না আশা করি এই গুলো আপনারা জানেন।

ওপরের কোড গুলো সম্পর্কে আরও জানতে চাইলে গুগল এ সার্চ করতে পারেন।

 CSS :Cascading Style Sheets

আমরা এখন বুটস ট্র্যাপ এর সিএসএস সম্পর্কে জানব।.

প্রথমে আমরা কনটেইনার ও গ্রিড সিস্টেম দিয়ে শুরু করি।কারন আমরা আমাদের ইনডেক্স ফাইল আগে থেকে  HTML5 doctype,Mobile first,Normalize.css ইত্যাদি কল রেখেছি।আশা করি এই গুলো সবাই জানেন।আর Normalize.css  হল স্টাইল সীট এর রিসেট কোড। আপনারা চাইলে কোড গুলো ব্যবহার করতে পারেন।তার জন্য সিএসএস ফোল্ডার এ style.css নামে একটি ফাইল তৈরে করতে হবে। তার পর  http://necolas.github.io/normalize.css/ এই ওয়েব সাইট এ গিয়ে  ডাউনলোড এ ক্লিক করলে কিছু  কোড পাবেন  সেগুলো style.css এ Paste করতে হবে। এর পর index.html ফাইল এ গিয়ে সিএসএস টি কল করতে হবে। নিচের মত
<link href="css/style.css" rel="stylesheet">Containers: টুইটার বুটসট্র্যাপ এর নিয়ম অনুযায়ী।আপনাকে  Containers ক্লাস টি ব্যবহার করতে হবে।এটি ব্যবহার করলে আপনার সাইট এর কনটেন্ট গুলো সাইট এর মাজ বরাবর বা center হবে। চলুন  আমরা ব্যাপার টি প্রাকটিকেলি দেখি।Container ক্লাস দেয়ার আগে

Container ক্লাস দেয়ার  দেবার পর

আশা করি বুঝাতে পারেছি।এই টি ব্যবহার করলে সিএসএস এ গিয়ে margin:0 Auto;width; এই সব দেয়া লাগবে না সব বুটসট্র্যাপ থেকে আসবে।এখন আপনি যদি চান আপনার সাইট এর কনটেন্ট গুলো পুরো Screen জুড়ে হোক সেক্ষেত্রে  container এর  বদলে container-fluid টি ব্যবহার করতে হবে।

গ্রিড সিস্টেম

এখন আমরা  আলোচনা করবো টুইটার বুটসট্র্যাপ এর অনেক গুরুতপূর্ণ  একটি জিনিস গ্রিড সিস্টেম। গ্রিড সিস্টেম টি বুঝার জন্য  আপনারা নিচের ছবির টির দিখে ভালো ভাবে খেয়াল করুন।

টুইটার বুটসট্র্যাপ  এর সাপোর্ট কোন ওয়েব সাইট এ প্রথমে Container ক্লাস নিতে হবে এর পর Row ক্লাস নিতে    হবে,এর পর আপনি  কোন ডিভাসে কাজ করছেন সেটি নির্ধারণ করতে হবে।

আপনি যদি Large Diveces এ কাজ করেন সেক্ষেত্রে Col-Lg এর আপনার ল্যাপটপ বা ডেক্সটপ পিসির মনিটর Width যদি 1200px বা  তার বেশি হয়।তবে সেটি Large Diveces।যদি ওয়েবসাইট  এর  Project এ col-Lg দেন তা হলে container এর Width হবে  1170px.
আপনি যদি  Meedium Diveces বা Desktop মনিটর এ কাজ করেন সেক্ষেত্রে Col-md।আপনার ডেক্সটপ মনিটর এর Width যদি  992px হয়ে থাকে বা 1200 px এর কম হয় তাহলে এইটি Desktop  Diveces.ওয়েবসাইট  এর  Project এ col-md দেন তা হলে container এর Width হবে  970px.
নিচের গুলো আর বুঝালাম না।আশা করি এইগুলো আপনারা নিজেরায় বুঝতে পারবেন।
Small ডিভিইস এর কাজ করলে Col-sm
Extra Small ডিভিইস অর্থাৎ Iphone বা Smart Fone এর জন্য কাজ করলে col-xs

*মনিটর এর Width মাপার জন্য একটি সফটওয়্যার আছে সেইটির নাম হল
Lightshot বাব্যহার করতে পারেন. Download Link: https://app.prntscr.com/en/index.html*

এতক্ষণ আমারা চিত্র এর মাধ্যমে কাজ টি বুঝেছি  এখন আমরা বাস্তবে করে দেখবো।
আমার মনিটর টি large Device তাই Col-Lg ব্যবহার করছি

আউটপুট

এখন আমি চাইছি দুইটি কলাম এ ডিভাইট করতে। 6+6=12

আউটপুট

তিন কলাম এ ডিভাইট করতে হলে 4+4+4=12

আউটপুট

চার কলাম এ ডিভাইট করতে হলে ৩+৩+৩+৩ =১২

আউটপুট

আমি চাইছি পুরো  স্ক্রিন জুড়ে লিখাটি হোক।

আউটপুট

মোট কথা প্রতিটি কলাম এর যোগ ফল ১২ হতে হবে।

এর পরের পর্বে আমি আপনাদের সাথে Bootstrap এর অ্যাডভান্স গ্রিড সিস্টেম ও টেবিল নিয়ে আলোচোনা করবো।

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

ফেসবুক এ আমি

 

Level 0

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

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


টিউনস


আরও টিউনস


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


টিউমেন্টস

ধরুন আমি একটি রোতে তিনটি কলাম নিলাম (২+৮+২)। একটা Left Sidebar অপরটা Right Sidebar. মাঝখানে content থাকবে। Content অংশে যদি আবার ৩ টি সমান কলাম করতে চাই তাহলে ও ১২ হিসাব, অর্থাৎ ৪+৪+৪। আমি কি ঠিক বললাম?

ভালো লিখেছেন। চালিয়ে যান।

হ্যাঁ আপনি ঠিক বলেছেন,ধন্যবাদ আপনাকে পুরো টিউন টি পড়ার জন্য,আপনারা সাথে থাকলে নিশ্চয় চালিয়ে যাব।

ভাল লিখছেন। চালিয়ে যান….শুরু থেকে শেষ পর্য়ন্ত আপনাকে আমরা চাই

ভাই চালায় যান,চেইন টিউন চাই

ওয়ালিফ@:আপনারা সাথে থাকলে চালিয়ে যাব।

amirhamza321@:ধন্যবাদ টিউমেন্ট এর জন্য।