বুটস্ট্রাপ শেখা শুরু করুন
বুটস্ট্রাপ কি?
- দ্রুত এবং সহজতর ওয়েব ডেভেলপমেন্টের জন্য বুটস্ট্রাপ হলো একটি ফ্রি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক।
- বুটস্ট্রাপ হলো টাইপোগ্রাফি, ফরম, বাটন, টেবিল, নেভিগেশন, মোডাল, ইমেজ ক্যারোসেল এবং জাভাস্ক্রিপ্ট প্লাগ-ইন সমৃদ্ধ এইচটিএমএল এবং সিএসএস ভিত্তিক টেমপ্লেট ডিজাইন।
- খুব সহজে রেসপন্সিভ ডিজাইন তৈরি করার জন্য বুটস্ট্রাপ ব্যবহার করা হয়।
রেসপন্সিভ ওয়েব ডিজাইন কি?
রেসপন্সিভ ওয়েব ডিজাইন হচ্ছে ওয়েবসাইটের জন্য এমন একটি ডিজাইন যেটি সকল ডিভাইস যেমন ছোট ফোন থেকে বড় ডেস্কটপ সব কিছুতেই সহজেই এডজাস্ট করে নিতে পারে।
বুটস্ট্রাপের ইতিহাস
বুটস্ট্রাপ মার্ক অট্টো ও জ্যাকব থর্টন দ্বারা টুইটারে ডেভেলোপ হয় এবং ২০১১ সালে গিটহাবে ওপেন সোর্স প্রোডাক্ট হিসেবে মুক্তি পায়।
২০১৪ সালের জুন মাসে বুটস্ট্রাপ গিটহাবে ১ নম্বর প্রোজেক্টে হিসেবে বিবেচিত হয়!
বুটস্ট্রাপ কেনো ব্যবহার করবেন?
বুটস্ট্রাপ এর সুবিধাঃ
- সহজ ব্যবহারঃ যেকেউ এইচটিএমএল এবং সিএসএস জানলে বুটস্ট্রাপ ব্যবহার শুরু করতে পারবেন।
- রেসপন্সিভ ফিচারঃ বুটস্ট্রাপের রেসপন্সিভ সিএসএস ফোন, ট্যাবলেট এবং ডেস্কটপে সহজেই এডজাস্ট করে।
- মোবাইল-ফার্স্ট প্রায়োরিটিঃ বুটস্ট্রাপ(৩) এ, মোবাইল-ফার্স্ট স্টাইল কোর ফ্রেমওয়ার্ক এর একটি অংশ।
- ব্রাউজার সাপোর্টঃ বুটস্ট্রাপ প্রায় সকল আধুনিক ব্রাউজারেই সাপোর্ট করে।(chrome, Firefox, Internet Explorer, Safari, এবং Opera)
বুটস্ট্রাপ কোথায় পাবেন?
আপনার ওয়েব সাইটে বুটস্ট্রাপ ব্যবহার করার জন্য দুইটি পদ্ধতি আছে।
যেভাবে পাবেনঃ
getbootstrap.comথেকে ডাউনলোড করে- সিডিএন(CDN) থেকে বুটস্ট্রাপ যুক্ত করে
বুটস্ট্রাপ ডাউনলোড
যদি আপনি নিজের বুটস্ট্রাপ ডাউনলোড এবং হোস্ট করতে চান তাহলে getbootstrap.com, এ যান এবং পদ্ধতিগুলো অনুসরন করুন।
বুটস্ট্রাপ সিডিএন
যদি আপনি নিজে থেকে ডাউনলোড এবং হোস্ট করতে না চান তাহলে আপনি এটি সিডিএন থেকে যুক্ত করতে পারবেন (CDN = Content Delivery Network)।
MaxCDN বুটস্ট্রাপ সিএসএস এবং জাভাস্ক্রিপ্ট এর সিডিএন সাপোর্ট এর জন্য সহযোগিতা করে। এগুলোর পাশাপাশি এছাড়াও আপনাকে অবশ্যই জেকুয়েরি লাইব্রেরি যুক্ত করতে হবেঃ
<!-- Update bootstrap css minified file -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Update jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Update bootstrap js minified file -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
বুটস্ট্রাপ সিডিএন ব্যবহারের একটি সুবিধাঃ
যখন ইউজাররা অন্যান্য সাইট ভিজিট করে তখন MaxCDN থেকে বুটস্ট্রাপ ডাউনলোড হয়ে যায়। এর ফলে, যখন তারা আপনার ওয়েবসাইটে ভিজিট করবে তখন এটি cache থেকে লোড হবে যা দ্রুততর লোডিং নিশ্চিত করবে।
বুটস্ট্রাপ দিয়ে প্রথম ওয়েব পেজ তৈরি করুন
১। এইচটিএমএল(৫) DOCTYPE যুক্ত করুন।
বুটস্ট্রাপে এইচটিএমএল এলিমেন্ট এবং সিএসএস প্রোপার্টি ব্যবহৃত হয়, যার জন্য এইচটিএমএল(৫) DOCTYPE নির্ধারন করা বাধ্যতামূলক।
সবসময়ই পেজের শুরুতেই এইচটিএমএল(৫) DOCTYPE যুক্ত করুনঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
২। বুটস্ট্রাপ(৩) মোবাইল-ফার্স্ট
বুটস্ট্রাপ(৩) মোবাইল ডিভাইসকে বেশি গুরুত্ব দিয়ে রেসপন্সিভ করা হয়েছে। মোবাইল-ফার্স্ট স্টাইল, কোর ফ্রেমওয়ার্কের একটি অংশ।
যথাযথ আউটপুট এবং টাচ জুমিং এর জন্য <head> এলিমেন্টের মধ্যে <meta> ট্যাগ নিশ্চিত করুনঃ
<meta name="viewport" content="width=device-width, initial-scale=1">
ডিভাইসের স্ক্রিন-প্রস্থের উপর ভিত্তি করে পেজের প্রস্থ সেট করার জন্য width=device-width ব্যবহার করা হয়েছে (যা ডিভাইসের উপর নির্ভর করে)।
পেইজ যখন ব্রাউজার দ্বারা প্রথম লোড হয় তখন এর ইনিশিয়াল জুম সেট করার জন্য initial-scale=1 ব্যবহার করা হয়েছে।
৩। কন্টেইনার
বুটস্ট্রাপে এলিমেন্টকে একটি কন্টেইনারের মধ্যে রাখার প্রয়োজন হয়।
বুটস্ট্রাপে দুই ধরনের কন্টেইনার রয়েছে। আপনার প্রয়োজন অনুযায়ী কন্টেইনার বাচাই করে নিনঃ
- রেসপন্সিভ ফিক্সড প্রস্থের কন্টেইনার তৈরি করার জন্য
.containerক্লাস ব্যবহার করুন। - ভিউপোর্টের সম্পূর্ণ প্রস্থ মেপে পূর্ণ প্রস্থের কন্টেইনার করার জন্য
.container-fluidক্লাস ব্যবহার করুন।
নোটঃ কন্টেইনারগুলো নেস্টেবল নয় (আপনি চাইলেই কন্টেইনারের মধ্যে কন্টেইনার রাখতে পারবেন না)।
দুটি বেসিক বুটস্ট্রাপ পেজ
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (ফিক্সড প্রস্থের কন্টেইনার সহ)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello Learners!</h1>
<p>Bootstrap is popular free frontend framework on html, css and javascript.</p>
<p>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
</body>
</html>
ফলাফল
নিম্নলিখিত উদাহরণে কোডসহ বুটস্ট্রাপের বেসিক পেজ দেখানো হলোঃ (পূর্ণ প্রস্থের কন্টেইনার সহ)
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello Learners!</h1>
<p>Bootstrap is popular free frontend framework on html, css and javascript.</p>
<p>Bootstrap is fun! We hope you are enjoying this.</p>
</div>
</body>
</html>
ফলাফল