12/19/2014 01:40:00 PM
টুইটার বুটসট্র্যাপ এর ২য় পর্বে আপনাদের স্বাগতম।
এর আগের পর্বে আমরা টুইটার বুটসট্র্যাপ কি,এবং কিভাবে ডাউনলোড করতে হয় তা জেনে ছিলাম আজকে আমরা দেখবো কিভাবে আমাদের প্রোজেক্ট এ টুইটার বুটসট্র্যাপ সাপোর্ট দিতে হয়।
প্রথমে টুইটার বুটসট্র্যাপ ডাউনলোড করা ফোল্ডার টির ভিতর একটি 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,এই গুলো নিয়ে আর লিখলাম না আশা করি এই গুলো আপনারা জানেন।। ওপরের কোড গুলো সম্পর্কে আরও জানতে চাইলে গুগল এ সার্চ করতে পারেন।
প্রথমে আমরা কনটেইনার ও গ্রিড সিস্টেম দিয়ে শুরু করি।কারন আমরা আমাদের ইনডেক্স ফাইল আগে থেকে 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 Diveces তাই Col-Lg ব্যাবহার করছি
আউটপুট
এখন আমি চাইছি দুইটি কলাম এ ডিভাইট করতে। 6+6=12
আউটপুট
তিন কলাম এ ডিভাইট করতে হলে 4+4+4=12
আউটপুট
চার কলাম এ ডিভাইট করতে হলে ৩+৩+৩+৩ =১২
আউটপুট
আমি চাইছি পুরো স্ক্রিন জুড়ে লিখাটি হোক।
আউটপুট
মোট কথা প্রতিটি কলাম এর যোগ ফল ১২ হতে হবে।
এর পরের পর্বে আমি আপনাদের সাথে Bootstrap এর অ্যাডভান্স গ্রিড সিস্টেম ও টেবিল নিয়ে আলোচোনা করবো।
বিঃদ্রঃ আমার অনুমতি ছাড়া এই ব্লগ এর পোস্ট অন্য কোথাও দিবেন না যদি দিতে চান আমার ব্লগ এর নাম উল্লেখ করে দিবেন।
এর আগের পর্বে আমরা টুইটার বুটসট্র্যাপ কি,এবং কিভাবে ডাউনলোড করতে হয় তা জেনে ছিলাম আজকে আমরা দেখবো কিভাবে আমাদের প্রোজেক্ট এ টুইটার বুটসট্র্যাপ সাপোর্ট দিতে হয়।
প্রথমে টুইটার বুটসট্র্যাপ ডাউনলোড করা ফোল্ডার টির ভিতর একটি index.html ফাইল তৈরি করুন।এর পর http://getbootstrap.com/getting-started/#template এই খানে গিয়ে নিচের মত এইচটিএমএল এর কোড দেখতে পারবেন।
<!-- 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 Diveces তাই Col-Lg ব্যাবহার করছি
আউটপুট
এখন আমি চাইছি দুইটি কলাম এ ডিভাইট করতে। 6+6=12
আউটপুট
তিন কলাম এ ডিভাইট করতে হলে 4+4+4=12
আউটপুট
চার কলাম এ ডিভাইট করতে হলে ৩+৩+৩+৩ =১২
আউটপুট
আমি চাইছি পুরো স্ক্রিন জুড়ে লিখাটি হোক।
আউটপুট
মোট কথা প্রতিটি কলাম এর যোগ ফল ১২ হতে হবে।
এর পরের পর্বে আমি আপনাদের সাথে Bootstrap এর অ্যাডভান্স গ্রিড সিস্টেম ও টেবিল নিয়ে আলোচোনা করবো।
বিঃদ্রঃ আমার অনুমতি ছাড়া এই ব্লগ এর পোস্ট অন্য কোথাও দিবেন না যদি দিতে চান আমার ব্লগ এর নাম উল্লেখ করে দিবেন।
ফেসবুক এ আমি
আমার সকল পোস্ট পড়তে নিচের ইমেজটিতে ক্লিক করুন
fine post
ReplyDeletevy bootstrap er porbo gulo aksta paina kan? aksta kan paina?
ReplyDelete1.http://tunerredom.blogspot.com/2015/01/blog-post_25.html
Delete2.http://tunerredom.blogspot.com/2015/01/blog-post.html
3.http://tunerredom.blogspot.com/2014/12/navigation-menu-offsetting-columns-col.html
4.http://tunerredom.blogspot.com/2014/12/blog-post_18.html
5.http://tunerredom.blogspot.com/2014/12/blog-post.html
আমি সব লিস্ট করে দিলাম এখন দেখুন,ধন্যবাদ এবং নতুন টিউন এর জন্য আমার সাথে থাকুন।